optica/templates/base.html

<!doctype html>
<html lang="{{ site.language | default('en') }}">
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        />
        <title>
            {% block title %}{{ site.title }}{% endblock %}
        </title>
        <meta
            name="description"
            content="{% block description %}{{ description }}{% endblock %}"
        />
        <meta
            property="og:title"
            content="{% block og_title %}{{ site.title }}{% endblock %}"
        />
        <meta
            property="og:description"
            content="{{ description }}"
        />
        <meta
            property="og:url"
            content="{{ canonical_url | safe }}"
        />
        <meta
            property="og:type"
            content="{% block og_type %}website{% endblock %}"
        />
        <meta
            property="og:site_name"
            content="{{ site.title }}"
        />
        <meta name="twitter:card" content="summary" />
        <meta
            name="twitter:title"
            content="{% block twitter_title %}{{ site.title }}{% endblock %}"
        />
        <meta
            name="twitter:description"
            content="{{ description }}"
        />
        <link
            rel="preload"
            as="font"
            type="font/woff2"
            href="/static/fonts/play-400-latin.woff2"
            crossorigin
        />
        <link
            rel="preload"
            as="font"
            type="font/woff2"
            href="/static/fonts/play-700-latin.woff2"
            crossorigin
        />
        <link rel="stylesheet" href="/static/style.css" />
        <link
            rel="alternate"
            type="application/rss+xml"
            title="{{ site.title }}"
            href="/feed.xml"
        />
        {% if favicon %}
        <link
            rel="icon"
            href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>{{ favicon }}</text></svg>"
        />
        {% endif %} {% if analytics is defined and
        analytics.snippet %} {{ analytics.snippet | safe }}
        {% elif analytics is defined and
        analytics.plausible_domain %}
        <script
            defer
            data-domain="{{ analytics.plausible_domain }}"
            src="{{ analytics.plausible_script | safe }}"
        ></script>
        {% endif %}
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css"
        />
    </head>
    <body>
        {% include "partials/nav.html" %}

        <div class="layout">
            <main class="main-content">
                {% block content %}{% endblock %}
            </main>
        </div>

        {% if search is defined and search.enabled |
        default(true) %}
        <script src="/static/search.js" defer></script>
        {% endif %}
        <script
            defer
            src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"
        ></script>
        <script
            defer
            src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"
        ></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded",
                function () {
                    // Unescape HTML entities inside math delimiters before KaTeX processes them
                    // comrak escapes > to &gt;, < to &lt;, etc. which breaks LaTeX
                    var content =
                        document.querySelector(
                            ".main-content",
                        );
                    if (!content) return;
                    var walker = document.createTreeWalker(
                        content,
                        NodeFilter.SHOW_TEXT,
                        null,
                        false,
                    );
                    while (walker.nextNode()) {
                        var node = walker.currentNode;
                        if (
                            node.nodeValue &&
                            /\$/.test(node.nodeValue)
                        ) {
                            var text = node.nodeValue;
                            // Fix HTML entities inside $...$ and 

$$...$$


                            text = text.replace(
                                /\$\$([^$]+)\$\$/g,
                                function (m, inner) {
                                    return (
                                        "

$$" +
                                        inner
                                            .replace(
                                                />/g,
                                                ">",
                                            )
                                            .replace(
                                                /</g,
                                                "<",
                                            )
                                            .replace(
                                                /&/g,
                                                "&",
                                            ) +
                                        "$$

"
                                    );
                                },
                            );
                            text = text.replace(
                                /\$([^$]+)\$/g,
                                function (m, inner) {
                                    return (
                                        "$" +
                                        inner
                                            .replace(
                                                /&gt;/g,
                                                ">",
                                            )
                                            .replace(
                                                /&lt;/g,
                                                "<",
                                            )
                                            .replace(
                                                /&amp;/g,
                                                "&",
                                            ) +
                                        "$"
                                    );
                                },
                            );
                            if (text !== node.nodeValue) {
                                node.nodeValue = text;
                            }
                        }
                    }
                    // Now render math
                    if (
                        typeof renderMathInElement ===
                        "function"
                    ) {
                        renderMathInElement(content, {
                            delimiters: [
                                {
                                    left: "

$$",
                                    right: "$$

",
                                    display: true,
                                },
                                {
                                    left: "$",
                                    right: "$",
                                    display: false,
                                },
                            ],
                            ignoredTags: [
                                "script",
                                "noscript",
                                "style",
                                "textarea",
                                "pre",
                                "code",
                                "a",
                            ],
                            throwOnError: false,
                        });
                    }
                },
            );
        </script>
        <script>
            // Intent-debounced link prefetch with full cancellation.
            //
            // Race we're avoiding: hover triggers a <link rel=prefetch>
            // that is still in-flight when the click lands. Some
            // browsers intermittently drop the click when a prefetch
            // for the same URL is pending โ€” this is the "1 in 10 click
            // does nothing" bug. Cancelling the timer isn't enough
            // once the prefetch tag has been appended; we also have
            // to remove the tag so the fetch itself aborts.
            (function () {
                var pending = null;                  // { href, timer }
                var injected = Object.create(null);  // href โ†’ <link> element
                var DELAY = 120;
                function shouldPrefetch(a) {
                    if (!a || !a.href) return null;
                    if (a.target === "_blank" || a.hasAttribute("download")) return null;
                    try {
                        var u = new URL(a.href);
                        if (u.origin !== location.origin) return null;
                        if (u.pathname === location.pathname) return null;
                        return u.href;
                    } catch (err) {
                        return null;
                    }
                }
                function startPrefetch(href) {
                    if (injected[href]) return;
                    var link = document.createElement("link");
                    link.rel = "prefetch";
                    link.href = href;
                    document.head.appendChild(link);
                    injected[href] = link;
                }
                function cancelPending() {
                    if (pending) {
                        clearTimeout(pending.timer);
                        pending = null;
                    }
                }
                // On click: cancel any queued prefetch AND abort any
                // in-flight one for the clicked href so the browser's
                // navigation isn't competing with a loader it started.
                function onClickCancel(e) {
                    cancelPending();
                    var a = e && e.target && e.target.closest && e.target.closest("a[href]");
                    if (!a) return;
                    try {
                        var u = new URL(a.href);
                        var injectedLink = injected[u.href];
                        if (injectedLink && injectedLink.parentNode) {
                            injectedLink.parentNode.removeChild(injectedLink);
                        }
                        delete injected[u.href];
                    } catch (err) {}
                }
                document.addEventListener("pointerover", function (e) {
                    var a = e.target.closest && e.target.closest("a[href]");
                    var href = shouldPrefetch(a);
                    if (!href) return;
                    if (pending && pending.href === href) return;
                    cancelPending();
                    pending = {
                        href: href,
                        timer: setTimeout(function () {
                            startPrefetch(href);
                            pending = null;
                        }, DELAY),
                    };
                }, { passive: true });
                document.addEventListener("pointerout", function (e) {
                    var a = e.target.closest && e.target.closest("a[href]");
                    if (!a) return;
                    if (pending && pending.href && !a.href.endsWith(pending.href)) return;
                    cancelPending();
                }, { passive: true });
                // Use pointerdown (fires before click) so the
                // in-flight <link> is gone before navigation starts.
                document.addEventListener("pointerdown", onClickCancel, { passive: true });
            })();
        </script>
    </body>
</html>

Neighbours