About
Blog posts are written in markdown and rendered by Astro.
Features
- Responsive design w/ nice blog cards
- Automatically sorted posts by date (latest show up first)
- Filter posts by tags
- Search posts by title
- Pagination
Own Notes
Template
Below shows the frontmatter (ie. information about blog at top of file):
---
title: 'Template Blog Post'
slug: 'test-post'
description: 'This is an example template blog post.'
publishDate: 'Dec 7, 2024'
updatedDate: 'Dec 8, 2024'
image: {
src: './blog-template.png',
alt: 'Post Thumbnail'
}
tags: ["others", "test"]
draft: false
---Each blog post is in their own directory, and images used in the blog post can be placed in that directory or provide an image URL instead in src of image object.
Note that draft and updatedDate are optional information. See repo src/content.config.ts for collection information details.
Embedding online videos
Embedding online videos can be done with adding iframe or embed directly to markdown page, eg:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/EVgt3dMdpxM"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>or
<object
title="Example Youtube video"
style="width: 100%; height: 300px"
data="https://www.youtube.com/embed/EVgt3dMdpxM"
></object>See result below.
Possible Todos
- Allow manual sort by date (ie. oldest first, newest first buttons)
- Better readability
- Code refactor, absolute spaghetti
- CSS is a mess
- Blog images probably should go in separate assets location rather than with each blog directory