Adventures in making a blog part 2

After going through the Astro blog tutorial and adding my own css to it, I was quite satisfied with how it came out. However, there were a few things I wanted to incorporate with further help from the Astro docs and other resources. I will be adding to this as I progress.

Archive posts sorted by date with content collection:

1
const posts = (await getCollection('blog')).sort(
2

3
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
4

5
);

The same method was applied to the tag pages, except with const allPosts instead.

HTML:

1
<ul>
2

3
{posts.map(post => (
4

5
<li>{post.data.pubDate.toLocaleDateString()}: <a href={`/posts/${post.id}`}>{post.data.title}</a></li>
6

7
))}
8

9
</ul>

Navigation between entries:

1
---
2
import { getCollection } from 'astro:content';
3

4
const posts = (await getCollection('blog'))
5
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
6

7
const currentPostIndex = posts.findIndex((post) => post.id == Astro.params.slug);
8
const previousPost = currentPostIndex + 1 === posts.length ? undefined : posts[currentPostIndex + 1];
9
const nextPost = currentPostIndex === 0 ? undefined : posts[currentPostIndex - 1];
10
---
11

12
{
13
  (previousPost || nextPost) && (
14
    <nav>
15
      { previousPost && ( <p>Previous Post: <a href={`/posts/${previousPost.id}/`}>{previousPost.data.title}</a></p> ) }
16
      { nextPost && ( <p>Next Post: <a href={`/posts/${nextPost.id}/`}>{nextPost.data.title}</a></p> ) }
17
    </nav>
18
  )
19
}

Add the BlogPostNavPrevNext component to the page.

Import Meta Glob: Display recent posts and featured post.

1
{posts.slice(0, 3).map((post) => (
2

3
       <h3>{post.data.title}</h3>
4
       <p>{post.data.pubDate.toLocaleDateString()}</p>
5
    <p>{post.data.description}</p>
6
 <a href={`/posts/${post.id}/`}>Read more</a>
7
))}

Adding full content to RSS feed: ~~Add sanitize-html and markdown-it packages and insert below code into RSS file.~~

1
content: sanitizeHtml(parser.render(post.body), {
2
        allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img'])
3
      }),
4
      ...post.data,

Edit: I ended up completely changing the RSS file to this one found on Github. I installed MDX and made the necessary changes for Astro 5:

Change import { getCollection } from "astro:content"; to getCollection, render
Remove import { SITE_DESCRIPTION, SITE_TITLE } from "../consts"; (I don’t have a consts folder on that blog)
Change const { Content } = await post.render(); to const { Content } = await render(post);
Change feedItems.push({ ...post.data, link: /blog/${post.**slug**}/, content }); to post.id

Now I have a feed that basically matches my Bearblog one!

More Resources: Pagination