wip: add typesafe components with vue

Author: erikbdev

Package.swift

@@ -18,6 +18,13 @@ let package = Package(
     .package(url: "https://github.com/swiftlang/swift-markdown.git", revision: "e62a44fd1f2764ba8807db3b6f257627449bbb8c")
   ],
   targets: [
+    .target(
+      name: "EnvVars",
+      dependencies: [
+        .product(name: "Hummingbird", package: "hummingbird"),
+        .product(name: "Dependencies", package: "swift-dependencies")
+      ]
+    ),
     .target(
       name: "PublicAssets",
       dependencies: [
@@ -26,7 +33,7 @@ let package = Package(
       ],
       resources: [.copy("assets")],
       plugins: [.plugin(name: "TypedAssetsPlugin", package: "swift-web")]
-    ),
+    ),    
     .target(
       name: "Models",
       dependencies: [
@@ -56,6 +63,7 @@ let package = Package(
     .target(
       name: "Pages",
       dependencies: [
+        "EnvVars",
         "Models",
         "ActivityClient",
         "PublicAssets",
@@ -70,6 +78,7 @@ let package = Package(
     .executableTarget(
       name: "App",
       dependencies: [
+        "EnvVars",
         "Models",
         "Routes",
         "Pages",

Sources/App/App.swift

@@ -1,5 +1,6 @@
 import ArgumentParser
 import Dependencies
+import EnvVars
 import Hummingbird
 import HummingbirdRouter
 import Logging
@@ -9,7 +10,7 @@ import Routes
 private let logger = Logger(label: "portfolio-server")
 
 @main
-struct Portfolio: AsyncParsableCommand {
+struct App: AsyncParsableCommand {
   @Option(name: .shortAndLong)
   var hostname = "127.0.0.1"
 
@@ -19,7 +20,7 @@ struct Portfolio: AsyncParsableCommand {
   func run() async throws {
     try await withDependencies { deps in
       #if DEBUG
-        deps.envVar = try await .dotEnv()
+        deps.envVars = try await .dotEnv()
       #endif
     } operation: {
       let app = self.buildApp()
@@ -34,8 +35,6 @@ struct Portfolio: AsyncParsableCommand {
   }
 
   func buildApp() -> some ApplicationProtocol {
-    @Dependency(\.envVar) var envVar
-
     let router = Router()
     router.addMiddleware {
       SiteMiddleware()

Sources/App/Utils/Auth.swift

@@ -1,12 +1,13 @@
-import Hummingbird
-import Foundation
 import Dependencies
-import Parsing
+import EnvVars
+import Foundation
+import Hummingbird
 import HummingbirdURLRouting
+import Parsing
 
 extension HTTPFields.Authorization {
   func validate() throws {
-    @Dependency(\.envVar) var env
+    @Dependency(\.envVars) var env
     switch self {
     case let .basic(username, pass):
       if username != env.basicAuth.0 || pass != env.basicAuth.1 {
@@ -15,4 +16,4 @@ extension HTTPFields.Authorization {
     default: throw HTTPError(.notFound)
     }
   }
-}
+}

Sources/App/Utils/Environment+.swift renamed to Sources/EnvVars/Environment+.swift

@@ -1,4 +1,3 @@
-import ArgumentParser
 import Dependencies
 import Hummingbird
 
@@ -8,7 +7,7 @@ private enum EnvKeys {
   static let basicAuthPassword = "BASIC_AUTH_PASSWD"
 }
 
-extension Environment {
+public extension Environment {
   var appSecret: String {
     self.get(EnvKeys.appSecret) ?? "deadbeefdeadbeefdeadbeefdeadbeef"
   }
@@ -22,8 +21,8 @@ private struct EnvironmentKey: TestDependencyKey {
   static let testValue = Environment()
 }
 
-extension DependencyValues {
-  var envVar: Environment {
+public extension DependencyValues {
+  var envVars: Environment {
     get { self[EnvironmentKey.self] }
     set { self[EnvironmentKey.self] = newValue }
   }

Sources/Pages/Components/HeaderView.swift

@@ -1,18 +1,57 @@
 import Elementary
+import Dependencies
+import EnvVars
 
 struct HeaderView: HTML {
+  @Dependency(\.envVars) var envVars
+
   var content: some HTML {
     header {
       hgroup {
-        code { "erikb.dev()" }
-          .inlineStyle("font-size", "0.84em")
-          .inlineStyle("color", "#AAA")
+        a(.href("/")) {
+          code { "erikb.dev()" }
+            .inlineStyle("font-size", "0.84em")
+            .inlineStyle("color", "#AAA")
+            .inlineStyle("font-weight", "bold")
+        }
+        .inlineStyle("text-decoration", "none")
         // TODO: Add buttons to allow switching between code styling or plain text
+
+        // CodeStyleSelector()        
       }
       .containerStyling()
       .inlineStyle("display", "flex")
+      .inlineStyle("flex", "none")
+      .inlineStyle("justify-content", "space-between")
+      .inlineStyle("flex-direction", "row")
       .inlineStyle("padding", "0.75rem 1.5rem")
     }
     .wrappedStyling()
   }
 }
+
+private struct CodeStyleSelector: VueComponent {
+  // @VueState var visible = false
+
+  var body: some HTML {
+    div {
+      button {
+        code { "</>" }
+          .inlineStyle("color", "#AAA")
+      }
+      .inlineStyle("font-weight", "bold")
+      .inlineStyle("font-size", "0.7em")
+      .inlineStyle("background", "unset")
+      .inlineStyle("border", "1px solid #444")
+      .inlineStyle("border-radius", "0.2rem")
+      .inlineStyle("padding", "0.2rem 0.35rem")
+
+      // ul(.v.show("visible")) {
+      //   li { "Plain Text" }
+      //   li { "Swift" }
+      //   li { "Rust" }
+      //   li { "TypeScript" }
+      // }
+    }
+  }
+}

Sources/Pages/HomePage.swift

@@ -14,7 +14,7 @@ public struct HomePage: Page {
   }
 
   public var body: some HTML {
-    div(.v.scope("{ showCode: true, selection: undefined }")) {
+    div(.v.scope("{ codeStyle: 0, selection: undefined }")) {
       HeaderView()
       Spacer()
       main {

Sources/Pages/NotFoundPage.swift

@@ -46,7 +46,7 @@ public struct NotFoundPage: Page {
           .inlineStyle("margin-bottom", "0.125rem")
       }
 
-      h2 { "Page Not Found" }
+      h1 { "Page Not Found" }
         .inlineStyle("margin-bottom", "0.5rem")
 
       pre {

Sources/Pages/Utils/Elementary+InlineStyle.swift

@@ -40,7 +40,7 @@ struct _HTMLInlineStyle<Content: HTML>: HTML where Content.Tag: HTMLTrait.Attrib
     pre: String? = nil,
     pseudo: InlineStyle.Pseudo? = nil,
     post: String? = nil
-  ) -> _HTMLInlineStyle {
+  ) -> Self {
     var copy = self
     if let value {
       copy.styles.append(