This week I have been building parts of my blog, to learn and to get it to a point that I am happy with. A large part of this was webmentions, and thanks to a few excellent guides I got 90% of the the way their. With only a few design things to think through I read more posts on webmentions and realised the way I was doing it was the best solution for privacy and so here we are with a reduced version.
I need to preface this with the fact I am a noob, and this might be a) wrong or b) a stupid way of doing it. This is just the way I did it, and if you’ve got some advice I am all ears.
Webmentions
I had already implemented a script to pull these from webmention.io and cache these into a local file.
// Import required modules
const fetch = require('node-fetch');
const fs = require('fs');
const path = require('path');
require('dotenv').config();
// Constants
const CACHE_DIR = './_cache';
const API_ORIGIN = 'https://webmention.io/api/mentions.jf2';
const TOKEN = process.env.WEBMENTION_IO_TOKEN;
// Ensure cache directory exists
if (!fs.existsSync(CACHE_DIR)) {
fs.mkdirSync(CACHE_DIR);
}
// Function to fetch data from the API
async function fetchData() {
try {
const response = await fetch(`${API_ORIGIN}?token=${TOKEN}`);
if (!response.ok) {
throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error.message);
throw error;
}
}
// Function to save data to JSON file
function saveDataToFile(data) {
try {
const filePath = path.join(CACHE_DIR, 'webmentions.json');
fs.writeFileSync(filePath, JSON.stringify(data, null, 2));
console.log('Data saved to:', filePath);
} catch (error) {
console.error('Error saving data to file:', error.message);
throw error;
}
}
// Main function to fetch data and save it to file
async function main() {
try {
const data = await fetchData();
saveDataToFile(data);
} catch (error) {
console.error('An error occurred:', error.message);
process.exit(1);
}
}
// Run main function
main();
Instead of loading all of the information from this as most guides do, I decided instead to simply count the important details. I think this could be cleaner but its working as thats all I am working on at the moment.
{% raw %}
const filteredWebmentions = data.children.filter(entry => {
return entry['like-of'] === url || entry['in-reply-to'] === url || entry['repost-of'] === url;
});
// Initialize counts for each type
let likeCount = 0;
let replyCount = 0;
let repostCount = 0;
// Loop through each entry in the filtered webmentions
filteredWebmentions.forEach(entry => {
// Check if the entry matches the given URL for like, reply, or repost
if (entry['like-of'] === url) {
likeCount++;
}
if (entry['in-reply-to'] === url) {
replyCount++;
}
if (entry['repost-of'] === url) {
repostCount++;
}
});
// Return an object containing the counts
return {
likeCount,
replyCount,
repostCount
};
{% endraw %}
This is then displayed on my post using:
{% raw %}
{% set urlnohtml = page.url | url | absoluteUrl(metadata.url) | replace('.html', '') %}
{% set urlhtml = page.url | url | absoluteUrl(metadata.url) %}
{% set countnohtml = webmentionsFilePath | countWebmentions(urlnohtml) %}
{% set counthtml = webmentionsFilePath | countWebmentions(urlhtml) %}
{% set totallikes = countnohtml.likeCount + counthtml.likeCount %}
{% set totalreplies = countnohtml.replyCount + counthtml.replyCount %}
{% set totalrepost = countnohtml.repostCount + counthtml.repostCount %}
{% endraw %}
This is not very effect as I ran into an issue where i had shared some links with .html on the end and some without, so got an MVP working late last night.
I could then link people to the resulting Mastodon post but decided I wanted to go further and display the information from the toot.
The easy way would have been to rely on the embed code and link to the toot, but I decided instead to make as many things static as possible. Deciding instead to pull the rss feed from my account and filter it by the page url.
{% raw %}
const axios = require('axios');
const Parser = require('rss-parser');
const fs = require('fs');
const rssFeedUrl = 'https://social.lol/@gr36.rss';
const jsonFilePath = './_cache/mastodon.json';
// Function to read the previously saved entries from the JSON file
const readSavedEntries = () => {
try {
const jsonData = fs.readFileSync(jsonFilePath, 'utf8');
return JSON.parse(jsonData).map(entry => entry.link);
} catch (error) {
// If the file doesn't exist or is empty, return an empty array
return [];
}
};
axios.get(rssFeedUrl)
.then(response => {
const parser = new Parser();
return parser.parseString(response.data);
})
.then(feed => {
const savedEntryUrls = readSavedEntries();
const newEntries = feed.items.filter(item => !savedEntryUrls.includes(item.link));
if (newEntries.length === 0) {
console.log('No new entries found.');
return;
}
const items = newEntries.map(item => ({
link: item.link,
pubDate: item.pubDate,
content: item.content
}));
const jsonData = JSON.stringify([...items, ...readSavedEntries()], null, 2);
fs.writeFile(jsonFilePath, jsonData, err => {
if (err) {
console.error('Error writing JSON file:', err);
return;
}
console.log(`${newEntries.length} new entries saved to ${jsonFilePath}`);
});
})
.catch(error => {
console.error('Error fetching or parsing RSS feed:', error);
});
{% endraw %}
This is then parsed into json (I just think it looks better) and stored in a cache file.
I can then query this for specific page urls using
{% raw %}
eleventyConfig.addFilter('searchContentForUrl', (mastodonData, currentPageUrl) => {
// Load the JSON data
const jsonData = JSON.parse(fs.readFileSync('./_cache/mastodon.json', 'utf8'));
// Iterate over entries and search for the current URL in content property
for (const entry of jsonData) {
if (entry.content.includes(currentPageUrl)) {
return entry;
}
}
return null; // Return null if URL is not found in any content property
});
{% endraw %}
And display thing on the post page using {% raw %}{% set mastoContent = mastodon | searchContentForUrl(urlnohtml) %}{% endraw %}
I then show this with:
{% raw %}
<a href="{{ mastoContent.link}}"><i class="fa-brands fa-mastodon"></i> Join the conversation on Mastodon
<div>{{ mastoContent.content | safe }}</div></a>
{% endraw %}
Future Plans
Like I said right at the start, I am a complete noob with front end and I am currently studying to improve things. I’d like to pull all the information once using the mastodon API, so I have access to replies_count, reblogs_count and favourites_count but that can wait for now.
This only shows on a few posts due to a change in URL but I am planning to pull in old data and show this too. All in all, I’m fairly happy with it for now considering it was cobbled together fairly quickly when I changed my mind on what I wanted to display. Any helpful recommendation will be happily received.
