feat(pages): change assets to using webp and webm

add last updated to post and add minor code syntax

Author: erikbdev

Sources/Pages/Components/SectionView.swift

@@ -5,7 +5,7 @@ import Vue
 
 struct SectionView<Content: HTML>: HTML {
   let id: String
-  let selectedCodeLang: Vue.Expression<CodeLang>
+  let selected: Vue.Expression<CodeLang>
   let codeHeader: @Sendable (CodeLang) -> String
   @HTMLBuilder let content: @Sendable () -> Content
 
@@ -15,7 +15,7 @@ struct SectionView<Content: HTML>: HTML {
         header {
           pre {
             a(.href("#\(self.id)")) {
-              CodeLang.conditionalCases(initial: selectedCodeLang) { lang in
+              CodeLang.conditionalCases(initial: selected) { lang in
                 code {
                   slugToFileName(lang)
                 }
@@ -27,9 +27,8 @@ struct SectionView<Content: HTML>: HTML {
           .inlineStyle("font-weight", "500")
           .inlineStyle("text-align", "end")
           .inlineStyle("padding", "1.5rem 1.5rem 0")
-
           pre {
-            CodeLang.conditionalCases(initial: selectedCodeLang) { lang in
+            CodeLang.conditionalCases(initial: selected) { lang in
               code(.class("hljs language-\(lang.rawValue)")) {
                 """
                 // \(slugToFileName(lang))
@@ -41,7 +40,6 @@ struct SectionView<Content: HTML>: HTML {
           }
           .inlineStyle("padding", "0.75rem 1.5rem 1.5rem")
         }
-
         self.content()
       }
       .containerStyling()

Sources/Pages/HomePage.swift

@@ -58,7 +58,7 @@ private struct UserView: HTML {
 
   @HTMLBuilder
   var body: some HTML {
-    SectionView(id: "user", selectedCodeLang: selected) { lang in
+    SectionView(id: "user", selected: selected) { lang in
       switch lang {
         case .swift: 
         """
@@ -85,7 +85,7 @@ private struct UserView: HTML {
           role: "Mobile & Web Developer",
           home: "\(residency ?? .default)"\
           \(currentLocation.flatMap { ",\n  location: \"Currently in \($0)\"" } ?? "")
-        }
+        };
         """
       }
     } content: {
@@ -111,19 +111,19 @@ private struct UserView: HTML {
 private struct PostsView: HTML {
   let selected: Vue.Expression<CodeLang>
   var body: some HTML {
-    SectionView(id: "dev-logs", selectedCodeLang: selected) { lang in
+    SectionView(id: "dev-logs", selected: selected) { lang in
       switch lang {
         case .swift: 
         """
         let logs: [DevLog] = await fetch(.all)
         """
         case .typescript: 
         """
-        const logs = await fetch(Filter.All)
+        const logs = await fetch(Filter.All);
         """
         case .rust: 
         """
-        let logs = fetch(Filter::All).await
+        let logs = fetch(Filter::All).await;
         """
       }
     } content: {
@@ -195,6 +195,19 @@ private struct PostsView: HTML {
           .inlineStyle("gap", "0.75rem")
           .inlineStyle("margin-top", "1.5rem")
         }
+
+        if let dateUpdated = self.post.dateUpdated {
+          footer {
+            em {
+              "Last updated: "
+              span { dateUpdated }
+            }
+          }
+          .inlineStyle("color", "#8A8A8A")
+          .inlineStyle("font-size", "0.84em")
+          .inlineStyle("margin-top", "0.5rem")
+          .inlineStyle("text-align", "end")
+        }
       }
       .inlineStyle("width", "100%")
       .inlineStyle("display", "inline-block")

Sources/Pages/Models/Post+AllCases.swift

@@ -4,11 +4,11 @@ import PublicAssets
 
 extension Post: CaseIterable {
   static var allCases: [Self] {
-    @Dependency(\.publicAssets) var assets
+    @Dependency(\.publicAssets) var assetsDir
 
     return [
       Self(
-        header: .video(assets.assets.posts.wledAppDemoMp4),
+        header: .video(assetsDir.assets.posts.wledAppDemo.videoWebm),
         title: "A WLED Client for iOS", 
         content: """
         I built a native iOS app for [WLED](https://github.com/wled/WLED), an open-source LED controller for ESP32, to control my RGB LED strips.
@@ -25,7 +25,7 @@ extension Post: CaseIterable {
         kind: .project
       ),
       Self(
-        header: .image(assets.assets.projects.animeNow.anDiscoverPng, label: "Anime Now! discover image"),
+        header: .image(assetsDir.assets.posts.animeNowReleased.anDiscoverWebp, label: "Anime Now! discover image"),
         title: "Anime Now! \u{2014} An iOS and macOS App",
         content: """
         > TBD
@@ -56,15 +56,27 @@ extension Post: CaseIterable {
         content: """
         I finally decided to redesign my website. \
         To expand my skills with Swift, I decided to rebuild my portfolio in Swift.
+
+        Additionally, I built a library called [swift-web](https://github.com/erikbdev/swift-web) which contains tools used to build \
+        this website in Swift. It utilizes Swift build tools to generate typed asset generation, and \
+        utilities to build a reactive website using Swift and Vue.
+
+        Feel free to check out both projects on GitHub. 😊
         """,
         date: Date(month: 2, day: 2, year: 2025),
+        lastUpdated: Date(month: 3, day: 14, year: 2025),
         kind: .blog,
         links: [
           Post.Link(
-            title: "GitHub",
+            title: "Portfolio",
             href: "https://github.com/erikbdev/erikbautista.dev",
             role: .primary
           ),
+          Post.Link(
+            title: "swift-web",
+            href: "https://github.com/erikbdev/swift-web",
+            role: .secondary
+          ),
         ]
       ),
     ]

Sources/Pages/Models/Post.swift

@@ -23,6 +23,10 @@ struct Post: Sendable {
     Self.dateCreatedFormatter.string(from: self.date)
   }
 
+  var dateUpdated: String? {
+    self.lastUpdated.flatMap(Self.dateCreatedFormatter.string(from:))
+  }
+
   private static let timestampFormatter = {
     let formatter = DateFormatter()
     formatter.locale = Locale(identifier: "en_US_POSIX")

Sources/Pages/NotFoundPage.swift

@@ -17,8 +17,8 @@ public struct NotFoundPage: Page {
   }
 
   public var body: some HTML {
-    #VueScope(initialCodeLang) { selected in
-      HeaderView(selected: selected)
+    #VueScope(initialCodeLang) { codeLang in
+      HeaderView(selected: codeLang)
       Spacer()
       main {
         section {
@@ -34,7 +34,7 @@ public struct NotFoundPage: Page {
                 .inlineStyle("margin-bottom", "0.5rem")
 
               pre {
-                CodeLang.conditionalCases(initial: selected) { lang in
+                CodeLang.conditionalCases(initial: codeLang) { lang in
                   code {
                     switch lang {
                     case .swift:
@@ -43,11 +43,11 @@ public struct NotFoundPage: Page {
                       """
                     case .rust:
                       """
-                      panic!("page not found")
+                      panic!("page not found");
                       """
                     case .typescript:
                       """
-                      throw new Error("page not found")
+                      throw new Error("page not found");
                       """
                     }
                   }