Fix and refactor website meta tags for better SEO and social media previews

website/templates/blog.html

@@ -1,35 +1,33 @@
 {% extends "base.html" %}
 
-{% block title %}{{ section.title }}{% endblock title %}
+{%- block head -%}{%- set page = page | default(value = section) -%}
+{%- set title = page.title -%}
+{%- set meta_title = "Graphite Blog" -%}
+{%- set css = ["blog.css"] -%}
+{%- endblock head -%}
 
-{% block head %}
-<link rel="stylesheet" href="/blog.css">
-{% endblock head %}
-
-{% block content %}
-{{ section.content | safe }}
+{%- block content -%}{%- set page = page | default(value = section) -%}
+{{ page.content | safe }}
 
 <section id="articles" class="section">
-	{% for page in section.pages %}
+	{% for page in page.pages %}
 	<section>
 		<div class="banner">
-			<a href="{{ page.path }}"><img src="{{ page.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" /></a>
+			<a href="{{ page.path | safe }}"><img src="{{ page.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" /></a>
 		</div>
 		<div class="details">
 			<div class="headline">
-				<h2><a href="{{ page.path }}">{{ page.title }}</a></h2>
+				<h2><a href="{{ page.path | safe }}">{{ page.title }}</a></h2>
 			</div>
 			<span class="publication">By {{ page.extra.author }}. {{ page.date | date(format = "%B %d, %Y", timezone = "America/Los_Angeles") }}.</span>
 			<div class="summary">
-				<div>
-					{{ page.summary | safe }}
-				</div>
+				<div>{{ page.summary | safe }}</div>
 			</div>
 			<div class="keep-reading">
-				<a href="{{ page.path }}" class="link arrow">Keep Reading</a>
+				<a href="{{ page.path | safe }}" class="link arrow">Keep Reading</a>
 			</div>
 		</div>
 	</section>
 	{% endfor %}
 </section>
-{% endblock content %}
+{%- endblock content -%}