feat: with extra head instead

Signed-off-by: kjuulh <contact@kjuulh.io>

templates/base.html

@@ -19,7 +19,6 @@
   <meta property="og:title" content="Kasper Hermansen's blog is a hub of insights on platform engineering">
   <meta property="og:description" content="Kasper Hermansen's blog is a hub of insights on platform engineering">
   <meta property="og:image" content="https://blog.kasperhermansen.com/images/kjuulh.jpg">
-  <meta property="og:url" content="{{ page.permalink | safe }}" />
   <meta property="og:type" content="website">
   <meta property="og:site_name" content="Kasper Hermansen's Blog">
   <meta name="twitter:card" content="summary">

templates/page.html

@@ -3,6 +3,7 @@
 
 {% block extra_head %}
 <link rel="canonical" href="{{ page.permalink | safe }}">
+<meta property="og:url" content="{{ page.permalink | safe }}" />
 {% endblock extra_head %}
 
 {% block title %}
@@ -13,31 +14,31 @@
 
 <div class="mx-auto px-4 max-w-3xl py-8">
   <div class="py-2">
-  {{ prev_macros::page_back_link(page=page) }}
+    {{ prev_macros::page_back_link(page=page) }}
   </div>
 
-<article class="blog-content">
+  <article class="blog-content">
-  <h1 class="title">
+    <h1 class="title">
-    {{ page.title }}
+      {{ page.title }}
-  </h1>
+    </h1>
-  <a href="https://github.com/kjuulh" target="_blank" rel="noopener noreferrer" class="text-peach hover:text-orange-400">
+    <a href="https://github.com/kjuulh" target="_blank" rel="noopener noreferrer"
+      class="text-peach hover:text-orange-400">
       @kjuulh
-  </a>
+    </a>
-  <p class="subtitle"><strong>{{ page.date }}</strong></p>
+    <p class="subtitle"><strong>{{ page.date }}</strong></p>
-  {{ page.content | safe }}
+    {{ page.content | safe }}
-</article>
+  </article>
 
-{% if page.lower or page.higher %}
+  {% if page.lower or page.higher %}
-    <div class="flex place-content-around max-w-lg mx-auto">
+  <div class="flex place-content-around max-w-lg mx-auto">
-        {% if page.lower %}
+    {% if page.lower %}
-            <a class="previous" href="{{ page.lower.permalink | safe }}">‹ {{ page.lower.title }}</a>
+    <a class="previous" href="{{ page.lower.permalink | safe }}">‹ {{ page.lower.title }}</a>
-        {% endif %}
+    {% endif %}
-        {% if page.higher %}
+    {% if page.higher %}
-            <a class="next" href="{{ page.higher.permalink | safe }}">{{ page.higher.title }} ›</a>
+    <a class="next" href="{{ page.higher.permalink | safe }}">{{ page.higher.title }} ›</a>
-        {% endif %}
+    {% endif %}
-    </div>
+  </div>
-{% endif %}
+  {% endif %}
 </div>
 
 {% endblock content %}
-

templates/section.html

@@ -1,44 +1,50 @@
 {% extends "base.html" %}
 
+{% block extra_head %}
+<link rel="canonical" href="{{ section.permalink | safe }}">
+<meta property="og:url" content="{{ section.permalink | safe }}" />
+{% endblock extra_head %}
+
 {% block content %}
 
 <div class="container mx-auto px-4 max-w-3xl py-8 space-y-4">
 
-{% if section.ancestors | length > 0 %}
+  {% if section.ancestors | length > 0 %}
   {{ prev_macros::section_back_link(section=section) }}
-{% endif %}
+  {% endif %}
 
-{% if section.extra.section_path -%}
+  {% if section.extra.section_path -%}
   {% set section = get_section(path=section.extra.section_path) %}
-{% endif -%}
-<h1 class="title text-peach text-3xl">
-  {{ section.title }}
-</h1>
-
-<main>
-  {%- if paginator %}
-    {%- set show_pages = paginator.pages -%}
-  {% else %}
-    {%- set show_pages = section.pages -%}
   {% endif -%}
+  <h1 class="title text-peach text-3xl">
+    {{ section.title }}
+  </h1>
 
-  {{ post_macros::list_posts(pages=show_pages) }}
+  <main>
-</main>
+    {%- if paginator %}
-{% if paginator %}
+    {%- set show_pages = paginator.pages -%}
-<ul class="pagination">
+    {% else %}
+    {%- set show_pages = section.pages -%}
+    {% endif -%}
+
+    {{ post_macros::list_posts(pages=show_pages) }}
+  </main>
+  {% if paginator %}
+  <ul class="pagination">
     {% if paginator.previous %}
-        <span class="page-item page-prev">
+    <span class="page-item page-prev">
-            <a href={{ paginator.previous }} class="page-link" aria-label="Previous"><span aria-hidden="true">← Prev</span></a>
+      <a href={{ paginator.previous | safe }} class="page-link" aria-label="Previous"><span aria-hidden="true">←
-        </span>
+          Prev</span></a>
+    </span>
     {% endif %}
 
     {% if paginator.next %}
-        <span class="page-item page-next">
+    <span class="page-item page-next">
-            <a href={{ paginator.next }} class="page-link" aria-label="Next"><span aria-hidden="true">Next →</span></a>
+      <a href={{ paginator.next | safe }} class="page-link" aria-label="Next"><span aria-hidden="true">Next →</span></a>
-        </span>
+    </span>
     {% endif %}
-</ul>
+  </ul>
-{% endif %}
+  {% endif %}
 
 </div>
 {% endblock content %}