Dino’s Journal 📖

WriteAs

There are two ways that I know of to customize the footer on a Write.as website. The first one is through CSS and the second one is through JavaScript. I'll go through those two options in this post.

Option 1: CSS

I got this idea of customizing the footer via CSS after looking at Robert Xu's Write.as powered site. It puzzled me that I could not highlight the text in the footer. After viewing the page source, I finally figured out that it was CSS trickery.

So, anyway here we are. To customize the footer using CSS, all you need to do is modify the following CSS script, then add it to the Custom CSS settings for your website.

footer nav::before {
    content: "Copyright © 2020 - 2021 by Your Name \A";
    white-space: pre-wrap;
}
Read more...

Just figured out how to change the order of the pinned pages on this write.as powered site. The order is based off when you pin a page. The most recent pinned page shows up at the end of the list. So, then it's simply a matter of unpinning pages, then pinning them again in a certain order, right? Yes and no.

The problem is that the “Pin” functionality is only available when viewing the list of posts on your homepage. Once you unpin a page that was written say, months or even years ago, you would have to scroll back possibly through multiple pages to find the post you want to pin.

My solution to this was to first update the “Created” date metadata, setting it to “now” or today's date. Then you can unpin it and it should show up as the first post on your homepage. Now, you can easily pin it again.

If you wanted to retain the original “Created” date value, you can write it down before you start updating it. Or you can just download/export a backup of your site before attempting this.


This post is Day 37 of my #100DaysToOffload challenge. Visit https://100daystooffload.com to get more info, or to get involved.

Tags: #HowTo #WriteAs #100DaysToOffload

Find me on Mastodon (@dino@writing.exchange) or Micro.blog (@Dino)

In Part 1, I covered how I generated links to the Previous and Next post for my “indexed” journal entries. In this post, I'll talk about how I generated the links for non-indexed journal entries.

Handling Old Journal Entries

So, now that I have navigation working for my “indexed” entries. I turned my attention to my precursor journal entries. These entries don't use base 10 numbers as indexes in their slugs/URLs. For example, the post slug for Journal Entry – I ends in “I”, which is a roman numeral. Same goes for Journal Entry – II, III, IV and so on. To further complicate things, I decided to leave the post slugs unchanged for other precursor journal entries. The post slug for Journal Entry – XV for instance is still “decisions-decisions”. I thought about writing JavaScript that would convert roman numerals to base 10 numbers. But then that won't work for non-indexed entries like Journal Entry – XV.

Shot myself in the foot right there, huh? >_<

Read more...

Update 06/22/2020: Didn't realize that the JavaScript that I talked about in this post, was actually creating a Next link for this post. It thought this was a Journal Entry post, because it found that text in here. That's hilarious, but that is also part of the fun of tinkering. I have fixed it.

Finally got full blog post navigation working for my Journal Entries. If you have JavaScript enabled on your browser, you could effectively navigate from Journal Entry – I up to Journal Entry – XVI, then continue on to Journal Entry – 001, all the way up to the latest one (as of this writing), Journal Entry – 060. You can also navigate from Journal Entry – 060, all the way back down to Journal Entry – I.

Getting Post Slug and Index

To make navigation work between blog posts in a series, I made use of a standard format for post slugs/URLs. I call them “indexed” entries because I added an index to the end of the slug/URL. For example, “journal-entry-001”, “journal-entry-002”, “journal-entry-003” and so on. It's really just a way to help me figure out the sequence of posts.

So, first off, here is the JavaScript for getting the post slug from the URL. Then from there, getting the post index from the slug. Without this code, it will be impossible to automatically generate the links to the Previous and Next posts.

var element = document.querySelector('meta[property="og:url"]');
var content = element && element.getAttribute("content");

// Get post slug
var postSlug = content.split('/').pop();
var postIndex = postSlug.split('-').pop();
Read more...

Coney complained to me this morning that the Youtube videos on my latest music log entry were getting cut off when viewed from her phone. I've known about this issue for awhile but didn't really try to find a solution for it. Well, today I did and it turns out to be really easy.

The issue stems from the fact that I have to use iframes to embed videos on this site. To make the Youtube videos I embed on this Write.as site responsive, I simply followed the instructions from this Responsive Youtube Embed post. Specifically, these are the changes I made for this site.

Read more...