Add title element implementation.

Part of #25.
ClutchEngineering · Aug 3, 2024 · c71c90c · c71c90c
1 parent 62f0478
commit c71c90c
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 0 deletions.
diff --git a/Sources/Slipstream/Documentation.docc/Views/W3C/W3CViews.md b/Sources/Slipstream/Documentation.docc/Views/W3C/W3CViews.md
@@ -13,6 +13,7 @@ The complete W3C HTML elements standard can be found [here](https://www.w3.org/T
 ### Document metadata
 
 - <doc:Head>
+- <doc:Title>
 - <doc:Charset>
 
 ### Sections

diff --git a/Sources/Slipstream/Views/W3C/Elements/DocumentMetadata/Title.swift b/Sources/Slipstream/Views/W3C/Elements/DocumentMetadata/Title.swift
@@ -0,0 +1,34 @@
+import SwiftSoup
+
+/// A view that represents the document’s title or name.
+///
+/// The content of this element sets the title displayed in the browser's title bar or tab, and
+/// is also used by search engines to identify the content of the page. A well-chosen title
+/// improves user experience and can significantly impact search engine optimization (SEO).
+///
+/// ```swift
+/// struct MySiteMetadata: View {
+///   var body: some View {
+///     Head {
+///       Title("My awesome site")
+///     }
+///   }
+/// }
+/// ```
+///
+/// - SeeAlso: W3C [`title`](https://www.w3.org/TR/2012/WD-html-markup-20121025/title.html#title) specification.
+@available(iOS 17.0, macOS 14.0, *)
+public struct Title: View {
+  /// Creates a Title view.
+  public init(_ text: String) {
+    self.text = text
+  }
+
+  @_documentation(visibility: private)
+  public func render(_ container: Element, environment: EnvironmentValues) throws {
+    let element = try container.appendElement("title")
+    try element.appendText(text)
+  }
+
+  private let text: String
+}
diff --git a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift b/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift
@@ -8,6 +8,7 @@ private struct CatalogSite: View {
     HTML {
       Head {
         Charset(.utf8)
+        Title("Build websites with Swift and Tailwind CSS — Slipstream")
       }
       Body {
         Text("Hello, world!")
@@ -22,6 +23,7 @@ struct CatalogSiteTests {
 <html>
  <head>
   <meta charset="UTF-8" />
+  <title>Build websites with Swift and Tailwind CSS — Slipstream</title>
  </head>
  <body>
   Hello, world!

diff --git a/Tests/SlipstreamTests/Views/W3C/TitleTests.swift b/Tests/SlipstreamTests/Views/W3C/TitleTests.swift
@@ -0,0 +1,13 @@
+import Testing
+
+import Slipstream
+
+struct TitleTests {
+  @Test func emptyBlock() throws {
+    try #expect(renderHTML(Title("")) == "<title></title>")
+  }
+
+  @Test func withText() throws {
+    try #expect(renderHTML(Title("Hello, world!")) == "<title>Hello, world!</title>")
+  }
+}