Add navbar and auto-fetch Pages url

.github/workflows/build_docs.yml

@@ -36,7 +36,14 @@ jobs:
       github.event_name == 'workflow_dispatch' ||
       github.ref == format('refs/heads/{0}', github.event.repository.default_branch)
     
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    permissions:
+      pages: read
+
     outputs:
+      pages-url: ${{ steps.get-url.outputs.pages-url }}
       matrix: ${{ steps.list-langs.outputs.matrix }}
       release: ${{ steps.check-release.outputs.release }}
 
@@ -50,6 +57,13 @@ jobs:
       - name: Install docgen from source
         run: pip install . hatch
       
+      - name: Get Pages url
+        id: get-url
+        run: |
+          url=$(gh api "repos/$GITHUB_REPOSITORY/pages" --jq '.html_url')
+          echo "pages-url=$url" >> "$GITHUB_OUTPUT"
+          echo "GITHUB_PAGES_URL=$url" >> "$GITHUB_ENV"
+
       - name: List book languages
         id: list-langs
         run: echo "matrix=$($HEXDOC --list-langs)" >> "$GITHUB_OUTPUT"
@@ -98,6 +112,9 @@ jobs:
     needs: build
     continue-on-error: true
 
+    env:
+      GITHUB_PAGES_URL: ${{ needs.build.outputs.pages-url }}
+
     strategy:
       fail-fast: false
       matrix:

doc/properties.toml

@@ -1,6 +1,6 @@
 modid = "hexcasting"
 book = "hexcasting:thehexbook"
-url = "https://gamma-delta.github.io/HexMod"
+fallback_url = "https://gamma-delta.github.io/HexMod"
 default_lang = "en_us"
 
 resource_dirs = [  # top takes priority

doc/src/hexdoc/_templates/components/navbar.html.jinja

@@ -0,0 +1,56 @@
+<nav class="navbar navbar-default navbar-static-top">
+  <div class="container">
+    <!-- toggle and name -->
+    <div class="navbar-header">
+      <button
+        type="button"
+        class="navbar-toggle collapsed"
+        data-toggle="collapse"
+        data-target="#navbar-collapse"
+        aria-expanded="false"
+      >
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <div class="navbar-brand">{{ title }}</div>
+    </div>
+
+    <!-- content -->
+    <div class="collapse navbar-collapse" id="navbar-collapse">
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown">
+          <a
+            href=""
+            class="dropdown-toggle"
+            data-toggle="dropdown"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >{{ version }} <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+          </ul>
+        </li>
+        <li class="dropdown">
+          <a
+            href=""
+            class="dropdown-toggle"
+            data-toggle="dropdown"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >{{ lang }} <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>

doc/src/hexdoc/_templates/main.css

@@ -73,6 +73,7 @@ p.todo-note {
 
 .spoilered {
   filter: blur(1ex);
+  transition: filter 0.04s linear;
   -moz-transition: filter 0.04s linear;
 }
 
@@ -100,6 +101,10 @@ canvas.spell-viz {
   --dark-mode: 0;
 }
 
+.navbar-brand {
+  pointer-events: none;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     background-color: #201a20;
@@ -110,6 +115,44 @@ canvas.spell-viz {
     background-color: #323;
   }
 
+  .navbar-default {
+    background-color: #2b1f2b;
+    border-color: #080808;
+  }
+
+  /* please help, i'm not a frontend dev, i'm shocked this works at all */
+
+  .navbar-default .navbar-brand,
+  .navbar-default .navbar-nav > li > a,
+  .navbar-default .navbar-nav > li > a:focus {
+    color: #aaa;
+  }
+
+  .navbar-default .navbar-nav > li > a:hover {
+    color: #ccc;
+  }
+
+  .navbar-default .navbar-nav > .open > a,
+  .navbar-default .navbar-nav > .open > a:focus,
+  .navbar-default .navbar-nav > .open > a:hover {
+    color: #bbb;
+    background-color: #1e131e;
+  }
+
+  .dropdown-menu {
+    background-color: #402a40;
+  }
+
+  .dropdown-menu > li > a {
+    color: #bbb;
+  }
+
+  .dropdown-menu > li > a:focus,
+  .dropdown-menu > li > a:hover {
+    color: #ccc;
+    background-color: #553455;
+  }
+
   canvas.spell-viz {
     /* hack */
     --dark-mode: 1;

doc/src/hexdoc/_templates/main.html.jinja

@@ -11,8 +11,8 @@
 
     <meta property="og:type" content="website" />
     <meta property="og:title" content="{{ title }}" />
-    <meta property="og:image" content="{{ url }}/{{ icon_href }}" />
-    <meta property="og:url" content="{{ url }}" />
+    <meta property="og:image" content="{{ page_url }}/{{ icon_href }}" />
+    <meta property="og:url" content="{{ page_url }}" />
     <meta property="og:description" content="{{ description }}" />
     <meta property="og:site_name" content="{{ mod_name }}" />
 
@@ -20,9 +20,14 @@
       integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
 
+    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
+      integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"
+      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+
     <style>
       {% filter indent(6) %}
-      {%+ include "main.css.jinja" %}
+      {%+ include_raw "main.css" %}
       {% endfilter %}
     </style>
 
@@ -43,6 +48,7 @@
   </head>
 
   <body>
+    {% include "components/navbar.html.jinja" +%}
     {% include "components/welcome.html.jinja" +%}
     {% include "book.html.jinja" +%}
   </body>

doc/src/hexdoc/hexdoc.py

@@ -234,7 +234,7 @@ def main(args: Args | None = None) -> None:
                     parts += (lang,)
 
                 output_dir = args.output_dir / Path(*parts)
-                url = "/".join((props.url,) + parts)
+                page_url = "/".join((props.url,) + parts)
 
                 logger.info(f"Rendering {output_dir}")
                 docs = strip_empty_lines(
@@ -242,7 +242,7 @@ def main(args: Args | None = None) -> None:
                         **props.template.args,
                         book=book,
                         props=props,
-                        url=url,
+                        page_url=page_url,
                         version=version,
                         lang=lang,
                         is_bleeding_edge=version == "latest",

doc/src/hexdoc/utils/properties.py

@@ -1,12 +1,14 @@
 from __future__ import annotations
 
+import os
 import re
+from functools import cached_property
 from pathlib import Path
 from typing import Annotated, Any, Self
 
-from pydantic import AfterValidator, Field, HttpUrl, field_validator
+from pydantic import AfterValidator, Field, HttpUrl, TypeAdapter, field_validator
 
-from .model import StripHiddenModel
+from .model import DEFAULT_CONFIG, StripHiddenModel
 from .resource import ResourceDir, ResourceLocation
 from .toml_placeholders import load_toml_with_placeholders
 
@@ -43,7 +45,7 @@ class TemplateProps(StripHiddenModel):
 class Properties(StripHiddenModel):
     modid: str
     book: ResourceLocation
-    url: NoTrailingSlashHttpUrl
+    fallback_url: NoTrailingSlashHttpUrl
     default_lang: str
     is_0_black: bool = Field(default=False)
     """If true, the style `$(0)` changes the text color to black; otherwise it resets
@@ -72,3 +74,10 @@ class Properties(StripHiddenModel):
     def get_asset_url(self, id: ResourceLocation) -> str:
         base_url = self.base_asset_urls[id.namespace]
         return f"{base_url}/{id.file_path_stub('assets').as_posix()}"
+
+    @cached_property
+    def url(self):
+        github_pages_url = os.getenv("GITHUB_PAGES_URL", self.fallback_url)
+
+        ta = TypeAdapter(NoTrailingSlashHttpUrl, config=DEFAULT_CONFIG)
+        return ta.validate_python(github_pages_url)