create-modulo/build/modulo-docs/static/components/Page.html

Starter projects for Modulo.html - Ready for all uses - Markdown-SSG / SSR / API-backed SPA

<script src=../Modulo.html></script><template type=f>

<Template>
    {% if global.docs-content %}
        <meta charset=utf8>
        <title>{{ global.docs-content.title }} - Modulo Documentation</title>
    {% endif %}
    <div class="layout">
        <nav class="page-nav">
            {% if not global.definitions.contentlist %}
            <a style="font-size:60px;text-align:center;display:block;font-weight:200" href="{{ global.root-path }}">ᵐ°dᵘ⁄o</a>
            <ul style="position: sticky; top: 1px">
                <li class="toc--outer">
                    <p><a style="font-size: 70%"
                           title="Download Modulo Docs as a offline-friendly zip"
                           href="https://codeberg.org/modulo/docs/archive/main.zip">
                            &#x2913; docs-main.zip</a>
                        <tt>v{{ global.config.modulo.version }}</tt>
                    </p>
                </li>
            {% else %}
            <ul style="position: sticky; top: 86px">
            {% endif %}
                {% for row in global.definitions.sidebar.data %}
                    {% if row|get:2 %}<li class="toc--outer"><h3>{{ row|get:2 }}</h3></li>{% endif %}
                    <li class="toc--{{ row|ifactive }}"><a href="{{ global.root-path }}{{ row|get:0 }}">{{ row|get:1 }}</a></li>
                {% endfor %}
            </ul>
        </nav>
        <main class="page-container">
            {% if global.docs-content %}
                {% with global.docs-content.body|markdown as html %}
                    {% if not global.docs-content.skiptoc %}
                        <x-TableOfContents toc='{{ html|html2toc|json }}'></x-TableOfContents>
                    {% endif %}
                    <div class="markdown-body">{{ html|safe }}</div>
                {% endwith %}
            {% else %}
                <slot></slot> {# Default to "slot" behavior #}
            {% endif %}
        </main>
    </div>
</Template>

<!-- Add general layout CSS -->
<Style>
    .layout {
        --sidebar-width: 260px;
        width: 100%;
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        font-family: sans-serif;
        color: var(--fg);
    }
    .page-container,
    .page-nav {
        display: block;
        padding: 20px;
        margin: 4px;
    }
    .page-nav {
        border: 1px solid var(--fg);
    }
    .page-nav a {
        color: var(--fg);
        text-decoration: none;
        display: inline-block;
        border: 1px solid var(--bg);
        padding: 0 5px 0 5px;
    }
    .page-nav .toc--inactive {
        list-style: circle;
    }
    .page-nav .toc--active {
        list-style: disc;
        color: var(--color);
    }
    .page-nav .toc--outer {
        margin: 0 0 0 -20px;
        list-style: none;
    }
    .page-nav h3 {
        font-size: 1.05rem;
        font-weight: 600;
        margin: 10px 2px 2px 0;
    }
    .page-nav .toc--active a {
        border-color: var(--color);
    }
    .page-nav a:hover {
        border-color: var(--color);
    }
    .page-nav ul {
        margin: 0;
        margin-left: -20px;
    }
    @media (max-width: 992px) {
        .page-container,
        .page-nav {
            padding: 4px;
            margin: 2px;
        }
        .layout {
            --sidebar-width: 200px;
        }
    }
    @media (max-width: 576px) {
        .layout {
            display: block;
        }
        .page-nav a {
            font-size: 110%;
            display: block;
            margin: 5px;
            padding: 5px;
            text-decoration: underline;
        }
    }
</Style>

<!-- Add ".markdown-body" CSS -->
<Style
    -auto-isolate="regular"
    prefix=".markdown-body"
    -src="./Page-markdown.css.htm"
></Style>