feat: restore link sharing

.env

@@ -1,3 +1,4 @@
 API_KEY_LASTFM=
 API_KEY_TRAKT=
 API_KEY_WEBMENTIONS_CORYD_DEV=
+SECRET_FEED_INSTAPAPER_FAVORITES=

src/_data/follow.js

@@ -2,6 +2,7 @@ module.exports = async function () {
   const { ActivityFeed } = await import('@11ty/eleventy-activity-feed')
   const feed = new ActivityFeed()
   feed.addSource('atom', '📝', 'https://coryd.dev/feed.xml')
+  // feed.addSource('atom', '🔗', 'https://coryd.dev/links.xml')
   feed.addSource('rss', '🎥', 'https://letterboxd.com/cdme/rss')
   feed.addSource('rss', '📖', 'https://oku.club/rss/collection/NvEmF')
   const entries = feed.getEntries().catch()

src/_data/links.js

@@ -0,0 +1,24 @@
+const { extract } = require('@extractus/feed-extractor')
+const { AssetCache } = require('@11ty/eleventy-fetch')
+
+module.exports = async function () {
+  const URL = process.env.SECRET_FEED_INSTAPAPER_LIKES
+  // noinspection JSCheckFunctionSignatures
+  const asset = new AssetCache('links_data')
+  if (asset.isCacheValid('1h')) return await asset.getCachedValue()
+  const res = await extract(URL, {
+    getExtraEntryFields: (feedEntry) => {
+      return {
+        time: feedEntry['pubDate'] || '',
+      }
+    },
+  })
+    .catch((error) => {
+      console.log(error.message)
+    })
+    .catch()
+  const data = res.entries
+  const links = data.splice(0, 5)
+  await asset.save(links, 'json')
+  return links
+}

src/_includes/feed-links.liquid

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<?xml-stylesheet href="/assets/atom-feed-links.xsl" type="text/xsl" media="screen"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <title>
+    {% block title %}Links • Cory Dransfeldt{% endblock %}
+  </title>
+  <link href="{{ pkg.homepage }}/links.xml" rel="self" />
+  <link href="{{ pkg.homepage }}/" />
+  <link rel="hub" href="https://pubsubhubbub.superfeedr.com/" />
+  <updated>{% block update %}{{ articles[0].date | date: "%Y-%m-%dT%H:%M:%S-08:00" }}{% endblock %}</updated>
+  <id>{{ site.url }}</id>
+  <author>
+    <name>{{ site.name }}</name>
+    <email>{{ site.email }}</email>
+  </author>
+  <generator uri="https://11ty.dev" version="{{ eleventy.version }}">{{ eleventy.generator }}</generator>
+  {% block entries %}{% endblock %}
+</feed>

src/_includes/now.liquid

@@ -3,8 +3,9 @@ layout: main
 ---
 {% include "header.liquid" %}
 <div class="pt-12 prose dark:prose-invert hover:prose-a:text-blue-500 max-w-full">
-  <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-4">
+  <h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
-    Currently
+    {% heroicon "solid" "clock" "Currently" "height=28" %}
+    <div class="ml-1">Currently</div>
   </h2>
   <div class="pl-4 md:pl-8">
     <p class="my-2">{{ status.emoji }} {{ status.content }}</p>
@@ -26,12 +27,13 @@ layout: main
     </p>
     {{ content }}
   </div>
-  <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
+  <h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
-    Making
+    {% heroicon "solid" "terminal" "Making" "height=28" %}
+    <div class="ml-1">Making</div>
   </h2>
   <div class="pl-4 md:pl-8">
     <p class="my-2">
-      <span class="icon-inline mr-1">{% heroicon "solid" "terminal" "Terminal" "width=20 height=20" %}</span>
+      <span class="icon-inline mr-1">{% heroicon "solid" "desktop-computer" "Hacking" "width=20 height=20" %}</span>
       Hacking away on random projects like this page, my
       <a href="/">blog</a>, and whatever else I can find time for.</p>
     <p class="my-2">
@@ -40,8 +42,9 @@ layout: main
     </p>
   </div>
   {% if artists.size > 0 %}
-    <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
+    <h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
-      Listening: artists
+      {% heroicon "solid" "microphone" "Artists" "height=28" %}
+      <div class="ml-1">Artists</div>
     </h2>
     <div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">
       {% for artist in artists %}
@@ -63,8 +66,9 @@ layout: main
     </div>
   {% endif %}
   {% if albums.size > 0 %}
-    <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
+    <h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
-      Listening: albums
+      {% heroicon "solid" "music-note" "Albums" "height=28" %}
+      <div class="ml-1">Albums</div>
     </h2>
     <div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">
       {% for album in albums %}
@@ -86,8 +90,9 @@ layout: main
     </div>
   {% endif %}
   {% if books.size > 0 %}
-    <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-6 mb-4">
+    <h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
-      Reading: books
+      {% heroicon "solid" "bookmark" "Books" "height=28" %}
+      <div class="ml-1">Books</div>
     </h2>
     <div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">
       {% for book in books %}
@@ -105,9 +110,27 @@ layout: main
       {% endfor %}
     </div>
   {% endif %}
+  {% if links.size > 0 %}
+    <h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
+      {% heroicon "solid" "newspaper" "Links" "height=28" %}
+      <div class="ml-1">Links</div>
+    </h2>
+    <div>
+      <ul class="list-inside list-disc pl-5 md:pl-10">
+        {% for link in links %}
+          <li class="mt-1.5 mb-2">
+            <a href="{{link.link}}" title="{{link.title | escape}}">
+              {{ link.title }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endif %}
   {% if movies.size > 0 %}
-    <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-6 mb-4">
+    <h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
-      Watching: movies
+      {% heroicon "solid" "film" "Movies" "height=28" %}
+      <div class="ml-1">Movies</div>
     </h2>
     <div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">
       {% for movie in movies %}
@@ -126,8 +149,9 @@ layout: main
     </div>
   {% endif %}
   {% if tv.size > 0 %}
-    <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-6 mb-4">
+    <h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
-      Watching: tv
+      {% heroicon "solid" "video-camera" "TV" "height=28" %}
+      <div class="ml-1">TV</div>
     </h2>
     <div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">
       {% for episode in tv %}

src/assets/atom-feed-links.xsl

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+# Pretty Atom Feed
+Based on "Pretty RSS Feed": https://github.com/genmon/aboutfeeds/issues/26
+Styles an Atom feed, making it friendly for humans viewers, and adds a link
+to aboutfeeds.com for new user onboarding. See it in action:
+https://nicolas-hoizey.com/feeds/all.xml
+-->
+<xsl:stylesheet
+  version="3.0"
+  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+  xmlns:atom="http://www.w3.org/2005/Atom">
+  <xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
+  <xsl:template match="/">
+    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+      <head>
+        <meta charset="utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+        <title><xsl:value-of select="atom:feed/atom:title"/></title>
+        <link href="/assets/styles/tailwind.css" rel="stylesheet" />
+        <link href="/assets/styles/index.css" rel="stylesheet" />
+        <link href="/assets/img/favicon/favicon-16x16.png" rel="icon" type="image/x-icon" />
+        <link href="/assets/img/favicon/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32" />
+        <link href="/assets/img/favicon/apple-touch-icon.png" rel="apple-touch-icon" />
+        <script src="/_vercel/insights/script.js">''</script>
+        <script src="/assets/scripts/isDarkMode.js">''</script>
+        <link rel="me" href="https://social.lol/@cory" />
+      </head>
+      <body class="dark:text-white dark:bg-gray-900 font-sans text-gray-800">
+        <div class="min-h-screen flex flex-col">
+          <main class="flex-1 w-10/12 max-w-screen-sm md:max-w-screen-md mx-auto">
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between md:pt-10 pt-5">
+              <a class="text-gray-800 dark:text-gray-200 dark:hover:text-purple-400 hover:text-purple-500" href="/">
+                <h1 class="font-black leading-tight md:pb-0 md:text-3xl pb-5 text-2xl">Links • Cory Dransfeldt</h1>
+              </a>
+              <a href="/">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400">
+                  <path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
+                  <path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
+                </svg>
+              </a>
+            </div>
+            <div class="pt-12 prose dark:prose-invert hover:prose-a:text-blue-500 max-w-full">
+              <div class="dark:text-white text-gray-800">
+                <h2 class="font-black leading-tight m-0 md:text-2xl text-xl tracking-normal mb-4 flex flex-row items-center text-gray-800 dark:text-gray-200">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-10 h-10 mr-1">
+                    <path fill-rule="evenodd" d="M3.75 4.5a.75.75 0 01.75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 01-.75.75h-.75a.75.75 0 01-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 01-.75-.75V4.5zm0 6.75a.75.75 0 01.75-.75h.75a8.25 8.25 0 018.25 8.25v.75a.75.75 0 01-.75.75H12a.75.75 0 01-.75-.75v-.75a6 6 0 00-6-6H4.5a.75.75 0 01-.75-.75v-.75zm0 7.5a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd" />
+                  </svg>
+                  Feed preview • links
+                </h2>
+                <p>Recently read and favorited links <a href="https://www.pinboard.in/api/">sourced from the Pinboard API.</a></p>
+                <p><xsl:value-of select="atom:feed/atom:description"/></p>
+              </div>
+              <ul class="mb-8">
+                <xsl:apply-templates select="atom:feed/atom:entry" />
+              </ul>
+            </div>
+            <footer class="prose pb-8 mt-4 text-gray-800 dark:text-white border-t border-gray-200 dark:border-gray-700 ">
+              <div>
+                <p class="mb-0"><strong class="text-gray-800 dark:text-gray-200">This is a web feed,</strong> also known as an RSS or Atom feed.</p>
+                <p class="mt-0"><strong class="text-gray-800 dark:text-gray-200">Subscribe</strong> by copying the URL from the address bar into your newsreader.</p>
+              </div>
+              <small>Visit <a href="https://aboutfeeds.com">About Feeds</a> to get started with newsreaders and subscribing. It's free.</small>
+            </footer>
+          </main>
+        </div>
+      </body>
+    </html>
+  </xsl:template>
+  <xsl:template match="atom:feed/atom:entry">
+    <li>
+      <a class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
+        <xsl:attribute name="href">
+          <xsl:value-of select="atom:link/@href"/>
+        </xsl:attribute>
+        <xsl:value-of select="atom:title"/>
+      </a> • <xsl:value-of select="atom:updated" />
+    </li>
+  </xsl:template>
+</xsl:stylesheet>

src/feeds.md

@@ -25,4 +25,5 @@ class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 m
 </h2>
 
 - Posts ([RSS](/feed.xml) • [JSON](/feed.json)): a feed of all of my blog posts.
+- Links ([RSS](/links.xml) • [JSON](/links.json)): a feed of links I've liked on Instapaper.
 - Follow ([JSON](/follow.json)): a JSON feed of my web activity comprised of blog posts, links, movies and books (using the same data sources as [my now page](/now)).

src/feeds/links.liquid

@@ -0,0 +1,19 @@
+---
+layout: null
+permalink: /links.xml
+---
+{% layout "./_includes/feed-links.liquid" %}
+{% block title %}Links • Cory Dransfeldt{% endblock %}
+{% block self %}links.xml{% endblock %}
+{% block update %}{{ articles[0].time | date: "%Y-%m-%dT%H:%M:%S-08:00" }}{% endblock %}
+{% block entries %}
+{% for link in links %}
+  <entry>
+    <title>{{ link.description | escape }}</title>
+    <link href="{{link.href}}" />
+    <updated>{{ link.time | date: "%m.%d.%Y" }}</updated>
+    <id>{{ link.href }}</id>
+    <content type="html"></content>
+  </entry>
+{% endfor %}
+{% endblock %}

src/follow-feed.11ty.js

@@ -10,6 +10,7 @@ module.exports = class {
     const feed = new ActivityFeed()
 
     feed.addSource('atom', '📝', 'https://coryd.dev/feed.xml')
+    // feed.addSource('atom', '🔗', 'https://coryd.dev/links.xml')
     feed.addSource('rss', '🎥', 'https://letterboxd.com/cdme/rss')
     feed.addSource('rss', '📖', 'https://oku.club/rss/collection/NvEmF')
 

src/links.11ty.liquid

@@ -0,0 +1,20 @@
+---
+permalink: '/links.json'
+---
+{
+"version": "https://jsonfeed.org/version/1",
+"title": "Links • Cory Dransfeldt",
+"icon": "https://coryd.dev/static/images/avatar.webp",
+"home_page_url": "https://coryd.dev",
+"feed_url": "https://coryd.dev/links.json",
+"items": [{% for link in links %}
+  {
+  "id": "{{ link.href }}",
+  "title": "{{ link.description | escape }}",
+  "url": "{{ link.href }}",
+  "content_text": "",
+  "date_published": "{{ link.time | date: "%Y-%m-%dT%H:%M:%S-08:00" }}"
+  }{% if not forloop.last %},{% endif %}
+{% endfor %}
+]
+}

vercel.json

@@ -16,6 +16,19 @@
         }
       ]
     },
+    {
+      "source": "/links.xml",
+      "headers": [
+        {
+          "key": "Content-Type",
+          "value": "application/xml; charset=utf-8  # not application/rss+xml"
+        },
+        {
+          "key": "x-content-type-options",
+          "value": "nosniff"
+        }
+      ]
+    },
     {
       "source": "/.well-known/webfinger",
       "headers": [