• meta tags like og: and twitter:
• meta tags like title, description, canonical, and robots

Astro scopes styles on component level, meaning it's styles won't affect any other component (not even child components).
When turning markdown into HTML, we want some default styling.
Utilize Astro's Global styles on the BlogPost.astro component so each HTML that's a child of the mentioned component gets those styles applied.

Implement it using global.css file with custom class that's going to apply the styling to all child elements of the element with the specified class.

Currently, on desktop PCs, pages get prefetched when the user hovers over the link.
Investigate how to implement similar functionality for mobile devices.

One possible solution would be to use prefetching strategies based on viewport position.

• Quick introduction

Take a look at Web Accessibility Cheatsheet by Carlo Gino Catapang.

• Define color palette inside Tailwind config.
• Replace all hardcoded colors with custom Tailwind classes.

Since Obsidian and Astro how different ways to load images and I don't want to update my Obsidian vault to match Astro style, investigate ways to automatically place blog post images inside the public/images directory.

One possible idea is inspired by Rach Smith's Automating the process for moving notes from my Obsidian vault to my Astro site.

Research and implement basic notification system for new posts.

In the search component, show the text which matched with the query param so the user can get a glimpse of what the search found before entering the blog post.

• Highlight the active navbar item even if the current route is a sub route of one of the navbar links.
  • For example, if the current URL looks like /blog/my-first-post, 'blog' navbar link needs to be highlighted as well.

Something like "On this page" section on Astro docs or this blog

Utilize Tailwind's dark mode if aplicable.

• In the CodePipeline service, CloudFront should automatically invalidate cache when new app version is built.

• AWS CloudFront:
  • Error pages setup.
  • Function for serving index.html for each page.

• Link to Astro docs referencing this feature.

Research and implement either Google Analytics or some other alternative solution.
One possible solution could be implementing AWS Pinpoint

Implement search on the website so the users can find posts easier.
Take a look at fuzzy search implementations as well.

• Use husky and lint-staged.

• Favicon

Astro has official implementation of the Image component which offers various optimizations.
More info here.

• Create a page that shows that the content the user is looking for cannot be found.
• Handle the 404 page inside the AWS CloudFront.