create-modulo/lib/starter/static/components/Page/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>

<Props slotclass></Props>

<Template>
    {% if global.page %}
        <title>{{ global.page.page_title }}</title>
    {% endif %}
    <nav class="page-nav u--container">
        <ul>
            <li>
                <!-- Replace this logo with one of your own!
                <img src="./static/images/example_logo.svg" title="Site Logo" style="float: left; height: 80px" /> -->
                <span style="font-size: 24px; font-family: serif">&ldquo;WEB-<br />SITE&rdquo;</span>
            </li>
            {# contentlist is defined in static/index.html #}
            {% for row in global.definitions.contentlist.data %}
                <li><a class="nav--{{ row|isactive }}" href="{{ global.root-path }}{{ row|get:0 }}">{{ row|get:1 }}</a></li>
            {% endfor %}
        </ul>
    </nav>
    <main class="u--container">
        <div class="page-container">
            {% if not global.page %}
                {# Default to "slot" #}
                <slot class="{{ props.slotclass }}"></slot>
            {% else %}
                {# Breadcrumb #}
                {% for row in global.definitions.contentlist.data %}
                    {% if row|isactive %}
                        <strong><a href="{{ global.root-path }}{{ row|get:0 }}">{{ row|get:1 }}</a>
                        {% if global.file-path is not row|get:0 %}
                             / <a href="#">{{ global.page.page_title|default:'' }}</a>
                        {% endif %}</strong>
                    {% endif %}
                {% endfor %}

                {# Show page meta info #}
                <h1>{{ global.page.page_title|default:'' }}</h1>
                <h4>{{ global.page.page_author|default:'' }}</h4>

                {# Show body #}
                {% if global.page.body|trim %}
                <div class="page-content markdown-page">
                    {{ global.page.body|syntax:"md"|safe }}
                </div>
                {% endif %}

                {# Show all articles #}
                {% if global.page.bottomlist is "articles" %}
                {% for article in global.definitions.articlelist.files %}
                <article class="page-article">
                    <a class="page-article-title u--blocklink"
                         href="{{ global.root-path }}{{ article.Source }}">
                        {{ article.page_title }}</a>
                    <p>{{ article.desc }}</p>
                </article>
                {% endfor %}
                {% endif %}
            {% endif %}
        </div>
    </main>
</Template>

<!-- Bring in CSS for layout, plus markdown prefixed to .markdown-page -->
<Style
    -src="Page.css.htm"
></Style>
<Style
    prefix=".markdown-page"
    -src="markdown.css.htm"
></Style>