fix: switch codeLang for NotFoundPage

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.13"),
+    .package(url: "https://github.com/erikbdev/swift-web.git", exact: "0.0.15"),
     .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

@@ -24,8 +24,10 @@ struct FooterView: HTML {
       }
       .containerStyling()
       .inlineStyle("padding", "1rem 1.5rem")
+      .inlineStyle("height", "100%")
     }
     .inlineStyle("text-align", "center")
+    .inlineStyle("flex-grow", "1")
     .wrappedStyling()
   }
 }

Sources/Pages/Components/FooterView.swift

@@ -4,7 +4,7 @@ import HTML
 import Vue
 
 struct HeaderView: HTML {
-  @Dependency(\.envVars) var envVars
+  let selected: Vue.Expression
 
   var body: some HTML {
     header {
@@ -16,9 +16,8 @@ struct HeaderView: HTML {
             .inlineStyle("font-weight", "bold")
         }
         .inlineStyle("text-decoration", "none")
-        // TODO: Add buttons to allow switching between code styling or plain text
 
-        CodeSelector()
+        CodeSelector(selected: selected)
       }
       .containerStyling()
       .inlineStyle("display", "flex")
@@ -31,12 +30,15 @@ struct HeaderView: HTML {
   }
 }
 
-private struct CodeSelector: VueComponent {
-  @Reactive let visible = false
+private struct CodeSelector: HTML {
+  let selected: Vue.Expression
 
   var body: some HTML {
-    div {
-      button(.v.on(.click, Expression(rawValue: "\($visible) = \(!$visible)"))) {
+    #VueScope(false) { (visible: Vue.Expression) in
+      button(
+        .v.on(.click, visible.assign(!visible)), 
+        .v.bind(attrOrProp: "style", Expression(rawValue: "\(visible) ? { background: '#8A8A8A', color: '#080808' } : null"))
+      ) {
         code { "</>" }
       }
       .inlineStyle("font-weight", "bold")
@@ -46,19 +48,26 @@ private struct CodeSelector: VueComponent {
       .inlineStyle("border-radius", "0.3rem")
       .inlineStyle("padding", "0.28rem 0.4rem")
       .inlineStyle("color", "#AAA")
+      .inlineStyle("pointer", "cursor")
 
-      ul(.v.show($visible)) {
+      ul(.hidden, .v.bind(attrOrProp: "hidden", !visible)) {
         for code in CodeLang.allCases {
           li {
-            button(.v.on(.click, Expression(rawValue: "\($visible) = null"))) {
+            button(
+              .v.on(.click, selected.assign(Expression(code))),
+              .v.on(.click, modifiers: .prevent, visible.assign(!visible))
+            ) {
               code.title
             }
             .inlineStyle("all", "unset")
             .inlineStyle("display", "inline-block")
             .inlineStyle("width", "100%")
             .inlineStyle("padding", "0.5rem")
             .inlineStyle("cursor", "pointer")
+            // TODO: Add background highlight
+            // .inlineStyle("background", "#2A2A2A", pseudo: .hover)
           }
+          .inlineStyle("overflow", "hidden")
         }
       }
       .inlineStyle("position", "absolute")

Sources/Pages/Components/HeaderView.swift

@@ -24,8 +24,8 @@ extension Page {
     withDependencies {
       $0.ssg = .class
     } operation: {
-      VueDocument._render(
-        VueDocument(
+      BaseLayout._render(
+        BaseLayout(
           head: {
             meta(.charset(.utf8))
             tag("title") { document.title }
@@ -44,10 +44,12 @@ extension Page {
               }
               html {
                 line-height: 1.5;
+                height: 100%;
               }
               body {
                 background-color: #1c1c1c;
                 color: #fafafa;
+                height: 100%;
               }
               pre a {
                 text-decoration: none;
@@ -68,6 +70,9 @@ extension Page {
                 font-feature-settings: "ss03", "ss04", "ss05";
                 line-height: 1;
               }
+              [v-cloak] {
+                display: none;
+              }
               """
             }
             /// Xcode Styling
@@ -79,15 +84,19 @@ extension Page {
               .defer
             )
             script(
-              .src("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/swift.min.js"),
+              .src(
+                "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/swift.min.js"),
               .defer
             )
             script(
-              .src("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/rust.min.js"),
+              .src(
+                "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/rust.min.js"),
               .defer
             )
             script(
-              .src("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"), 
+              .src(
+                "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"
+              ),
               .defer
             )
             script(
@@ -107,6 +116,13 @@ extension Page {
               .inlineStyle("font-size", "0.8em", media: .minWidth(390))
               .inlineStyle("font-size", "0.9em", media: .minWidth(480))
               .attribute("lang", value: document.lang)
+
+            script(.type(.module), .defer) {
+              """
+              import { createApp } from "https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js";
+              createApp().mount();
+              """
+            }
           }
         ),
         into: &output
@@ -118,4 +134,12 @@ extension Page {
 private struct BaseLayout<Head: HTML, Body: HTML>: HTMLDocument {
   var head: Head
   var body: Body
+
+  init(
+    @HTMLBuilder head: () -> Head,
+    @HTMLBuilder body: () -> Body
+  ) {
+    self.head = head()
+    self.body = body()
+  }
 }

Sources/Pages/Components/Page.swift

@@ -18,8 +18,8 @@ public struct HomePage: Page {
   public var head: some HTML { EmptyHTML() }
 
   public var body: some HTML {
-    div(.v.scope([:])) {
-      HeaderView()
+    #VueScope(CodeLang.swift) { (selected: Vue.Expression) in
+      HeaderView(selected: selected)
       Spacer()
       main {
         UserView()

Sources/Pages/HomePage.swift

@@ -1,4 +1,4 @@
-enum CodeLang: String, CaseIterable {
+enum CodeLang: String, CaseIterable, Encodable {
   case swift
   case rust
   case typescript

Sources/Pages/Models/CodeLang.swift

@@ -1,4 +1,5 @@
 import HTML
+import Vue
 
 public struct NotFoundPage: Page {
   public let title = "Erik Bautista Santibanez | Not Found"
@@ -11,14 +12,14 @@ public struct NotFoundPage: Page {
   }
 
   public var body: some HTML {
-    div {
-      HeaderView()
+    #VueScope(CodeLang.swift) { (selected: Vue.Expression) in
+      HeaderView(selected: selected)
       Spacer()
       main {
         section {
           div {
             div {
-              Heading()
+              Heading(selected: selected)
             }
           }
           .containerStyling()
@@ -35,9 +36,14 @@ public struct NotFoundPage: Page {
       Spacer()
       FooterView()
     }
+    .inlineStyle("display", "flex")
+    .inlineStyle("flex-direction", "column")
+    .inlineStyle("height", "100%")
   }
 
   private struct Heading: HTML {
+    let selected: Vue.Expression
+
     var body: some HTML {
       pre {
         code { "// 404 ERROR" }
@@ -50,13 +56,23 @@ public struct NotFoundPage: Page {
         .inlineStyle("margin-bottom", "0.5rem")
 
       pre {
-        code(.class("hljs language-swift")) {
+        code(.v.cloak, .v.if(selected == Expression(CodeLang.rust)), .class("hljs language-rust")) {
           """
-          throw Error.pageNotFound
+          panic!("page not found")
+          """
+        }
+        code(.v.cloak, .v.elseIf(selected == Expression(CodeLang.typescript)), .class("hljs language-typescript")) {
+          """
+          throw new Error("page not found")
           """
         }
-        .inlineStyle("font-size", "0.9em")
+        code(.v.else, .class("hljs language-swift")) {
+          """
+          throw Error.pageNotFound
+          """
+        } 
       }
+      .inlineStyle("font-size", "0.9em")
     }
   }
 }