initial

theme/templates/post.html

@@ -0,0 +1,77 @@
+{% 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:&nbsp;</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 %}