fix nav style

RyanBrewer317 · Oct 21, 2024 · 8ee2903 · 8ee2903
1 parent 415851f
commit 8ee2903
Show file tree

Hide file tree

Showing 19 changed files with 60 additions and 61 deletions.
diff --git a/arctic_build/__pages/demos/index.html b/arctic_build/__pages/demos/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<div><nav id="nav" onload="document.body.style.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Demos
+<div><nav id="nav"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Demos
 </span></h1><p><span>This website is made entirely with Arctic!
 You can find the source code <a href="https://github.com/RyanBrewer317/arctic-framework-org/"><span>here</span></a>.
 You can find the source code for this specific demos page <a href="https://github.com/RyanBrewer317/arctic-framework-org/blob/main/src/demos.gleam"><span>here</span></a>.

diff --git a/arctic_build/__pages/index.html b/arctic_build/__pages/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html><head></head><body><nav id="nav" onload="document.body.style.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
+<html><head></head><body><nav id="nav"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
 </span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
 " async="true"></div><h3><span>Performance on Ice
 </span></h3><p><span>Arctic is a friendly web framework for the <a href="https://gleam.run"><span>Gleam</span></a> programming language.

diff --git a/arctic_build/index.html b/arctic_build/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html><head><title>Arctic</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Arctic is a high-performance frontend framework for your Lustre workloads."><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><script>hljs.highlightAll();</script><link rel="stylesheet" href="/style.css"></head><body><div><div id="arctic-app"><html><head></head><body><nav id="nav" onload="document.body.style.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
+<html><head><title>Arctic</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Arctic is a high-performance frontend framework for your Lustre workloads."><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><script>hljs.highlightAll();</script><link rel="stylesheet" href="/style.css"></head><body onload="document.body.style.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div><div id="arctic-app"><html><head></head><body><nav id="nav"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
 </span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
 " async="true"></div><h3><span>Performance on Ice
 </span></h3><p><span>Arctic is a friendly web framework for the <a href="https://gleam.run"><span>Gleam</span></a> programming language.

diff --git a/dist/__pages/demos/index.html b/dist/__pages/demos/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<div><nav id="nav" onload="document.body.style.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Demos
+<div><nav id="nav"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Demos
 </span></h1><p><span>This website is made entirely with Arctic!
 You can find the source code <a href="https://github.com/RyanBrewer317/arctic-framework-org/"><span>here</span></a>.
 You can find the source code for this specific demos page <a href="https://github.com/RyanBrewer317/arctic-framework-org/blob/main/src/demos.gleam"><span>here</span></a>.

diff --git a/dist/__pages/index.html b/dist/__pages/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html><head></head><body><nav id="nav" onload="document.body.style.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
+<html><head></head><body><nav id="nav"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
 </span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
 " async="true"></div><h3><span>Performance on Ice
 </span></h3><p><span>Arctic is a friendly web framework for the <a href="https://gleam.run"><span>Gleam</span></a> programming language.

diff --git a/dist/index.html b/dist/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html><head><title>Arctic</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Arctic is a high-performance frontend framework for your Lustre workloads."><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><script>hljs.highlightAll();</script><link rel="stylesheet" href="/style.css"></head><body><div><div id="arctic-app"><html><head></head><body><nav id="nav" onload="document.body.style.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
+<html><head><title>Arctic</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Arctic is a high-performance frontend framework for your Lustre workloads."><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><script>hljs.highlightAll();</script><link rel="stylesheet" href="/style.css"></head><body onload="document.body.style.paddingTop = &#39;&#39; + document.getElementById(&#39;nav&#39;).clientHeight + &#39;px&#39;;"><div><div id="arctic-app"><html><head></head><body><nav id="nav"><div id="nav-dropdown" onclick="document.getElementById(&#39;nav&#39;).classList.toggle(&#39;dropdown&#39;);">☰</div><a href="/" id="nav-home">Arctic</a><a href="/guides/quickstart" id="nav-guides">Guides</a><a href="/demos" id="nav-demos">Demos</a><a href="https://hexdocs.pm/arctic/" id="nav-docs">Docs</a></nav><h1><span>Arctic
 </span></h1><div class="img-container"><img src="/banner.jpg" alt="An icy horizon in the Arctic.
 " async="true"></div><h3><span>Performance on Ice
 </span></h3><p><span>Arctic is a friendly web framework for the <a href="https://gleam.run"><span>Gleam</span></a> programming language.

diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/arctic_framework_org.cache b/dist/priv/arctic_framework_org/_gleam_artefacts/arctic_framework_org.cache
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/arctic_framework_org.cache_meta b/dist/priv/arctic_framework_org/_gleam_artefacts/arctic_framework_org.cache_meta
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/demos.cache b/dist/priv/arctic_framework_org/_gleam_artefacts/demos.cache
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/navbar.cache b/dist/priv/arctic_framework_org/_gleam_artefacts/navbar.cache
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/navbar.cache_meta b/dist/priv/arctic_framework_org/_gleam_artefacts/navbar.cache_meta
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/render_guide.cache b/dist/priv/arctic_framework_org/_gleam_artefacts/render_guide.cache
diff --git a/dist/priv/arctic_framework_org/_gleam_artefacts/render_guide.cache_meta b/dist/priv/arctic_framework_org/_gleam_artefacts/render_guide.cache_meta
diff --git a/dist/priv/arctic_framework_org/arctic_framework_org.mjs b/dist/priv/arctic_framework_org/arctic_framework_org.mjs
@@ -1,6 +1,7 @@
 import * as $build from "../arctic/arctic/build.mjs";
 import * as $collection from "../arctic/arctic/collection.mjs";
 import * as $config from "../arctic/arctic/config.mjs";
+import * as $attribute from "../lustre/lustre/attribute.mjs";
 import * as $html from "../lustre/lustre/element/html.mjs";
 import * as $simplifile from "../simplifile/simplifile.mjs";
 import * as $demos from "./demos.mjs";
@@ -26,7 +27,7 @@ export function main() {
           throw makeError(
             "assignment_no_match",
             "arctic_framework_org",
-            20,
+            21,
             "",
             "Assignment pattern did not match",
             { value: $ }
@@ -38,7 +39,7 @@ export function main() {
           throw makeError(
             "assignment_no_match",
             "arctic_framework_org",
-            21,
+            22,
             "",
             "Assignment pattern did not match",
             { value: $1 }
@@ -61,7 +62,18 @@ export function main() {
       (body) => {
         return $html.html(
           toList([]),
-          toList([$head.head(), $html.body(toList([]), toList([body]))]),
+          toList([
+            $head.head(),
+            $html.body(
+              toList([
+                $attribute.attribute(
+                  "onload",
+                  "document.body.style.paddingTop = '' + document.getElementById('nav').clientHeight + 'px';",
+                ),
+              ]),
+              toList([body]),
+            ),
+          ]),
         );
       },
     );

diff --git a/dist/priv/arctic_framework_org/navbar.mjs b/dist/priv/arctic_framework_org/navbar.mjs
@@ -7,13 +7,7 @@ import { toList } from "./gleam.mjs";
 
 export function navbar() {
   return $html.nav(
-    toList([
-      $attribute.id("nav"),
-      attribute(
-        "onload",
-        "document.body.style.paddingTop = '' + document.getElementById('nav').clientHeight + 'px';",
-      ),
-    ]),
+    toList([$attribute.id("nav")]),
     toList([
       $html.div(
         toList([

diff --git a/dist/priv/arctic_framework_org/render_guide.mjs b/dist/priv/arctic_framework_org/render_guide.mjs
@@ -5,11 +5,5 @@ import { toList, prepend as listPrepend } from "./gleam.mjs";
 import * as $navbar from "./navbar.mjs";
 
 export function render(page) {
-  return $html.html(
-    toList([]),
-    toList([
-      $html.head(toList([]), toList([])),
-      $html.body(toList([]), listPrepend($navbar.navbar(), page.body)),
-    ]),
-  );
+  return $html.div(toList([]), listPrepend($navbar.navbar(), page.body));
 }
diff --git a/src/arctic_framework_org.gleam b/src/arctic_framework_org.gleam
@@ -3,6 +3,7 @@ import arctic/collection
 import arctic/config
 import demos
 import head
+import lustre/attribute
 import lustre/element/html
 import navbar
 import parser
@@ -27,7 +28,18 @@ pub fn main() {
     |> config.add_main_page("demos", demos.demos())
     |> config.add_collection(guides)
     |> config.add_spa_frame(fn(body) {
-      html.html([], [head.head(), html.body([], [body])])
+      html.html([], [
+        head.head(),
+        html.body(
+          [
+            attribute.attribute(
+              "onload",
+              "document.body.style.paddingTop = '' + document.getElementById('nav').clientHeight + 'px';",
+            ),
+          ],
+          [body],
+        ),
+      ])
     })
   build.build(cfg)
 }
diff --git a/src/navbar.gleam b/src/navbar.gleam
@@ -3,37 +3,27 @@ import lustre/element.{type Element, text}
 import lustre/element/html
 
 pub fn navbar() -> Element(a) {
-  html.nav(
-    [
-      attribute.id("nav"),
-      attribute(
-        "onload",
-        "document.body.style.paddingTop = '' + document.getElementById('nav').clientHeight + 'px';",
-      ),
-    ],
-    [
-      html.div(
-        [
-          attribute.id("nav-dropdown"),
-          attribute(
-            "onclick",
-            "document.getElementById('nav').classList.toggle('dropdown');",
-          ),
-        ],
-        [text("☰")],
-      ),
-      html.a([attribute.href("/"), attribute.id("nav-home")], [text("Arctic")]),
-      html.a(
-        [attribute.href("/guides/quickstart"), attribute.id("nav-guides")],
-        [text("Guides")],
-      ),
-      html.a([attribute.href("/demos"), attribute.id("nav-demos")], [
-        text("Demos"),
-      ]),
-      html.a(
-        [attribute.href("https://hexdocs.pm/arctic/"), attribute.id("nav-docs")],
-        [text("Docs")],
-      ),
-    ],
-  )
+  html.nav([attribute.id("nav")], [
+    html.div(
+      [
+        attribute.id("nav-dropdown"),
+        attribute(
+          "onclick",
+          "document.getElementById('nav').classList.toggle('dropdown');",
+        ),
+      ],
+      [text("☰")],
+    ),
+    html.a([attribute.href("/"), attribute.id("nav-home")], [text("Arctic")]),
+    html.a([attribute.href("/guides/quickstart"), attribute.id("nav-guides")], [
+      text("Guides"),
+    ]),
+    html.a([attribute.href("/demos"), attribute.id("nav-demos")], [
+      text("Demos"),
+    ]),
+    html.a(
+      [attribute.href("https://hexdocs.pm/arctic/"), attribute.id("nav-docs")],
+      [text("Docs")],
+    ),
+  ])
 }
diff --git a/src/render_guide.gleam b/src/render_guide.gleam
@@ -4,8 +4,5 @@ import lustre/element/html
 import navbar
 
 pub fn render(page: Page) -> Element(Nil) {
-  html.html([], [
-    html.head([], []),
-    html.body([], [navbar.navbar(), ..page.body]),
-  ])
+  html.div([], [navbar.navbar(), ..page.body])
 }