Utilize the global actor object in 11ty templates

.eleventy.js

@@ -1,4 +1,4 @@
-const { ACTOR_OBJ } = require("./src/env")
+const ACTOR = require("./actor")
 
 module.exports = function(eleventyConfig) {
   // I'm .gitignoring my content for now, so 11ty should not ignore that
@@ -11,7 +11,8 @@ module.exports = function(eleventyConfig) {
   // and collections
   addCollections(eleventyConfig)
 
-  eleventyConfig.addGlobalData("actor_obj", () => ACTOR_OBJ);
+  // add the actor data, accessible globally
+  eleventyConfig.addGlobalData("ACTOR", ACTOR);
 
   // TODO: assets?
   // files to passthrough copy
@@ -22,6 +23,8 @@ module.exports = function(eleventyConfig) {
 
   // plugins
   eleventyConfig.addPlugin(require("@11ty/eleventy-plugin-rss"))
+  const { EleventyHtmlBasePlugin } = require("@11ty/eleventy")
+  eleventyConfig.addPlugin(EleventyHtmlBasePlugin)
 
   // Return your Object options:
   return {
@@ -40,7 +43,7 @@ function addCollections(eleventyConfig) {
       if(!item.data.published) return false
       return item.filePathStem.startsWith('/posts/')
     }).map(item => {
-      item.data.author = ACTOR_OBJ
+      item.data.author = ACTOR
       return item
     }).sort((a, b) => new Date(b.published).getTime() - new Date(a.published).getTime())
   })

_content/_includes/layout-main.njk

@@ -18,9 +18,9 @@ title: Mon Repos (Death's Domain)
   <link rel="micropub" href="https://micropub.death.id.au/.netlify/functions/micropub">
   <link rel="micropub_media" href="https://micropub.death.id.au/.netlify/functions/media"> #}
   <link rel="stylesheet" href="/css/styles.css">
-  <link rel="alternate" type="application/rss+xml" title="RSS Feed for death.id.au" href="/rss.xml" />
+  <link rel="alternate" type="application/rss+xml" title="RSS Feed for {{ ACTOR.hostname }}" href="/rss.xml" />
-  <link rel="alternate" type="application/atom+xml" title="Atom Feed for death.id.au" href="/atom.xml" />
+  <link rel="alternate" type="application/atom+xml" title="Atom Feed for {{ ACTOR.hostname}}" href="/atom.xml" />
-  <link rel="alternate" type="application/json" title="JSON Feed for death.id.au" href="/feed.json" />
+  <link rel="alternate" type="application/json" title="JSON Feed for {{ ACTOR.hostname }}" href="/feed.json" />
   <script src="https://kit.fontawesome.com/ebe14e90c3.js" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js" crossorigin="anonymous"></script>
   <title>{{ title }}</title>

_content/atom.njk

@@ -0,0 +1,37 @@
+---json
+{
+  "layout": null,
+  "permalink": "atom.xml",
+  "eleventyExcludeFromCollections": true,
+  "metadata": {
+    "subtitle": "A feed of all my posts on the fediverse",
+    "language": "en"
+  }
+}
+---
+<?xml version="1.0" encoding="utf-8"?>
+{% from "macro-summary.njk" import summaryMacro %}
+<feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ ACTOR.url }}">
+  <title>{{ ACTOR.name }}'s feed</title>
+  <subtitle>{{ metadata.subtitle }}</subtitle>
+  <link href="{{ permalink | absoluteUrl(ACTOR.url) }}" rel="self"/>
+  <link href="{{ ACTOR.url }}"/>
+  <updated>{{ collections.feed[0].date | dateToRfc822 }}</updated>
+  <id>{{ ACTOR.url }}</id>
+  <author>
+    <name>{{ ACTOR.name }}</name>
+  </author>
+  {%- for post in collections.feed %}
+  {%- set absolutePostUrl = post.url | absoluteUrl(ACTOR.url) %}
+  <entry>
+    <title>{{ post.data.title }}</title>
+    <link href="{{ absolutePostUrl }}"/>
+    <updated>{{ post.date | dateToRfc822 }}</updated>
+    <id>{{ absolutePostUrl }}</id>
+    <content xml:lang="{{ metadata.language }}" type="html">
+      {{ summaryMacro(post.data, post.url) | htmlToAbsoluteUrls(absolutePostUrl) }}
+      {{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}
+    </content>
+  </entry>
+  {%- endfor %}
+</feed>

_content/index.html

@@ -4,13 +4,20 @@ eleventyExcludeFromCollections: true
 ---
 <!-- Reference for representative h-card properties: https://microformats.org/wiki/h-card -->
 <div class="h-card" rel="author">
-    <img class="u-featured" src="/assets/img/banner-1500x500.jpg" alt="A grim reaper in a decorated cubicle, writing and daydreaming, surrounded by many other grim reapers in bland, grey, cubicles" />
+  <img class="u-featured" src="{{ ACTOR.image.url }}" alt="{{ ACTOR.image.name}}" />
-    <img class="u-photo" alt="My profile photo — a pixelated version of me" src="/assets/img/avatar-tt.svg" />
+  <img class="u-photo" alt="{{ ACTOR.icon.name}}" src="{{ ACTOR.icon.url }}" />
   <h1>
-      I'm <span class="p-name">Gordon Pedersen</span>, a.k.a <span class="p-nickname">death.au</span>
+    I'm <span class="p-name">{{ ACTOR.name }}</span>
+    {% if ACTOR.name != ACTOR.preferredUsername %}
+      (a.k.a <span class="p-nickname">{{ ACTOR.preferredUsername }}</span>)
+    {% endif %}
   </h1>
   <p class="p-note">
-    ...and I am a human on the Internet.
+    {% if ACTOR.summary %}
+      {{ ACTOR.summary }}
+    {% else %}
+      ...and I am a human on the Internet.
+    {% endif %}
   </p>
   <p>
     Go check out some <a href="/posts">stuff I wrote</a><br>
@@ -22,21 +29,24 @@ eleventyExcludeFromCollections: true
         data-success="Thanks for the follow!"
         onsubmit="handleFollow(event.value)">
         <img src="/assets/img/Fediverse_logo_proposal.svg" alt="Fediverse logo">
-        Follow @death.au@death.id.au
+        Follow @{{ ACTOR.preferredUsername }}@{{ ACTOR.hostname }}
       </button></li>
       <li><i class="fa fa-rss"></i> <a class="u-url" href="/rss.xml">RSS Feed</a></li>
       <li><i class="fa fa-feed"></i> <a class="u-url" href="/atom.xml">Atom Feed</a></li>
       <li><i class="fa fa-feed"></i> <a class="u-url" href="/feed.json">JSON Feed</a></li>
     </ul>
   </p>
-  <ul>
+  <p>
-    <li><i><img class="tiny-avatar" src="/assets/img/avatar-tt-trans.svg"></i> <a class="u-uid u-url" href="https://death.id.au">Mon Repos (you are here)</a><a class="u-url" href="acct:death.au@death.id.au"></a></li>
+    ...or elsewhere on the Internet:
-    <li><i><img class="tiny-avatar" src="/assets/img/Obsidian.svg"></i> <a class="u-url" href="https://notes.death.id.au" rel="me">My published notes</a>
+    <ul>
-    <li><i class="fa-brands fa-mastodon"></i> <a class="u-url" href="https://pkm.social/@death_au" rel="me">@death_au@pkm.social</a></li>
+      <li><i><img class="tiny-avatar" src="/assets/img/avatar-tt-trans.svg"></i> <a class="u-uid u-url" href="https://death.id.au">Mon Repos (you are here)</a><a class="u-url" href="acct:death.au@death.id.au"></a></li>
-    <li><i class="fa-brands fa-github"></i> <a class="u-url" href="https://github.com/deathau" rel="me">@deathau</a></li>
+      <li><i><img class="tiny-avatar" src="/assets/img/Obsidian.svg"></i> <a class="u-url" href="https://notes.death.id.au" rel="me">My published notes</a></li>
-    <li><i class="fa-brands fa-twitter"></i> <a class="u-url" href="https://twitter.com/death_au" rel="me">@death_au</a></li>
+      <li><i class="fa-brands fa-mastodon"></i> <a class="u-url" href="https://pkm.social/@death_au" rel="me">@death_au@pkm.social</a></li>
-    <li><i class="fa-brands fa-linkedin"></i> <a class="u-url" href="https://www.linkedin.com/in/gordon-pedersen/">Gordon Pedersen</a></li>
+      <li><i class="fa-brands fa-github"></i> <a class="u-url" href="https://github.com/deathau" rel="me">@deathau</a></li>
-  </ul>
+      <li><i class="fa-brands fa-twitter"></i> <a class="u-url" href="https://twitter.com/death_au" rel="me">@death_au</a></li>
+      <li><i class="fa-brands fa-linkedin"></i> <a class="u-url" href="https://www.linkedin.com/in/gordon-pedersen/">Gordon Pedersen</a></li>
+    </ul>
+  </p>
 </div>
 
 {% layoutblock 'foot' %}
@@ -48,7 +58,7 @@ eleventyExcludeFromCollections: true
     })
     function handleFollow(handle) {
       try{
-        follow('@death.au@death.id.au', handle)
+        follow(`@${ACTOR.preferredUsername}@${ACTOR.hostname}`, handle)
       }
       catch(e){
         alert(e)

_content/json.njk

@@ -0,0 +1,36 @@
+---json
+{
+  "layout": null,
+  "permalink": "feed.json",
+  "eleventyExcludeFromCollections": true,
+  "metadata": {
+    "subtitle": "A feed of all my posts on the fediverse",
+    "language": "en"
+  }
+}
+---
+{ {% from "macro-summary.njk" import summaryMacro %}
+  "version": "https://jsonfeed.org/version/1.1",
+  "title": "{{ ACTOR.name }}'s feed",
+  "language": "{{ metadata.language }}",
+  "home_page_url": "{{ ACTOR.url }}",
+  "feed_url": "{{ permalink | absoluteUrl(ACTOR.url) }}",
+  "description": "{{ metadata.subtitle }}",
+  "author": {
+    "name": "{{ ACTOR.name }}",
+    "url": "{{ ACTOR.url }}"
+  },
+  "items": [
+    {%- for post in collections.feed %}
+    {%- set absolutePostUrl = post.url | absoluteUrl(ACTOR.url) %}
+    {
+      "id": "{{ absolutePostUrl }}",
+      "url": "{{ absolutePostUrl }}",
+      "title": "{{ post.data.title }}",
+      "content_html": {{ summaryMacro(post.data, post.url) | concat(post.templateContent) | htmlToAbsoluteUrls(absolutePostUrl) | dump | safe }},
+      "date_published": "{{ post.date | dateToRfc3339 }}"
+    }
+    {% if not loop.last %},{% endif %}
+    {%- endfor %}
+  ]
+}

_content/rss.njk

@@ -0,0 +1,36 @@
+---js
+{
+  "layout": null,
+  "permalink": "rss.xml",
+  "eleventyExcludeFromCollections": true,
+  "metadata": {
+    "subtitle": "A feed of all my posts on the fediverse",
+    "language": "en"
+  }
+}
+---
+<?xml version="1.0" encoding="utf-8"?>
+{% from "macro-summary.njk" import summaryMacro %}
+<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:base="{{ ACTOR.url }}" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ ACTOR.name }}'s feed</title>
+    <link>{{ ACTOR.url }}</link>
+    <atom:link href="{{ permalink | absoluteUrl(ACTOR.url) }}" rel="self" type="application/rss+xml" />
+    <description>{{ metadata.subtitle }}</description>
+    <language>{{ metadata.language }}</language>
+    {%- for post in collections.feed | reverse %}
+    {%- set absolutePostUrl = post.url | absoluteUrl(ACTOR.url) %}
+    <item>
+      <title>{{ post.data.title }}</title>
+      <link>{{ absolutePostUrl }}</link>
+      <description>
+        {{ summaryMacro(post.data, post.url) | htmlToAbsoluteUrls(absolutePostUrl) }}
+        {{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}
+      </description>
+      <pubDate>{{ post.date | dateToRfc822  }}</pubDate>
+      <dc:creator>{{ ACTOR.name }}</dc:creator>
+      <guid>{{ absolutePostUrl }}</guid>
+    </item>
+    {%- endfor %}
+  </channel>
+</rss>

actor.ts

@@ -1,4 +1,4 @@
-import { BASE_URL, PUBLIC_KEY } from "./src/env"
+import { BASE_URL, HOSTNAME, PUBLIC_KEY } from "./src/env"
 
 // change "activitypub" to whatever you want your account name to be
 export const preferredUsername:string = process.env.ACCOUNT || "activitypub"
@@ -6,17 +6,19 @@ export const name = process.env.REAL_NAME || preferredUsername
 export const summary = ""
 
 // avatar image
-const icon:{ type:"Image", mediaType:string, url:string } = {
+const icon:{ type:"Image", mediaType:string, url:string, name:string } = {
   type: "Image",
   mediaType: "image/svg+xml",
-  url: BASE_URL + "/assets/img/avatar-tt.svg"
+  url: BASE_URL + "/assets/img/avatar-tt.svg",
+  name: "My profile photo — a pixelated version of me"
 }
 
 // banner image
-const image:{ type:"Image", mediaType:string, url:string } = {
+const image:{ type:"Image", mediaType:string, url:string, name:string } = {
   type: "Image",
   mediaType: "image/jpeg",
-  url: BASE_URL + "/assets/img/banner-1500x500.jpg"
+  url: BASE_URL + "/assets/img/banner-1500x500.jpg",
+  name: "A grim reaper in a decorated cubicle, writing and daydreaming, surrounded by many other grim reapers in bland, grey, cubicles"
 }
 
 // This is a list of other actor ids you identify as
@@ -72,6 +74,7 @@ export default {
   preferredUsername,
   name,
   summary,
+  hostname: HOSTNAME,
   url: BASE_URL,
   manuallyApprovesFollowers: false,
   discoverable: true,

src/request.ts

@@ -64,7 +64,7 @@ async function fetchActor(url:string) {
 export async function fetchObject(object_url:string) {
   console.log(`fetch ${object_url}`)
 
-  const res = await fetch(object_url);
+  const res = await signedFetch(object_url);
 
   if (res.status < 200 || 299 < res.status) {
     throw new Error(res.statusText + ": " + (await res.text()));