Homepage Fixes on Day 17

Project Scope and ToDos

1. Static Site Generator that can build the blog and let me host it on Github Pages
2. I want to write posts in Markdown because I'm lazy, it's easy, and it is how I take notes now.
3. I don't want to spend a ton of time doing design work. I'm doing complicated designs for other projects, so I want to pull a theme I like that I can rely on someone else to keep up.
4. Once it gets going, I want template changes to be easy.
5. It should be as easy as Jekyll, so I need to be able to build it using GitHub Actions, where I can just commit a template change or Markdown file and away it goes. If I can't figure this out than fk it, just use Jekyll.
6. I require it to be used by a significant percent of my professional peers so I can get easy answers when something goes wrong.
7. I want source maps. This is a dev log site which means whatever I do with it should be easy for other developers to read.

• Also the sitemap plugin looks cool. Should grab that later.

• So does the reading time one.

• Also this TOC plugin mby?

• Use Data Deep Merge in this blog.

• Decide if I want to render the CSS fancier than just a base file and do per-template splitting.

• Is there a way to have permalinks to posts contain metadata without organizing them into subfolders?

• How do I cachebreak files on the basis of new build events? Datetime? site.github.build_revision is how Jekyll accomplishes this, but is there a way to push that into the build process for Eleventy?

• Make link text look less shitty. It looks like it is a whole, lighter, font.

• Code blocks do not have good syntax highlighting. I want good syntax highlighting.

• Build a Markdown-it plugin to take my typing shortcuts [prob, b/c, ...?] and expand them on build.

• See if we can start Markdown's interpretation of H tags to start at 2, since H1 is always pulled from the page title metadata. If it isn't easy, I just have to change my pattern of writing in the MD documents.

• Should I explore some shortcodes?

• Order projects listing by last posted blog in that project

• Limit the output of home page post lists to a specific number of posts

• Show the latest post below the site intro on the homepage.

• Tags pages with Pagination

Day 17

So as of last time I checked out this walkthrough.

It has a little more information for me to use than the Markdown-it documentation. It also recommended I check out one of the markdown-it plugins I was actually able to get working. So let's do that.

Just looking at my homepage and realizing I need to add some to-dos:

• Order projects listing by last posted blog in that project

• Limit the output of home page post lists to a specific number of posts

• Show the latest post below the site intro on the homepage.

• Tags pages with Pagination

• Posts should be able to support a preview header image that can also be shown on post lists.

Ok, let's take on projects by last updated. I guess this means another field to add to that projects object. I guess I'll start off by getting the front matter. I guess the first step is pulling in a markdown frontmatter processor.

It looks like markdown-it doesn't ship with frontmatter parsing. Eleventy uses grey-matter to handle frontmatter so if I pull that package in it won't increase our NPM package footprint.

Ok, so with that in hand, let's get the file content.

Skip code block ▼

const { readdirSync, readFileSync } = require("fs");
const path = require("path");
const matter = require("gray-matter");
// ...
	const projectFilesContent = projectFiles.map((filePath) => {
		return readFileSync(
			path.resolve(`./src/posts/projects/${projectDir}/${filePath}`)
		).toString(); // Don't forget the `toString` part!
	});

Gotta remember to use path in this because otherwise it just gives me the last portion of the path.

Ok, so let's use grey-matter to pull out that data. Where on the object does it live? I'm not getting anything yet.

Ok, it's because the front-matter data lives on object.data so my date is at object.data.date. Cool. Ok, got it working now. I can use Array.reduce here to figure out the most recent date.

Skip code block ▼

	lastUpdated = projectFilesContent.reduce((prevValue, fileContent) => {
		try {
			const mdObject = matter(fileContent);
			// console.log("data", mdObject.data);
			if (!mdObject.data || !mdObject.data.date) {
				return 0;
			}
			const datetime = Date.parse(mdObject.data.date);
			if (prevValue > datetime) {
				return prevValue;
			} else {
				return datetime;
			}
		} catch (e) {
			console.log("Could not find date", e);
			return 0;
		}
	}, 0);

And then I can sort it.

Skip code block ▼

directorySet.sort((a, b) => b.lastUpdatedPost - a.lastUpdatedPost);

Done!

Ok, now I can limit the posts output on the homepage by adding a limit count ot the shortcode.

Skip code block ▼

	eleventyConfig.addShortcode(
		"projectList",
		function (collectionName, collectionOfPosts, order, hlevel, limit) {
		// ...
			if (collectionOfPosts && limit) {
				collectionOfPosts = collectionOfPosts.slice(0, limit);
			}

Works!

git commit -am "Improve homepage outputs and ordering!"