Auto generation of ToC improved.

assets/css/article.css

@@ -0,0 +1,67 @@
+article {
+    display: grid;
+    grid-template-areas: 'header' 'toc' 'content';
+    grid-template-columns: 100%;
+    grid-template-rows: repeat(3, auto);
+}
+
+article > header {
+    grid-area: header;
+    margin-bottom: 2rem;
+}
+
+.toc-container {
+    grid-area: toc;
+    display: grid;
+    place-items: center;
+
+    width: 100%;
+
+    padding: 1rem 2rem;
+    background-color: var(--grey3);
+}
+
+.toc-container > .toc {
+    width: max-content;
+    display: grid;
+}
+
+.toc > * {
+    width: 100%;
+    display: block;
+}
+
+.toc-title {
+    margin-top: 0;
+    font-size: 1.25rem;
+    color: var(--primary);
+}
+
+.toc-h2 {
+    margin-left: .5rem;
+    font-size: .8rem;
+}
+
+.toc-h3 {
+    margin-left: 1rem;
+    font-size: .75rem;
+}
+
+.toc-h4 {
+    margin-left: 1.5rem;
+    font-size: .7rem;
+}
+
+.toc-h5 {
+    margin-left: 2rem;
+    font-size: .65rem;
+}
+
+.toc-h6 {
+    margin-left: 2.5rem;
+    font-size: .6rem;
+}
+
+article > .content {
+    grid-area: content;
+}

assets/css/theme.css

@@ -35,7 +35,7 @@ h1, h2, h3, h4, h5, h6 {
     color: var(--accent);
     font-weight: normal;
 
-    margin: .25em 0 .15em 0;
+    margin: 1.25em 0 .25em 0;
 }
 
 h1 {
@@ -65,6 +65,7 @@ h6 {
 
 p {
     margin: .5em 0 .25em 0;
+    text-align: justify;
 }
 
 a {
@@ -121,6 +122,7 @@ th, td {
 code {
     background-color: var(--grey3);
     font-family: 'monospace';
+    padding: .1rem .3rem;
 }
 
 code.code-block {

content/components/toc.njk

@@ -7,7 +7,13 @@
 {% endmacro %}
 
 {% macro generate(tocList) %}
-    {% for size, text in tocList %}
+    <div class="toc-container">
-        <a href="#{{ text | replace(" ", "-") }}" class="toc-{{ size }}">{{ text }}</a>
+        <div class="toc">
-    {% endfor %}
+            <p class="toc-title">Table of Contents</p>
+
+            {% for size, text in tocList %}
+                <a href="#{{ text | replace(" ", "-") }}" class="toc-{{ size }}">{{ text }}</a>
+            {% endfor %}
+        </div>
+    </div>
 {% endmacro %}

content/pages/article/how-to.njk

@@ -0,0 +1,102 @@
+{% 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 %}

content/pages/wiki/index.njk

@@ -1,18 +0,0 @@
-{% extends "templates/article.njk" %}
-{% import "components/toc.njk" as toc with context %}
-
-{% block body %}
-    {{ super() }}
-
-    <div class="content">
-        {{ toc.header("h1", "Testing", tocList) }}
-        <p>Hello World!</p>
-
-        {{ toc.header("h1", "Development", tocList) }}
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat optio earum unde reiciendis cumque, corrupti ipsum quia nemo deleniti officia quos laudantium error nobis at! Praesentium, officia vero! Ut, saepe vitae maiores velit ad quis! Cum quisquam ipsam nulla laudantium rerum sint eos magni, sunt porro fuga hic nihil obcaecati iure animi impedit repellendus nisi voluptas dolore, alias tenetur fugiat? Maiores quibusdam corporis recusandae unde eaque consectetur, officia harum optio fuga architecto beatae, reprehenderit aspernatur magnam debitis consequatur. Vero recusandae obcaecati harum minus facilis illo aliquid quis! Ipsam assumenda molestiae molestias quisquam illum nesciunt. Quam dolorem fuga saepe ratione labore tenetur in laborum, quae beatae quisquam, possimus doloremque iusto eum ex odit! Suscipit iste molestias nam cupiditate distinctio veniam sint laborum, culpa odio, voluptatem fugiat exercitationem, incidunt at.</p>
-    </div>
-
-    <div class="toc">
-        {{ toc.generate(tocList) }}
-    </div>
-{% endblock %}

content/templates/article.njk

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     {% include "./defaultTags.njk" %}
+    <link rel="stylesheet" href="/assets/css/article.css">
     {% block head %}
         <title>{{ serverName }}</title>
     {% endblock %}
@@ -10,9 +11,11 @@
     {% set tocList = [] %}
 
     <article>
-        {% block body %}
+        <header>
-            
+            {% block header %}{% endblock %}
-        {% endblock %}
+        </header>
+
+        {% block body %}{% endblock %}
     </article>
 </body>
 </html>

content/templates/defaultTags.njk

@@ -1,6 +1,6 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-<link rel="stylesheet" type="text/css" href="/assets/css/scaling.css" loading="lazy">
+<link rel="stylesheet" type="text/css" href="/assets/css/scaling.css">
-<link rel="stylesheet" type="text/css" href="/assets/css/colors.css" loading="lazy">
+<link rel="stylesheet" type="text/css" href="/assets/css/colors.css">
-<link rel="stylesheet" type="text/css" href="/assets/css/theme.css" loading="lazy">
+<link rel="stylesheet" type="text/css" href="/assets/css/theme.css">