feat: link authors + post links

config/filters/index.js

@@ -145,6 +145,12 @@ export default {
     return DateTime.now().diff(DateTime.fromJSDate(new Date(date)), 'years').years > 3;
   },
 
+  // links
+  findPost: (url, posts) => {
+    if (!url || !posts) return null;
+    return posts[url]?.toots?.[0] || null;
+  },
+
   // feeds
   normalizeEntries: (entries) => {
     const md = markdownIt({ html: true, linkify: true })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {

src/_data/linkPosts.js

@@ -0,0 +1,8 @@
+import { createRequire } from 'module'
+
+const require = createRequire(import.meta.url)
+const mastodonCache = require('../../cache/jsonfeed-to-mastodon.json')
+
+export default async function () {
+  return mastodonCache
+}

src/_data/links.js

@@ -19,6 +19,7 @@ export default async function () {
       url: link['source_url'],
       tags: [...new Set(Object.keys(link['tags']))],
       date: `${link['updated_at'] || link['created_at']}`,
+      author: link['author'],
       summary: link['summary'],
       note: link['notes'],
       description: `${link['summary']}<br/><br/>`,

src/assets/styles/index.css

@@ -143,10 +143,10 @@ nav svg {
   margin-top: .125rem;
 }
 
-:is(nav a:hover, nav a:active, nav a:focus) svg,
-nav svg:hover,
-nav svg:active,
-nav svg:focus {
+:is(a:hover, a:active, a:focus) svg,
+a svg:hover,
+a svg:active,
+a svg:focus {
   stroke-width: var(--stroke-width-bold);
 }
 
@@ -293,12 +293,18 @@ code {
 /* articles */
 article h2 {
   line-height: var(--line-height-2xl);
-  margin: 0;
+  margin: 0 0 .25rem;
 }
 
+article [rel="author"],
 article time {
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
+  margin-right: .25rem;
+}
+
+article .meta > * {
+  height: 1rem;
 }
 
 /* icons */
@@ -306,6 +312,11 @@ svg {
   stroke-width: var(--stroke-width-default);
 }
 
+.icon--small > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
 .icon--bold > svg {
   stroke-width: var(--stroke-width-bold);
 }

src/links.html

@@ -6,13 +6,26 @@ pagination:
   size: 8
 ---
 {% for link in pagination.items %}
+{%- assign shareLink = link.url | findPost: linkPosts -%}
 <article class="h-entry" data-pagefind-body>
   <a class="no-underline" href="{{ link.url }}">
     <h2 class="flex--centered" data-pagefind-meta="title">{{ link.title }}</h2>
   </a>
-  <time class="dt-published" datetime="{{ link.date }}">
-    {{ link.date | date: "%m.%Y" }}
-  </time>
+  <div class="flex--centered meta">
+    {%- if link.author %}
+    <span rel="author">
+      {{ link.author }} •
+    </span>
+    {% endif -%}
+    <time class="dt-published" datetime="{{ link.date }}">
+      {{ link.date | date: "%m.%Y" }}
+    </time>
+    {%- if shareLink %}
+      <a class="brand-mastodon icon--small" href="{{ shareLink }}">
+        {% tablericon "brand-mastodon" "Mastodon post" %}
+      </a>
+    {% endif -%}
+  </div>
   <blockquote class="p-summary">{{ link.summary }}</blockquote>
   {%- if link.note %}
     <p>{{ link.note | markdown }}</p>