create-modulo/build/starter/static/index.html

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

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

<!-- Note: List all pages here for build and navbar to pick up on them -->
<ContentList command="buildall">
index.html, Homepage
about.html, About
app-example.html, App Example
article-index.html, Articles
</ContentList>

<!-- Note: List Markdown articles here for pre-loading -->
<ContentList -name=articlelist -load=md command="buildall">
article-example-1.html
article-example-2.html
</ContentList>

<!-- Note: This is the entry-point to Modulo definitions, included in every page -->
<Include>
    <meta name="charset" charset="utf8" />
    <meta name="content-type" http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="index, follow" />
    <meta name="revisit-after" content="30 days" />
    <script src="./static/js/main.js.htm"></script>
</Include>

<Include>
<style>
    :root {
        /* Set site-wide CSS variables here */
        --color: WhiteSmoke;
        --fg: #050510;
        --fg-shading: #05051020;
        --bg: #ffffffbb;

        --page-width: 1000px;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --color: #05051020;
            --fg: WhiteSmoke;
            --fg-shading: #ffffff33;
            --bg: #000000bb;
        }
    }

    /* Configure misc site-wide base settings */
    body {
        background: var(--bg);
        margin: 0;
        line-height: 1.5;
    }

    /* To get syntax editors looking better on both themes */
    modulo-Editor {
        background: WhiteSmoke;
        display: block;
    }
</style>
</Include>

<!-- Note: Components get registered in components/index.html -->
<Library
    namespace="x"
    -src="components/"
></Library>

<!-- Finally, load the <x-Page> component, but only if it's a "type=f" page -->
<script Configuration>
    // Configuration script to register showdown and configure markdown 
    if (modulo.DEV) {
        const content = modulo.stores.CACHE.getItem(window.location + '')
        if (content) { // Viewing a content file, mount Page, save as "global.page"
            modulo.page = modulo.contentType.MD(content)
            document.body.innerHTML = '<x-Page>'
        }
    }
</script>