Blog Posts
All blog posts should be saved as Markdown or MDX files within the src/content/posts/ directory, and have valid frontmatter as defined by the posts content collection in the src/content/config.ts file. Here’s an example of what valid frontmatter would look like:
---
title: "Customizing Miniblog"
description: "How to customize the Miniblog blog theme."
date: "Nov 26 2024"
image: "/static/blog-placeholder.png"
---Note that the
imagefrontmatter property is optional, and will by default use/static/blog-placeholder.png. You may update this by replacing the/static/blog-placeholder.pngfile in thepublic/static/directory with a file of your choice with the same name.
Codeblock Syntax Highlighting
Astro has Markdown codeblock syntax highlighting out of the box by using Shiki under the hood. To customize the themes used by Shiki, modify the markdown.shikiConfig.themes property of the astro.config.mjs file to one of the themes provided by Shiki.
OpenGraph Image Support
As mentioned in the Blog Posts section above, a default OpenGraph image is provided for all pages of the site.
To update the site-wide, default OpenGraph image, replace the /static/blog-placeholder.png file in the public/static/ directory with a file of your choice with the same name.
To add a unique OpenGraph image for a specific blog post, add the new image to the public/static/ directory, and update the image frontmatter property for the respective blog post to use the new image.
View Transitions
View transitions, or page-to-page navigation animations, also come out of the box with Astro. Please review the Astro View Transitions documentation if you would like to modify the animations of the site.
Colors
Miniblog uses Tailwind CSS for its styling, and therefore uses Tailwind’s native color variables throughout the site. By default, Miniblog uses neutral for the majority of its colors, with the exception of links that use blue and codeblocks that utilize syntax highlighting.