chore: improve vue components

Author: erikbdev

Package.resolved

@@ -9,7 +9,7 @@ let package = Package(
   ],
   dependencies: [
     .package(url: "https://github.com/apple/swift-argument-parser.git", from: "1.4.0"),
-    .package(url: "https://github.com/erikbdev/swift-web.git", exact: "0.0.17"),
+    .package(url: "https://github.com/erikbdev/swift-web.git", exact: "0.2.3"),
     .package(url: "https://github.com/hummingbird-project/hummingbird.git", exact: "2.5.0"),
     .package(url: "https://github.com/pointfreeco/swift-case-paths.git", from: "1.0.0"),
     .package(url: "https://github.com/pointfreeco/swift-url-routing.git", from: "0.6.2"),

Package.swift

@@ -35,7 +35,9 @@ struct SiteMiddleware<Context: RequestContext>: RouterController {
       } operation: {
         switch route {
         case .home:
-          return HomePage(codeLang: .resolve(req))
+          return PageLayout(metadata: .default()) {
+            HomePage(codeLang: .resolve(req))
+          }
         case .api(.activity(.all)):
           do {
             return try ActivityClient.Activity.encoder.encode(self.activityClient.redactedActivity(), from: req, context: ctx)
@@ -75,12 +77,27 @@ private struct NotFoundMiddleware<Context: RequestContext>: RouterMiddleware {
         throw error
       }
 
-      return try NotFoundPage(codeLang: .resolve(input))
-        .response(from: input, context: context, status: .notFound)
+      return PageLayout(metadata: .default()) {
+        NotFoundPage(codeLang: .resolve(input))
+      }
+      .response(from: input, context: context, status: .notFound)
     }
   }
 }
 
+private extension Metadata {
+  static func `default`() -> Metadata {
+    @Dependency(\.publicAssets) var assets
+
+    return Metadata(
+      title: "Erik Bautista Santibanez",
+      description: "A software developer specialized in mobile and web applications.",
+      image: assets.assets.og.cardPng.url.assetString,
+      url: "https://erikb.dev"
+    )
+  }
+}
+
 extension CodeLang {
   fileprivate static func resolve(_ req: Request) -> CodeLang? {
     req.uri.queryParameters["codeLang"]

Sources/App/SiteMiddleware.swift

@@ -1,6 +1,6 @@
 import HTML
 
-extension HTML {
+extension AsyncHTML {
   func wrappedStyling() -> HTMLInlineStyle<Self> {
     self.inlineStyle("border-top", "1px solid #303030")
   }

Sources/Pages/Components/Page.swift

@@ -5,25 +5,24 @@ import HTML
 import Models
 import Vue
 
-public struct HomePage: Page {
+@Vue.Component
+public struct HomePage: Page, Sendable {
   public let title = "Portfolio | Erik Bautista Santibanez"
 
-  let initialCodeLang: CodeLang?
+  @Vue.Reactive let codeLang: CodeLang?
 
   public init(codeLang: CodeLang? = .swift) {
-    self.initialCodeLang = codeLang
+    self.codeLang = codeLang
   }
 
-  public var head: some HTML { EmptyHTML() }
-
   public var body: some HTML {
-    #VueScope(initialCodeLang) { codeLang in
-      HeaderView(selected: codeLang)
+    div {
+      HeaderView(selected: $codeLang)
       main {
         Spacer()
-        UserView(selected: codeLang)
+        UserView(selected: $codeLang)
         Spacer()
-        PostsView(selected: codeLang)
+        PostsView(selected: $codeLang)
         Spacer()
       }
       FooterView()
@@ -471,7 +470,7 @@ private struct PostsView: HTML {
   }
 }
 
-extension HTML {
+extension AsyncHTML {
   fileprivate func postCodeBlockStyling() -> HTMLInlineStyle<Self> {
     self.inlineStyle("padding", "0.75rem", post: " pre")
       .inlineStyle("background", "#242424", post: " pre")

Sources/Pages/Components/Stylings.swift

@@ -2,25 +2,22 @@ import Dependencies
 import HTML
 import Vue
 
-public struct NotFoundPage: Page {
+@Vue.Component
+public struct NotFoundPage: Page, Sendable {
   public let title = "404 | Erik Bautista Santibanez"
 
-  let initialCodeLang: CodeLang?
+  @Vue.Reactive let codeLang: CodeLang?
 
   public init(codeLang: CodeLang? = .swift) {
-    self.initialCodeLang = codeLang
-  }
-
-  public var head: some HTML {
-    EmptyHTML()
+    self.codeLang = codeLang
   }
 
   public var body: some HTML {
-    #VueScope(initialCodeLang) { codeLang in
-      HeaderView(selected: codeLang)
+    div {
+      HeaderView(selected: $codeLang)
       Spacer()
       main {
-        InnerView(codeLang: codeLang)
+        InnerView(codeLang: $codeLang)
       }
       Spacer()
       FooterView()

Sources/Pages/HomePage.swift

@@ -0,0 +1,5 @@
+import HTML
+
+public protocol Page: AsyncHTML, Sendable {
+  var title: String { get }
+}