I have configured my blog index to only show posts with titles. At first, I was a little hesitant, but I think it makes for a better experience when I'm reading it. I also found that I do not hesitate as much make microposts.
I got the code from Loura who has written about it on her blog.
Here are the steps I used to make my Micro.blog hosted blog list only the titled posts on my homepage and still paginate correctly. Note: This does require editing your blog theme.
She’s got an amazing site and you should check it out.
Small but significant update to the plugin so that it can handle exceptions as defined in Hugo v0.141.0. I didn’t really notice this when it came out and was very happy that Bryce Wray already had a fix in his theme repository.
There have been a couple of posts on Micro.blog - the service I use to host my blog - about how to improve the handling of longform content. I thought I would yell into the void write my thoughts and feelings about this topic.
How did I get here?
I’ve been blogging for a while. I remember the days of GeoCities and LiveJournal and enjoyed spending time on the internet. When twitter came out, I spent a lot of time trying to be witty and win sweepstakes. I enjoyed it because it was quick dopamine hit to see new content or create my own without going into details like titles or nuance.
When twitter started to get less fun, I found myself wanting to get back into owning my own content. I saw Manton’s kickstarter for micro.blog and it really was the answer I was looking for.
Where are we?
With Micro.blog, I got the following:
Hosting for my blog where I didn’t have to worry about the the technical infrastructure
Web and iOS clients to make my posts
Freedom to share it outside of micro.blog
I think the last point is really one of the things that I like about micro.blog. I make something and there isn’t a pull to make you part of the service. Either with cross posting or RSS, I’m confident that my message goes out there. Whether it’s my media reviews, pictures of my dog, or asinine comments, I share them on my blog an in The Timeline.
The micro.blog timeline shows the last 40 to 50 entries from different accounts that you are following and allows you to respond quickly if you choose. The people that you choose to follow is the thing that engages you, not an algorithm designed to trick you into doomscrolling. The Timeline doesn’t do reblogging, retweeting, or boosts. Much like time itself, it’s ephemeral. The content is there as a snapshot in time and you are more than welcome to explore more of the authors content on their respective sites.
Though, The Timeline is not perfect.
I’ve been on the service for years and I sometimes don’t know or remember what content shows up in the timeline. For example, if I want to share a link, I have to decide on whether I share just the link, text around the link, whether I should use the title of the page being linked or my own title because all of these could show up different in The Timeline.
First world problem.
Where are we going with this?
We live in a world where sometimes 180 to 300 words don’t really convey what we want to say. For some of us, we’d like to share a little more. This works for our personal blogs, but it seems as if some of us want more. And it seems as if there is some change coming to the service.
Great points in this conversation about how Micro.blog handles longer blog posts with titles. Maybe the time has come for a change here. I’ve never wanted Micro.blog’s timeline to be a bunch of summaries and “read more” links, but right now we should be encouraging longer posts, not relegating them.
I’ve had some time to think about what I would enjoy as a way to have more longform in The Timeline.
Make it clear that the Number 1 priority for The Timeline is for the readers. NOBODY WANTS TO READ YOUR SH*T is more than just a clickbaity title. I love reading things from my friends such as @JohnPhilpin and @lmika, but I would rather see their longer pieces on their own websites or in my RSS reader. If I’m reading The Timeline, I want to see as many things from my friends before I get back to pretending to work.
Make it so that the rules are clear
When the change happens, have the rules next to the post text area. There should be directions to get help either on the page or a link to where the directions are.
Allow for image previews
If you do a book review, a small preview of the book cover becomes available. This could be a long term goal to include something like that for those who add images to their posts.
This morning, I saw that micro.blog is now allowing a new version of Hugo. The new version is 0.140 and is a fairly big jump from 0.117. The thing that I’m excited about the most are the changes that were added in 0.134.
@jsonbecker has been discussing this on micro.blog and on his blog about this and I’m pretty excited about what things I’m going to incorporate in the future.
Stoot now has an option that will remove the Open Graph / Meta Tags card associated with the first link in a mastodon post. If you are interested in the tags that Mastodon sees, you can go to OpenGraph XYZ to put in your favorite URLs. Here a direct link to your fifth favorite. Mastodon takes the information meta tags from the first URL and makes them look nice when you post. For example, I posted a toot1 with a link to a post that created. I will get something like the following.
Summary
You can now add a toot to your blog without including the Open Graph tag.
The new enableOGCard option defaults to true so that it doesn’t unexpectedly change on people who have an older version of this plugin.
Details about the HTML and CSS structure
About a week ago, I got a message asking why stoot would render the image twice for the same mastodon toot.
Honestly, I had no idea it was doing this and haven’t looked at the code since I had packaged it up two weeks ago.
But, I didn’t want to leave this person without any help so I started to look into the issue and was able to reproduce the problem with a toot from someone I was already following.
Here is the code to embed it if you are using the stoot plugin
A very pretty picture, but I don’t know if seeing it twice in succession.
For me to understand something better, I like to diagram it as I step through the code. I’ve included this diagram that shows you what div tags are created when using stoot. If you can always check out the code on GitHub.
Toot-block
This is the CSS class in the blockquote element that contains the entire mastodon post.
Toot-header
The div contains the information about the account that created the toot.
Toot-profile
This is the profile image of the account that made the toot. I included this CSS from the original project to establish a baseline for styling.
Toot-author
This is a div that contains the two links toot-author-name and toot-author-name that go to the same account page.
Toot-author-name
The name that toot author is going by at the time of rendering. The names sometimes changes as decided by the person in charge of the account.
Toot-author-handle
This is the account name in the @name@server format that mastodon likes to use.
Content
This is the main text of your toot.
Toot-img-grid
Stoot includes CSS and logic to handle 1, 2, 3, or 4 images in a grid and render them properly.
Toot-video-wrapper
Behind the scenes, there are two possible wrappers that render depending on what kind of video media is included with the toot.
Toot-card
This the div that contains the Open Graph card of the first link in the toot. This will include an image, title, and description from the website in the URL.
Toot-poll-wrapper
This is the div that containers HTML <meter> elements to convey the
Toot-footer
Contains date and time of the toot.
The problem is coming from the toot-card and I didn’t want to change all the cards, because someone might have become reliant on this behaviour or worse - never noticed it.
Further CSS Details
I didn’t want to make people work hard to style the included card, so I removed some styling from the CSS.
There are two div tags in the toot card that you can use to make things work to your satisfaction.
Controlling the Card
The problem is coming from the toot-card and I didn’t want to change all the cards, because someone might have become reliant on this behaviour or worse - never noticed it.
After idenifying the part of the code that controlled the cards, I set a conditional around it.
{{ifeq$enableOGCard"true"}}{{with$json.card}}{{-$cardData:=.-}}{{-with$cardData.image-}}<ahref="{{$cardData.url}}"rel="'noopener"><divclass="toot-card"><divclass="toot-card-image"><imgsrc="{{$cardData.image}}"alt="Card image from {{$masIns}} toot {{$id}}"loading="lazy"class="toot-card-image-image"/></div><divclass="toot-card-content"><pclass="card-title">{{$cardData.title}}</p><pclass="card-description">{{$cardData.description}}</p></div></div></a>{{-end-}}{{end}}{{end}}
At the top of the file, we have the following line that sets the value to a default in case it is isn’t specified.
I would like to change the alt text for the incoming images, but I think I would have to learn more about what is offered from mastodon using this API.
I want to that @lmika for giving me some advice about the go programming language. I also want to thank @DaveyCraney for giving me some feedback about stoot.
And I want to thank you for making it to the end of this article.
I am really hating the different names for slightly different things right now. ↩︎
Stoot has been added to the list of official plugins for micro.blog! It’s also had it’s first change which should address some issues with sizing!
I’m on mastodon too mucha lot a fair amount of time and come across items that I want to share with others on my blog. stoot is a Hugo shortcode that allows you to have a static version of a mastodon post on your site. This can match your template or be restyled as you choose.
Why?
As of this writing, I don’t use anything specifically to store links. I attempted to save things to Apple Notes and Drafts and this gives me the URL.
This works for storing the information for general notes and references, but still leaves the sharing of the content unfinished. In a lot of my previous posts, I would just have a link to a post. This is acceptable, but I’d like to make it convenient for my readers (a.k.a me) to get all the content in one place instead of going back and forth.
I remembered that Hugo offers shortcodes that allow you to embed a tweet, youtube video, etc. into a post and did a search for that. Unfortunately, I couldn’t find one for mastodon. When looking at the one for twitter, I see that it is essentially adding the code that is provided when you embed the iframe1 that twitter supplies. I suspect that it’s because mastodon also has an iframe that it’s not necessary.
The embed pretty small easy to read compared to the code that is loaded for a twitter embed.
Using the URL above, we can see what is created by mastodon. I added spacing for legibility.
It look alright, but I found that it would cut off the bottom of longer posts and the scroll bars wouldn’t consistently show up. It looks like the embed.js is adding overflow: hidden to the styling during rendering and it can effect embeds with text. I’ve included a picture below in case this is fixed by browsers or changes in the code in the future
I had more to say!
I could add the following css to force the embed to expand as needed, but that’s one of those solutions that you find out after working on something else.
.mastodon-embed{overflow-y:auto!important;}
Full stop, this is where I should have stopped but I’ve already invested the time to make this shortcode.
How?
This is a Hugo shortcode that will allow you to embed a mastodon post into your blog. It places the post or toot in the document as a <blockquote> and is still pretty legible my RSS reader. It’s 100% based off of this post by Bryce Wray. I think that you can find updates from the original author by looking at the git repository for his site.
I’m not a Go expert like Leon, who could give you a wonderful breakdown of the code. :) Suffice to say, if you’ve got a background in code you can figure it out.
My goal is to pull the specific code out so that I can use it on Micro.blog as a plugin for myself and others. So, I pulled out the shortcode and an associated css file and placed it in a different repository.
Again, I didn’t change any of the code found in the css file and you may look at it and wonder where --text-base and --social-sans-serif are defined. Those are in Bryce’s hugo-site repository under assets/css/partial/__050-global.css. I thought about just adding them to this repository, but I wanted to get some feedback from users and I saw that it seems to work without it.
I tested the plugin with a couple other Micro.blog themes such as Sumo, tiny, cards, and Tufte and it seemed to work well. Although, Tufte did have the images show up larger than I would have liked. You can use custom css to make changes as desired.
Usage and comparison examples
The shortcode format looks like the following.
{{<stootinstance="$InstanceTLD"id="$Id">}}
PLEASE NOTE: I had to remove the brace on either side because of it wasn’t attempting to process the shortcode in the code block above. I tried using %lbrace; but it doesn’t replace it properly. FIXED: Changed the block to be markdown and putting a comments /* */ around the contents worked.
Below, you’ll find the mastodon embeds and then stoot renderings. As of this moment, stoot does not do anything with the text of posts that are marked as sensitive. I’ve removed the call the the javascript after every embed to reduce repeated calls2.
Working on another technical project. It’s looking like it’s going to get more complicated than I expected. Part of me is excited and part of me dreads having to hunt down unexpected issues.
After working on this, there are somethings I’d like to think about in the future.
1. What changes would I like to implement?
This plugin uses different style choices. It fits perfectly into Bryce’s site because it was made by and for him. I’m essentially taking what he’s done and shoved it into my page.
This is on me to change using the custom css option offered by Micro.blog.
2. Another shortcode?
During testing, I realized that I’ve added a fair amount of shortcodes in my writing. Hugo doesn’t handle this well and makes transitioning between different themes troublesome.
I’m playing with the idea of creating a Micro.blog plugin that contains all the shortcodes that I’ve seen. I’ve thought about this everytime that I look at the Tufte theme, but I’d have to see how much bandwidth I have in September
Feedback
As always, I love getting feedback on any of this.
Here is the schedule for Friday, May 17. (All times are Pacific.) Details on the chat channel and door prizes to come! Follow [@camp](https://micro.blog/camp) for updates. 🏕️
11:45 Welcome to Micro Camp and overview of the schedule
12:00 Conversation about blogging and social media with Christina Warren (find her on Mastodon and Bluesky)
1:30 State of the Micro.blog with Manton, Jean, and Vincent; Q&A
3:00 Community happy hour on Zoom and announcement of door prize winners
Unfortunately, I might not be able to attend this year as I’m supposed to be in the office and it lands on the end of a sprint.
I’ve recently read this article by Leon Mika on his MicroBlog. It goes a little bit into the details of where he wants his writing to go. I’ve met people through the Micro.blog and it is notable when I see them post about other blog services that they are trying out.
I’ve been ask why I’m using Scribbles given that I’m here on Micro.blog. Honestly I wish I could say I’ve got a great answer.
Leon starts his piece with honesty and follows it with thoughtful reasons.
I’ve also wondered why others are exploring the multiple solutions to building and maintaining a blog. After having years where there were only a couple of solutions, I don’t fault anyone for wanting to explore and see different options.
Having different blogs to express different aspects of your personality and interest does make sense. And, Leon makes it clear that he’s prioritizing his most important reader, himself. On this point, I really applaud him.
If you’ve come to my site, you’ve seen it. Or rather, seen that it isn’t there. Most site have them, whether it’s a big banner or image that lets you know that you are on a webpage. I’m referring to the header; usually the first h1 element in the html. Open any book on HTML and it’s one of the top five elements that you learn about.
But, if this element is so basic and used so often, then how why do I not use this in my theme?
No guarantee on structure
There are different tools that you can use to write posts for micro.blog. You can post from the website, MarsEdit, Ulysses, drafts, etc. These tools usually allow the end user to write in some form of Markdown syntax. If you look up the syntax for Markdown on Markdown Guide Basics Syntax or on the DaringFireball Markdown Basics page, you will see that the first thing they point out is the # used to make a heading. The tools will use the convention of taking the first # header and using it as the title for a post.
Most of the websites that I’ve come across will use title of a post as an h2 in order to denote that its semantically lower than the h1 they would have in the header of the page.
But, what about posts without a title? What about the person who isn’t familiar or not thinking about these details as they type away on their keyboards on that great post that will finally prove that whether pancakes or waffles are the superior breakfast item1.
Other than testing whether the content has a title, the theme does not make any adjustments. It can’t automatically change all the headers and assume that the writer meant ### instead of ## for the sub-header.
Also, If we only navigate by headers and headers are only on titled posts, then what about the micro posts that micro.blog uses?
I’m not an accessibility expert, I just hope that whoever is using the theme, will be able to navigate using the different articles and aria-labels. I really hope that not having the headers isn’t a deterrent from reading the site. If you know of someone, please send me their information so that I can improve this site.
What would it take to change?
I was thinking about changing the structure of the theme to match the convention that I had seen with other themes. I’d make the articles have h2 and just go through all my posts to make sure everything had the proper heading.
In my local testing, I found that I ran into another problem where the built in table of contents feature of Hugo defaults to using h2 and h3 tags to create its content.
It’s documented on how to change the start and end levels but this would mean that users of the theme would see a change after an update. I can’t count on them reading the readme, being able to test it before hand, or going back to a previous version.
Ten Times the Technical Transform
About a month ago, I asked @help how many people were using this theme. Manton said 10.
I was shocked!
That’s 9 more than I was expecting.
I hope these people are happy with the theme - or so I imagine - and I don’t want to change that.
Withdrawn on the World Wide Web
The last reason is more personal.
I’m on the web, but I would rather you start reading what I wrote than read about me. Based off of my own web-surfing habits and the site traffic I get, I assume that when someone comes to the site they are coming from a direct link to an article. If that is the case, I want you to get to reading as quickly as possible.
The website has a title that is read by accessibility readers and shows up in the tab of your browser.
I don’t know how much of my traffic is people new to the site, but I do have an about me at the bottom of the page. It’s kind of a “find out more from this author” that you would see in the back of a book.
For me, this is more comfortable because I have trouble writing about myself. Ask anyone who has written a resumé, and they might say its easier to express how you think of feel about different things than it is to write about how you are really good at TPS reports.
Let’s head this off
This is not an attack on sites that use h1 for the title and have it at the top. I love those sites and the people that make them. This is just me explaining the theories of my own site. It’s not conventional and sometimes I look at it and want to start over.
It’s because of that burning feeling, I continue working on it.
For years, I would hear people say that it takes 100 days to develop a new habit. I didn’t set out to do that. I wanted to write on a more regular basis and just started writing on November 1st of last year. I was determined to write something every day and post it.
What was the experience?
Sometimes it was actually pretty stressful coming up with something to write about. Some days were just one-liners that I would have just tweeted. Sometimes Many times, it was a picture of my dog; who I think deserves her own blog.
What if I annoy people who were reading my site and they go away? Well, I didn’t have that many readers anyway, and my pieces are typically very short.
The benefit of being semi-anonymous was that I honestly couldn’t tell if people liked it or not. It was kind of freeing and let me think about how I was writing.
I started exploring more into what it means to be the first audience for my writing. That doesn’t mean that I spent a lot of time agonizing over making things perfect, but it did mean that there were a couple of posts that took more time to write.
What’s next?
I plan on stopping the daily post for a couple of days and working through some of my post ideas that I’ve been putting into Drafts. The more ideas you capture, the more ideas you make.
I also want to start highlighting some post from other people on the internet. I love the web when it connects us with cool ideas.
Added Hugo version 0.117 as an option on the Design page for your blog.
I've been seeing differences between my current home setup and what's on Micro.blog and always attributed it to some difference in my environment and what is on the server. Some kind of secret sauce.
Unfortunately, it looks like something changed in the way that Hugo (or maybe goldmark) handles code blocks.
I’ve got it running on my test blog and have a post that I can refer to so that I can tweak the CSS to go with this newer version.
I’m self aware enough to know that some of what drives me to write on this blog is to communicate and share my thoughts and feelings on various things. Some would call it a little narcissistic.
That being said, I do come across things that I would like to share. For instance, I came across a post by my friend Adam on Mastodon and I want to put it on my blog. I sometimes wouldn’t know how I should go about doing that. Should I just put the link into Micro.blog? Apple Notes? What about a third party application?
I took a step back and remembered that I had put sometime into saving bookmarks into drafts1.
I took a fair amount of time reading over the IndieWeb during the creation of the labarum theme but I’m still having trouble getting it absolutely “correct” because some of the examples that they point to for replies, likes, and articles are returning 404 pages.
Still, I’m pretty confident in the site as it stands and will continue to use the Microformats Parser as part of the process.
My current Web Capture Template will be the following until I get some time to rethink things.
I’m planning on making it so that I can select some text and get the draft ready to send to my blog. Otherwise, I’d just send the link directly to someone2 who is interested it.
I think the second hardest part was getting it to stop making the smart quotes.
We solved the “how” but now “what”
This will be an ongoing question. Everyone’s blog is a personal platform and when we put something on it, we are broadcasting a little bit of who we are.
With the recent turmoil of what used to be twitter and reddit, I feel that user created content needs more avenues for discovery.
Webmention is one of the fundamental indieweb building blocks. It enables rich interactions between websites, like posting a comment or favorite on one site from another site.
I hope this works.
This is really the example that everyone links to.
Webmention is one of the fundamental indieweb building blocks. It enables rich interactions between websites, like posting a comment or favorite on one site from another site.
I’m hoping that this all works properly from the clipping to drafts to micro.blog.
Mandaris
I’ve been ask why I’m using Scribbles given that I’m here on Micro.blog. Honestly I wish I could say I’ve got a great answer.
