78 lines
3.0 KiB
HTML
78 lines
3.0 KiB
HTML
{% extends "base.html" %}
|
|
{% block seo_tags %}
|
|
<meta property="og:title" content="{{ metadata.title | title }} - {{ config.title | title }}" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="{{ metadata.permalink }}" />
|
|
<meta property="og:description" content="{{ metadata.description }}" />
|
|
<meta property="og:site_name" content="{{ config.title }}" />
|
|
<meta property="og:locale" content="{{ config.language }}" />
|
|
{# TODO: add support for og:image using metadata #}
|
|
<link rel="canonical" href="{{ metadata.permalink }}" />
|
|
<meta name="robots" content="index, follow" />
|
|
{% endblock seo_tags %}
|
|
|
|
{% block title %}{{ metadata.title | title }}{% endblock title %}
|
|
{% block content %}
|
|
<div>
|
|
<h1>{{ metadata.title }}</h1>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row">
|
|
<div class="flex flex-col md:flex-row flex-1 justify-between">
|
|
<div class="flex flex-col space-y-2">
|
|
{# Date, reading time #}
|
|
{% set created = metadata.created | date(format="%B %e, %Y") %}
|
|
{% set updated = metadata.updated | date(format="%B %e, %Y") %}
|
|
<span class="text-grey text-sm tabular-nums text-opacity-70 dark:text-opacity-100 space-x-1">
|
|
<time datetime="{{ metadata.created }}">{{ created }}</time>
|
|
{% if created != updated %}
|
|
(Last edit: <time datetime="{{ metadata.updated }}">{{ metadata.updated | date(format="%B %e, %Y") }}</time>)
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
{% if metadata.categories | length > 0 %}
|
|
<div class="flex flex-wrap items-center max-w-[50%]">
|
|
<span class="font-semibold mr-px">Tags: </span>
|
|
{% for category in metadata.categories %}
|
|
<a
|
|
class="w-fit bg-grey hover:bg-magenta text-base hover:text-base! no-underline! hover:no-underline! text-sm mr-2 last:mr-0 px-1 rounded-sm"
|
|
href="/categories/{{ category }}"
|
|
>
|
|
{{ category | capitalize }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if metadata.toc %}
|
|
<div x-data="toc" class="mt-4">
|
|
{% set toc_html = generate_toc(toc=metadata.toc, list_type="ol") %}
|
|
<button @click="toggle()" type="button" class="inline-flex items-center">
|
|
<span class="sr-only">Close Table of Contents</span>
|
|
<h3 class="mt-0! mr-1">
|
|
Table of Contents
|
|
</h3>
|
|
<span
|
|
id="toc-toggle-icon"
|
|
class="transition-all duration-300 ease-in-out text-2xl hover:text-blue ti ti-arrow-badge-right-filled"
|
|
></span>
|
|
</button>
|
|
<nav
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-300"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
x-show="open"
|
|
class="toc"
|
|
>
|
|
{{ toc_html | safe }}
|
|
</nav>
|
|
</div>
|
|
{% endif %}
|
|
<div id="content" class="mt-12 break-keep pt-10 border-t border-t-base-alt dark:border-t-[#39394b]">
|
|
{{ content | safe }}
|
|
</div>
|
|
{% endblock content %}
|