♻️ Refactor OpenGraph to work for all pages

querkmachine · Sep 6, 2024 · d67c51e · d67c51e
1 parent 8ffe1e4
commit d67c51e
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 44 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -28,7 +28,6 @@ const {
   formatDate,
   formatISODate,
   getFirstNItems,
-  pageIsBlogPost,
 } = require("./config/utils.js");
 
 /**
@@ -120,7 +119,6 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addFilter("formatDate", formatDate);
   eleventyConfig.addFilter("formatISODate", formatISODate);
   eleventyConfig.addFilter("head", getFirstNItems);
-  eleventyConfig.addFilter("isBlogPost", pageIsBlogPost);
   eleventyConfig.addFilter("tagify", formatAsTag);
   eleventyConfig.addFilter("getArchiveYears", getArchiveYears);
   eleventyConfig.addFilter("getArchivePostsByYear", getArchivePostsByYear);

diff --git a/config/utils.js b/config/utils.js
@@ -50,17 +50,6 @@ const formatISODate = function (isoDate, format) {
   return formatDate(date, format);
 };
 
-/**
- * Determine if a URL leads to a blog post by looking for the "/blog" string
- * within the URL. Nasty, but it works for now.
- *
- * @param {string} postUrl - The URL of the page.
- * @returns {boolean} - Whether or not this page is a blog post entry.
- */
-const pageIsBlogPost = function (page) {
-  return page.filePathStem.substring(0, 6) !== "/blog/" ? false : true;
-};
-
 /**
  * Take an array, remove the first n items from it, and return those items as a
  * new array.
@@ -82,5 +71,4 @@ module.exports = {
   formatDate,
   formatISODate,
   getFirstNItems,
-  pageIsBlogPost,
 };
diff --git a/src/_includes/page-head.njk b/src/_includes/page-head.njk
@@ -2,14 +2,20 @@
 <meta charset="UTF-8">
 <meta name="generator" content="{{ eleventy.generator }}">
 
+{# Determine which OpenGraph image to use for things #}
+{% set openGraphUrl = (page.url + 'opengraph/') %}
+{%- if isBlogTagPage %}
+  {% set openGraphUrl = '/blog/opengraph/' %}
+{%- endif %}
+
 {#- Content metadata / OpenGraph #}
 <link rel="canonical" href="{{ site.domain + page.url | url }}">
 <meta property="og:url" content="{{ site.domain + page.url | url }}">
 <meta property="og:locale" content="en_GB">
 <meta property="og:title" content="{{ metadata.title if metadata.title else title }}">
 <meta property="og:site_name" content="{{ site.name }}">
-<meta property="og:image" content="{{ (opengraphImage if opengraphImage else '/opengraph/') | absoluteUrl(site.domain) | urlizeOpenGraphImage }}">
-<meta property="og:type" content="{{ "article" if page | isBlogPost else "website" }}">
+<meta property="og:image" content="{{ openGraphUrl | absoluteUrl(site.domain) | urlizeOpenGraphImage }}">
+<meta property="og:type" content="{{ "article" if isBlogPost else "website" }}">
 {%- if metadata.description %}
   <meta name="description" content="{{ metadata.description }}">
   <meta property="og:description" content="{{ metadata.description }}">

diff --git a/src/_layouts/opengraph.njk b/src/_layouts/opengraph.njk
@@ -65,13 +65,17 @@
         font-size: 3vw;
         font-weight: 600;
       }
+      .page-beeps {
+        margin-block-end: var(--space-8);
+        color: var(--color-accent);
+      }
     </style>
     {% block head %}{% endblock %}
   </head>
-  <body class="kimPage_body">
+  <body class="kimPage_body">    
     <canvas class="page-background" id="background" width="1200" height="630" hidden></canvas>
     <div class="page-wrapper">
-      <div class="kimHeading-xl">{% block title %}{% endblock %}</div>
+      {% block title %}{% endblock %}
     </div>
     <div class="page-foot">
       <span class="page-logo">{% include "logo.njk" %}</span>

diff --git a/src/blog-tags.njk b/src/blog-tags.njk
@@ -9,6 +9,7 @@ eleventyComputed:
 metadata:
   description: Archive of beeps' blog posts.
 permalink: "/blog/{{ tag | slugify }}/"
+isBlogTagPage: true
 mastheadBreadcrumbs:
   - url: "/blog/"
     label: "Blog"

diff --git a/src/blog/blog.11tydata.js b/src/blog/blog.11tydata.js
@@ -5,16 +5,14 @@ const sanitizeHtml = require("sanitize-html");
 module.exports = {
   layout: "blog-post.njk",
   tags: ["blog"],
+  isBlogPost: true,
   mastheadBreadcrumbs: [
     {
       url: "/blog/",
       label: "Blog",
     },
   ],
   eleventyComputed: {
-    opengraphImage: (data) => {
-      return `${data.page.url}opengraph/`;
-    },
     favourites: async (data) => {
       // Skip if there's no usable metadata on this post
       if (!data.interactions) return null;

diff --git a/src/opengraph-blog.njk b/src/opengraph-blog.njk
diff --git a/src/opengraph.njk b/src/opengraph.njk
@@ -1,12 +1,40 @@
 ---
-permalink: "/opengraph/"
+pagination:
+  data: collections.all
+  size: 1
+  alias: preview
+permalink: "{{ preview.data.page.url }}opengraph/"
 eleventyExcludeFromCollections: true
 ---
+
 {% extends 'src/_layouts/opengraph.njk' %}
 
+{% block head %}
+{% endblock %}
+
 {% block title %}
-  <a class="kimLink-plain" href="/">beeps</a><br><br>
-  A robot bat that<br>
-  builds websites<br>
-  &amp; writes stuff.
+  <div class="kimHeading-xl page-beeps">beeps</div>
+  {%- if preview.data.isBlogPost %}
+    <div class="kimHeading-l kim-!-margin-block-start-0">
+      {{ preview.data.title | markdownInline | safe }}
+    </div>
+  {%- elif preview.url == '/' %}
+    <div class="kimHeading-xl">
+      A robot bat that<br>
+      builds websites<br>
+      &amp; writes stuff.
+    </div>
+  {%- else %}
+    <div class="kimHeading-xl">
+      {{ preview.data.title | markdownInline | safe }}
+    </div>
+  {%- endif %}
+{% endblock %}
+
+{% block metadata %}
+  {%- if preview.data.isBlogPost and preview.date %}
+    {{ preview.date | formatDate('human') }}
+  {%- else %}
+    {{ super() }}
+  {%- endif %}
 {% endblock %}