Extract hashtags into separate list, some more styling

config/filters/dates.js

@@ -1,10 +1,13 @@
+const locale = 'en-GB'; // change this to your locale if you want a different date/time format
+
 module.exports = function (eleventyConfig) {
-    eleventyConfig.addFilter('dateDisplay', date => new Date(date).toLocaleDateString('en-GB', {
+    eleventyConfig.addFilter('dateDisplay', date => new Date(date).toLocaleDateString(locale, {
         "dateStyle": "short"
       }));
     
-      eleventyConfig.addFilter('dateTimeDisplay', date => new Date(date).toLocaleString('en-GB', {
+      eleventyConfig.addFilter('dateTimeDisplay', date => new Date(date).toLocaleString(locale, {
         'dateStyle': 'short',
         'timeStyle': 'short',
+        'hourCycle': 'h12'
       }));    
 }

src/_data/notes.js

@@ -5,18 +5,39 @@ const formatMentions = text => {
     return text.replace(matcher, (match, username, domain) => {
         return `[${match}](https://${domain}/@${username})`;
     });
-    
+}
+
+const extractAndFormatHashtags = note => {
+    const matcher = /#(\w+)/gm;
+    const hashtags = new Set();
+    note.text = note.text.replace(matcher, (match, hashtag) => {
+        hashtags.add(hashtag);
+        return `[${match}](/tags/${hashtag})`;
+    });
+    return Array.from(hashtags);
 }
 
 module.exports = function() {
+    const hashtags = {};
+
     const notes = JSON.parse(fs.readFileSync('./src/_data/_notes.json', 'utf-8'))
         .filter(note => note.text !== null && note.visibility === "public")
-        .map(note => ({
+        .map(note => {
-            ...note,
+            extractAndFormatHashtags(note).forEach(hashtag => {
-            text: formatMentions(note.text),
+                if (!hashtags[hashtag]) {
-            createdAt: new Date(note.createdAt),
+                    hashtags[hashtag] = [];
-            replies: []
+                }
-        }));
+                hashtags[hashtag].push(note);
+            });
+    
+            return {
+                ...note,
+                text: formatMentions(note.text),
+                createdAt: new Date(note.createdAt),
+                replies: []
+            }
+        });
+
     
     notes.forEach(note => {
         if (note.replyId) {
@@ -24,6 +45,8 @@ module.exports = function() {
         }
     });
     
-    console.log(JSON.stringify(notes.filter(note => note.replies.length && note.replies.find(reply => reply.replies.length)), null, 2));
+    return {
-    return notes;
+        notes,
+        hashtags
+    };
 }

src/index.html

@@ -3,7 +3,7 @@ title: Firefish Archive
 ---
 
 <ul>
-    {% for note in notes | topLevelNotes %}
+    {% for note in notes.notes | topLevelNotes %}
         <li>
             <a href="/notes/{{ note.id }}">{{ note.id }} ({{ note | conversationLength }} replies)</a>
         </li>

src/note.md

@@ -1,7 +1,7 @@
 ---
 layout: "note.njk"
 pagination:
-    data: notes
+    data: notes.notes
     size: 1
     alias: note
 eleventyComputed:

src/styles/main.css

@@ -41,6 +41,7 @@ body {
 
 main {
     height: 100%;
+    padding: var(--space-size-m);
 }
 
 main[data-for="note"] {
@@ -51,8 +52,20 @@ main[data-for="note"] {
 }
 
 article {
-    max-width: var(--screen-lg);
+    max-width: 80ch;
     padding: var(--space-size-s);
+    border: 1px solid #e2e8f0;
     border-radius: 5px;
     box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
+}
+
+.p-author {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-size-3xs);
+}
+
+.p-author .p-name {
+    font-weight: bold;
+    font-size: var(--text-size-m);
 }