mkdocs: header logo links to parent website

custom header template

- header logo links to practical.li website
- header title links to front page of book

Author: practicalli-johnny

mkdocs.yml

@@ -4,6 +4,7 @@ site_name: Practicalli Clojure Web Services
 site_url: https://practical.li/clojure-web-services
 site_description: Practical guide to Clojure Web Services and APIs
 site_author: Practicalli
+site_org: https://practical.li
 copyright: Copyright &copy 2023 Practicali <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
 repo_url: https://github.com/practicalli/clojure-web-services/
 edit_uri: https://github.com/practicalli/clojure-web-services/edit/main/docs/

overrides/partials/header.html

@@ -0,0 +1,78 @@
+<!-- Determine classes -->
+{% set class = "md-header" %} {% if "navigation.tabs.sticky" in features %} {%
+set class = class ~ " md-header--shadow md-header--lifted" %} {% elif
+"navigation.tabs" not in features %} {% set class = class ~ " md-header--shadow"
+%} {% endif %}
+
+<!-- Header -->
+<header class="{{ class }}" data-md-component="header">
+  <nav class="md-header__inner md-grid" aria-label="{{ lang.t('header') }}">
+    <!-- Link to home -->
+
+    <!-- Button to open drawer -->
+    <label class="md-header__button md-icon" for="__drawer">
+      {% set icon = config.theme.icon.menu or "material/menu" %} {% include
+      ".icons/" ~ icon ~ ".svg" %}
+    </label>
+
+    <!-- Custom: Link to Practical.li -->
+    <a
+      href="{{ config.site_org | url }}"
+      title="{{ config.site_org | e }}"
+      class="md-header__button md-logo"
+      aria-label="{{ config.site_org }}"
+      data-md-component="logo"
+      target="_blank"
+    >
+      {% include "partials/logo.html" %}
+    </a>
+
+    <!-- Header title -->
+    <div class="md-header__title" data-md-component="header-title">
+      <div class="md-header__ellipsis">
+        <div class="md-header__topic">
+          <a
+            href="{{ config.site_url | url }}"
+            title="{{ config.site_name | e }}"
+            aria-label="{{ config.site_name }}"
+          >
+            <span class="md-ellipsis"> {{ config.site_name }} </span>
+          </a>
+        </div>
+        <div class="md-header__topic" data-md-component="header-topic">
+          <span class="md-ellipsis">
+            {% if page.meta and page.meta.title %} {{ page.meta.title }} {% else
+            %} {{ page.title }} {% endif %}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Color palette toggle -->
+    {% if config.theme.palette %} {% if not config.theme.palette is mapping %}
+    {% include "partials/palette.html" %} {% endif %} {% endif %}
+
+    <!-- Site language selector -->
+    {% if config.extra.alternate %} {% include "partials/alternate.html" %} {%
+    endif %}
+
+    <!-- Button to open search modal -->
+    {% if "material/search" in config.plugins %}
+    <label class="md-header__button md-icon" for="__search">
+      {% set icon = config.theme.icon.search or "material/magnify" %} {% include
+      ".icons/" ~ icon ~ ".svg" %}
+    </label>
+
+    <!-- Search interface -->
+    {% include "partials/search.html" %} {% endif %}
+
+    <!-- Repository information -->
+    {% if config.repo_url %}
+    <div class="md-header__source">{% include "partials/source.html" %}</div>
+    {% endif %}
+  </nav>
+
+  <!-- Navigation tabs (sticky) -->
+  {% if "navigation.tabs.sticky" in features %} {% if "navigation.tabs" in
+  features %} {% include "partials/tabs.html" %} {% endif %} {% endif %}
+</header>

overrides/partials/palette.html

@@ -0,0 +1,36 @@
+<!-- Added to support header.html partial -->
+<!-- - no changes applied -->
+
+<!-- Color palette toggle -->
+<form class="md-header__option" data-md-component="palette">
+  {% for option in config.theme.palette %}
+    {% set scheme  = option.scheme  | d("default", true) %}
+    {% set primary = option.primary | d("indigo", true) %}
+    {% set accent  = option.accent  | d("indigo", true) %}
+    <input
+      class="md-option"
+      data-md-color-media="{{ option.media }}"
+      data-md-color-scheme="{{ scheme | replace(' ', '-') }}"
+      data-md-color-primary="{{ primary | replace(' ', '-') }}"
+      data-md-color-accent="{{ accent | replace(' ', '-') }}"
+      {% if option.toggle %}
+        aria-label="{{ option.toggle.name }}"
+      {% else  %}
+        aria-hidden="true"
+      {% endif %}
+      type="radio"
+      name="__palette"
+      id="__palette_{{ loop.index }}"
+    />
+    {% if option.toggle %}
+      <label
+        class="md-header__button md-icon"
+        title="{{ option.toggle.name }}"
+        for="__palette_{{ loop.index0 or loop.length }}"
+        hidden
+      >
+        {% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
+      </label>
+    {% endif %}
+  {% endfor %}
+</form>