wip: remove alpinejs, restructure aria, restructure styling

erikbdev · erikbdev · commit 9f3182ac4126 · 2025-02-06T01:23:04.000-08:00
diff --git a/Sources/Pages/HomePage.swift b/Sources/Pages/HomePage.swift
@@ -5,10 +5,151 @@ import Elementary
 import Foundation
 
 public struct HomePage: Page {
+  @Dependency(\.activityClient) private var activityClient
+
+  public init() {}
+
+  private static let copyrightDateFormatter = {
+    let formatter = DateFormatter()
+    formatter.locale = Locale(languageCode: .english, languageRegion: .unitedStates)
+    formatter.timeZone = TimeZone(abbreviation: "PST") ?? formatter.timeZone
+    formatter.dateFormat = "yyyy"
+    return formatter
+  }()
+
+  let styling = Style()
+
+  public var content: some HTML {
+    HTMLRaw("<!DOCTYPE html>")
+    html(.lang("en"), .custom(name: "data-theme", value: "dark")) {
+      head {
+        title { "Erik Bautista Santibanez" }
+        meta(.charset(.utf8))
+        meta(name: .viewport, content: "width=device-width, initial-scale=1.0")
+        link(.rel(.stylesheet), .href("https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/3.0.1/modern-normalize.min.css"))
+        style(self.styling)
+        script(.src("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"))
+        script(.src("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/swift.min.js"))
+        script { HTMLRaw("hljs.highlightAll();") }
+        VueScript()
+      }
+      body {
+        header(.class("hero"), .aria.label("About")) {
+          hgroup {
+            h1(.class("hero-title")) { "Erik Bautista Santibanez" }
+            p(.class("hero-subtitle")) { "Swift & Web Developer" }
+
+            let location = self.activityClient.location()
+            let residency = location?.residency ?? .default
+
+            p(.class("hero-location")) {
+              span(.aria.label("Residency")) {
+                svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class("svg-icon"), .aria.label("Map pin icon")) {
+                  path(
+                    .d("M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z")
+                  )
+                }
+                "\(residency)"
+              }
+
+              if let location, location.city != residency.city || location.state != residency.state {
+                " \u{2022} "
+
+                span(.aria.label("Location")) {
+                  svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class("svg-icon reversed"), .aria.label("Navigation icon")) {
+                    path(.d("M234.35,129,152,152,129,234.35a8,8,0,0,1-15.21.27l-65.28-176A8,8,0,0,1,58.63,48.46l176,65.28A8,8,0,0,1,234.35,129Z"))
+                    path(.d("M237.33,106.21,61.41,41l-.16-.05A16,16,0,0,0,40.9,61.25a1,1,0,0,0,.05.16l65.26,175.92A15.77,15.77,0,0,0,121.28,248h.3a15.77,15.77,0,0,0,15-11.29l.06-.2,21.84-78,78-21.84.2-.06a16,16,0,0,0,.62-30.38ZM149.84,144.3a8,8,0,0,0-5.54,5.54L121.3,232l-.06-.17L56,56l175.82,65.22.16.06Z"))
+                  }
+
+                  "Currently in "
+
+                  b {
+                    [location.city, location.state, location.region == "United States" ? nil : location.region]
+                      .compactMap(\.self)
+                      .joined(separator: ", ")
+                  }
+                }
+              }
+            }
+          }
+        }
+        main(.v.scope("{ selection: undefined }")) {
+          header {
+            hgroup {
+              h2 { "Posts" }
+              ul(.class("post-tabs")) {
+                for kind in Post.Kind?.allCases {
+                  let value = if let kind {
+                    "'\(kind.rawValue)'"
+                  } else {
+                    "undefined"
+                  }
+                  li {
+                    button(
+                      .v.on(.click, "selection = \(value)"),
+                      .v.bind("aria-selected", "selection == \(value)"),
+                      .aria.selected(kind == nil)
+                    ) {
+                      kind?.tabTitle ?? "All"
+                    }
+                  }
+                }
+              }
+            }
+          }
+          section {
+            for post in Post.allCases {
+              article(
+                .class("post"),
+                .v.show("!selection || selection == '\(post.kind.rawValue)'")
+              ) {
+                header { post.dateFormatted }
+                h3(.class("post-title")) { post.title }
+                div(.class("post-content")) { post.content }
+              }
+            }
+          }
+        }
+        footer(.aria.label("Credits")) {
+          hr()
+          p { "©\(Self.copyrightDateFormatter.string(from: Date.now)) Erik Bautista Santibanez" }
+          p {
+            "Made with \u{2764} using "
+            a(.target(.blank), .rel("noopener noreferrer"), .href("https://swift.org")) { "Swift" }
+            " + "
+            a(.target(.blank), .rel("noopener noreferrer"), .href("https://hummingbird.codes")) { "Hummingbird" }
+            "."
+          }
+        }
+      }
+    }
+  }
+}
+
+extension HomePage {
   struct Style: @unchecked Sendable, StyleSheet {
     var body: some Rule {
       // TODO: Add Work-Sans font?
 
+      // Reset components
+      ":root" => {
+        AnyProperty("line-height", "1.5")
+      }
+
+      "h1, h2, h3, h4, h5, figure, p, ol, ul, pre" => {
+        AnyProperty("margin", "0")
+      }
+
+      "ol[role=\"list\"], ul[role=\"list\"]" => {
+        AnyProperty("list-style", "none")
+        AnyProperty("padding-inline", "0")
+      }
+
+      Element(.img) => {
+        AnyProperty("display", "block")
+        AnyProperty("max-inline-size", "100%")
+      }
+
       // General
       Pseudo(class: .root) => {
         BackgroundColor("#1c1c1c")
@@ -122,148 +263,4 @@ public struct HomePage: Page {
       }
     }
   }
-
-  @Dependency(\.activityClient) private var activityClient
-
-  public init() {}
-
-  private static let copyrightDateFormatter = {
-    let formatter = DateFormatter()
-    formatter.locale = Locale(languageCode: .english, languageRegion: .unitedStates)
-    formatter.timeZone = TimeZone(abbreviation: "PST") ?? formatter.timeZone
-    formatter.dateFormat = "yyyy"
-    return formatter
-  }()
-
-  let styling = Style()
-
-  public var content: some HTML {
-    HTMLRaw("<!DOCTYPE html>")
-    html(.lang("en"), .custom(name: "data-theme", value: "dark")) {
-      head {
-        title { "Erik Bautista Santibanez" }
-        meta(.charset(.utf8))
-        meta(name: .viewport, content: "width=device-width, initial-scale=1.0")
-        link(.rel(.stylesheet), .href("https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/3.0.1/modern-normalize.min.css"))
-        style {
-          /// Reset stylesheet
-          HTMLRaw(
-            """
-            :root {
-              line-height: 1.5;
-            }
-            h1, h2, h3, h4, h5, figure, p, ol, ul, pre {
-              margin: 0;
-            }
-            ol[role="list"], ul[role="list"] {
-              list-style: none;
-              padding-inline: 0;
-            }
-            img {
-              display: block;
-              max-inline-size: 100%;
-            }
-            """
-          )
-        }
-        style(self.styling)
-        script(.src("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"))
-        script(.src("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/swift.min.js"))
-        script { HTMLRaw("hljs.highlightAll();") }
-        VueScript()
-      }
-      body {
-        header(.class("hero"), .ariaLabel("About")) {
-          hgroup {
-            h1(.class("hero-title")) {  "Erik Bautista Santibanez" }
-            p(.class("hero-subtitle")) { "Swift & Web Developer" }
-
-            let location = self.activityClient.location()
-            let residency = location?.residency ?? .default
-
-            p(.class("hero-location")) {
-              span(.ariaLabel("Residency")) {
-                svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class("svg-icon"), .ariaLabel("Map pin icon")) {
-                  path(
-                    .d("M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z")
-                  )
-                }
-                "\(residency)"
-              }
-
-              if let location, location.city != residency.city || location.state != residency.state {
-                " \u{2022} "
-
-                span(.ariaLabel("Location")) {
-                  svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class("svg-icon reversed"), .ariaLabel("Navigation icon")) {
-                    path(.d("M234.35,129,152,152,129,234.35a8,8,0,0,1-15.21.27l-65.28-176A8,8,0,0,1,58.63,48.46l176,65.28A8,8,0,0,1,234.35,129Z"))
-                    path(.d("M237.33,106.21,61.41,41l-.16-.05A16,16,0,0,0,40.9,61.25a1,1,0,0,0,.05.16l65.26,175.92A15.77,15.77,0,0,0,121.28,248h.3a15.77,15.77,0,0,0,15-11.29l.06-.2,21.84-78,78-21.84.2-.06a16,16,0,0,0,.62-30.38ZM149.84,144.3a8,8,0,0,0-5.54,5.54L121.3,232l-.06-.17L56,56l175.82,65.22.16.06Z"))
-                  }
-
-                  "Currently in "
-
-                  b {
-                    [location.city, location.state, location.region == "United States" ? nil : location.region]
-                      .compactMap(\.self)
-                      .joined(separator: ", ")
-                  }
-                }
-              }
-            }
-          }
-        }
-        main(.v.scope("{ selection: undefined }")) {
-          header {
-            hgroup {
-              h2 { "Posts" }
-              ul(.class("post-tabs")) {
-                for kind in Post.Kind?.allCases {
-                  let value = if let kind {
-                    "'\(kind.rawValue)'"
-                  } else {
-                    "undefined"
-                  }
-                  li {
-                    button(
-                      .v.on(.click, "selection = \(value)"),
-                      .v.bind("aria-selected", "selection == \(value)"),
-                      .ariaSelected(kind == nil)
-                    ) { 
-                      kind?.tabTitle ?? "All"
-                    }
-                  }
-                }
-              }
-            }
-            // p { "Selected {{ selection }}" }
-          }
-          section {
-            for post in Post.allCases {
-              article(
-                .class("post"),
-                .v.show("!selection || selection == '\(post.kind.rawValue)'")
-              ) {
-                header { post.dateFormatted }
-                h3(.class("post-title")) { post.title }
-                div(.class("post-content")) {
-                  post.content
-                }
-              }
-            }
-          }
-        }
-        footer(.ariaLabel("Credits")) {
-          hr()
-          p { "©\(Self.copyrightDateFormatter.string(from: Date.now)) Erik Bautista Santibanez" }
-          p {
-            "Made with \u{2764} using "
-            a(.target(.blank), .rel("noopener noreferrer"), .href("https://swift.org")) { "Swift" }
-            " + "
-            a(.target(.blank), .rel("noopener noreferrer"), .href("https://hummingbird.codes")) { "Hummingbird" }
-            "."
-          }
-        }
-      }
-    }
-  }
 }
diff --git a/Sources/Pages/Utils/Elementary+.swift b/Sources/Pages/Utils/Elementary+.swift
@@ -15,21 +15,4 @@ extension meta {
   init(name: HTMLAttribute<Tag>.Name, content: String) {
     self.init(.name(name), .content(content))
   }
-}
-
-public typealias SendableHTML = HTML & Sendable
-
-// Aria-based attributes
-extension HTMLAttribute {
-  static func ariaLabel(_ value: String) -> Self {
-    HTMLAttribute(name: "aria-label", value: value)
-  }
-
-  static func ariaCurrent(_ value: String) -> Self {
-    HTMLAttribute(name: "aria-current", value: value)
-  }
-
-  static func ariaSelected(_ value: Bool?) -> Self {
-    HTMLAttribute(name: "aria-selected", value: value?.description)
-  }
 }
diff --git a/Sources/Pages/Utils/Elementary+Aria.swift b/Sources/Pages/Utils/Elementary+Aria.swift
@@ -0,0 +1,28 @@
+import Elementary
+
+extension HTMLAttribute where Tag: HTMLTrait.Attributes.Global {
+  /// A namespace for Aria attributes.
+  /// See the [Aria attributes](https://vuejs.org/api/built-in-directives) for more information.
+  enum aria {}
+}
+
+extension HTMLAttribute.aria {
+  static func label(_ value: String) -> HTMLAttribute {
+    aria(value)
+  }
+
+  static func current(_ value: String) -> HTMLAttribute {
+    aria(value)
+  }
+
+  static func selected(_ value: Bool?) -> HTMLAttribute {
+    aria(value?.description)
+  }
+
+  private static func aria(
+    name: String = #function, 
+    _ value: String? 
+  ) -> HTMLAttribute {
+    .init(name: "aria-\(name.components(separatedBy: "(").first ?? name)", value: value)
+  }
+}
diff --git a/Sources/Pages/Utils/Elementary+Markdown.swift b/Sources/Pages/Utils/Elementary+Markdown.swift
@@ -119,7 +119,7 @@ private struct HTMLMarkdownConverter: MarkupVisitor {
   mutating func visitImage(_ image: Image) -> AnyHTML {
     if let source = image.source {
       a(.href(source), .target(.blank), .rel("noopener noreferrer")) {
-        img(.src(source), .ariaLabel(image.title ?? ""))
+        img(.src(source), .aria.label(image.title ?? ""))
       }
     }
   }
@@ -148,7 +148,7 @@ private struct HTMLMarkdownConverter: MarkupVisitor {
     let attributes: [HTMLAttribute<HTMLTag.a>] = [
       .href(href),
       link.title.flatMap { .title($0) },
-      link.title.flatMap { .ariaLabel($0) },
+      link.title.flatMap { .aria.label($0) },
       isLocalLink ? nil : .target(.blank),
       isLocalLink ? nil : .rel("noopener noreferrer")
     ]
diff --git a/Sources/Pages/Utils/Elementary+Vue.swift b/Sources/Pages/Utils/Elementary+Vue.swift
diff --git a/Sources/Pages/Utils/HTMLAttribute+AlpineJS.swift b/Sources/Pages/Utils/HTMLAttribute+AlpineJS.swift

Original file line number	Diff line number	Diff line change
`@@ -119,7 +119,7 @@ private struct HTMLMarkdownConverter: MarkupVisitor {`
`119`	`119`	`mutating func visitImage(_ image: Image) -> AnyHTML {`
`120`	`120`	`if let source = image.source {`
`121`	`121`	`a(.href(source), .target(.blank), .rel("noopener noreferrer")) {`
`122`		`- img(.src(source), .ariaLabel(image.title ?? ""))`
	`122`	`+ img(.src(source), .aria.label(image.title ?? ""))`
`123`	`123`	`}`
`124`	`124`	`}`
`125`	`125`	`}`
`@@ -148,7 +148,7 @@ private struct HTMLMarkdownConverter: MarkupVisitor {`
`148`	`148`	`let attributes: [HTMLAttribute<HTMLTag.a>] = [`
`149`	`149`	`.href(href),`
`150`	`150`	`link.title.flatMap { .title($0) },`
`151`		`- link.title.flatMap { .ariaLabel($0) },`
	`151`	`+ link.title.flatMap { .aria.label($0) },`
`152`	`152`	`isLocalLink ? nil : .target(.blank),`
`153`	`153`	`isLocalLink ? nil : .rel("noopener noreferrer")`
`154`	`154`	`]`