@dpecos do replies to replies show up as well? (Testing by asking, probably no need to reply lol)
Edit: yes, they do
@dpecos Hey, I made a post recently about a similar topic!
Edit: although your way of doing it seems to work waay faster
https://www.yusuf.fyi/posts/receiving-blog-replies-from-anywhere
@spacebuffer looks like your approach covers other sources rather just Mastodon. It’s a proper WebMention system.
My approach is just displaying a toot and its replies at the bottom of a post.
@dpecos That's true but I honestly like you're approach better, I've now realized that dealing with reddit and twitter toxicity is much harder than I thought
@dpecos this is cool! Has anyone written anything for the reverse scenario, i.e. writing a post on your static site cms which leads to a Mastodon post with link to blog?
@nitbuntu do you mean the whole blog post being just a redirect to a specific toot?
I guess you can create the blog post and use the embed code that you can copy from a toot. Not sure if that’s available in all mastodon instances though…
@dpecos I was actually thinking something like that WordPress plug-in where the blog post is automatically posted on Mastodon, truncated within the 500 word limit, with a link to the full blog post.
I was checking if there was a similar solution for a SSG like a Jekyll?
Here is an example WP post that appears on Mastodon:-
@nitbuntu that should be doable with a little bit of scripting. I think there is a CLI tool that allows you to create toots.
Given that, it should be just a matter of fetching the content and URL you want to post about, truncate it and done.
I’ll try to create such a script, but it’s going to take me a while given the dates we are. Can’t promise for sure 😓
@nitbuntu @dpecos not sure if you came across a solution since, but maybe this might help: https://fed.brid.gy
I just updated the original code snippet to include the latest changes I've implemented to the embedded Mastodon messages on my site (number of replies, stars, boosts..)
And after a quick hack, now replies original toot are nested following the conversation flow
@dpecos would this work in a #QuartoPub website?
@jcolomb not sure what a quartopub website is, but if you can add JavaScript and edit its markup, I don’t see why not
@dpecos Really useful. I was searching for something like this.
@dpecos Discovered your blog post today!!
Thought that I would join the conversation.
Wondering if I can get this to work in a WordPress blog (I'm not a dev but can kinda hack some code).
@dpecos I will see if I can get it figured out.
Also shared your #blog post on #glasp #LearnInPublic with a new tag I created "Decent Blog Comments" + "Blog Enhancements"
https://glasp.co/#/yonks//?tag=Decent%20Blog%20Comments
@Yonks Thanks a lot! ❤️
@dpecos Thank you so much for this. Will try to get into my blog as well.
And thanks to @jwildeboer for the link
Yeah, nice one. I was actually experimenting with doing something similar (except without the integration) when I first switched over to Mastodon, but when I moved to my current instance, that kinda fell off by the wayside.
I should get around to doing that again.
@dpecos I love the solution. I'll definitely copy that!
@dpecos
Very cool. Thanks for sharing this. Enjoyed your post.
@dpecos I have been thinking about redoing my blog using static tools, and said “Hey, I should search for fediverse comment solutions.” Your post (and https://floss.social/@carlschwan ’s ) came right up and it’s perfect. Thanks!
@zarfeblong glad that you liked it 😊
I’m still trying to think of an automate a way to inject the toot ID into the post metadata, but couldn’t figure out a nice way.
Still, manual process works well enough
@dpecos I don’t mind manual. My current blog is at blogger.com, and I already have a multi-step process involving markdown scripts…
Question: Does your script account for comment moderation? If I block (the poster or server of) a comment, does it get omitted from the blog thread? Spam we will always have with us.
I might also think about threads auto-locking and rendering to static content after (say) four weeks.
@zarfeblong TBH I haven’t checked, but given that the script is just hitting the API endpoint of your instance, I’d assume those should be filtered out by the server…
Autolocking should be easy to render, as long as there is a flag in the response marking the thread as such, I’ll try to have a look.
Or if you do, please share 😊
@dpecos I will certainly share all my progress. It’ll be a couple of weeks before I can even start on this, though.
Thanks for the info!
@dpecos Do you have example `config.{toml,yaml,json}` contents and YAML frontmatter that goes with this? I cannot find the source code repository of your blog.
@tomodachi94 My config looks something like this. Just double check that you have the correct indentation when you add it, and of course, replace these values with your own ;-)
@tomodachi94 and this is the meta section of your post, where you have to specify the ID of the toot to use as a conversation (fediverse, last attribute in the list):
@tomodachi94 I've added these two screenshots to the blog post as well.
Thx for the feedback!
Another update to the code integrating #mastodon #toots into a #static website: now media attachments included in toots (i.e the screenshot that you can see next to this one) are rendered in the thread.
@dpecos Found your blog post and I'm now curious...
Do you by any chance know what adjustments would be needed to make it work with #mkdocs and the #materialformkdocs theme?
Like, I'm not entirely sure what CSS changes/additions I would need to make to include proper looking mastodon comments for my blog posts.
So far I copied the code snippet and adjusted the variables inside it to make it work with the #jinja2 syntax and so far it seems to work.
Now I just need to properly format everything, so if you could help by any means I would apreciate it (Even if it was just linking the (S)CSS used).
@squidfunk what do you think about this 😀 ?
@pawamoy Looks promising!
@dpecos Managed to set it up myself. Works nicely.
@andre_601 I'm going to update the blogpost to include the CSS I'm using, although I imagine you picked it up from the website itself.
Glad that it worked for you!
@dpecos Yes, I did simply used dev tools to check it and adjusted colours to my personal needs.
I've made a paste for anyone who wants to have such a system for MkDocs and the Material for MkDocs theme.
https://paste.gg/p/Andre601/4d1323b59c35421e90bcdc79f6ed8ff2
@andre_601 I just added the CSS to the original post:
https://danielpecos.com/2022/12/25/mastodon-as-comment-system-for-your-static-blog/
@dpecos Made a variant that works for #mkdocs and #materialformkdocs
The Paste has basic instructions on how it can be implemented.
https://paste.gg/p/Andre601/4d1323b59c35421e90bcdc79f6ed8ff2
I've refactored the code in the original blog post into a fully fledged standalone #webcomponent
https://github.com/dpecos/mastodon-comments
Hopefully that will make it easier to use and integrate into other websites, as it's relying on web standards.
It will also facilitate providing feedback, issues and peeking into latest changes.
Hope you'd like it!
@k4r4b3y the code I’ve shared is tailored specifically to mastodon. I haven’t played with pleroma, but if it exposes a public API to retrieve toots, shouldn’t be too hard to adapt.
@k4r4b3y you can always host that file in your server directly. I’m using that library directly from a CDN in order to keep the actual code as simple to use as possible
@k4r4b3y I’m afraid I’m not following, where do you see these toots as unlisted?
This integration only fetches existing toots from a mastodon instance - as a reply for a top level one. But for you to toot, you need to do it as usual, so there is nothing special within the toots posted here.
Hope that helps.
@dpecos trying this right now, thans for sharing!
@70hz good luck! Let me know if you find any issues!
@dpecos I created an aws-lambda to get around the chicken/egg of post/toot creation and I'm using your component to display comment threads: https://claassen.net/geek/blog/2024/02/mastodon-integration.html
@sdether that sound super cool! I’ll have a look as soon as I can!
Thx for sharing!
i've been trying to add a button that loads the comments instead of the comments loading as soon as it's visible, but im not good at js.
if it's possible, is there a way to modify the js to do that?
Thanks to @kirk for an MR to mastodon-comments.
Now the webcomponent is also displaying the top level toot stats!
Hi @dpecos thanks for sharing this post. I love how the Fediverse and the blogosphere can merge.
I'm still quite new to Hugo, so maybe this is a bit of a noob question, but is it easy to turn off commetns on specific pages?
@MishaVelthuis it would as simple as not providing the `fediverse` tooth id in the meta of the post.
@dpecos thank you for sharing! Your code works like a charm on my Hugo theme!
Here's the result on the exampleSite:
https://foxihd.github.io/hugo-brewm/en/post/configure-discussion/
@dpecos Is there an update on this ? Looks like an old post :)
@dpecos I published an article for the pelican blog system in Turkish language. Congratulations for your work, good job :owi:
https://yuceltoluyag.dev/pelican-bloguna-mastodon-yorumlari-ekleme/
This is an example on how comments will look like 😃