qwik/qwik-cms
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Reworked auto-tocs. :)

Browse Source
This commit is contained in:
BurnyLlama 2021-08-04 17:48:11 +02:00
parent 5a3e465a31
commit d831242767
6 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -28,6 +28,7 @@ I can *promise* you that there is no malicious code or dependency in this projec
The project depends on the following packages (installed when you ran `npm i`):
* express (a web server framework)
* nunjucks (a templating engine)
* nunjucks-append (an extension that adds more functionality to nunjucks)
* chokidar (reload templates if they change on disk)
* fs (used for filesystem operations)

20
content/components/toc.njk
View File

@ -1,19 +1,9 @@
{% macro header(size, text, tocList) %}
{% set tocList = (tocList.push([size, text]), tocList) %}
<a name="{{ text | replace(" ", "-") }}"></a>
{% macro header(size, text) %}
{% append "toc" %}
<a name="{{ text | replace(" ", "-") }}" class="toc-{{ size }}">{{ text }}</a>
{% endappend %}
<{{ size }}>
{{ text }}
</{{ size }}>
{% endmacro %}
{% macro generate(tocList) %}
<div class="toc-container">
<div class="toc">
<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 %}

6
content/pages/article/how-to.njk
View File

@ -5,8 +5,13 @@
How to - Article template
{% endblock %}
{% block toc %}
{% output "toc" %}{% endoutput %}
{% 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.
@ -98,5 +103,4 @@
</code>
</div>
{{ toc.generate(tocList) }}
{% endblock %}

9
content/templates/article.njk
View File

@ -8,13 +8,18 @@
{% endblock %}
</head>
<body>
{% set tocList = [] %}
<article>
<header>
{% block header %}{% endblock %}
</header>
<div class="toc-container">
<div class="toc">
<p class="toc-title">Table of Contents</p>
{% block toc %}{% endblock %}
</div>
</div>
{% block body %}{% endblock %}
</article>
</body>

6
index.js
View File

@ -1,5 +1,6 @@
import express from 'express'
import njk from 'nunjucks'
import njkAppend from 'nunjucks-append'
import fs from 'fs'
@ -13,10 +14,10 @@ const Server = express()
Server.use('/assets', express.static(Config.assetsDir))
njk.configure(
const njkEnv = njk.configure(
Config.contentDir,
{
autoescape: true,
autoescape: false,
watch: true,
trimBlocks: true,
lstripBlocks: true,
@ -24,6 +25,7 @@ njk.configure(
}
)
njkAppend.initialise(njkEnv)
Server.get(

3
package.json
View File

@ -19,6 +19,7 @@
"dependencies": {
"chokidar": "^3.5.2",
"express": "^4.17.1",
"nunjucks": "^3.2.3"
"nunjucks": "^3.2.3",
"nunjucks-append": "^0.0.3"
}
}