Added eleventy templates from death.id.au

Needed a little modification here and there to make it work with the activity pub data structure, but it's looking pretty good!
2023-09-27 17:06:56 +10:00 · 2023-09-27 17:06:56 +10:00 · 6647dabdc8
commit 6647dabdc8
parent b76eb76e1a
34 changed files with 979 additions and 30 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -1,10 +1,90 @@
+const { ACTOR_OBJ } = require("./src/env")
+
 module.exports = function(eleventyConfig) {
+  // I'm .gitignoring my content for now, so 11ty should not ignore that
  eleventyConfig.setUseGitIgnore(false)
+
+  // Filters are in a separate function to try and keep this config less cluttered
+  addFilters(eleventyConfig)
+  // same with shortcodes
+  addShortcodes(eleventyConfig)
+  // and collections
+  addCollections(eleventyConfig)
+
+  eleventyConfig.addGlobalData("actor_obj", () => ACTOR_OBJ);
+
+  // TODO: assets?
+  // files to passthrough copy
+  eleventyConfig.addPassthroughCopy({"img":"assets/img"})
+  eleventyConfig.addPassthroughCopy({"js":"assets/js"})
+  eleventyConfig.addPassthroughCopy("css")
+  eleventyConfig.addPassthroughCopy("CNAME")
+
+  // plugins
+  eleventyConfig.addPlugin(require("@11ty/eleventy-plugin-rss"))
+
  // Return your Object options:
  return {
    dir: {
      input: "_content",
      output: "_site"
-    }
+    },
+    htmlTemplateEngine: "njk",
+    templateFormats: ["md","html","njk"]
  }
-};
+}
+
+function addCollections(eleventyConfig) {
+  eleventyConfig.addCollection("feed", function(collectionApi) {
+    return collectionApi.getAllSorted().reverse().filter(item => {
+      if(!item.data.published) return false
+      return item.filePathStem.startsWith('/posts/')
+    }).map(item => {
+      item.data.author = ACTOR_OBJ
+      return item
+    }).sort((a, b) => new Date(b.published).getTime() - new Date(a.published).getTime())
+  })
+}
+
+function addShortcodes(eleventyConfig) {
+  eleventyConfig.addNunjucksShortcode("getVar", function(varString){ return this.ctx[varString] })
+  eleventyConfig.addShortcode('renderlayoutblock', function(name){ return (this.page.layoutblock || {})[name] || '' })
+  eleventyConfig.addPairedShortcode('layoutblock', function(content, name) {
+    if (!this.page.layoutblock) this.page.layoutblock = {}
+    this.page.layoutblock[name] = content
+    return ''
+  })
+}
+
+function addFilters(eleventyConfig) {
+  eleventyConfig.addFilter("formatDate", formatDateFilter)
+  eleventyConfig.addFilter("dateISOString", dateISOStringFilter)
+  eleventyConfig.addFilter("concat", (value, other) => value + '' + other)
+  eleventyConfig.addNunjucksAsyncFilter("await", (promise) => promise.then(res => callback(null, res)).catch(err => callback(err)))
+}
+
+// default date formatting
+function formatDateFilter(value) { 
+  try{
+    const date = new Date(value)
+    if(date) return date.toISOString().replace('T', ' ').slice(0, -5)
+    else throw 'Unrecognized data format'
+  }
+  catch(e) {
+    console.error(`Could not convert "${value}"`, e)
+    return value;
+  }
+}
+
+// dates as iso string
+function dateISOStringFilter(value) { 
+  try{
+    const date = new Date(value)
+    if(date) return date.toISOString()
+    else throw 'Unrecognized data format'
+  }
+  catch(e) {
+    console.error(`Could not convert "${value}"`, e)
+    return value;
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -169,5 +169,7 @@ dist
 .pnp.\*

 # My custom ignores
-_content
+_content/_data/_inbox
+_content/_data/_outbox
+_content/posts
 _site
--- a/1
+++ b/1
@ -0,0 +1 @@
+death.id.au
--- a/README.md
+++ b/README.md
@ -14,6 +14,10 @@ I may also experiment with pushing the content to a seperate git repository so I
 - Bun has it's own built-in http server, so this project uses that rather than something like Express.
 - It uses [`node-forge`](https://github.com/digitalbazaar/forge) for signing and verifying signed posts, as Bun does not yet implement the required `node:crypto` methods
 - It uses [`gray-matter`](https://github.com/jonschlinkert/gray-matter) for writing and parsing YAML frontmatter in Markdown files
+- It uses [11ty](https://www.11ty.dev/) to compile those Markdown files into a static website
+Note: there is an error with 11ty in Bun, tracked [here](https://github.com/oven-sh/bun/issues/5560). Until there is a fix, there is a workaround:
+`node_modules/graceful-fs/graceful-fs.js:299` — remove the `, this` from the end of the line
+  - The [RSS Plugin](https://www.11ty.dev/docs/plugins/rss/) for 11ty is also used to generate RSS feeds of the posts

 ## Development

--- a/_content/_data/layout.js
+++ b/_content/_data/layout.js
@ -0,0 +1 @@
+module.exports = "layout-default.njk"
--- a/_content/_includes/layout-default.njk
+++ b/_content/_includes/layout-default.njk
@ -0,0 +1,13 @@
+---js
+{
+  layout: "layout-main.njk",
+  ctx: function() { return this.ctx }
+}
+---
+{% from "macro-entry.njk" import entryMacro %}
+
+{{ entryMacro(ctx(), author, url, content) }}
+
+{% layoutblock 'foot' %}
+<script src="/assets/js/relative-time.js"></script>
+{% endlayoutblock %}
--- a/_content/_includes/layout-feed.njk
+++ b/_content/_includes/layout-feed.njk
@ -0,0 +1,15 @@
+---
+title: Feed
+layout: layout-main.njk
+scripts_foot: '<script src="/assets/js/relative-time.js"></script>'
+---
+<div class="h-feed">
+    <h2 class="p-name">{{ title }}</h2>
+    {{ content | safe }}
+</div>
+
+{% include 'partial-pagination.njk' %}
+
+{% layoutblock 'foot' %}
+<script src="/assets/js/relative-time.js"></script>
+{% endlayoutblock %}
--- a/_content/_includes/layout-main.njk
+++ b/_content/_includes/layout-main.njk
@ -0,0 +1,38 @@
+---
+title: Mon Repos (Death's Domain)
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/svg+xml" href="/assets/img/avatar-tt.svg">
+  <link rel="icon" type="image/png" href="/assets/img/avatar-tiny.png">
+  <link rel="authorization_endpoint" href="https://deathau-cellar-door.glitch.me/">
+  <link rel="token_endpoint" href="https://deathau-cellar-door.glitch.me/token">
+  {# <link rel="webmention" href="https://webmention.io/death.id.au/webmention" />
+  <link rel="pingback" href="https://webmention.io/death.id.au/xmlrpc" />
+  <link rel="microsub" href="https://aperture.p3k.io/microsub/807">
+  <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/atom+xml" title="Atom Feed for death.id.au" href="/atom.xml" />
+  <link rel="alternate" type="application/json" title="JSON Feed for death.id.au" 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>
+  {% renderlayoutblock 'head' %}
+</head>
+
+<body>
+  {% renderlayoutblock 'header' %}
+  <main>
+    {{ content | safe }}
+  </main>
+</body>
+{% renderlayoutblock 'footer' %}
+{% renderlayoutblock 'foot' %}
+</html>
--- a/_content/_includes/macro-author.njk
+++ b/_content/_includes/macro-author.njk
@ -0,0 +1,10 @@
+{% macro authorMacro(author) %}
+  {# {{ author | getAuthorData | log }} #}
+  <a class="p-author h-card u-url" href="{{ author.canonical_uri if author.canonical_uri else author.url }}">
+    <img class="u-photo small-avatar" alt="{{ author.icon.name if author.icon.name else "Avatar for " + author.preferredUsername }}" src="{{ author.icon.url if author.icon.url else author.avatar }}"/>
+    <span class="display-name">
+      <span class="p-name">{{ author.name }}</span>
+      <span class="p-nickname">{{ author.preferredUsername }}</span>
+    </span>
+  </a>
+{% endmacro %}
--- a/_content/_includes/macro-card-head.njk
+++ b/_content/_includes/macro-card-head.njk
@ -0,0 +1,9 @@
+{% from "macro-author.njk" import authorMacro %}
+{% macro cardHeadMacro(author, date, url) %}
+<div class="card-head">
+  <a class="u-url permalink" rel="bookmark" href="{{ url }}" >
+    <time class="dt-published" datetime="{{ date | dateISOString }}">{{ date | formatDate }}</time>
+  </a>
+  {{ authorMacro(author) }}
+</div>
+{% endmacro %}
--- a/_content/_includes/macro-entry.njk
+++ b/_content/_includes/macro-entry.njk
@ -0,0 +1,14 @@
+{% from "macro-card-head.njk" import cardHeadMacro %}
+{% from "macro-summary.njk" import summaryMacro %}
+{% macro entryMacro(item, author, url, content, summaryOnly=false) %}
+<div class="h-entry type-{{ item.postType }}">
+  {{ cardHeadMacro(author, item.published, url) }}
+  <div class="card-body">
+    {{ summaryMacro(item, url) }}
+    {% if item.type == 'article' and summaryOnly %}
+    {% elseif content %}
+      <div class="e-content">{{ content | safe }}</div>
+    {% endif %}
+  </div>
+</div>
+{% endmacro %}
--- a/_content/_includes/macro-summary.njk
+++ b/_content/_includes/macro-summary.njk
@ -0,0 +1,83 @@
+{% macro summaryMacro(item, url) %}
+{% switch item.type %}
+  {% case "article" %} {# article summary: #}
+    <h2 class="p-name"><a class="u-url" rel="bookmark" title="{{ item.name if item.name else item.title }}" href="{{ url }}">
+      {{ item.name if item.name else item.title }}
+    </a></h2>
+    {% if item.summary %}
+      <p class="p-summary">{{ item.summary | safe }}</p>
+    {% endif %}
+
+  {% case "reply" %} {# reply summary: #}
+    <p class="p-summary"><i class="fa-solid fa-reply"></i> Reply to <a class="u-in-reply-to" href="{{ item["in-reply-to"] }}">{{ item["in-reply-to"] }}</a></p>
+
+  {% case "like" %} {# like summary: #}
+    <p class="p-summary">Favourited <i class="fa-solid fa-star"></i> <a class="u-like-of" href="{{ item['like-of'] }}">{{ item['like-of'] }}</a></p>
+
+  {% case "boost" %} {# boost summary: #}
+    <p class="p-summary"></p>Boosted <i class="fa-solid fa-retweet"></i> <a class="u-repost-of" href="{{ item["repost-of"] }}">{{ item["repost-of"] }}</a></p>
+
+  {% case "bookmark" %} {# bookmark summary: #}
+    <p class="p-summary">Bookmarked <i class="fa-solid fa-bookmark"></i> <a class="u-bookmark-of" href="{{ item["bookmark-of"] }}">{{ item["bookmark-of"] }}</a></p>
+
+  {% case "read" %} {# read summary: #}
+    <p class="p-summary">
+      {% if item["read-status"].toLowerCase() == "to-read" %}
+          <data class="p-x-read-status p-read-status" value="to-read">To Read: </data>
+          <i class="fa-solid fa-book"></i>
+      {% elseif item["read-status"].toLowerCase() == "reading" %}
+          <data class="p-x-read-status p-read-status" value="reading">Currently Reading: </data>
+          <i class="fa-solid fa-book-open"></i>
+      {% elseif item["read-status"].toLowerCase() == "finished" %}
+          <data class="p-x-read-status p-read-status" value="finished">Finished Reading: </data>
+          <i class="fa-solid fa-book-bookmark"></i>
+      {% endif %}
+
+      {% if item["read-of"].startsWith("http") %}
+          <a class="u-read-of" href="{{ item["read-of"] }}">{{ item["read-of"] }}</a>
+      {% else %}
+          <strong class="p-read-of">{{ item["read-of"] }}</strong>
+      {% endif %}
+    </p>
+
+  {% case "watch" %} {# watch summary: #}
+    <p class="p-summary">
+      {% if item["watch-status"].toLowerCase() == "to-watch" %}
+          <data class="p-x-watch-status p-watch-status" value="to-watch">To Watch: </data>
+      {% elseif item["watch-status"].toLowerCase() == "watching" %}
+          <data class="p-x-watch-status p-watch-status" value="watching">Currently Watching: </data>
+      {% elseif item["watch-status"].toLowerCase() == "watched" or item["watch-status"].toLowerCase() == "finished" %}
+          <data class="p-x-watch-status p-watch-status" value="finished">Finished watching: </data>
+      {% else %}
+          <data class="p-x-watch-status p-watch-status" value="finished">Watched: </data>
+      {% endif %}
+      <i class="fa-solid fa-clapperboard"></i>
+
+      {% if item["watch-of"].startsWith("http") %}
+          <a class="u-watch-of" href="{{ item["watch-of"] }}">{{ item["watch-of"] }}</a>
+      {% else %}
+          <strong class="p-watch-of">{{ item["watch-of"] }}</strong>
+      {% endif %}
+    </p>
+
+  {% case "rsvp" %} {# rsvp summary: #}
+    <p class="p-summary">
+    
+      {% if item.rsvp.toLowerCase() == "yes" %}
+      <i class="fa-regular fa-calendar-check"></i>
+      <data class="p-rsvp" value="yes">Will attend</data>
+      {% elseif item.rsvp.toLowerCase() == "maybe" %}
+      <i class="fa-regular fa-calendar-minus"></i>
+      <data class="p-rsvp" value="maybe">Might attend</data>
+      {% elseif item.rsvp.toLowerCase() == "no" %}
+      <i class="fa-regular fa-calendar-xmark"></i>
+      <data class="p-rsvp" value="no">Won't attend</data>
+      {% elseif item.rsvp.toLowerCase() == "interested" %}
+      <i class="fa-regular fa-calendar-plus"></i>
+      <data class="p-rsvp" value="interested">Interested in</data>
+      {% endif %}
+
+      <a class="u-in-reply-to" href="{{ item["in-reply-to"] }}">{{ item["in-reply-to"] }}</a>
+    </p>
+  {% endswitch %}
+{% endmacro %}
--- a/_content/_includes/partial-pagination.njk
+++ b/_content/_includes/partial-pagination.njk
@ -0,0 +1,15 @@
+{% if pagination %}
+<nav>
+    <ul class="pagination" role="list">
+        <li><a href="{{ pagination.href.first }}" rel="first" title="First Page">«</a></li>
+        <li><a href="{{ pagination.href.previous if pagination.href.previous else "#" }}" class="{{ '' if pagination.href.previous else 'disabled' }}" rel="prev" title="Previous Page">‹</a></li>
+
+        {%- for pageEntry in pagination.pages %}
+        <li><a href="{{ pagination.hrefs[ loop.index0 ] }}"{% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page" class="active" title="Current Page" {% else %} title="Jump to Page {{ loop.index }}" {% endif %}>{{ loop.index }}</a></li>
+        {%- endfor %}
+
+        <li><a href="{{ pagination.href.next if pagination.href.next else "#" }}" class="{{ '' if pagination.href.next else 'disabled' }}" rel="next" title="Next Page">›</a></li>
+        <li><a href="{{ pagination.href.last }}" rel="last" title="Last Page">»</a></li>
+    </ul>
+</nav>
+{% endif %}
--- a/_content/_includes/summary-article.njk
+++ b/_content/_includes/summary-article.njk
@ -0,0 +1,6 @@
+<h2 class="p-name"><a class="u-url" rel="bookmark" title="{{ item.name if item.name else item.title }}" href="{{ url }}">
+  {{ item.name if item.name else item.title }}
+</a></h2>
+{% if item.summary %}
+  <p class="p-summary">{{ item.summary | safe }}</p>
+{% endif %}
--- a/_content/_includes/summary-reply.njk
+++ b/_content/_includes/summary-reply.njk
--- a/_content/index.html
+++ b/_content/index.html
@ -0,0 +1,66 @@
+---
+layout: layout-main.njk
+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-photo" alt="My profile photo — a pixelated version of me" src="/assets/img/avatar-tt.svg" />
+  <h1>
+      I'm <span class="p-name">Gordon Pedersen</span>, a.k.a <span class="p-nickname">death.au</span>
+  </h1>
+  <p class="p-note">
+    ...and I am a human on the Internet.
+  </p>
+  <p>
+    Go check out some <a href="/posts">stuff I wrote</a><br>
+    Or stay up-to-date by following me
+    <ul>
+      <li><button class="icon-button button-input"
+        data-instruction="Please enter your fediverse / mastodon handle (e.g. '@user@domain.social')" 
+        data-placeholder="@user@domain.social"
+        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
+      </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>
+    <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><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><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-github"></i> <a class="u-url" href="https://github.com/deathau" rel="me">@deathau</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-linkedin"></i> <a class="u-url" href="https://www.linkedin.com/in/gordon-pedersen/">Gordon Pedersen</a></li>
+  </ul>
+</div>
+
+{% layoutblock 'foot' %}
+<script src="/assets/js/follow.js"></script>
+  <script src="/assets/js/button-input.js"></script>
+  <script>
+    window.addEventListener('unhandledrejection', function(event) {
+      alert(event.reason)
+    })
+    function handleFollow(handle) {
+      try{
+        follow('@death.au@death.id.au', handle)
+      }
+      catch(e){
+        alert(e)
+      }
+    }
+    function tryFollow(user) {
+      try{
+        follow(user)
+      }
+      catch(e){
+        alert(e)
+      }
+    }
+  </script>
+{% endlayoutblock %}
--- a/_content/posts/index.njk
+++ b/_content/posts/index.njk
@ -0,0 +1,18 @@
+---
+title: My Feed
+layout: layout-feed.njk
+pagination:
+  data: collections.feed
+  size: 20
+eleventyExcludeFromCollections: true
+---
+{% from "macro-entry.njk" import entryMacro %}
+
+<ul>
+{% for item in pagination.items %}
+  <li>
+    {{ entryMacro(item.data, item.data.author, item.url, item.templateContent, true) }}
+  </li>
+{% endfor %}
+</ul>
+
--- a/bun.lockb
+++ b/bun.lockb
--- a/css/styles.css
+++ b/css/styles.css
@ -0,0 +1,211 @@
+:root {
+    --bg-rgb: 238, 238, 238;
+    --on-bg-rgb: 4, 4, 4;
+    --primary-rgb: 160, 116, 196;
+    --on-primary-rgb: 238, 238, 238;
+    --bg: rgb(var(--bg-rgb));
+    --on-bg: rgb(var(--on-bg-rgb));
+    --primary: rgb(var(--primary-rgb));
+    --on-primary: rgb(var(--on-primary-rgb));
+
+    --fade-alpha: 0.06;
+    --mute-alpha: 0.3;
+    
+    --bg-fade: rgba(var(--bg-rgb), var(--fade-alpha));
+    --on-bg-fade: rgba(var(--on-bg-rgb), var(--fade-alpha));
+    --primary-fade: rgba(var(--primary-rgb), var(--fade-alpha));
+    --on-primary-fade: rgba(var(--on-primary-rgb), var(--fade-alpha));
+
+    --bg-muted: rgba(var(--bg-rgb), var(--mute-alpha));
+    --on-bg-muted: rgba(var(--on-bg-rgb), var(--mute-alpha));
+    --primary-muted: rgba(var(--primary-rgb), var(--mute-alpha));
+    --on-primary-muted: rgba(var(--on-primary-rgb), var(--mute-alpha));
+
+}
+@media (prefers-color-scheme: dark) {
+    :root{
+        --bg-rgb: 17, 17, 17;
+        --on-bg-rgb: 251, 251, 251;
+        --on-primary-rgb: 251, 251, 251;
+
+        --fade-alpha: 0.16;
+    }
+}
+html { 
+    background-color: var(--bg); 
+    color: var(--on-bg); 
+}
+
+a { 
+    color: var(--primary); 
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+body {
+    line-height: 1.6;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
+    text-align: center;
+    margin: 0;
+    min-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow-x: hidden;
+}
+
+p:last-child {
+    margin-block-end: 0;
+}
+
+
+img.u-photo { border-radius: 50%; max-height:200px; }
+/* .p-author img.u-photo{
+    max-height: 48px;
+} */
+ul { padding: 0; list-style: none; }
+img.u-featured { 
+    display:block;
+    z-index:0;
+    margin-bottom:-125px
+}
+
+button.icon-button {
+    line-height: 24px;
+    background-color: #666289;
+    color:#fff;
+    border:none;
+    border-radius:4px;
+}
+button.icon-button>img {
+    max-height: 24px;
+    vertical-align: bottom;
+}
+
+.button-input-container>label{
+    display:block;
+}
+.button-input-container>input{
+    background-color: #666289;
+    color:#fff;
+    border:none;
+    border-radius: 4px;
+    padding: 4px 66px 4px 6px;
+    margin-right: -60px;
+}
+.button-input-container>input:focus{
+    border:none;
+}
+.button-input-container>button{
+    background-color: #666289;
+    color:#fff;
+    border-radius: 4px;
+    border-color: #fff;
+}
+i>img{
+    max-height: 1em;
+    vertical-align: middle;
+}
+img.tiny-avatar {
+    max-height: 17px;
+}
+
+img.small-avatar {
+    max-height: 40px;
+}
+
+/* Pagination */
+.pagination {
+    margin: 50px auto;
+}
+.pagination li {
+    display: inline-block;
+}
+.pagination a {
+    padding: 8px 16px;
+    text-decoration: none;
+    border-radius: 5px;
+    border: 1px solid var(--on-bg-fade);
+}
+.pagination a.active {
+    background-color: var(--primary);
+    color: var(--on-primary);
+  }
+  
+.pagination a:hover:not(.active) { background-color: var(--on-bg-fade); }
+
+.pagination a.disabled {
+    color: var(--primary-fade);
+    pointer-events: none;
+  }
+
+/* End Pagination */
+
+/* Feed Entries */
+
+.h-entry {
+    max-width: 500px;
+    min-width: 320px;
+    background-color: var(--primary-fade);
+    padding: 20px;
+    margin: 0;
+    border: 1px solid var(--on-bg-fade);
+    text-align: left;
+}
+
+.h-entry:not(:last-child) {
+    border-bottom: none;
+}
+
+.h-entry .p-author {
+    max-width: calc(100% - 80px);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    overflow: hidden;
+}
+
+.h-entry .u-photo {
+    vertical-align: baseline;
+}
+
+.h-entry .display-name {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.h-entry .display-name .p-name {
+    white-space: nowrap;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 700;
+}
+
+.h-entry .display-name .p-nickname {
+    white-space: nowrap;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--on-primary-muted);
+}
+
+.h-entry .permalink {
+    float:right;
+    text-align: right;
+    font-size: 0.8em;
+    color: var(--on-primary-muted);
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width:80px;
+}
+
+/* End Feed Entries */
--- a/img/Fediverse_logo_proposal.svg
+++ b/img/Fediverse_logo_proposal.svg
@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="196.52mm"
+   height="196.52mm"
+   viewBox="0 0 196.52 196.52"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   sodipodi:docname="Logo_penta_connectat-imbrincat_retallats-color.svg"
+   inkscape:export-filename="/home/nestor/Pictures/Fediversal/Logo_penta_connectat-imbrincat_retallats-color-512x.png"
+   inkscape:export-xdpi="66.175453"
+   inkscape:export-ydpi="66.175453">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.50411932"
+     inkscape:cx="-209.83484"
+     inkscape:cy="399.15332"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer2"
+     showgrid="false"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-global="false"
+     inkscape:window-width="1366"
+     inkscape:window-height="736"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     fit-margin-top="5"
+     fit-margin-left="5"
+     fit-margin-right="5"
+     fit-margin-bottom="5" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Linies"
+     style="display:inline"
+     transform="translate(6.6789703,-32.495842)">
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#a730b8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 181.13086,275.13672 a 68.892408,68.892408 0 0 1 -29.46484,29.32812 l 161.75781,162.38868 38.99805,-19.76368 z m 213.36328,214.1875 -38.99805,19.76367 81.96289,82.2832 a 68.892409,68.892409 0 0 1 29.47071,-29.33203 z"
+       transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
+       id="path9722"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#5496be;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 581.64648,339.39062 -91.57617,46.41016 6.75196,43.18945 103.61523,-52.51367 A 68.892409,68.892409 0 0 1 581.64648,339.39062 Z M 436.9082,412.74219 220.38281,522.47656 a 68.892408,68.892408 0 0 1 18.79492,37.08985 L 443.66016,455.93359 Z"
+       transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
+       id="path9729"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ce3d1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="M 367.27539,142.4375 262.79492,346.4082 293.64258,377.375 404.26562,161.41797 A 68.892408,68.892408 0 0 1 367.27539,142.4375 Z m -131.6543,257.02148 -52.92187,103.31446 a 68.892409,68.892409 0 0 1 36.98633,18.97851 l 46.78125,-91.32812 z"
+       transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
+       id="path9713"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#d0188f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 150.76758,304.91797 a 68.892408,68.892408 0 0 1 -34.41602,7.19531 68.892408,68.892408 0 0 1 -6.65039,-0.69531 l 30.90235,197.66211 a 68.892409,68.892409 0 0 1 34.41601,-7.19531 68.892409,68.892409 0 0 1 6.64649,0.69531 z"
+       transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
+       id="path1015"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#5b36e9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 239.3418,560.54492 a 68.892408,68.892408 0 0 1 0.7207,13.87696 68.892408,68.892408 0 0 1 -7.26758,27.17968 l 197.62891,31.71289 a 68.892409,68.892409 0 0 1 -0.72266,-13.8789 68.892409,68.892409 0 0 1 7.26953,-27.17774 z"
+       transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
+       id="path1674"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#30b873;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 601.13281,377.19922 -91.21875,178.08203 a 68.892408,68.892408 0 0 1 36.99414,18.98242 L 638.125,396.18359 a 68.892409,68.892409 0 0 1 -36.99219,-18.98437 z"
+       transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
+       id="path1676"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ebe305;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 476.72266,125.33008 a 68.892408,68.892408 0 0 1 -29.47071,29.33203 l 141.26563,141.81055 a 68.892409,68.892409 0 0 1 29.46875,-29.33204 z"
+       transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
+       id="path1678"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#f47601;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 347.78711,104.63086 -178.57617,90.49805 a 68.892409,68.892409 0 0 1 18.79297,37.08593 l 178.57421,-90.50195 a 68.892408,68.892408 0 0 1 -18.79101,-37.08203 z"
+       transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
+       id="path1680"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#57c115;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 446.92578,154.82617 a 68.892408,68.892408 0 0 1 -34.98242,7.48242 68.892408,68.892408 0 0 1 -6.0293,-0.63281 l 15.81836,101.29102 43.16211,6.92578 z m -16,167.02735 37.40039,239.48242 a 68.892409,68.892409 0 0 1 33.91406,-6.94336 68.892409,68.892409 0 0 1 7.20704,0.79101 L 474.08984,328.77734 Z"
+       transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
+       id="path9758"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#dbb210;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 188.13086,232.97461 a 68.892408,68.892408 0 0 1 0.75781,14.0957 68.892408,68.892408 0 0 1 -7.16015,26.98242 l 101.36914,16.28125 19.92382,-38.9082 z m 173.73633,27.90039 -19.92578,38.91211 239.51367,38.4668 a 68.892409,68.892409 0 0 1 -0.69531,-13.71875 68.892409,68.892409 0 0 1 7.34961,-27.32422 z"
+       transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
+       id="path9760"
+       inkscape:connector-curvature="0" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Nodes"
+     style="display:inline;opacity:1"
+     transform="translate(6.6789703,-32.495842)">
+    <circle
+       style="fill:#ffca00;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
+       id="path817"
+       cx="106.26596"
+       cy="51.535553"
+       r="16.570711"
+       transform="rotate(3.1178174)" />
+    <circle
+       id="path819"
+       style="fill:#64ff00;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
+       cx="171.42836"
+       cy="110.19328"
+       r="16.570711"
+       transform="rotate(3.1178174)" />
+    <circle
+       id="path823"
+       style="fill:#00a3ff;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
+       cx="135.76379"
+       cy="190.27704"
+       r="16.570711"
+       transform="rotate(3.1178174)" />
+    <circle
+       style="fill:#9500ff;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
+       id="path825"
+       cx="48.559471"
+       cy="181.1138"
+       r="16.570711"
+       transform="rotate(3.1178174)" />
+    <circle
+       id="path827"
+       style="fill:#ff0000;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
+       cx="30.328812"
+       cy="95.366837"
+       r="16.570711"
+       transform="rotate(3.1178174)" />
+  </g>
+</svg>
--- a/img/Obsidian.svg
+++ b/img/Obsidian.svg
@ -0,0 +1,6 @@
+<svg width="140" height="180" viewBox="0 0 140 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M49.775 105.089C54.3828 103.715 61.8069 101.605 70.3434 101.082C65.2222 88.1449 63.986 76.8242 64.9803 66.7442C66.1285 55.1033 70.23 45.3874 74.228 37.1201C75.0811 35.3561 75.9012 33.7135 76.6879 32.1378C77.8017 29.9069 78.8486 27.81 79.8278 25.6916C81.4579 22.1652 82.6674 19.051 83.2791 16.1576C83.8806 13.3125 83.8838 10.7715 83.1727 8.3342C82.4607 5.89352 80.9475 3.26635 78.0704 0.386692C74.3134 -0.587559 70.1448 0.267767 67.0197 3.08162L29.9298 36.4772C27.861 38.34 26.503 40.8642 26.0879 43.6182L22.8899 64.8384C27.9185 69.2873 40.33 82.2201 47.8789 100.165C48.5525 101.766 49.1875 103.408 49.775 105.089Z" fill="white"/>
+<path d="M21.3902 74.5293C21.2153 75.2761 20.9692 76.0051 20.6549 76.7063L1.05225 120.436C-0.961131 124.928 -0.0336421 130.194 3.39276 133.726L34.2418 165.523C49.9952 142.262 47.6984 120.379 40.5026 103.274C35.0465 90.3037 26.777 80.1526 21.3902 74.5293Z" fill="white"/>
+<path d="M41.3687 169.269C41.9093 169.355 42.4575 169.407 43.0096 169.424C48.864 169.6 58.7098 170.109 66.6947 171.582C73.2088 172.783 86.1213 176.397 96.747 179.505C104.855 181.877 113.211 175.396 114.387 167.024C115.245 160.917 116.855 154.009 119.821 147.677L119.753 147.702C114.73 133.682 108.34 124.629 101.641 118.849C94.9619 113.086 87.7708 110.397 80.8276 109.42C69.2835 107.795 58.7071 110.832 52.0453 112.791C56.0353 129.428 54.8074 149.004 41.3687 169.269Z" fill="white"/>
+<path d="M124.96 139.034C131.626 128.965 136.375 121.134 138.881 116.888C140.135 114.764 139.907 112.102 138.423 110.133C134.554 105.002 127.152 94.5755 123.12 84.9218C118.973 74.9962 118.355 59.5866 118.319 52.081C118.306 49.2279 117.402 46.4413 115.639 44.1994L91.6762 13.73C91.5918 15.1034 91.3946 16.4659 91.1093 17.8158C90.3118 21.5882 88.8073 25.3437 87.0916 29.0552C86.086 31.2306 84.9238 33.5612 83.7497 35.9157C82.9682 37.4827 82.1814 39.0607 81.432 40.6102C77.5579 48.6212 73.9528 57.3151 72.9451 67.5313C72.011 77.0006 73.2894 88.014 79.0482 101.162C80.0074 101.243 80.9727 101.351 81.9422 101.487C90.2067 102.651 98.8807 105.891 106.866 112.781C113.73 118.704 119.932 127.19 124.96 139.034Z" fill="white"/>
+</svg>
--- a/img/avatar-tiny.png
+++ b/img/avatar-tiny.png
--- a/img/avatar-tt-trans.svg
+++ b/img/avatar-tt-trans.svg
@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 13 17" shape-rendering="crispEdges">
+<metadata>Made with Pixels to Svg https://codepen.io/shshaw/pen/XbxvNj</metadata>
+<path stroke="#522301" d="M3 0h1M2 1h1M1 2h2M2 4h1M1 7h1M2 9h1M4 9h1" />
+<path stroke="#512201" d="M4 0h1M3 1h1M1 3h2M1 4h1M1 5h1M1 6h1M1 8h2M0 9h1M3 9h1M0 10h2M0 11h3M1 12h1" />
+<path stroke="#805130" d="M5 0h1M11 2h1" />
+<path stroke="#815231" d="M6 0h2M3 2h1" />
+<path stroke="#8d5e3d" d="M8 0h1M6 1h1M11 1h1" />
+<path stroke="#8c5d3c" d="M9 0h1M12 2h1" />
+<path stroke="#8d5e3c" d="M10 0h1M5 1h1M7 1h1M9 1h2" />
+<path stroke="#7f5231" d="M4 1h1" />
+<path stroke="#8c5e3c" d="M8 1h1M4 2h1" />
+<path stroke="#fecbcb" d="M5 2h3M9 2h1M5 3h1M4 5h1M9 5h1M4 6h2M12 6h1M7 7h1" />
+<path stroke="#ffcbcb" d="M8 2h1M10 2h1M10 7h1" />
+<path stroke="#e9b6b6" d="M3 3h1M3 5h1M4 7h1M10 13h1" />
+<path stroke="#ffcccc" d="M4 3h1M8 3h3M4 4h1M7 4h4M12 4h1M6 5h2M11 5h2M6 6h1M11 6h1M6 7h1M8 7h2M3 13h1" />
+<path stroke="#fecccc" d="M6 3h2M11 3h2M6 4h1M8 5h1M10 5h1" />
+<path stroke="#e9b5b5" d="M3 4h1M3 6h1M3 7h1" />
+<path stroke="#000000" d="M5 4h1M11 4h1M4 10h1M6 10h1M3 11h1M7 11h1M4 12h1M10 12h1" />
+<path stroke="#a97777" d="M2 5h1" />
+<path stroke="#fbc8c8" d="M5 5h1M12 7h1" />
+<path stroke="#aa7676" d="M2 6h1M2 7h1" />
+<path stroke="#ce9a9a" d="M7 6h1" />
+<path stroke="#ce9b9b" d="M8 6h2" />
+<path stroke="#fcc8c8" d="M10 6h1" />
+<path stroke="#b55916" d="M5 7h1M5 8h1M6 9h1M7 10h1" />
+<path stroke="#e47726" d="M11 7h1M7 8h4M8 9h3" />
+<path stroke="#aa7777" d="M3 8h2M5 9h1" />
+<path stroke="#d06d25" d="M6 8h1M11 8h1M7 9h1M8 10h2M8 11h1" />
+<path stroke="#4d3ca6" d="M1 9h1M2 10h1" />
+<path stroke="#2a2a2a" d="M5 10h1M4 11h2M7 12h1M5 13h4M5 14h1M8 14h1" />
+<path stroke="#2b2b2b" d="M6 11h1M5 12h2M8 12h1M6 14h2" />
+<path stroke="#323232" d="M9 11h1M3 12h1M4 16h2M8 16h2" />
+<path stroke="#333333" d="M9 12h1M9 13h1M9 14h1" />
+<path stroke="#232323" d="M4 13h1M4 14h1" />
+<path stroke="#003298" d="M4 15h2M9 15h1" />
+<path stroke="#003399" d="M6 15h3" />
+</svg>
--- a/img/avatar-tt.svg
+++ b/img/avatar-tt.svg
@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 20 20" shape-rendering="crispEdges">
+<metadata>Made with Pixels to Svg https://codepen.io/shshaw/pen/XbxvNj</metadata>
+<path stroke="#666289" d="M0 0h20M0 1h20M0 2h20M0 3h6M14 3h6M0 4h5M15 4h5M0 5h4M16 5h4M0 6h4M16 6h4M0 7h4M16 7h4M0 8h4M16 8h4M0 9h4M16 9h4M0 10h4M16 10h4M0 11h4M15 11h5M0 12h3M14 12h6M0 13h3M6 13h1M13 13h7M0 14h3M13 14h7M0 15h4M5 15h1M14 15h6M0 16h6M14 16h6M0 17h7M13 17h7M0 18h7M13 18h7M0 19h7M9 19h2M13 19h7" />
+<path stroke="#522301" d="M6 3h1M5 4h1M4 5h2M5 7h1M4 10h1M5 12h1M7 12h1" />
+<path stroke="#512201" d="M7 3h1M6 4h1M4 6h2M4 7h1M4 8h1M4 9h1M4 11h2M3 12h1M6 12h1M3 13h2M3 14h3M4 15h1" />
+<path stroke="#805130" d="M8 3h1M14 5h1" />
+<path stroke="#815231" d="M9 3h2M6 5h1" />
+<path stroke="#8d5e3d" d="M11 3h1M9 4h1M14 4h1" />
+<path stroke="#8c5d3c" d="M12 3h1M15 5h1" />
+<path stroke="#8d5e3c" d="M13 3h1M8 4h1M10 4h1M12 4h2" />
+<path stroke="#7f5231" d="M7 4h1" />
+<path stroke="#8c5e3c" d="M11 4h1M7 5h1" />
+<path stroke="#fecbcb" d="M8 5h3M12 5h1M8 6h1M7 8h1M12 8h1M7 9h2M15 9h1M10 10h1" />
+<path stroke="#ffcbcb" d="M11 5h1M13 5h1M13 10h1" />
+<path stroke="#e9b6b6" d="M6 6h1M6 8h1M7 10h1M13 16h1" />
+<path stroke="#ffcccc" d="M7 6h1M11 6h3M7 7h1M10 7h4M15 7h1M9 8h2M14 8h2M9 9h1M14 9h1M9 10h1M11 10h2M6 16h1" />
+<path stroke="#fecccc" d="M9 6h2M14 6h2M9 7h1M11 8h1M13 8h1" />
+<path stroke="#e9b5b5" d="M6 7h1M6 9h1M6 10h1" />
+<path stroke="#000000" d="M8 7h1M14 7h1M7 13h1M9 13h1M6 14h1M10 14h1M7 15h1M13 15h1" />
+<path stroke="#a97777" d="M5 8h1" />
+<path stroke="#fbc8c8" d="M8 8h1M15 10h1" />
+<path stroke="#aa7676" d="M5 9h1M5 10h1" />
+<path stroke="#ce9a9a" d="M10 9h1" />
+<path stroke="#ce9b9b" d="M11 9h2" />
+<path stroke="#fcc8c8" d="M13 9h1" />
+<path stroke="#b55916" d="M8 10h1M8 11h1M9 12h1M10 13h1" />
+<path stroke="#e47726" d="M14 10h1M10 11h4M11 12h3" />
+<path stroke="#aa7777" d="M6 11h2M8 12h1" />
+<path stroke="#d06d25" d="M9 11h1M14 11h1M10 12h1M11 13h2M11 14h1" />
+<path stroke="#4d3ca6" d="M4 12h1M5 13h1" />
+<path stroke="#2a2a2a" d="M8 13h1M7 14h2M10 15h1M8 16h4M8 17h1M11 17h1" />
+<path stroke="#2b2b2b" d="M9 14h1M8 15h2M11 15h1M9 17h2" />
+<path stroke="#323232" d="M12 14h1M6 15h1M7 19h2M11 19h2" />
+<path stroke="#333333" d="M12 15h1M12 16h1M12 17h1" />
+<path stroke="#232323" d="M7 16h1M7 17h1" />
+<path stroke="#003298" d="M7 18h2M12 18h1" />
+<path stroke="#003399" d="M9 18h3" />
+</svg>
--- a/img/avatar-tt@800.png
+++ b/img/avatar-tt@800.png
--- a/img/banner-1500x500.jpg
+++ b/img/banner-1500x500.jpg
--- a/js/button-input.js
+++ b/js/button-input.js
@ -0,0 +1,61 @@
+function buttonInputClick() {
+  this.style.display = 'none'
+
+  const buttonInput = document.createElement('div')
+  buttonInput.classList.add('button-input-container')
+
+  if(this.dataset.instruction){
+    const label = document.createElement('label')
+    buttonInput.appendChild(label)
+    label.innerText = this.dataset.instruction
+  }
+  
+  const input = document.createElement('input')
+  buttonInput.appendChild(input)
+  input.type = 'text'
+  if(this.dataset.placeholder){
+    input.placeholder = this.dataset.placeholder
+  }
+
+  const button = document.createElement('button')
+  buttonInput.appendChild(button)
+  button.innerText = "Submit"
+  button.addEventListener('click', () => {
+    if(this.onsubmit){
+      const event = new Event('button-input-value')
+      event.value = input.value
+      this.onsubmit(event)
+    }
+
+    buttonInput.parentNode.removeChild(buttonInput)
+    if(this.dataset.success){
+      const span = document.createElement('span')
+      span.classList.add('success')
+      span.innerText = this.dataset.success
+      setTimeout(() => {
+        span.parentNode.removeChild(span)
+        this.style.display = null
+      }, 5000);
+      this.parentNode.insertBefore(span, this.nextSibling)
+    }
+    else{
+      this.style.display = null
+    }
+  })
+  
+  input.addEventListener("keypress", function(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      button.click();
+    }
+  });
+
+  this.parentNode.insertBefore(buttonInput, this.nextSibling)
+  input.focus()
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.button-input').forEach(button => {
+    button.addEventListener('click', buttonInputClick) 
+  });
+}, false);
--- a/js/follow.js
+++ b/js/follow.js
@ -0,0 +1,35 @@
+const SUBSCRIBE_LINK_REL = 'http://ostatus.org/schema/1.0/subscribe'
+function follow(username, handle) {
+  if(!handle){
+    handle = prompt("Please enter your fediverse / mastodon handle (e.g. '@user@domain.social')", "@")
+  }
+  
+  if(handle) {
+    const input = handle
+    handle = handle.trim().replace(/^@/,'')
+    const split = handle.split('@')
+    if(split.length == 2) {
+      const resource = `acct:${handle}`
+      const domain = split[1]
+      
+      // look up remote user via webfinger
+      const url = `https://${domain}/.well-known/webfinger?resource=${resource}`
+      fetch(url, {headers: {
+        'Content-Type': 'application/activity+json'
+      }}).then(async result => {
+        const json = await result.json()
+        const subscribe = json.links.find(link => link.rel && link.rel == SUBSCRIBE_LINK_REL)
+        let template = subscribe.template
+        window.open(template.replace("{uri}", username), '_blank').focus()
+      })
+      .catch(e => {
+        console.error(e)
+        throw `Sorry, we couldn't find a subscribe uri for ${input}.\n\nTry searching for "${username}" on ${domain} (or in your fediverse client of choice)`
+      })
+      
+    }
+    else {
+      throw 'Please enter your fediverse address in @user@domain.social format'
+    }
+  }
+}
--- a/js/relative-time.js
+++ b/js/relative-time.js
@ -0,0 +1,6 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('time').forEach(time => {
+    const datetime = luxon.DateTime.fromISO(time.getAttribute('datetime'))
+    time.innerText = datetime.toRelative()
+  });
+}, false);
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
  },
  "dependencies": {
    "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy-plugin-rss": "^1.2.0",
    "gray-matter": "^4.0.3",
    "node-forge": "^1.3.1"
  }
--- a/src/activitypub.ts
+++ b/src/activitypub.ts
@ -1,4 +1,4 @@
-import { ACCOUNT, ACTOR, HOSTNAME, PUBLIC_KEY } from "./env"
+import { ACCOUNT, ACTOR, ACTOR_OBJ, HOSTNAME, PUBLIC_KEY } from "./env"
 import * as db from "./db"
 import { reqIsActivityPub, send, verify } from "./request"
 import outbox from "./outbox"
@ -162,28 +162,7 @@ const getActor = async (req:Request, account:string):Promise<Response> => {
  console.log("GetActor", account)
  if (ACCOUNT !== account) return new Response("", { status: 404 })

-  if(reqIsActivityPub(req)) return Response.json({
-    "@context": [
-      "https://www.w3.org/ns/activitystreams",
-      "https://w3id.org/security/v1",
-    ],
-    id: ACTOR,
-    type: "Person",
-    preferredUsername: ACCOUNT,
-    url: ACTOR,
-    manuallyApprovesFollowers: false,
-    discoverable: true,
-    published: "2023-09-14T00:00:00Z",
-    inbox: `${ACTOR}/inbox`,
-    outbox: `${ACTOR}/outbox`,
-    followers: `${ACTOR}/followers`,
-    following: `${ACTOR}/following`,
-    publicKey: {
-      id: `${ACTOR}#main-key`,
-      owner: ACTOR,
-      publicKeyPem: PUBLIC_KEY,
-    },
-  }, { headers: { "Content-Type": "application/activity+json"}})
+  if(reqIsActivityPub(req)) return Response.json(ACTOR_OBJ, { headers: { "Content-Type": "application/activity+json"}})
  else return Response.json(await db.listPosts())
 }

--- a/src/db.ts
+++ b/src/db.ts
@ -1,4 +1,4 @@
-import { ACTIVITY_INBOX_PATH, ACTIVITY_OUTBOX_PATH, ACTOR, CONTENT_PATH, DATA_PATH, POSTS_PATH, STATIC_PATH } from "./env";
+import { ACCOUNT, ACTIVITY_INBOX_PATH, ACTIVITY_OUTBOX_PATH, ACTOR, CONTENT_PATH, DATA_PATH, POSTS_PATH, PUBLIC_KEY, STATIC_PATH } from "./env";
 import path from "path"
 import { readdir } from "fs/promises"
 import { unlinkSync } from "node:fs"
--- a/src/env.ts
+++ b/src/env.ts
@ -48,4 +48,32 @@ export const DEFAULT_DOCUMENTS = process.env.DEFAULT_DOCUMENTS || [
  'Index.htm',
  'default.html',
  'default.htm'
-]
+]
+
+export const ACTOR_OBJ = {
+  "@context": [
+    "https://www.w3.org/ns/activitystreams",
+    "https://w3id.org/security/v1",
+  ],
+  id: ACTOR,
+  type: "Person",
+  preferredUsername: ACCOUNT,
+  url: ACTOR,
+  manuallyApprovesFollowers: false,
+  discoverable: true,
+  published: "2023-09-14T00:00:00Z",
+  inbox: `${ACTOR}/inbox`,
+  outbox: `${ACTOR}/outbox`,
+  followers: `${ACTOR}/followers`,
+  following: `${ACTOR}/following`,
+  publicKey: {
+    id: `${ACTOR}#main-key`,
+    owner: ACTOR,
+    publicKeyPem: PUBLIC_KEY,
+  },
+  icon: {
+    type: "Image",
+    mediaType: "image/png",
+    url: BASE_URL + "/assets/img/avatar-tt@800.png"
+  },
+}
--- a/src/index.ts
+++ b/src/index.ts
@ -1,10 +1,12 @@
-import { ACCOUNT, ACTOR, DEFAULT_DOCUMENTS, HOSTNAME, PORT, STATIC_PATH } from "./env";
+import { ACCOUNT, ACTOR, DEFAULT_DOCUMENTS, HOSTNAME, STATIC_PATH } from "./env";
 import admin from './admin'
 import activitypub from "./activitypub";
 import { fetchObject } from "./request";
 import path from "path"
 import { BunFile } from "bun";
-const { stat } = require("fs").promises
+import { rebuild } from "./db";
+
+rebuild()

 const server = Bun.serve({
  port: 3000,