Extend the link tag.

chlxb · Jun 13, 2019 · 402cf8a · 402cf8a
1 parent 515ade5
commit 402cf8a
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -403,6 +403,37 @@ This HTML will render like so:
 </html>
 ```
 
+You can also render some other `HTML` inside the link tag:
+
+```swift
+func pageWithLink() -> HTML {
+  html {
+    body {
+      link(url: url) {
+        paragraph {
+          "google"
+        }
+      }
+    }
+  }
+  }
+```
+This HTML will render like so:
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <a href="\(url)">
+      <p>
+        google
+      </p>
+    </a>
+  </body>
+</html>
+```
+It will be especially usefull, eg. for clickable images.
+
 ### `<link rel="stylesheet">`
 
 In HTML, you can specify the use of a specific CSS (cascading style sheet) specification outside the scope of this HTML document. You just need to know the name and relative location of this file. In your Swift function, write this:

diff --git a/Sources/Vaux/Builders.swift b/Sources/Vaux/Builders.swift
@@ -108,6 +108,15 @@ public func link(url: String, label: String) -> HTML {
   return HTMLNode(tag: "a", child: label).attr("href", url)
 }
 
+/// Inserts a `<a href="url">` element into the HTML document, and closes with `</a>` after the contents of the closure.
+/// - Parameters:
+///   - url: The hyperlink that the html link will navigate to when clicked in the web page.
+///   - child: `HTML` content to go inside the `<a href=""></a>` element.
+/// - Note: If you want to display a text, use the `link:url:label` function instead.
+public func link(url: String, @HTMLBuilder child: () -> HTML) -> HTML {
+  return HTMLNode(tag: "a", child: child()).attr("href", url)
+}
+
 /// Inserts a `<link rel="stylesheet" href="url">` element into the HTML document.
 /// - Parameters:
 ///   - url: The location in your file system where the CSS file is

diff --git a/Tests/VauxTests/VauxTests.swift b/Tests/VauxTests/VauxTests.swift
@@ -60,13 +60,49 @@ final class VauxTests: XCTestCase {
       }
     }
     let correctHTML = """
-                  <!DOCTYPE html>
-                  <html>
-                    <body>
-                      <a href="\(url)">google</a>
-                    </body>
-                  </html>
-                  """.replacingOccurrences(of: "\n", with: "")
+      <!DOCTYPE html>
+      <html>
+      <body>
+      <a href="\(url)">google</a>
+      </body>
+      </html>
+      """.replacingOccurrences(of: "\n", with: "")
+    let vaux = Vaux()
+    vaux.outputLocation = .file(name: "testing", path: "/tmp/")
+    do {
+      let rendered = try renderForTesting(with: vaux, html: pageWithLink())
+      // TODO: Make this pass with better string comparisons
+      XCTAssertEqual(rendered, correctHTML)
+    } catch let error {
+      XCTFail(error.localizedDescription)
+    }
+  }
+
+  func testLinkWithChild() {
+    var url = "https://google.com"
+    func pageWithLink() -> HTML {
+      html {
+        body {
+          link(url: url) {
+            paragraph {
+              "google"
+            }
+          }
+        }
+      }
+    }
+    let correctHTML = """
+      <!DOCTYPE html>
+      <html>
+        <body>
+          <a href="\(url)">
+            <p>
+              google
+            </p>
+          </a>
+        </body>
+      </html>
+      """.replacingOccurrences(of: "\n", with: "")
     let vaux = Vaux()
     vaux.outputLocation = .file(name: "testing", path: "/tmp/")
     do {