Merge pull request #69 from Malay-dev/main

Add support for Embedded component - Iframe

README.md

@@ -95,6 +95,7 @@ liElements := elem.TransformEach(items, func(item string) elem.Node {
 
 ulElement := elem.Ul(nil, liElements)
 ```
+
 In this example, we transformed a slice of strings into a list of `li` elements and then wrapped them in a `ul` element.
 
 ### Conditional Rendering with `If`
@@ -125,7 +126,8 @@ In this example, if `isAdmin` is `true`, the `Admin Panel` link is rendered. Oth
 - **Interactive Elements**: `Dialog`, `Menu`
 - **Grouping Content**: `Div`, `Span`, `Li`, `Ul`, `Ol`, `Dl`, `Dt`, `Dd`
 - **Tables**: `Table`, `Tr`, `Td`, `Th`, `TBody`, `THead`, `TFoot`
-- **Embedded Content**: `Img`
+- **Hyperlinks and Multimedia**: `Img`
+- **Embedded Content**: `Iframe`
 - **Script-supporting Elements**: `Script`, `Noscript`
 - **Inline Semantic**: `A`, `Strong`, `Em`, `Code`, `I`
 
@@ -153,4 +155,4 @@ Contributions are welcome! If you have ideas for improvements or new features, p
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

attrs/attrs.go

@@ -11,6 +11,7 @@ const (
 	Style           = "style"
 	Tabindex        = "tabindex"
 	Title           = "title"
+	Loading         = "loading"
 
 	// Link/Script Attributes
 	Async       = "async"
@@ -80,6 +81,14 @@ const (
 	ColSpan = "colspan"
 	Scope   = "scope"
 	Headers = "headers"
+
+	// IFrame Attributes
+	Allow           = "allow"
+	AllowFullScreen = "allowfullscreen"
+	CSP             = "csp"
+	ReferrerPolicy  = "referrerpolicy"
+	Sandbox         = "sandbox"
+	SrcDoc          = "srcdoc"
 )
 
 type Props map[string]string

elem.go

@@ -33,18 +33,19 @@ var voidElements = map[string]struct{}{
 // attribute represents the "true" value. To represent the "false" value, the attribute has to be omitted.
 // See https://html.spec.whatwg.org/multipage/indices.html#attributes-3 for reference
 var booleanAttrs = map[string]struct{}{
-	attrs.Async:      {},
-	attrs.Autofocus:  {},
-	attrs.Checked:    {},
-	attrs.Defer:      {},
-	attrs.Disabled:   {},
-	attrs.IsMap:      {},
-	attrs.Multiple:   {},
-	attrs.NoValidate: {},
-	attrs.Open:       {},
-	attrs.Readonly:   {},
-	attrs.Required:   {},
-	attrs.Selected:   {},
+	attrs.Async:           {},
+	attrs.Autofocus:       {},
+	attrs.Checked:         {},
+	attrs.Defer:           {},
+	attrs.Disabled:        {},
+	attrs.IsMap:           {},
+	attrs.Multiple:        {},
+	attrs.NoValidate:      {},
+	attrs.Open:            {},
+	attrs.Readonly:        {},
+	attrs.Required:        {},
+	attrs.Selected:        {},
+	attrs.AllowFullScreen: {},
 }
 
 type Node interface {

elements.go

@@ -305,3 +305,9 @@ func Th(attrs attrs.Props, children ...Node) *Element {
 func Td(attrs attrs.Props, children ...Node) *Element {
 	return NewElement("td", attrs, children...)
 }
+
+// ========== Embedded Content ==========
+
+func IFrame(attrs attrs.Props, children ...Node) *Element {
+	return NewElement("iframe", attrs, children...)
+}

elements_test.go

@@ -472,3 +472,16 @@ func TestTable(t *testing.T) {
 	el := Table(nil, Tr(nil, Th(nil, Text("Table header"))), Tr(nil, Td(nil, Text("Table content"))))
 	assert.Equal(t, expected, el.Render())
 }
+
+// ========== Embedded Content ==========
+func TestEmbedLink(t *testing.T) {
+	expected := `<iframe src="https://www.youtube.com/embed/446E-r0rXHI?si=ji7WiR0cuDVSTWJ2"></iframe>`
+	el := IFrame(attrs.Props{attrs.Src: "https://www.youtube.com/embed/446E-r0rXHI?si=ji7WiR0cuDVSTWJ2"})
+	assert.Equal(t, expected, el.Render())
+}
+
+func TestAllowFullScreen(t *testing.T) {
+	expected := `<iframe allowfullscreen src="https://www.youtube.com/embed/446E-r0rXHI?si=ji7WiR0cuDVSTWJ2"></iframe>`
+	el := IFrame(attrs.Props{attrs.Src: "https://www.youtube.com/embed/446E-r0rXHI?si=ji7WiR0cuDVSTWJ2", attrs.AllowFullScreen: "true"})
+	assert.Equal(t, expected, el.Render())
+}