SebinNyshkim/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ✨ add table of contents to posts

Browse source
This commit is contained in:
Sebin Nyshkim 2024-10-15 17:08:44 +02:00
parent 7b2e1b14b3
commit 318795ef5d
6 changed files with 218 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/layouts/blogpost.njk
View file

@ -2,40 +2,48 @@
layout: base.njk
---
<article class="blogpost">
<h1 class="text-4xl">{{ title }}</h1>
<aside class="not-prose space-y-4 text-base">
<ul class="postmeta">
<li>
{% lucide "calendar", {"size": "20"} %}
<time datetime="{{ page.date | isoDate }}" title="{{ page.date | longDate }}">
{{ page.date | readableDate }}
</time>
</li>
<li>
{% lucide "user", {"size": "20"} %}
<a href="{{ author.href }}">{{ author.name }}</a>
</li>
<li>
{% lucide "glasses", {"size": "20"} %}
{{ content | readingtime }}
</li>
</ul>
{% if tags.length > 0 %}
<ul class="tags">
{% for tag in tags %}
<li class="tag">
{% lucide "tag", {"size": "20"} %}
{{ tag }}
</li>
{%- endfor %}
</ul>
{% endif %}
</aside>
{% if image and image.src != '' %}
<img src="{{ image.src }}" alt="{{ image.alt }}">
<div class="mx-auto grid max-w-screen-xl grid-flow-col md:grid-cols-content gap-8">
{% if toc %}
<aside>
{{ content | toc | safe }}
</aside>
{% endif %}
{{ content | safe }}
</article>
<article class="blogpost justify-items-center">
<h1 class="text-4xl">{{ title }}</h1>
<aside class="not-prose space-y-4 text-base">
<ul class="postmeta">
<li>
{% lucide "calendar", {"size": "20"} %}
<time datetime="{{ page.date | isoDate }}" title="{{ page.date | longDate }}">
{{ page.date | readableDate }}
</time>
</li>
<li>
{% lucide "user", {"size": "20"} %}
<a href="{{ author.href }}">{{ author.name }}</a>
</li>
<li>
{% lucide "glasses", {"size": "20"} %}
{{ content | readingtime }}
</li>
</ul>
{% if tags.length > 0 %}
<ul class="tags">
{% for tag in tags %}
<li class="tag">
{% lucide "tag", {"size": "20"} %}
{{ tag }}
</li>
{%- endfor %}
</ul>
{% endif %}
</aside>
{% if image and image.src != '' %}
<img src="{{ image.src }}" alt="{{ image.alt }}">
{% endif %}
{{ content | safe }}
</article>
</div>