From 22c4c4e7cfea7f4b7bd44aa419d3884c9f1aaf66 Mon Sep 17 00:00:00 2001 From: BurnyLlama Date: Thu, 29 Jul 2021 00:14:40 +0200 Subject: [PATCH] Auto generation of ToC improved. --- assets/css/article.css | 67 ++++++++++++++++++++ assets/css/theme.css | 4 +- content/components/toc.njk | 12 +++- content/pages/article/how-to.njk | 102 ++++++++++++++++++++++++++++++ content/pages/wiki/index.njk | 18 ------ content/templates/article.njk | 9 ++- content/templates/defaultTags.njk | 6 +- 7 files changed, 190 insertions(+), 28 deletions(-) create mode 100644 assets/css/article.css create mode 100644 content/pages/article/how-to.njk delete mode 100644 content/pages/wiki/index.njk diff --git a/assets/css/article.css b/assets/css/article.css new file mode 100644 index 0000000..e666fdc --- /dev/null +++ b/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; +} diff --git a/assets/css/theme.css b/assets/css/theme.css index 577017a..a550bbb 100644 --- a/assets/css/theme.css +++ b/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 { diff --git a/content/components/toc.njk b/content/components/toc.njk index 679f39b..86aefe7 100644 --- a/content/components/toc.njk +++ b/content/components/toc.njk @@ -7,7 +7,13 @@ {% endmacro %} {% macro generate(tocList) %} - {% for size, text in tocList %} - {{ text }} - {% endfor %} +
+
+

Table of Contents

+ + {% for size, text in tocList %} + {{ text }} + {% endfor %} +
+
{% endmacro %} \ No newline at end of file diff --git a/content/pages/article/how-to.njk b/content/pages/article/how-to.njk new file mode 100644 index 0000000..6cbc6b6 --- /dev/null +++ b/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 %} +
+ {{ toc.header("h1", "Introduction", tocList) }} +

+ 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. +

+ + {{ toc.header("h2", "Terminology", tocList) }} +

+ 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...) +

+ + {{ toc.header("h1", "Usage", tocList ) }} +

+ To use the template you would simply extend templates/article.njk and + import components/toc.njk: + + + {{ ' +{% extends "templates/article.njk" %} +{% import "components/toc.njk" as toc with context %} + +{% block header %} + Your header +{% endblock %} + +{% block body %} +

+

+ Your content goes here +

+
+{% endblock %}' | escape | replace("\n", "", 1) | replace("\n", "
") | replace(" ", " ") }} + + + You would use the header block to define a header, and then you place your + content inside a div with the class content in your body-block. +

+ + {{ toc.header("h2", "Adding headers to the ToC", tocList) }} +

+ Adding headers is kind of easy, {% raw %}{% import "components/toc.njk" as toc with context %}{% endraw %} + imports a macro that will create a header and automatically add it to the table of contents. You use it as such: + + + {{ '{{ toc.header(size, text, tocList) }}' }} + + + size is a string and is a header level (aka h1, h2, h3, etc.), + text is a string that holds the text you would want to display, and finally tocList is a + variable inherited from template/article.njk that keeps a hold of which headers should go in the ToC.
+ + If you would want to display an {{ '

' }} with the text "Introduction" you would do: + + + {{ '{{ toc.header("h1", "Introduction", tocList) }}' }} + +

+ + {{ toc.header("h2", "Generate the ToC", tocList) }} +

+ 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 {{ '{{ toc.generate(tocList) }}' }} to the end + of your body-block. +

+ + {{ toc.header("h1", "Example code", tocList) }} + + {{ ' +{% extends "templates/article.njk" %} +{% import "components/toc.njk" as toc with context %} + +{% block header %} + Your header +{% endblock %} + +{% block body %} +
+ {{ toc.header("h1", "Introduction", tocList) }} +

+ Your introduction goes here... +

+
+ + {{ toc.generate(tocList) }} +{% endblock %}' | escape | replace("\n", "", 1) | replace("\n", "
") | replace(" ", " ") }} + +

+ + {{ toc.generate(tocList) }} +{% endblock %} \ No newline at end of file diff --git a/content/pages/wiki/index.njk b/content/pages/wiki/index.njk deleted file mode 100644 index e8319a9..0000000 --- a/content/pages/wiki/index.njk +++ /dev/null @@ -1,18 +0,0 @@ -{% extends "templates/article.njk" %} -{% import "components/toc.njk" as toc with context %} - -{% block body %} - {{ super() }} - -
- {{ toc.header("h1", "Testing", tocList) }} -

Hello World!

- - {{ toc.header("h1", "Development", tocList) }} -

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.

-
- -
- {{ toc.generate(tocList) }} -
-{% endblock %} \ No newline at end of file diff --git a/content/templates/article.njk b/content/templates/article.njk index 496133b..1806434 100644 --- a/content/templates/article.njk +++ b/content/templates/article.njk @@ -2,6 +2,7 @@ {% include "./defaultTags.njk" %} + {% block head %} {{ serverName }} {% endblock %} @@ -10,9 +11,11 @@ {% set tocList = [] %}
- {% block body %} - - {% endblock %} +
+ {% block header %}{% endblock %} +
+ + {% block body %}{% endblock %}
\ No newline at end of file diff --git a/content/templates/defaultTags.njk b/content/templates/defaultTags.njk index 4968956..af78dfe 100644 --- a/content/templates/defaultTags.njk +++ b/content/templates/defaultTags.njk @@ -1,6 +1,6 @@ - - - + + +