Context Center Timelines - Day 18 - Setting up JSON LD.

Project Scope and ToDos

1. Create timeline pages where one can see the whole timeline of a particular event
2. Give timeline items type or category icons so that you can easily scan what is happening.
3. Allow the user to enter the timeline at any individually sharable link of an event and seamlessly scroll up and down

• Deliver timelines as a plugin that can be extended by other Eleventy users
• Auto-create social-media-ready screenshots of a timeline item
• Integrate with Contexter to have context-full link cards in the timeline
• Leverage the Live Blog format of Schema dot org
• Allow each entry to be its own Markdown file
• Handle SASS instead of CSS
• Fast Scroller by Month and Year
• Add timelines and individual timeline items to the sitemap
• Generate images more efficiently.
• Generate QR codes / Stickers for each timeline

Day 18

What I'd like to do is implement the correct SEO tags. I've now put in the Social Media Optimization tags.

git commit -am "Add socials and fix links. Still don't have the keyvalues working for individual timeline items"

But it has been very annoying to have the images build constantly during watch. I bet I can fix that.

Let's try setting a breaker to stop the .after from running after the first time.

Skip code block ▼

	let ranOnce = false;
	eleventyConfig.on("eleventy.after", async () => {
		if (ranOnce) {
			return;
		}
		console.log(`Image array of ${timelineImages.length} ready to process`);
		let processFinished = imageTool.queueImagesProcess(timelineImages);
		ranOnce = false;
		return processFinished.then(() =>
			console.log("Image generation process complete")
		);
	});

This means establishing an a structured data article schema using JSON-LD.

We want news articles I think? Or articles as a format.

I think it makes sense to render these timelines as LiveBlogPostings? It isn't traditionally the case for longer term content, however, we should give it a try. We can always make it optional later, perhaps only some timelines get the Liveblog treatment. These are composed of liveBlogUpdates. We can see an example of how this works with one of the articles that the Moz blog linked.

Ok, I fixed the image generation process so it won't constantly re-run in watch mode. I think this is a good start, but maybe I shouldn't even build the images if they are already built.

I'll set up the framework of the JSON-LD block I have in the main blog and then work from there now that I've unblocked myself on this issue.

git commit -am "Set up JSON LD block for further development"