feat: theme updates with **dynamic banner support**

hugo.yaml

@@ -4,6 +4,12 @@ language: en-GB
 
 theme: nostyleplease
 
+markup:
+  highlight:
+    codeFences: true
+    noClasses: true
+    style: nord
+
 params:
   theme_config:
     appearance: dark

static/manifest.json

@@ -15,7 +15,7 @@
       "purpose": "maskable"
     }
   ],
-  "theme_color": "#252525",
-  "background_color": "#252525",
+  "theme_color": "#525252",
+  "background_color": "#525252",
   "display": "standalone"
 }

themes/nostyleplease/assets/css/main.scss

@@ -54,7 +54,7 @@
 }
 
 @mixin dark-appearance {
-  @include theme(#000000, #f1fffa, #000000, #3aeb9d, #b7f8c6, #b1d2b8);
+  @include theme(#000000, #f1fffa, #000000, #93b1b2, #c8e0f8, #b1b8d2);
 }
 
 @mixin light-appearance {
@@ -88,13 +88,11 @@ body {
 header {
     display: flex;
     align-items: center;
-    width: min-content;
+    width: 100%;
 }
 
-header > img {
-    max-width: 2.5rem;
-    max-height: 2.5rem;
-    padding-right: 1rem;
+#banner {
+    padding-bottom: 2rem;
 }
 
 h2, h3, h4, h5, h6 { margin-top: 1.5rem; }
@@ -129,6 +127,7 @@ table, th, td {
 }
 
 code {
+  font-size: 15px;
   text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
@@ -194,5 +193,7 @@ details[open] summary {
 }
 
 .site-footer {
+    display: flex;
+    justify-content: center;
     margin-top: 2em;
 }

themes/nostyleplease/layouts/index.html

@@ -1,12 +1,36 @@
 {{ define "main" }}
 
 <header>
-    <img src="/images/favicon.svg" />
-    <h1>{{ $.Site.Title }}</h1>
+    <img id="banner" />
     {{- if $.Site.Params.theme_config.show_description -}}
         <p>{{ $.Site.Params.description }}</p>
     {{- end -}}
 </header>
+
+{{ if hugo.IsProduction }}
+<!-- prod implementation -->
+<script>
+  fetch("/banners/")
+    .then((response) => response.text())
+    .then((html) => {
+      const parser = new DOMParser()
+      const doc = parser.parseFromString(html, "text/html")
+      const links = Array.from(doc.querySelectorAll('a[href$=".png"]'))
+
+      if (links.length > 0) {
+        const randomIdx = Math.floor(Math.random() * links.length)
+        const bannerPath = "/banners/" + links[randomIdx].getAttribute("href")
+        document.getElementById("banner").src = bannerPath
+      }
+    })
+</script>
+{{ else }}
+<!-- dev fallback -->
+<script>
+  document.getElementById("banner").src = "/images/banner-placeholder.png"
+</script>
+{{ end }}
+
 {{ .Content }}
 {{ partial "menu_item.html" (dict "context" . "collection" $.Site.Data.menu.entries) }}
 

themes/nostyleplease/layouts/partials/footer.html

@@ -1,3 +1,3 @@
 <footer class="site-footer">
-    <p>{{ now.Format "2006" }} / <a href="http://golfed6fzytoktol4de4o4nerap3xuykhfm5makfzscib65df3khnpyd.onion/" target="_blank" rel="noopener noreferrer">.onion</a> / <a href="/contact.txt" target="_blank" rel="noopener noreferrer">contact.txt</a> / <a href="https://umbrella.haus" target="_blank" rel="noopener noreferrer">umbrella.haus</a></p>
+    <p><a href="http://golfed6fzytoktol4de4o4nerap3xuykhfm5makfzscib65df3khnpyd.onion/" target="_blank" rel="noopener noreferrer">.onion</a> // <a href="/contact.txt" target="_blank" rel="noopener noreferrer">contact.txt</a> // <a href="https://umbrella.haus" target="_blank" rel="noopener noreferrer">umbrella.haus</a></p>
 </footer>