Preamble
My previous solution for comments was to use the solution made by Daniel Pecos: Mastodon-Comments.js, with some customization from Bech and Enikofox. It works by uploading the file to the root of your website, and then putting some code in the header of your site so it will load the javascript when there is a specific html tag in the blog post. Here’s the specific code/files I used:
Header Code
<Fragment slot="head"> <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.1/purify.min.js" integrity="sha512-uHOKtSfJWScGmyyFr2O2+efpDx2nhwHU2v7MVeptzZoiC7bdF6Ny/CmZhN2AwIK1oCFiVQQ5DA/L9FSzyPNu6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script type="module" src="/mastodon-comments.js"></script> <meta name="fediverse:creator" content="@navi@sakurajima.moe"> </Fragment>
Blog Post HTML tag
<mastodon-comments host="sakurajima.moe" user="navi" tootId="123456789"></mastodon-comments>
All of these together work out of the box on any static website, as long as visitors have javascript turned on.
However, it bothered me that it didn’t save the comments once fetched. What happens if my current mastodon server goes down, and I lose all the interactions? Of course, there are backup tools to save your mastodon archive, but no easy way to add the comments to your blog other than copy-pasting (as far as I know).
Well, I found this excellent post: Comments for Static Website (with Mastodon) by Adrian Winterstein which got me thinking. The author uses Zola SSG, shouldn’t there be a way to get this to work with Astro? Hence, it inspired this project.
All of the credit goes to Adrian Winterstein and Google Gemini, which helped me code this endeavor. Unfortunately, I have zero coding skills, and was only able to make this work by prompting and troubleshooting with Gemini. I definitely don’t claim any ownership over the code, I’m just happy it works. I hope this might be helpful to your own projects.
The Solution
My blog is on Github and any changes trigger a build by Netlify. There would be different steps involved if you were running Astro on your local PC and then uploading the output to a static website host. I imagine these files could be adapted to work with any workflow as long as it uses the Astro static site generator.
| path/File | Purpose |
|---|---|
| scripts/fetch-comments.js | Javascript that talks to Mastodon and generates JSON. |
| package.json | Update this so that fetch-comments.js runs before the site is built. |
| src/components/MastodonComments.astro | Astro Template that displays the JSON content as HTML. |
| .github/workflows/fetch-comments.yml | Github Action that runs fetch-comments.js once a week. |
| src/data/comments/ | The folder where your comments are saved permanently as JSON files that map to your blog posts. |
| src/pages/posts/[…slug].astro | Update this so that the comments will load on each blog posts. If you use a different astro theme from me (I use Fuwari), you will probably have a different template you need to update. |
| src/content/config.ts | Update this so that Astro knows you added new frontmatter sections |
How it works
- The Data Source (Mastodon)
- You add mastodon_id and mastodon_instance to your blog post’s frontmatter. ID = post ID, Instance = What mastodon server you’re on.
- The Persistence Layer (GitHub Actions)
- An automated script (fetch-comments.js) runs once a week or whenever you trigger it manually with Github Actions.
- It scans your posts for the mastodon_id and mastodon_instance in the front matter, and fetch the latest replies from Mastodon. There are no dependencies because it uses Node.js which is already part of my Astro build (I think?).
- It commits these comments as JSON files directly into your Github repository (src/data/comments/).
- The Display Layer (Astro & Netlify)
- When the JSON files are updated (or you write a new markdown post), Netlify automatically detects the change and triggers a build.
- The MastodonComments.astro component reads these local JSON files during the build process.
- It generates static HTML with your custom styling
- If it’s unable to find a JSON comments file, Netlify will make a live call to the Mastodon API to pull the thread and replies of mastodon post specified in the frontmatter, similar to the original Mastodon-Comments.js file.
I’ve posted the script files and other reference files here:
Comments
Comments are fetched from the Fediverse. You can join the conversation by replying to this post on Mastodon. New replies will appear here after the next site rebuild. If you don't have a fedi acount, you can send me your comment here.
My constant rework of my websites and blog is starting to feel like this comic LOL
@navi For some reason, I hadn't thought about blogging about stuff I'm doing to my site quite recently. But I think my blog will become more like the end of that curve next year :meowmelt:. Definitely read a ton of those as I was getting started on the whole personal site building thing.
@arimamary I think it's nice to have a record of the changes and see how far you've come.
These kinds of posts from others also helped me build my blog (since I was also using static site generators and it wasn't exactly smooth sailing)
Honestly, it also serves as documentation in case something goes wrong.
@navi Totally agree! I love reading people talk about their creative process. I guess it had been years since I had taken blogging seriously so I've just started doing it again.
I just want to add on, the irony of this solution is that it came from me wondering if I should just manually copy/paste comments on old blog posts and remove the JavaScript call.
I wanted blog comments to stay with the posts, and I already copy/paste mastodon threads for my liveblogs. I'm glad I found a slightly more elegant solution lol.