ルカ-さん Luca-san

Improving Eleventy blog - Again

8 min read

Another set of improvements for Eleventy blog, mostly focused on reading experience, continiung from the previous post Improving Eleventy blog.

Table of Contents

Improvements

A few small quality of life improvements for Eleventy blog; nothing major and with this i think i'm done with adding features as it now has everything i need that i can think of.

Scroll to the top button

First a small one, i wanted to have a button to quickly jump to the top from a page, which you can now find on the bottom right corner of blog posts. To do that, we need to add some js code in our post.njk file. I've added this at the bottom, before the giscus integration:

<!-- Scroll to Top Button -->
<button id="scrollToTop" style="display:none; position:fixed; bottom:20px; right:20px; padding:10px; width:40px; font-size:16px; background-color: var(--scroll-top-background); color: var(--scroll-top-text); border: none; border-radius: 5px; cursor: pointer;">
	↑
</button>

<script>
	const scrollToTopButton = document.getElementById('scrollToTop');

	window.addEventListener('scroll', () => {
		if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
			scrollToTopButton.style.display = 'block';
		} else {
			scrollToTopButton.style.display = 'none';
		}
	});

	scrollToTopButton.addEventListener('click', () => {
		window.scrollTo({
			top: 0,
			behavior: 'smooth'
		});
	});
</script>

Then we need to adjust the colors for the two themes. I've simply added new variables in theme-switch.css:

root.dark {
--scroll-top-background: #fff;
--scroll-top-text: black;

root:not(.dark) {
--scroll-top-background: #15202b;
--scroll-top-text: white;

Progress Bar

Then i wanted to add progress bar at the top for when one is reading a blog post. Add the following code in the post.njk at the top, before the title; for the theme we reuse the variables created for the jump to top button created previously, plus creating a new one:

<!-- Progress Bar -->
<div id="progressBar" style="position: fixed; top: 0; left: 0; height: 5px; background-color: var(--progress-background); width: 100%; z-index: 1000;">
    <div id="progressIndicator" style="height: 100%; background-color: var(--scroll-top-background); width: 0%;"></div>
</div>

New variable for theme colors, again in theme-switch.css:

root.dark {
--progress-background: #738a94;

root:not(.dark) {
--progress-background: #e0e0e0;

Again we reuse the scroll listener we created for the jump to top button, in post.njk:

<script>
    const scrollToTopButton = document.getElementById('scrollToTop');

    window.addEventListener('scroll', () => {
        // Scroll to Top Button visibility
        if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
            scrollToTopButton.style.display = 'block';
        } else {
            scrollToTopButton.style.display = 'none';
        }
        
        // Update Progress Bar
        const progressBar = document.getElementById('progressBar');
        const progressIndicator = document.getElementById('progressIndicator');
        
        window.addEventListener('scroll', () => {
            const totalHeight = document.body.scrollHeight - window.innerHeight;
            const progressHeight = (window.scrollY / totalHeight) * 100;
            progressIndicator.style.width = progressHeight + '%';
        });
    });

    scrollToTopButton.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
</script>

Read Time

Another one to improve reading that's nowadays common on blogs: showing the read time. The time is simply calculated based on the number of words and an average reading time, which is between 200 and 250 words per minute (i've set it in the middle at 225). Add the following javascript function in eleventy.config.js:

// Filter to calculate reading time
eleventyConfig.addFilter("readingTime", (content) => {
    const words = content.split(/\s+/).length; // Count words
    const readingTime = Math.ceil(words / 225); // Divide by average reading speed
    return readingTime;
});

then include it in post.njk: before the actual content of a post, which is this line:

{{ content | safe }})

Add the reading time:

<p><i>{{ content | readingTime }} min read</i></p>

Adjust Table Looks

This isn't a new addition but rather a small improvements on how tables are rendered by default in Eleventy markdown, which was bothering me as it uses invisible borders and odd spacing. The result i wanted was to show tables as proper tables, and for that we need to update the index.css file and change how they are rendered. Fortunately, it's quite easy. I've adjusted the colors in my two themes:

table {
	margin: 1em 0;                    /* Existing margin */
	width: 100%;                       /* Make table full width */
	border-collapse: collapse;         /* Prevent spacing between borders */
	table-layout: auto;
}

table td,
table th {
	padding-right: 1em;                /* Existing padding */
	border: 1px solid var(--color-gray-50); /* border color */
	padding: 4px;                      /* Add padding (can adjust) */
	text-align: left;
	word-wrap: break-word;
}

table th {
	background-color: var(--color-gray-90); /* header background */
	border: 1px solid var(--scroll-top-text); /* border color */
	color: var(--scroll-top-text); /* top row text color */
	font-weight: bold;                 /* Make headers bold */ 
}