cyb/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>
        <!-- Hover-prefetch removed. It was causing rapid-click stalls:
             <link rel=prefetch> kicks off a fetch, and removing the
             <link> element doesn't reliably abort the in-flight
             request in Chromium β€” the fetch keeps consuming an
             HTTP/1.1 connection slot until it completes. Multiple
             rapid hovers saturate the 6-per-origin cap, queueing
             the next navigation behind them. The browser already
             does its own speculation rules; the cost of a single
             round-trip on click is negligible compared to the
             stall this script was producing. -->

    </body>
</html>

Graph