feat: add ability to change code lang

erikbdev · erikbdev · commit a99f95b2dec1 · 2025-03-13T02:31:32.000-07:00
diff --git a/Sources/App/Middlewares/SiteMiddleware.swift b/Sources/App/Middlewares/SiteMiddleware.swift
@@ -31,6 +31,7 @@ struct SiteMiddleware<Context: RequestContext>: RouterController {
     URLRoutingMiddleware(self.siteRouter) { req, ctx, route in
       try withDependencies {
         $0.currentRoute = route
+        $0.currentCodeLang = .swift
       } operation: {
         switch route {
         case .robots:
diff --git a/Sources/EnvVars/Environment+.swift b/Sources/EnvVars/Environment+.swift
@@ -26,4 +26,4 @@ public extension DependencyValues {
     get { self[EnvironmentKey.self] }
     set { self[EnvironmentKey.self] = newValue }
   }
-}
+}
diff --git a/Sources/Models/Project.swift b/Sources/Models/Project.swift
diff --git a/Sources/Pages/Components/HeaderView.swift b/Sources/Pages/Components/HeaderView.swift
@@ -42,41 +42,45 @@ private struct CodeSelector: HTML {
         code { "</>" }
       }
       .inlineStyle("font-weight", "bold")
-      .inlineStyle("font-size", "0.7em")
+      .inlineStyle("font-size", "0.8em")
       .inlineStyle("background", "unset")
       .inlineStyle("border", "1.16px solid #444")
       .inlineStyle("border-radius", "0.3rem")
       .inlineStyle("padding", "0.28rem 0.4rem")
       .inlineStyle("color", "#AAA")
-      .inlineStyle("pointer", "cursor")
+      .inlineStyle("cursor", "pointer")
 
       ul(.hidden, .v.bind(attrOrProp: "hidden", !visible)) {
         for code in CodeLang.allCases {
           li {
             button(
               .v.on(.click, selected.assign(Expression(code))),
-              .v.on(.click, modifiers: .prevent, visible.assign(!visible))
+              .v.on(.click, modifiers: .prevent, visible.assign(!visible)),
+              .v.bind(attrOrProp: "style", Expression(rawValue: "{ background: \(selected) == \(Expression(code)) ? '#3A3A3A' : undefined }")),
+              .style("border-radius: 0.75rem")
             ) {
-              code.title
+              p {
+                code.title
+              }
+              .inlineStyle("width", "100%")
+              .inlineStyle("padding", "0.5rem")
             }
             .inlineStyle("all", "unset")
-            .inlineStyle("display", "inline-block")
+            .inlineStyle("display", "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")
       .inlineStyle("right", "0")
       .inlineStyle("list-style", "none")
-      .inlineStyle("padding", "0")
+      .inlineStyle("padding", "0.4rem")
       .inlineStyle("margin-top", "0.25rem")
-      .inlineStyle("background", "#383838")
-      .inlineStyle("border-radius", "0.75rem")
+      .inlineStyle("background", "#2A2A2A")
+      .inlineStyle("border-radius", "1rem")
+      .inlineStyle("font-size", "1.125em")
     }
     .inlineStyle("position", "relative")
   }
diff --git a/Sources/Pages/Components/Page.swift b/Sources/Pages/Components/Page.swift
@@ -77,7 +77,7 @@ extension Page {
             }
             /// Xcode Styling
             style {
-              ".xml .hljs-meta{color:#6C7986}.hljs-comment,.hljs-quote{color:#6C7986}.hljs-tag,.hljs-attribute,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-name{color:#FC5FA3}.hljs-variable,.hljs-template-variable{color:#FC5FA3}.hljs-code,.hljs-string,.hljs-meta-string{color:#FC6A5D}.hljs-regexp,.hljs-link{color:#5482FF}.hljs-title,.hljs-symbol,.hljs-bullet,.hljs-number{color:#41A1C0}.hljs-section,.hljs-meta{color:#FC5FA3}.hljs-class .hljs-title,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-params{color:#D0A8FF}.hljs-attr{color:#BF8555}.hljs-subst{color:#FFF}.hljs-formula{font-style:italic}.hljs-selector-id,.hljs-selector-class{color:#9b703f}.hljs-doctag,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}"
+              ".xml .hljs-meta{color:#6C7986}.hljs-comment,.hljs-quote{color:#6C7986}.hljs-tag,.hljs-attribute,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-name{color:#FC5FA3}.hljs-template-variable{color:#FC5FA3}.hljs-code,.hljs-string,.hljs-meta-string{color:#FC6A5D}.hljs-regexp,.hljs-link{color:#5482FF}.hljs-title,.hljs-symbol,.hljs-bullet,.hljs-number{color:#41A1C0}.hljs-section,.hljs-meta{color:#FC5FA3}.hljs-class .hljs-title,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-params{color:#D0A8FF}.hljs-attr{color:#BF8555}.hljs-subst{color:#FFF}.hljs-formula{font-style:italic}.hljs-selector-id,.hljs-selector-class{color:#9b703f}.hljs-doctag,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}"
             }
             script(
               .src("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"),
diff --git a/Sources/Pages/Components/SectionView.swift b/Sources/Pages/Components/SectionView.swift
@@ -0,0 +1,98 @@
+import HTML
+import Models
+import Dependencies
+
+struct SectionView<Content: HTML>: HTML {
+  @Dependency(\.currentCodeLang) var currentCodeLang
+
+  let id: String
+  let codeHeader: @Sendable (CodeLang) -> String
+  @HTMLBuilder let content: @Sendable () -> Content
+
+  var body: some HTML {
+    let allCodeLangs = CodeLang.allCases.sorted(initial: currentCodeLang)
+    section(.id(self.id)) {
+      div {
+        header {
+          pre {
+            a(.href("#\(self.id)")) {
+              for (idx, lang) in allCodeLangs.enumerated() {
+                code {
+                  slugToFileName(lang)
+                }
+                .attribute("v-cloak", value: idx == allCodeLangs.startIndex ? nil : "")
+                .attribute("v-if", value: idx == allCodeLangs.startIndex ? "selected == '\(lang.rawValue)'" : nil)
+                .attribute("v-else-if", value: allCodeLangs.startIndex < idx && idx < allCodeLangs.index(before: allCodeLangs.endIndex) ? "selected == '\(lang.rawValue)'" : nil)
+                .attribute("v-else", value: idx == allCodeLangs.index(before: allCodeLangs.endIndex) ? "" : nil)
+              }
+            }
+            .inlineStyle("color", "#777")
+          }
+          .inlineStyle("font-size", "0.75em")
+          .inlineStyle("font-weight", "500")
+          .inlineStyle("text-align", "end")
+          .inlineStyle("padding", "1.5rem 1.5rem 0")
+
+          pre {
+            for (idx, lang) in allCodeLangs.enumerated() {
+              code(.class("hljs language-\(lang.rawValue)")) {
+                """
+                // \(slugToFileName(lang))
+                // Portfolio
+                \(codeHeader(lang))
+                """
+              }
+              .attribute("v-cloak", value: idx == allCodeLangs.startIndex ? nil : "")
+              .attribute("v-if", value: idx == allCodeLangs.startIndex ? "selected == '\(lang.rawValue)'" : nil)
+              .attribute("v-else-if", value: allCodeLangs.startIndex < idx && idx < allCodeLangs.index(before: allCodeLangs.endIndex) ? "selected == '\(lang.rawValue)'" : nil)
+              .attribute("v-else", value: idx == allCodeLangs.index(before: allCodeLangs.endIndex) ? "" : nil)
+            }
+          }
+          .inlineStyle("padding", "0.75rem 1.5rem 1.5rem")
+        }
+        // .inlineStyle("background-image", "radial-gradient(#2A2A2A 1px, transparent 0)")
+        // .inlineStyle("background-size", "12px 12px")
+
+        self.content()
+      }
+      .containerStyling()
+    }
+    .wrappedStyling()
+  }
+
+  private func slugToFileName(_ lang: CodeLang) -> String {
+    let fileName = switch lang {
+      case .swift:
+        self.id.components(separatedBy: "-")
+          .map { component -> String in
+            if let first = component.first {
+              first.uppercased().appending(component.dropFirst())
+            } else {
+              component
+            }
+          }
+          .joined()
+      case .rust: self.id
+      case .typescript:
+        self.id.components(separatedBy: "-")
+          .enumerated()
+          .map { (idx, component) -> String in
+            if idx == 0 {
+              component
+            } else if let first = component.first {
+              first.uppercased().appending(component.dropFirst())
+            } else {
+              component
+            }
+          }
+          .joined()
+      }
+    return fileName + "." + lang.ext
+  }
+}
+
+extension [CodeLang] {
+  func sorted(initial lang: CodeLang) -> Self {
+    [lang] + self.filter { $0 != lang }
+  }
+}
diff --git a/Sources/Pages/HomePage.swift b/Sources/Pages/HomePage.swift
@@ -2,14 +2,10 @@ import ActivityClient
 import Dependencies
 import Foundation
 import HTML
+import Models
 import Vue
 
 public struct HomePage: Page {
-  struct State: Encodable, Sendable {
-    let codeStyle = 0
-    let selection: Int? = nil
-  }
-
   public let title = "Erik Bautista Santibanez | Portfolio"
   public let lang = "en"
 
@@ -33,74 +29,6 @@ public struct HomePage: Page {
   }
 }
 
-private struct SectionView<Content: HTML>: HTML {
-  let codeTag: String
-  let codeHeader: String
-  @HTMLBuilder let content: @Sendable () -> Content
-
-  private var id: String {
-    codeTag.enumerated().flatMap { idx, char in
-      [
-        char.isUppercase && idx > 0 ? "-" : nil,
-        String(char).lowercased(),
-      ]
-      .compactMap(\.self)
-    }
-    .joined()
-  }
-
-  var body: some HTML {
-    section(.id(self.id)) {
-      div {
-        header {
-          CodeTag(id: self.id, codeTag: self.codeTag)
-          CodeHeader(codeTag: self.codeTag, codeHeader: self.codeHeader)
-        }
-
-        self.content()
-      }
-      .containerStyling()
-    }
-    .wrappedStyling()
-  }
-
-  struct CodeTag: HTML {
-    let id: String
-    let codeTag: String
-
-    var body: some HTML {
-      pre {
-        a(.href("#\(self.id)")) {
-          code { "\(self.codeTag).swift" }
-        }
-        .inlineStyle("color", "#777")
-      }
-      .inlineStyle("font-size", "0.75em")
-      .inlineStyle("font-weight", "500")
-      .inlineStyle("text-align", "end")
-      .inlineStyle("padding", "1.5rem 1.5rem 0")
-    }
-  }
-
-  struct CodeHeader: HTML {
-    let codeTag: String
-    let codeHeader: String
-
-    var body: some HTML {
-      pre {
-        code(.class("hljs language-swift")) {
-          """
-          /// \(self.codeTag).swift
-          /// Portfolio
-          \(self.codeHeader)
-          """
-        }
-      }
-      .inlineStyle("padding", "0.75rem 1.5rem 1.5rem")
-    }
-  }
-}
-
 private struct UserView: HTML {
   @Dependency(\.activityClient) private var activityClient
 
@@ -120,21 +48,41 @@ private struct UserView: HTML {
     return [location.city, location.state, location.region == "United States" ? nil : location.region]
       .compactMap(\.self)
       .joined(separator: ", ")
-
   }
 
+  @HTMLBuilder
   var body: some HTML {
-    SectionView(
-      codeTag: "User",
-      codeHeader: """
-      struct User: Portfolio {
-        let name = "Erik Bautista Santibanez"
-        let role = "Mobile & Web Developer"
-        let home = "\(residency ?? .default)"\
-        \(currentLocation.flatMap { "\n  let location = \"Currently in \($0)\"" } ?? "")
+    SectionView(id: "user") { lang in
+      switch lang {
+        case .swift: 
+        """
+        let user = User(
+          name: "Erik Bautista Santibanez",
+          role: "Mobile & Web Developer",
+          home: "\(residency ?? .default)"\
+          \(currentLocation.flatMap { ",\n  location: \"Currently in \($0)\"" } ?? "")
+        )
+        """
+        case .typescript: 
+        """
+        const user = {
+          name: "Erik Bautista Santibanez",
+          role: "Mobile & Web Developer",
+          home: "\(residency ?? .default)"\
+          \(currentLocation.flatMap { ",\n  location: \"Currently in \($0)\"" } ?? "")
+        };
+        """
+        case .rust: 
+        """
+        let user = Portfolio {
+          name: "Erik Bautista Santibanez",
+          role: "Mobile & Web Developer",
+          home: "\(residency ?? .default)"\
+          \(currentLocation.flatMap { ",\n  location: \"Currently in \($0)\"" } ?? "")
+        }
+        """
       }
-      """
-    ) {
+    } content: {
       EmptyHTML()
     }
   }
@@ -156,13 +104,22 @@ private struct UserView: HTML {
 
 private struct PostsView: HTML {
   var body: some HTML {
-    // TODO: Allow changing `fetch(.all)` based on filter.
-    SectionView(
-      codeTag: "DevLogs",
-      codeHeader: """
-      var logs: [DevLog] = await fetch(.all)
-      """
-    ) {
+    SectionView(id: "dev-logs") { lang in
+      switch lang {
+        case .swift: 
+        """
+        let logs: [DevLog] = await fetch(.all)
+        """
+        case .typescript: 
+        """
+        const logs = await fetch(Filter.All)
+        """
+        case .rust: 
+        """
+        let logs = fetch(Filter::All).await
+        """
+      }
+    } content: {
       for (num, post) in Post.allCases.enumerated().reversed() {
         PostView(number: num, post: post)
       }
@@ -290,8 +247,7 @@ private struct PostsView: HTML {
   struct PostLinkView: HTML {
     let link: Post.Link
 
-    @HTMLBuilder
-    var body: some HTML {
+    @HTMLBuilder var body: some HTML {
       a(
         .href(self.link.href),
         .target(.blank),
diff --git a/Sources/Pages/Models/CodeLang.swift b/Sources/Pages/Models/CodeLang.swift
diff --git a/Sources/Pages/NotFoundPage.swift b/Sources/Pages/NotFoundPage.swift

Original file line number	Diff line number	Diff line change
`@@ -26,4 +26,4 @@ public extension DependencyValues {`
`26`	`26`	`get { self[EnvironmentKey.self] }`
`27`	`27`	`set { self[EnvironmentKey.self] = newValue }`
`28`	`28`	`}`
`29`		`-}`
	`29`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@ extension Page {`
`77`	`77`	`}`
`78`	`78`	`/// Xcode Styling`
`79`	`79`	`style {`
`80`		- ".xml .hljs-meta{color:#6C7986}.hljs-comment,.hljs-quote{color:#6C7986}.hljs-tag,.hljs-attribute,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-name{color:#FC5FA3}.hljs-variable,.hljs-template-variable{color:#FC5FA3}.hljs-code,.hljs-string,.hljs-meta-string{color:#FC6A5D}.hljs-regexp,.hljs-link{color:#5482FF}.hljs-title,.hljs-symbol,.hljs-bullet,.hljs-number{color:#41A1C0}.hljs-section,.hljs-meta{color:#FC5FA3}.hljs-class .hljs-title,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-params{color:#D0A8FF}.hljs-attr{color:#BF8555}.hljs-subst{color:#FFF}.hljs-formula{font-style:italic}.hljs-selector-id,.hljs-selector-class{color:#9b703f}.hljs-doctag,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}"
	`80`	+ ".xml .hljs-meta{color:#6C7986}.hljs-comment,.hljs-quote{color:#6C7986}.hljs-tag,.hljs-attribute,.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-name{color:#FC5FA3}.hljs-template-variable{color:#FC5FA3}.hljs-code,.hljs-string,.hljs-meta-string{color:#FC6A5D}.hljs-regexp,.hljs-link{color:#5482FF}.hljs-title,.hljs-symbol,.hljs-bullet,.hljs-number{color:#41A1C0}.hljs-section,.hljs-meta{color:#FC5FA3}.hljs-class .hljs-title,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-params{color:#D0A8FF}.hljs-attr{color:#BF8555}.hljs-subst{color:#FFF}.hljs-formula{font-style:italic}.hljs-selector-id,.hljs-selector-class{color:#9b703f}.hljs-doctag,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}"
`81`	`81`	`}`
`82`	`82`	`script(`
`83`	`83`	`.src("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"),`