howto — Attach to Process

How to Make Image Clickable Using Markdown?

Wed, 27 Jul 2022 04:39:02 +0000

For awhile now, I was wondering if it was possible to use Markdown, to make an image clickable. By that I mean, display an image in a blog post, and allow the reader to click that image to view the image in a tab. You can see an example at the end of this post.

So anyway, I know what the Markdown syntax is for a link and for an image, but I've never been able to put the two together until today.

Thanks to this post for the idea on how to do it. This saved me from having to write JavaScript that would find all the Snap.as images in a blog post, then wrap them in an tag just to make the images clickable and open in a browser tab.

So just to recap, the Markdown syntax for a link is this: [Link text](Link URL)

And the Markdown syntax for an image is this: ![Alt Text for image](Image URL)

So, given the Markdown listed below for an image, how do you display the image and make it clickable at the same time? ![Mazda FC RX-7 - A little drifting action](https://i.snap.as/2IxnDguK.png) The answer is that you put the Markdown for the image inside the Markdown for a link, like so: [![Mazda FC RX-7 - A little drifting action](https://i.snap.as/2IxnDguK.png)](https://i.snap.as/2IxnDguK.png)

A couple of things to note here:

The whole Markdown for the image goes inside the brackets [], the “Link text” portion of the Markdown for a link. This is what allows the image to show up as the content of a link.
The URL to the image goes inside the parenthesis (), the “Link URL” portion of the Markdown for a link. It kinda looks redundant, having the same URL to the image one after another. But that's how you make it work with the Markdown syntax for an image and a link.

And finally, here it is in action:

Tags: #HowTo #Markdown

Discuss... or leave a comment below.

How to add Responsive "Last Updated Date" to Pinned Pages on Write.as

Fri, 21 May 2021 17:30:00 +0000

On some of the pinned pages on my journal, I added a “Last Updated Date” value right under the title. I did it using a span element, like this:

# Archive📜

Last Updated: 2021-03-17

Now, instead of having it show up under the title all the time, I also wanted it to show up to the right of the title, if the screen was wide enough.

So, if the page is being viewed on a wide screen, like on a desktop computer, the “Last Updated Date” will show up on the right side. If the page is being viewed on a small screen, like on a mobile phone, the “Last Updated Date” will show up under the title.

Here is how I made it responsive using Custom CSS:

span.lastUpdatedDate {
   font-size: 0.7em; 
   color: silver; 
}
@media screen and (min-width: 480px) {
   span.lastUpdatedDate {
      float: right; 
      margin-top: -4em; 
      margin-bottom: -4em;
   }
}
@media screen and (max-width: 479px) {
   span.lastUpdatedDate {
      margin-top: -2em;
      padding-bottom: 2em;
      display: block;
   }
}

Here is what it looks like on a wide screen:

Here is what it looks like on a mobile phone:

If you know of an easier way to do this with less CSS, please let know in the comments below. Or you can do so privately by leaving me a message.

Tags: #HowTo #CSS #WriteAs

Discuss... or leave a comment below.

How to Customize the Footer on a Write.as Website

Sat, 16 Jan 2021 00:00:00 +0000

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;
}

Note the \A at the end of the content value. That basically functions like a line break () in HTML. Without that, the content value will show up to the left of the “published with write.as” footer text. With \A in place, the content value will show up above the “published with write.as” footer text.

That also means that through the use of \A, you can add however many lines of text you want into your footer.

So, the main thing I like about using CSS for a customized footer, is that even if JavaScript is disabled on the browser, it will still work. If all you really want is to display some text on the footer, this is the best option in my opinion.

Now the thing that I don't like about it, is that it doesn't allow you to add hyperlinks in your footer. If you want to do that, then you have to use JavaScript.

Option 2: JavaScript

As I mentioned above, one of the reasons to go with JavaScript for a customized footer, is that it allows you to add hyperlinks as part of the footer content. This means that you can add links to other websites, or to a license, etc...

To customize the footer using JavaScript, modify the contents of the customFooterHTML variable below, then copy and add the JavaScript code to the Custom Javascript settings for your website.

/* Custom Footer*/
var customFooterHTML = 'Copyright © 2019 - 2021 by Your Name
The opinions expressed herein are my own and do not represent those of my employer
or any other third-party views in any way.
published with write.as';

var x = document.querySelector('footer').getElementsByTagName('nav')[0];
x.innerHTML = customFooterHTML;

For an example of this customized footer in action, scroll to the bottom of this page.

Note that I added class="home pubd" to my links (anchor elements). home and pubd are Write.as classes that have their own specific styling. I added them so that I won't run into padding issues in the footer. This also means that you can put in other class names that you can style via your own Custom CSS settings.

Also note that instead of using \A to force a line break, I use the regular HTML line break. This is one of the benefits of going with the JavaScript approach. You are pretty much working with HTML at this point. This also means that you can put any valid HTML elements in there.

Lastly, note that I also added published with write.as as part of the value for customFooterHTML. That's because with this approach, you are replacing the content of the footer with the content inside the customFooterHTML variable. So, if I don't add it, that text won't show up.

Maybe that's something you don't want to include in the first place. If that's the case, then you can simply exclude it from the value of the customFooterHTML variable.

So, you already know what I like about this approach — the ability to use HTML and add hyperlinks. What about drawbacks?

Well, since this is done via the Custom Javascript settings for your website, if one of the scripts in there runs into an error, it is possible that your footer won't be rendered. Also, if someone is viewing your website on a browser with JavaScript disabled, then your footer also won't show up. It's not that big of a deal, but something to keep in mind when using this approach.

Tags: #HowTo #WriteAs #CSS #JavaScript

Discuss... or leave a comment below.

Blog Post Navigation using JavaScript | Part 2

Tue, 23 Jun 2020 17:22:20 +0000

Update 04/26/2021: I have since taken down my Journal Entries, so the links on this post won't work anymore. However, the idea and logic described in this post, is still applicable for posts that you wanted to add a Previous or Next link to.

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? >_<

The solution I came up with was to hide the slugs to the Previous and Next post, in the post itself. These slugs will get picked up by JavaScript and used for generating the corresponding links. Yeah I know, this is also a bit of a manual process. But I only had 16 precursor journal entries. I didn't mind updating them one by one to add the slugs for the Previous and Next post in the series.

For future entries in a series, I would consider adding the slugs for the Previous and Next post as part of the writing process. For example, I've recently implemented this solution to entries in my Book Review series. For the next Book Review post that I'll write, I will add the slugs as part of writing the post. And I'll also update the previous post in the series to point to the new one. — Update 04/26/2021: I eventually removed these links on the Book Review posts because they were getting picked up by my search app.

Here is an example of how I hid the slugs in a post. In this case, it is for Journal Entry – XV. You can easily verify by looking at the page source. The key to hiding the slugs is using style="display: none;" for the styling.

vacation-week-is-over
journal-entry-xiv

The slugs will then be picked up by JavaScript and used for generating links to the Next and Previous post in the series. Sample script below for generating the link to the Previous post.

try {
     previousLinkUrl = "https://journal.dinobansigan.com/" + document.getElementById("previousLinkSlug").innerHTML;

     previousLinkText = '←Previous');
} catch (err) { }

Wrapping the code in a try catch block is crucial here. This is to avoid running into JavaScript errors when viewing a post that doesn't have any hidden slugs. Basically, calling document.getElementById("previousLinkSlug").innerHTML on a post that doesn't have a previous link slug will throw an error. When that happens, the rest of your custom JavaScript will not run at all.

Before I end this post, I'll address a question that you might have about the use of slugs in a post. Instead of slugs, why not just add links (URLs) to the Previous and Next post in the series? True, I could have done that. The reason I didn't, is because I didn't want to add any more hard-coded URLs into the post. Also, this keeps the slugs “domain agnostic”. I don't know if that is a proper term. What I mean is, I could switch to a different domain name for this site and not have to mess with all the posts. I would only need to update the Javascript to use the new domain name and all the links should keep working.

Lastly, you might be thinking, why go through all this trouble of manually inserting slugs into a post and writing JavaScript, just so I can display a link to the Previous and Next post in a series? The answer is, because I can and it helps me learn more about JavaScript. Part of the perks of owning your own blog/site, is that you can do what you want with it. You don't have to follow what everyone else is doing, you can make it your own.

Precursor journal entries were entries I wrote before I started a 30 day hiatus for my Digital Declutter phase. These were impromptu entries written mostly at night before going to bed. However, starting from Journal Entry - 010, the journal entries that I've been writing are purely based off entries from my bullet journal.

Tags: ##HowTo #JavaScript #WriteAs

Discuss... or leave a comment below.

Blog Post Navigation using JavaScript | Part 1

Sat, 20 Jun 2020 03:33:56 +0000

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();

Generating Link to Previous Post

This was easy because all I had to do in JavaScript was calculate the previous index value, based on the current index. If you're viewing Journal Entry – 010, Javascript will calculate the previous index as 10 - 1, which will give you 9. As long as the calculated previous index value is greater than 0, the script will insert a link to the Previous post.

Here is part of the JavaScript that creates the link to the Previous post.

// Generate Previous link
if ((postIndex - 1) > 0 &&
    (isJournalEntry || isGameLog || isMusicLog || isVideoGameScreenshots || isGameClips)) {
    var previousLinkUrl = "https://journal.dinobansigan.com/";

    var pad = '000'
    var previousPostIndex = (pad + (postIndex - 1)).slice(-pad.length);
    var postSlugSplit = postSlug.split('-');

    var i;
    for (i = 0; i < postSlugSplit.length; i++) {
        if (i + 1 < postSlugSplit.length) {
            previousLinkUrl = previousLinkUrl.concat(postSlugSplit[i] + "-");
        } else {
            previousLinkUrl = previousLinkUrl.concat(previousPostIndex);
        }
    }

    previousLinkText = '←Previous');
}

Generating Link to Next Post

The next thing I wanted to do, was insert links to the Next post in my Journal Entry series. So, if you were viewing Journal Entry – 010, I wanted to display a link to Journal Entry – 011. Unlike the logic for calculating the previous index, on this one I cannot check if the calculated index is greater than zero. I needed another way to tell me what the upper limit was.

The solution I came up with for this is a bit of a manual process. I added a variable at the start of the script, var latestJournalEntryIndex = 60;, to track the latest journal entry index. Then I used this value to figure out if I'm already at the latest journal entry. If so, then the script won't insert a link to the next post.

So, every time I publish a new journal entry, I have to remember to update the latestJournalEntryIndex variable in my Custom JavaScript. Like I said, it is a bit of a manual process, but it works. Even if I forget to update the variable, it won't break anything. It just means that navigating up is limited until the variable gets updated. Anyway, until I can figure out a better way of handling it, this will do for now.

Here is part of the JavaScript that creates the link to the Next post.

// Generate Next link
var nextIndex = parseInt(postIndex) + 1;

if ((nextIndex <= latestJournalEntryIndex && isJournalEntry) ||
    (nextIndex <= latestMusicLogIndex && isMusicLog)) {
    var nextLinkUrl = "https://journal.dinobansigan.com/";

    var pad = '000'
    var nextPostIndex = (pad + (parseInt(postIndex) + 1)).slice(-pad.length);
    var postSlugSplit = postSlug.split('-');

    var j;
    for (j = 0; j < postSlugSplit.length; j++) {
        if (j + 1 < postSlugSplit.length) {
            nextLinkUrl = nextLinkUrl.concat(postSlugSplit[j] + "-");
        } else {
            nextLinkUrl = nextLinkUrl.concat(nextPostIndex);
        }
    }

    nextLinkText = 'Next→');
}

Note that in the script above, I had to use the parseInt method to get the Next index value. While in the script for getting the Previous index, I could simply do postIndex - 1. This is a weird thing with JavaScript. If the value of postIndex is '010', running postIndex - 1 will give you back a value of 9. But running postIndex + 1 will give you back a value of '0101'. In other words, with the + operator, JavaScript will do string concatenation. So, you have to use the parseInt method.

Displaying Links

Lastly, here is the code that brings it all together. The script below will insert the links at the bottom of the post.

var postLinksText = randomLinkText;
if (previousLinkText) {
    postLinksText = previousLinkText.concat('   ' + postLinksText);
}

postLinksText = postLinksText.concat('   ' + backToTopLinkText);

if (nextLinkText) {
    postLinksText = postLinksText.concat('   ' + nextLinkText);
}

var postLinksSection = '

' + postLinksText + '
';
document.getElementsByTagName("article")[0].insertAdjacentHTML('beforeend', postLinksSection);

That's it for Part 1. For Part 2, I'll talk about how I managed to insert Previous and Next links for my other non-indexed journal entries.

Tags: #HowTo #JavaScript #WriteAs

Discuss... or leave a comment below.

How to Embed Responsive YouTube Videos on Write.as

Sun, 19 Apr 2020 18:07:39 +0000

Updated: 4/26/2021

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 write.as sites. To make the YouTube videos I embed on write.as sites responsive, I simply followed the instructions from this Responsive Youtube Embed post. Specifically, these are the changes I added to my journal.

Custom CSS

I added the following Custom CSS:

/* Responsive Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML Changes

And on my posts where I embedded YouTube videos, I simply wrapped the iframe element with a div element that had a class attribute value of “video-container”, like this:

With those changes in place, I have found that the YouTube videos I embedded on my posts will shrink down to match the size of the screen on a mobile phone, or will expand to match the width of the text on a post when viewed on a desktop browser. Pretty cool.

Tags: #HowTo #HTML #CSS #WriteAs

Discuss... or leave a comment below.