qwik-cms/content/pages/article/how-to.njk

{% extends "templates/article.njk" %}
{% import "components/toc.njk" as toc with context %}

{% block header %}
    How to - Article template
{% endblock %}

{% block body %}
    <div class="content">
        {{ toc.header("h1", "Introduction", tocList) }}
        <p>
            I want to start off by saying that this article template (as of now) is really fricking shit.
            The code base is somewhat okay in complexity, but I do not feel like it is done in a efficient/good 
            way and won't work without CSS enabled (although, most people don't disable CSS).
            Please use with causition until I've implemented something better that would work without CSS.
        </p>

        {{ toc.header("h2", "Terminology", tocList) }}
        <p>
            Whenever I say "ToC" in this article I am refering to "Table of Contents". (I couldn't be bothered
            writing it out all the times...)
        </p>
        
        {{ toc.header("h1", "Usage", tocList ) }}
        <p>
            To use the template you would simply extend <code>templates/article.njk</code> and
            import <code>components/toc.njk</code>:

            <code class="code-block">
                {{ '
{% extends "templates/article.njk" %}
{% import "components/toc.njk" as toc with context %}

{% block header %}
    Your header
{% endblock %}

{% block body %}
    <div class="content">
        <p>
            Your content goes here
        </p>
    </div>
{% endblock %}' | escape | replace("\n", "", 1) | replace("\n", "<br>") | replace(" ", "&nbsp;") }}
            </code>

            You would use the <code>header</code> block to define a header, and then you place your
            content inside a <code>div</code> with the class <code>content</code> in your <code>body</code>-block.
        </p>

        {{ toc.header("h2", "Adding headers to the ToC", tocList) }}
        <p>
            Adding headers is kind of easy, <code>{% raw %}{% import "components/toc.njk" as toc with context %}{% endraw %}</code>
            imports a macro that will create a header and automatically add it to the table of contents. You use it as such:

            <code class="code-block">
                {{ '{{ toc.header(size, text, tocList) }}' }}
            </code>

            <code>size</code> is a string and is a header level (aka <code>h1</code>, <code>h2</code>, <code>h3</code>, etc.),
            <code>text</code> is a string that holds the text you would want to display, and finally <code>tocList</code> is a
            variable inherited from <code>template/article.njk</code> that keeps a hold of which headers should go in the ToC. <br>

            If you would want to display an <code>{{ '<h1>' }}</code> with the text "Introduction" you would do:
        
            <code class="code-block">
                {{ '{{ toc.header("h1", "Introduction", tocList) }}' }}
            </code>
        </p>
        
        {{ toc.header("h2", "Generate the ToC", tocList) }}
        <p>
            Sadly it isn't enough to just add the heading to the ToC. You will have to generate the ToC as well, but
            this isn't hard at all to do. You simply add <code>{{ '{{ toc.generate(tocList) }}' }}</code> to the end
            of your <code>body</code>-block.
        </p>

        {{ toc.header("h1", "Example code", tocList) }}
        <code class="code-block">
            {{ '
{% extends "templates/article.njk" %}
{% import "components/toc.njk" as toc with context %}

{% block header %}
    Your header
{% endblock %}

{% block body %}
    <div class="content">
        {{ toc.header("h1", "Introduction", tocList) }}
        <p>
            Your introduction goes here...
        </p>
    </div>

    {{ toc.generate(tocList) }}
{% endblock %}' | escape | replace("\n", "", 1) | replace("\n", "<br>") | replace(" ", "&nbsp;") }}
        </code>
    </div>

    {{ toc.generate(tocList) }}
{% endblock %}