Update website look/feel

AGENTS.md

@@ -0,0 +1,3 @@
+- Commit after each change.
+- Use conventional commit syntax. Include a pargraph in the commit message dsecribing in detail what you did.
+- Always use Playwright to check your changes.

hugo.toml

@@ -18,6 +18,7 @@ enableRobotsTXT = true
   geekdocLogo = "bee-left-to-right-512x512.png"
   geekdocPrivacyPolicy = "/privacy.html"
   geekdocTagsToMenu = false
+  geekdocDarkModeToggle = false
 
 # Needed for mermaid shortcodes
 [markup]

layouts/index.html

@@ -0,0 +1,5 @@
+{{ define "main" }}
+  <article class="gdoc-markdown gdoc-markdown__align--left fb-home-article">
+    {{ partial "utils/content" . }}
+  </article>
+{{ end }}

layouts/partials/consent.html

@@ -1,36 +1,3 @@
-<style>
-    .cookie-consent-banner {
-        display: none;
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background-color: #f8f9fa;
-        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
-        color: black;
-        padding: 15px;
-        font-size: 14px;
-        text-align: center;
-        z-index: 1000;
-    }
-    #btn-customize {
-        position: absolute;
-        left: -9999px;
-    }
-    #consent-options {
-        display: none;
-        margin: 10px 0 0 35px;
-    }
-
-    #btn-customize:checked ~ #consent-options {
-        display: block;
-    }
-    .customize-link {
-        color: -webkit-link;
-        cursor: pointer;
-        text-decoration: underline;
-    }
-</style>
 <div id="cookie-consent-banner" class="cookie-consent-banner">
     <h3>Cookie settings</h3>
     <p>

layouts/partials/head/custom.html

@@ -1,38 +1,106 @@
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preconnect" href="https://www.googletagmanager.com">
+<link rel="dns-prefetch" href="//www.google-analytics.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 
+<script>
+    (function() {
+        function playgroundTarget(id, playUrl) {
+            return playUrl || ('/play#embed-' + id);
+        }
 
-<!-- Google tag (gtag.js) -->
+        window.fizzbeeOpenPlayground = function(event, id, content, playUrl) {
+            if (event) {
+                event.preventDefault();
+            }
 
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-NJLJ97K6Q9"></script>
-<script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-
-    if(localStorage.getItem('consentMode') === null){
-        gtag('consent', 'default', {
-            'ad_storage': 'denied',
-            'ad_user_data': 'denied',
-            'ad_personalization': 'denied',
-            'analytics_storage': 'denied',
-            'functionality_storage': 'denied',
-            'personalization_storage': 'denied',
-            'security_storage': 'denied',
-        });
-    } else {
-        gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
-    }
-
-    gtag('js', new Date());
-
-    // gtag('config', 'G-NJLJ97K6Q9');
-    gtag('config', 'GTM-5MZ732X7');
+            try {
+                sessionStorage.setItem('fizzbee-embed-' + id, content);
+            } catch (error) {
+                console.error('Unable to save playground snippet.', error);
+            }
+
+            window.open(playgroundTarget(id, playUrl), '_blank');
+            return false;
+        };
+
+        window.fizzbeeOpenPlaygroundFromElement = function(event, id, codeElementId, playUrl) {
+            var codeElement = document.getElementById(codeElementId);
+            var content = codeElement ? codeElement.textContent : '';
+            return window.fizzbeeOpenPlayground(event, id, content, playUrl);
+        };
+    })();
 </script>
 
-<!-- Google Tag Manager -->
-<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-5MZ732X7');</script>
-<!-- End Google Tag Manager -->
+
+<script>
+    (function() {
+        window.dataLayer = window.dataLayer || [];
+        window.gtag = window.gtag || function gtag(){dataLayer.push(arguments);}
+
+        if(localStorage.getItem('consentMode') === null){
+            gtag('consent', 'default', {
+                'ad_storage': 'denied',
+                'ad_user_data': 'denied',
+                'ad_personalization': 'denied',
+                'analytics_storage': 'denied',
+                'functionality_storage': 'denied',
+                'personalization_storage': 'denied',
+                'security_storage': 'denied',
+            });
+        } else {
+            gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
+        }
+
+        function loadScript(src) {
+            var script = document.createElement('script');
+            script.async = true;
+            script.src = src;
+            document.head.appendChild(script);
+        }
+
+        function loadGoogleTagManager(w,d,s,l,i) {
+            w[l]=w[l]||[];
+            w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
+            var f=d.getElementsByTagName(s)[0],
+                j=d.createElement(s),
+                dl=l!='dataLayer'?'&l='+l:'';
+            j.async=true;
+            j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
+            f.parentNode.insertBefore(j,f);
+        }
+
+        function loadAnalytics() {
+            if (loadAnalytics.loaded) {
+                return;
+            }
+            loadAnalytics.loaded = true;
+
+            loadScript('https://www.googletagmanager.com/gtag/js?id=G-NJLJ97K6Q9');
+            gtag('js', new Date());
+            // gtag('config', 'G-NJLJ97K6Q9');
+            gtag('config', 'GTM-5MZ732X7');
+            loadGoogleTagManager(window,document,'script','dataLayer','GTM-5MZ732X7');
+        }
+
+        function scheduleAnalytics() {
+            setTimeout(function() {
+                if ('requestIdleCallback' in window) {
+                    requestIdleCallback(loadAnalytics, { timeout: 4000 });
+                } else {
+                    loadAnalytics();
+                }
+            }, 30000);
+        }
+
+        window.addEventListener('pointerdown', loadAnalytics, { once: true, passive: true });
+        window.addEventListener('keydown', loadAnalytics, { once: true });
+
+        if (document.readyState === 'complete') {
+            scheduleAnalytics();
+        } else {
+            window.addEventListener('load', scheduleAnalytics, { once: true });
+        }
+    })();
+</script>

layouts/partials/menu.html

@@ -0,0 +1,41 @@
+<nav>
+  {{ partial "search" . }}
+
+  <section class="gdoc-nav--main">
+    {{ if .Site.Params.geekdocMenuBundle }}
+      {{ partial "menu-bundle" (dict "current" . "source" .Site.Data.menu.main.main) }}
+    {{ else }}
+      {{ partial "menu-filetree" . }}
+    {{ end }}
+  </section>
+
+  {{ if and (in (slice "posts" "tags") .Section) (default false .Site.Params.geekdocTagsToMenu) }}
+    <section class="gdoc-nav--tags">
+      <h2>{{ i18n "nav_tags" }}</h2>
+      <ul class="gdoc-nav__list">
+        {{ $currentPage := .RelPermalink }}
+        {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
+          {{ with $.Site.GetPage (printf "/tags/%s" $name) }}
+            <li>
+              <a
+                class="gdoc-nav__entry{{- if eq $currentPage .RelPermalink }}
+                  {{- printf " is-active" }}
+                {{- end }}"
+                href="{{ .RelPermalink }}"
+              >
+                {{ partial "utils/title" . }}
+              </a>
+            </li>
+          {{ end }}
+        {{ end }}
+      </ul>
+    </section>
+  {{ end }}
+
+  {{ with .Site.Data.menu.more.more }}
+    <section class="gdoc-nav--more">
+      <h2>{{ i18n "nav_more" }}</h2>
+      {{ partial "menu-bundle" (dict "current" $ "source" .) }}
+    </section>
+  {{ end }}
+</nav>

layouts/partials/site-footer.html

@@ -1,46 +1,24 @@
-<footer class="gdoc-footer">
-  <nav class="container flex">
-    <div>
-      <section class="flex flex-wrap align-center">
-        <span class="gdoc-footer__item gdoc-footer__item--row">
-          {{ i18n "footer_build_with" | safeHTML }}
-        </span>
-        {{ with .Site.Params.geekdocLegalNotice }}
-          <span class="gdoc-footer__item gdoc-footer__item--row">
-            <a href="{{ . | relURL }}" class="gdoc-footer__link">
-              {{ i18n "footer_legal_notice" }}
-            </a>
-          </span>
-        {{ end }}
-        {{ with .Site.Params.geekdocPrivacyPolicy }}
-          <span class="gdoc-footer__item gdoc-footer__item--row">
-            <a href="{{ . | relURL }}" class="gdoc-footer__link">
-              {{ i18n "footer_privacy_policy" }}
-            </a>
-          </span>
-        {{ end }}
-      </section>
-      {{ with .Site.Params.geekdocContentLicense }}
-        <section class="flex flex-wrap align-center">
-          <span class="gdoc-footer__item">
-            {{ i18n "footer_content_license_prefix" }}
-            <a href="{{ .link }}" class="gdoc-footer__link no-wrap">{{ .name }}</a>
-          </span>
-        </section>
-      {{ end }}
+<footer class="gdoc-footer fb-site-footer">
+  <div class="container fb-footer-shell">
+    <div class="fb-footer-brand-block">
+      <a class="fb-footer-brand" href="{{ "/" | relURL }}">FizzBee</a>
+      <p>Model, verify, visualize, and test distributed systems.</p>
     </div>
-    {{ if (default true .Site.Params.geekdocBackToTop) }}
-      <div class="flex flex-25 justify-end">
-        <span class="gdoc-footer__item text-right">
-          <a class="gdoc-footer__link fake-link" href="#" aria-label="{{ i18n "nav_top" }}">
-            <svg class="gdoc-icon gdoc_keyboard_arrow_up">
-              <use xlink:href="#gdoc_keyboard_arrow_up"></use>
-            </svg>
-            <span class="hidden-mobile">{{ i18n "nav_top" }}</span>
-          </a>
-        </span>
+    <nav class="fb-footer-nav" aria-label="Footer navigation">
+      <div class="fb-footer-link-columns">
+        <div class="fb-footer-link-column">
+          <a class="gdoc-footer__link fb-footer-link" href="{{ "/design/tutorials/quick-start/" | relURL }}">Quickstart</a>
+          <a class="gdoc-footer__link fb-footer-link" href="{{ "/design/" | relURL }}">Design verification</a>
+          <a class="gdoc-footer__link fb-footer-link" href="{{ "/testing/" | relURL }}">Model-based testing</a>
+        </div>
+        <div class="fb-footer-link-column">
+          <a class="gdoc-footer__link fb-footer-link" href="{{ "/play" | relURL }}">Playground</a>
+          <a class="gdoc-footer__link fb-footer-link" href="{{ "/posts/" | relURL }}">Blog</a>
+          <a class="gdoc-footer__link fb-footer-link" href="{{ "/privacy.html" | relURL }}">Privacy policy</a>
+        </div>
       </div>
-    {{ end }}
-    {{ partial "consent" . }}
-  </nav>
+      <a class="gdoc-footer__link fb-footer-link fb-footer-link--top" href="#">{{ i18n "nav_top" }}</a>
+    </nav>
+  </div>
+  {{ partial "consent" . }}
 </footer>

layouts/partials/site-header.html

@@ -0,0 +1,66 @@
+<header class="gdoc-header">
+  <div class="container flex align-center justify-between">
+    {{ if .MenuEnabled }}
+      <label for="menu-control" class="gdoc-nav__control" tabindex="0">
+        <svg class="gdoc-icon gdoc_menu">
+          <title>{{ i18n "button_nav_open" }}</title>
+          <use xlink:href="#gdoc_menu"></use>
+        </svg>
+        <svg class="gdoc-icon gdoc_arrow_back">
+          <title>{{ i18n "button_nav_close" }}</title>
+          <use xlink:href="#gdoc_arrow_back"></use>
+        </svg>
+      </label>
+    {{ end }}
+
+    <div>
+      <a class="gdoc-brand gdoc-header__link" href="/">
+        <span class="flex align-center">
+          <img
+            class="gdoc-brand__img"
+            src="{{ (default "brand.svg" .Root.Site.Params.geekdocLogo) | relURL }}"
+            width="42"
+            height="42"
+            decoding="async"
+            alt=""
+          />
+          <span class="gdoc-brand__title">{{ .Root.Site.Title }}</span>
+        </span>
+      </a>
+    </div>
+
+    <div class="gdoc-menu-header">
+      <span class="gdoc-menu-header__items">
+        {{ if .Root.Site.Data.menu.extra.header }}
+          {{ partial "menu-extra" (dict "current" .Root "source" .Root.Site.Data.menu.extra.header "target" "header") }}
+        {{ end }}
+
+        <span class="gdoc-menu-header__home">
+          <a href="{{ .Root.Site.Home.Permalink }}" class="gdoc-header__link">
+            <svg class="gdoc-icon gdoc_home">
+              <title>{{ i18n "button_homepage" }}</title>
+              <use xlink:href="#gdoc_home"></use>
+            </svg>
+          </a>
+        </span>
+
+        {{ partial "language" .Root }}
+
+        <span class="gdoc-menu-header__control">
+          <label for="menu-header-control">
+            <svg class="gdoc-icon gdoc_keyboard_arrow_right">
+              <use xlink:href="#gdoc_keyboard_arrow_right"></use>
+              <title>{{ i18n "button_menu_close" }}</title>
+            </svg>
+          </label>
+        </span>
+      </span>
+      <label for="menu-header-control" class="gdoc-menu-header__control">
+        <svg class="gdoc-icon gdoc_keyboard_arrow_left">
+          <use xlink:href="#gdoc_keyboard_arrow_left"></use>
+          <title>{{ i18n "button_menu_open" }}</title>
+        </svg>
+      </label>
+    </div>
+  </div>
+</header>