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`): The project depends on the following packages (installed when you ran `npm i`):
* express (a web server framework) * express (a web server framework)
* nunjucks (a templating engine) * nunjucks (a templating engine)
* nunjucks-append (an extension that adds more functionality to nunjucks)
* chokidar (reload templates if they change on disk) * chokidar (reload templates if they change on disk)
* fs (used for filesystem operations) * fs (used for filesystem operations)

20
content/components/toc.njk
View File

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

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

@ -5,8 +5,13 @@
How to - Article template How to - Article template
{% endblock %} {% endblock %}
{% block toc %}
{% output "toc" %}{% endoutput %}
{% endblock %}
{% block body %} {% block body %}
<div class="content"> <div class="content">
{{ toc.header("h1", "Introduction", tocList) }} {{ toc.header("h1", "Introduction", tocList) }}
<p> <p>
I want to start off by saying that this article template (as of now) is really fricking shit. I want to start off by saying that this article template (as of now) is really fricking shit.
@ -98,5 +103,4 @@
</code> </code>
</div> </div>
{{ toc.generate(tocList) }}
{% endblock %} {% endblock %}

9
content/templates/article.njk
View File

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

6
index.js
View File

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

3
package.json
View File

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