Compare commits

...

2 Commits

Author SHA1 Message Date
Lewis Dale
91fac7b4c7 Create tag page, some more styling 2024-01-08 20:43:56 +00:00
Lewis Dale
3616eb0d95 Extract hashtags into separate list, some more styling 2024-01-06 22:11:43 +00:00
7 changed files with 84 additions and 14 deletions

View File

@ -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) { 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" "dateStyle": "short"
})); }));
eleventyConfig.addFilter('dateTimeDisplay', date => new Date(date).toLocaleString('en-GB', { eleventyConfig.addFilter('dateTimeDisplay', date => new Date(date).toLocaleString(locale, {
'dateStyle': 'short', 'dateStyle': 'short',
'timeStyle': 'short', 'timeStyle': 'short',
'hourCycle': 'h12'
})); }));
} }

View File

@ -5,18 +5,39 @@ const formatMentions = text => {
return text.replace(matcher, (match, username, domain) => { return text.replace(matcher, (match, username, domain) => {
return `[${match}](https://${domain}/@${username})`; 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() { module.exports = function() {
const hashtags = {};
const notes = JSON.parse(fs.readFileSync('./src/_data/_notes.json', 'utf-8')) const notes = JSON.parse(fs.readFileSync('./src/_data/_notes.json', 'utf-8'))
.filter(note => note.text !== null && note.visibility === "public") .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 => { notes.forEach(note => {
if (note.replyId) { if (note.replyId) {
@ -24,6 +45,11 @@ 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: Object.keys(hashtags).map(tag => ({
tag,
notes: hashtags[tag]
}))
};
} }

View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>{{ title | safe }}</title>
<link rel="stylesheet" href="/styles/reset.css" /> <link rel="stylesheet" href="/styles/reset.css" />
<link rel="stylesheet" href="/styles/main.css" /> <link rel="stylesheet" href="/styles/main.css" />
</head> </head>

View File

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

View File

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

View File

@ -41,6 +41,9 @@ body {
main { main {
height: 100%; height: 100%;
max-width: var(--screen-lg);
margin: 0 auto;
padding: var(--space-size-m);
} }
main[data-for="note"] { main[data-for="note"] {
@ -51,8 +54,20 @@ main[data-for="note"] {
} }
article { article {
max-width: var(--screen-lg); max-width: 80ch;
padding: var(--space-size-s); padding: var(--space-size-s);
border: 1px solid #e2e8f0;
border-radius: 5px; border-radius: 5px;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1); 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);
} }

25
src/tags.njk Normal file
View File

@ -0,0 +1,25 @@
---
layout: base.njk
pagination:
data: notes.hashtags
size: 1
alias: hashtag
eleventyComputed:
permalink: "/tags/{{ hashtag.tag }}/"
title: "#{{ hashtag.tag }}"
---
<main>
<h1>All notes for #{{ hashtag.tag }}</h1>
<ul>
{% for note in hashtag.notes %}
<li>
<div>
{{ note.text | md | safe }}
<a href="/notes/{{ note.id }}">Permalink</a>
</div>
</li>
{% endfor %}
</main>