turning a bearblog into a microblog

04 Oct, 2024

Since Robert Birming released his Timeline design, I've been playing around with it and including it in some of my pages.

But I was also curious on how I could include it to make a microblog out of a typical Bearblog. Not that you can't make short posts on here in a default look, but most of the design of Bearblog and its themes is decidedly for longform content. I wanted something that looks more like a microblogging/short post platform.

Some goals I had in mind for my own microblog:

• I didn't want these low effort posts to be in the Discovery section; make_discoverable has to be false in the Post preset.
• The posts need to mention when they were made; I need to include {{ post_published_date }} in the h4 of the Timeline code.
• I want the main page you land on to display the most recent 5 posts with their full content without manually updating this page. That means it needs to include {{ posts|limit:5|content:True }} and it needs the CSS to accommodate that.
• The timeline look needs to be most prominent, so not much else will be visible. I will display: none the navigation bar and some other things and put all important links in the footer instead.
• The page listing all the posts (usually /blog) should also show the entire content of them. That means I need a dedicated page where I set a higher/unlimited number of posts ({{ posts|limit:none|content:True }}?) and link that in my navigation instead. Easier than fiddling with my /blog CSS.
• I want to add the option to comment on each post and I want them to show up separately in an RSS reader. This means I can't just have one page or one post with multiple timeline posts, updating it for each new thing. It has to be a new, separate post each time.
• For comments, I would use Komments.cloud by David Jamieson.

I made a new blog, set the post template, made some test posts, started out with all the custom CSS of this blog and introduced some changes.

Post Template

title:
meta-description:
tags:
make_discoverable: false;

<div class="timeline">

* #### 💭 {{ post_published_date }}
this is where the post content goes.

</div>

What that looks like:

General CSS changes

To hide navigation and tags:

nav {
  display: none;
}

.tags {
  display: none;
}

To show the content properly (as suggested in the Bearblog docs):

		ul.embedded.blog-posts li {
          	display: flex;
    		flex-flow: row wrap;
}

(Edit: I actually had to remove this after all for correct displaying in my style! But I'll leave this in in case someone else needs it.)

Issues

The {{ posts|limit:5|content:True }} shows a list of the last 5 posts. But I only want the content and design, not the bullet list decoration, the time label, or the title. Otherwise, it would look ugly, like this:

To remove those, I used the following code:

		ul.embedded.blog-posts span,
		ul.embedded.blog-posts a,
		ul.embedded.blog-posts p {
    		display: none;
}

		ul.embedded.blog-posts li {
                [...]
    		list-style: none;
}

Which worked... for a while? Everything was lined up nicely without it; sadly I didn't take a screenshot. Then it suddenly didn't anymore.

I actually messaged Herman after a while of it suddenly reverting to not working and not finding any issues, thinking I might have triggered the automatic revert you can get when hiding the Bearblog link in the footer, which I didn't do. But of course, after sending the email, I found the likely culprit: Including a link in the posts would break the embed and make it show the list stuff again, for some reason. That sucks: No matter how I included it, it would break. That means the Komments.cloud inclusion would not work or have to wait until I find a workaround...

Or was it the culprit? I removed the link and everything worked fine for a while. Then it reverted again and started showing up. My posts now also had underscores in them that I had not set and had to manually remove again. I may have run into a bug? But I'm not about to spam the poor guy's email box with a third email, I'll have to work this out myself.

Other things I checked/did:

• Cloudflare settings and removing subdomain again (I had set up a subdomain during, and I already had Cloudflare caching weirdly break parts of my blog before)
• Any console errors (I get none)
• Checking via Inspecting what styles are applied (didn't seem to matter whether any were applied or not)
• Cache refresh (still persists)
• Other browsers and devices (still persists)
• Throwing an !important at it (did not work)

Since then, it removes these elements from the first post in the embedded post list, but not for the others, so now I'm in some half correct state without having changed anything. I'm starting to suspect it really is somehow bugged. Why would it first apply it to all embedded posts, then none, and then only the first?

It's now 05:18am and I think I am done for today. If anyone wants to look at it, it's here. If you have any idea what could be going on, let me know (e-mail address in the footer).

Edit: Of course I find the solution 1 minute after publishing this post. The </div> in the latest post was set too close to the post content. Since adding more space inbetween, it has been fixed. I will go offline now, and hope it lasts now! Code is weird. I'll try adding the Komments link tomorrow... I still don't understand why it briefly worked then at times, or why I suddenly had underscores in my posts, but ok.

Update I

Adding any link to the post itself or a reply link for Komments didn't work because it gets filtered in the embed summary by my previous code.

I've now managed to successfully hide the title link for each post while still allowing links in the actual text post. Here's the code:

		ul.embedded.blog-posts span,
		ul.embedded.blog-posts li > a,
		ul.embedded.blog-posts title {
    		display: none;
}

		ul.embedded.blog-posts li > div a {
  			display: inline;
}

		ul.embedded.blog-posts li {
    		list-style: none;
          
		}

Targeting just <a> or li > a hid every link within, even the text post. I tried a.first-child to target every first <a> within a <li>, but it didn't work. li> a:nth-child(insertnumber) would only target the specific number <a> I entered, not all of them.
So my final solution was to hide the links within the list, but then un-nest the ones I want to keep by applying display: inline; to it. This seems to work; the title links have disappeared, and the posts where I included a reply link have them.

Next improvements

• Attempt to add an icon/avatar into each post template so it looks more timeline-like
• See if I can automatically add time to the post as well; I know Bearblog has it in the published_date, I just need to see if I can somehow display that.

So far, both {{ post_published_time }} and {{ post_time }} didn't work (they aren't mentioned in the Docs, but I wanted to try anyway). I now opened a suggestion in the feedback forum about it. Until then, I guess I need to add the time manually into the timeline h4.

Including an icon worked. I tried to incorporate it as best as possible into the existing timeline code, so I was lazy and used the h4 pseudoelement and set a background. Applied border-radius and a border to it for the typical icon feel and the border color changes based on dark or light mode (not included here).

.timeline h4::before {
  content: ''; 
  position: absolute;
  top: -15px;
  left: -110px;
  width: 60px; 
  height: 60px;
  background-image: url('backgroundimageurl'); 
  background-size: contain; 
  background-repeat: no-repeat; 
  image-rendering: pixelated;
  border: 2px solid #e1e1e1;
  border-radius: 10px;
}

I also made some more design changes that made it look better. It's not yet ideal on mobile, but I am working on it.

For now, it looks like this in lightmode and darkmode:

The updated post template:

title:
meta-description:
tags:
make_discoverable: false

<div class="timeline">

* #### 💭 {{ post_published_date }} <p style="color:gray; font-size: 10px;"> CEST</p>
post content

</div>

Published 04 Oct, 2024, edited 1 week, 6 days ago

#bestof #webdev