feat: improve 404 page

Author: erikbdev

Sources/Pages/Components/FooterView.swift

@@ -22,8 +22,8 @@ struct FooterView: HTML {
           "."
         }
       }
-      .inlineStyle("padding", "1rem 1.5rem")
       .containerStyling()
+      .inlineStyle("padding", "1rem 1.5rem")
     }
     .inlineStyle("text-align", "center")
     .wrappedStyling()

Sources/Pages/Components/HeaderView.swift

@@ -2,6 +2,17 @@ import Elementary
 
 struct HeaderView: HTML {
   var content: some HTML {
-    EmptyHTML()
+    header {
+      hgroup {
+        code { "erikb.dev()" }
+          .inlineStyle("font-size", "0.84em")
+          .inlineStyle("color", "#AAA")
+        // TODO: Add buttons to allow switching between code styling or plain text
+      }
+      .containerStyling()
+      .inlineStyle("display", "flex")
+      .inlineStyle("padding", "0.75rem 1.5rem")
+    }
+    .wrappedStyling()
   }
 }

Sources/Pages/Components/Spacer.swift

@@ -4,10 +4,10 @@ struct Spacer: HTML {
   var content: some HTML {
     div {
       div {}
+        .containerStyling()
         .inlineStyle("height", "0.85rem")
         .inlineStyle("background", "repeating-linear-gradient(45deg, transparent 0% 35%, #333 35% 50%, transparent 50% 85%, #333 85% 100%)")
         .inlineStyle("background-size", "5px 5px")
-        .containerStyling()
     }
     .wrappedStyling()
   }

Sources/Pages/Components/Stylings.swift

@@ -6,7 +6,7 @@ extension HTML where Tag: HTMLTrait.Attributes.Global {
   }
 
   func containerStyling() -> _HTMLInlineStyle<Self> {
-    self.inlineStyle("max-width", "40rem", media: .minWidth(688))
+    self.inlineStyle("max-width", "40rem", media: .minWidth(712))
       .inlineStyle("margin-right", "auto")
       .inlineStyle("margin-left", "auto")
       .inlineStyle("border-left", "1px solid #303030", media: .minWidth(640))

Sources/Pages/Models/Post+AllCases.swift

@@ -62,7 +62,7 @@ extension Post: CaseIterable {
         links: [
           Post.Link(
             title: "GitHub",
-            href: "https://github.com/errorerrorerror/erikbautista.dev",
+            href: "https://github.com/erikbdev/erikbautista.dev",
             role: .primary
           ),
         ]

Sources/Pages/NotFoundPage.swift

@@ -18,29 +18,45 @@ public struct NotFoundPage: Page {
         section {
           div {
             div {
-              h2 { "404 Error | Page Not Found" }
-              .inlineStyle("margin-bottom", "0.5rem")
-              pre {
-                code(.class("hljs language-swift")) {
-                  """
-                  throw Error.pageNotFound
-                  """
-                }
-              }
+              Heading()
             }
           }
           .containerStyling()
           .inlineStyle("display", "flex")
           .inlineStyle("flex-direction", "column")
           .inlineStyle("justify-content", "center")
           .inlineStyle("align-items", "center")
-          .inlineStyle("padding", "120px 16px")
-          .inlineStyle("gap", "1.5rem")
+          .inlineStyle("padding", "160px 32px")
+          .inlineStyle("background-image", "radial-gradient(#2A2A2A 1px, transparent 0)")
+          .inlineStyle("background-size", "12px 12px")
         }
         .wrappedStyling()
       }
       Spacer()
       FooterView()
     }
   }
+
+  private struct Heading: HTML {
+    var content: some HTML {
+      pre {
+        code { "// 404 ERROR" }
+          .inlineStyle("font-size", "0.9em")
+          .inlineStyle("color", "#808080")
+          .inlineStyle("margin-bottom", "0.125rem")
+      }
+
+      h2 { "Page Not Found" }
+        .inlineStyle("margin-bottom", "0.5rem")
+
+      pre {
+        code(.class("hljs language-swift")) {
+          """
+          throw Error.pageNotFound
+          """
+        }
+        .inlineStyle("font-size", "0.9em")
+      }
+    }
+  }
 }