wip: improve stylesheet

erikbdev · erikbdev · commit 6dade4ede592 · 2025-02-07T00:07:04.000-08:00
diff --git a/Sources/Pages/HomePage.swift b/Sources/Pages/HomePage.swift
@@ -36,6 +36,7 @@ public struct HomePage: Page {
       body {
         header(.class("hero"), .aria.label("About")) {
           hgroup {
+            p(.class("file-name")) { "User.swift" }
             h1(.class("hero-title")) { "Erik Bautista Santibanez" }
             p(.class("hero-subtitle")) { "Swift & Web Developer" }
 
@@ -75,6 +76,7 @@ public struct HomePage: Page {
         }
         main(.v.scope("{ selection: undefined }")) {
           header {
+            p(.class("file-name")) { "Posts.swift" }
             hgroup {
               h2 { "Posts" }
               ul(.class("post-tabs")) {
@@ -86,6 +88,7 @@ public struct HomePage: Page {
                   }
                   li {
                     button(
+                      .class("post-tab"),
                       .v.on(.click, "selection = \(value)"),
                       .v.bind("aria-selected", "selection == \(value)"),
                       .aria.selected(kind == nil)
@@ -103,7 +106,7 @@ public struct HomePage: Page {
                 .class("post"),
                 .v.show("!selection || selection == '\(post.kind.rawValue)'")
               ) {
-                header { post.dateFormatted }
+                header(.class("post-date")) { post.dateFormatted }
                 h3(.class("post-title")) { post.title }
                 div(.class("post-content")) { post.content }
               }
@@ -129,10 +132,16 @@ public struct HomePage: Page {
 extension HomePage {
   struct Style: @unchecked Sendable, StyleSheet {
     var body: some Rule {
-      // TODO: Add Work-Sans font?
+      resetStyles()
+      generalStyles()
+      heroStyles()
+      postTabsStyles()
+      postStyles()
+    }
 
-      // Reset components
-      ":root" => {
+    /// MARK: - Reset components
+    @CSSBuilder func resetStyles() -> some Rule {
+      Pseudo(class: .root) => {
         AnyProperty("line-height", "1.5")
       }
 
@@ -149,8 +158,21 @@ extension HomePage {
         AnyProperty("display", "block")
         AnyProperty("max-inline-size", "100%")
       }
+    }
+
+    @CSSBuilder func generalStyles() -> some Rule {
+      // TODO: Add Work-Sans font?
+
+      /// MARK: - General
+
+      "@font-face" => {
+        AnyProperty("font-family", "\"CommitMono\"")
+        AnyProperty("font-src", "url(\"https://github.com/eigilnikolajsen/commit-mono/raw/ecd81cdbd7f7eb2acaaa2f2f7e1a585676f9beff/src/fonts/fontlab/CommitMonoV143-VF.woff2\")")
+        AnyProperty("font-style", "normal")
+        AnyProperty("font-weight", "400")
+        AnyProperty("font-display", "swap")
+      }
 
-      // General
       Pseudo(class: .root) => {
         BackgroundColor("#1c1c1c")
         Color("#fafafa")
@@ -189,18 +211,32 @@ extension HomePage {
         AnyProperty("scale", "calc(100% * -1) 100%")
       }
 
-      /// Hero header
+      Class("file-name") => {
+        Color("#777")
+        AnyProperty("text-align", "end")
+        AnyProperty("font-size", "0.85em")
+        AnyProperty("font-weight", "600")
+        AnyProperty("font-family", "\"CommitMono\", monospace")
+      }
+
+      Element(.pre) => {
+        AnyProperty("font-family", "\"CommitMono\", monospace")
+      }
+    }
+
+    @CSSBuilder func heroStyles() -> some Rule {
+      /// MARK: - Hero header
 
       Class("hero") => {
         AnyProperty("padding-bottom", "1.5rem")
       }
 
-      Class("hero") * Element(.p) => {
+      Class("hero-location") => {
         Color(.hex("#D0D0D0"))
       }
+    }
 
-      /// Post tabs
-
+    @CSSBuilder func postTabsStyles() -> some Rule {      
       Class("post-tabs") => {
         AnyProperty("list-style-type", "none")
         AnyProperty("margin", "0")
@@ -213,7 +249,7 @@ extension HomePage {
         AnyProperty("margin-right", "0.25rem")
       }
 
-      Class("post-tabs") * Element(.button) => {
+      Class("post-tab") => {
         BackgroundColor("#3c3c3c")
         AnyProperty("color", "white")
         AnyProperty("border-color", "#505050")
@@ -223,22 +259,24 @@ extension HomePage {
         AnyProperty("padding", "0.25rem 0.75rem")
       }
 
-      Class("post-tabs") * Element(.button) <> .attr("aria-selected", match: .exact, value: "true") => {
+      Class("post-tab") <> .attr("aria-selected", match: .exact, value: "true") => {
         AnyProperty("background-color", "#F0F0F0")
         AnyProperty("color", "#101010")
         AnyProperty("border-color", "#A0A0A0")
       }
+    }
 
-      /// Posts
+    @CSSBuilder func postStyles() -> some Rule {
+      /// MARK: - Posts
 
       Class("post") => {
         AnyProperty("margin-top", "0.75rem")
         AnyProperty("margin-bottom", "1.5rem")
         // AnyProperty("border-bottom", "1px dotted #404040")
       }
 
-      Class("post") > Element(.header) => {
-        Color(.gray)
+      Class("post-date") => {
+        Color("#9A9A9A")
         AnyProperty("font-size", "0.75em")
         AnyProperty("font-weight", "600")
       }
@@ -251,7 +289,6 @@ extension HomePage {
         AnyProperty("margin", "revert")
       }
 
-      /// Code blocks
       Class("post") * Element(.pre) => {
         AnyProperty("padding", "1rem")
         Background("#242424")
@@ -260,6 +297,7 @@ extension HomePage {
         AnyProperty("border-width", "1.5px")
         AnyProperty("border-radius", "0.75rem")
         AnyProperty("overflow-x", "auto")
+        AnyProperty("font-size", "0.85em")
       }
     }
   }
diff --git a/Sources/Pages/Models/Post+AllCases.swift b/Sources/Pages/Models/Post+AllCases.swift
@@ -9,6 +9,17 @@ extension Post: CaseIterable {
         content: """
         Since I started building this website using Swift, I used [elementary](https://github.com/sliemeobn/elementary "link to Swift library") to build \
         HTML pages.
+
+        ```swift
+        struct CustomSheet: StyleSheet {
+          var body: some Rule {
+            Class("books") => {
+              Color(.red)
+              BackgroundColor(.red)
+            }
+          }
+        }
+        ```
         """,
         date: Date(timeIntervalSince1970: 1_738_483_200), // Feb 2, 2025
         kind: .project
@@ -17,7 +28,7 @@ extension Post: CaseIterable {
         slug: "mochi-released",
         title: "Mochi \u{2014} Content Viewer for iOS and macOS",
         content: """
-        TBD
+        > TBD
         """,
         date: Date(timeIntervalSince1970: 1_663_225_200), // Sep 15, 2025
         kind: .project
@@ -26,7 +37,7 @@ extension Post: CaseIterable {
         slug: "anime-now-released",
         title: "Anime Now! \u{2014} An iOS and macOS App",
         content: """
-        TBD
+        > TBD
         """,
         date: Date(timeIntervalSince1970: 1_663_225_200), // Sep 15, 2025
         kind: .project
@@ -35,7 +46,7 @@ extension Post: CaseIterable {
         slug: "prism-ui-released",
         title: "PrismUI \u{2014} Controlling MSI RGB Keyboard on mac",
         content: """
-        TBD
+        > TBD
         """,
         date: Date(timeIntervalSince1970: 1_663_225_200),
         kind: .project
diff --git a/Sources/Pages/Models/Post.swift b/Sources/Pages/Models/Post.swift
@@ -2,7 +2,7 @@ import Foundation
 
 struct Post {
   let slug: String
-  var hero: Hero?
+  var header: Header?
   let title: String
   let content: HTMLMarkdown
   let date: Date
@@ -21,7 +21,7 @@ struct Post {
     Self.dateCreatedFormatter.string(from: self.date).uppercased()
   }
 
-  enum Hero {
+  enum Header {
     case link(String)
     case image(String)
     case video(String)
diff --git a/Sources/Pages/Utils/Elementary+Aria.swift b/Sources/Pages/Utils/Elementary+Aria.swift
@@ -16,7 +16,7 @@ extension HTMLAttribute.aria {
   }
 
   static func selected(_ value: Bool?) -> HTMLAttribute {
-    aria(value?.description)
+    aria(value.flatMap(String.init))
   }
 
   private static func aria(
diff --git a/Sources/Pages/Utils/Elementary+Markdown.swift b/Sources/Pages/Utils/Elementary+Markdown.swift
@@ -25,8 +25,6 @@ private struct HTMLMarkdownConverter: MarkupVisitor {
   mutating func visitBlockQuote(_ blockQuote: BlockQuote) -> AnyHTML {
     let aside = Aside(blockQuote)
     blockquote {
-      strong { aside.kind.displayName }
-
       for child in aside.content {
         visit(child)
       }
diff --git a/Sources/Pages/Utils/Elementary+Vue.swift b/Sources/Pages/Utils/Elementary+Vue.swift
@@ -18,6 +18,7 @@ struct VueScript: HTML {
         const roots = [...document.documentElement.querySelectorAll(`[v-scope]`)]
           .filter((root) => !root.matches(`[v-scope] [v-scope]`));
 
+        // Similar to how `v-scope` works in `petite-vue`
         for (const root of roots) {
           const expr = root.getAttribute('v-scope');
           root.removeAttribute('v-scope');

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ extension HTMLAttribute.aria {`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`static func selected(_ value: Bool?) -> HTMLAttribute {`
`19`		`- aria(value?.description)`
	`19`	`+ aria(value.flatMap(String.init))`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`private static func aria(`
Original file line number	Diff line number	Diff line change
`@@ -25,8 +25,6 @@ private struct HTMLMarkdownConverter: MarkupVisitor {`
`25`	`25`	`mutating func visitBlockQuote(_ blockQuote: BlockQuote) -> AnyHTML {`
`26`	`26`	`let aside = Aside(blockQuote)`
`27`	`27`	`blockquote {`
`28`		`- strong { aside.kind.displayName }`
`29`		`-`
`30`	`28`	`for child in aside.content {`
`31`	`29`	`visit(child)`
`32`	`30`	`}`