Everywhere: Create basic test page

2024-11-11 18:18:14 +01:00
parent b47d61aacd
commit 94cef15048
13 changed files with 762 additions and 28 deletions
@@ -0,0 +1,63 @@
+import Elementary
+
+extension MainLayout: Sendable where Body: Sendable {}
+struct MainLayout<Body: HTML>: HTMLDocument {
+    var title: String
+    @HTMLBuilder var pageContent: Body  // This var name can't be changed!
+
+    // https://www.srihash.org/
+    var head: some HTML {
+        meta(.charset(.utf8))
+        meta(.name(.viewport), .content("width=device-width, initial-scale=1.0"))
+
+        // ---------------------------------
+        // CSS includes
+
+        link(
+            .rel(.stylesheet),
+            .href("https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"),
+            .integrity("sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"),
+            .crossorigin(.anonymous))
+        link(.rel(.stylesheet), .href("/style.css"))
+
+        style {
+            """
+            body {
+                padding-top: 56px;
+            }
+            """
+        }
+    }
+
+    var body: some HTML {
+        // ---------------------------------
+        // Header
+
+        header {
+            NavMenu()
+        }
+
+        // ---------------------------------
+        // Body
+
+        main {
+            div(.class("cotainer mt-4")) {
+                div(.class("content px-4 pb-4")) {
+                    pageContent
+                }
+            }
+        }
+
+        // ---------------------------------
+        // JS includes
+
+        script(
+            .src(
+                "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"),
+            .integrity("sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"),
+            .crossorigin(.anonymous)
+        ) {}
+        script(.src("/js/site.js")) {}
+    }
+
+}
@@ -0,0 +1,34 @@
+import Elementary
+
+struct NavMenu: HTML {
+    var content: some HTML {
+        nav(.class("navbar navbar-expand-lg navbar-light bg-light fixed-top")) {
+            div(.class("container-fluid")) {
+                a(.class("navbar-brand"), .href("#")) { "Logo" }
+                button(
+                    .class("navbar-toggler"), .type(.button),
+                    .data("bs-toggle", value: "collapse"),
+                    .data("bs-target", value: "#navbarNav")
+                ) {
+                    span(.class("navbar-toggler-icon")) {}
+                }
+                div(.class("collapse navbar-collapse"), .id("navbarNav")) {
+                    ul(.class("navbar-nav me-auto mb-2 mb-lg-0")) {
+                        li(.class("nav-item")) {
+                            a(.class("nav-link active"), .href("#")) { "Home" }
+                        }
+                        li(.class("nav-item")) {
+                            a(.class("nav-link"), .href("#")) { "About" }
+                        }
+                        li(.class("nav-item")) {
+                            a(.class("nav-link"), .href("#")) { "Services" }
+                        }
+                        li(.class("nav-item")) {
+                            a(.class("nav-link"), .href("#")) { "Contact" }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}