Customizing an Astro blog

Unknown — Sat, 23 Aug 2025 00:00:00 +0000

After going through the Astro blog tutorial</a> 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.</p>

Archive posts sorted by date with content collection</h3>

Source</a></p>

const</span> posts</span> =</span> (</span>await</span> getCollection</span>(</span>'</span>blog</span>'</span>)</span>)</span>.</span>sort</span>(</span></span>
</span>
(</span>a</span>,</span> b</span>)</span> =></span> b</span>.</span>data</span>.</span>pubDate</span>.</span>valueOf</span>(</span>)</span> -</span> a</span>.</span>data</span>.</span>pubDate</span>.</span>valueOf</span>(</span>)</span>,</span></span>
</span>
)</span>;</span></span></code></pre>
The same method was applied to the tag pages, except with const allPosts</code> instead.</p>
<</span>ul</span>></span></span>
</span>
{</span>posts</span>.</span>map</span>(</span>post</span> =></span> (</span></span>
</span>
<</span>li</span>></span>{</span>post</span>.</span>data</span>.</span>pubDate</span>.</span>toLocaleDateString</span>(</span>)</span>}</span>: </span><</span>a</span> href</span>=</span>{</span>`</span>/posts/</span>${</span>post</span>.</span>id</span>}</span>`</span>}</span>></span>{</span>post</span>.</span>data</span>.</span>title</span>}</span></</span>a</span>></span></</span>li</span>></span></span>
</span>
)</span>)</span>}</span></span>
</span>
</</span>ul</span>></span></span></code></pre>Navigation between entries</h3>
Source</a></p>
--</span>-</span></span>
import</span> {</span> getCollection</span> }</span> from</span> '</span>astro:content</span>'</span>;</span></span>
</span>
const</span> posts</span> =</span> (</span>await</span> getCollection</span>(</span>'</span>blog</span>'</span>)</span>)</span></span>
  .</span>sort</span>(</span>(</span>a</span>,</span> b</span>)</span> =></span> b</span>.</span>data</span>.</span>pubDate</span>.</span>valueOf</span>(</span>)</span> -</span> a</span>.</span>data</span>.</span>pubDate</span>.</span>valueOf</span>(</span>)</span>)</span>;</span></span>
</span>
const</span> currentPostIndex</span> =</span> posts</span>.</span>findIndex</span>(</span>(</span>post</span>)</span> =></span> post</span>.</span>id</span> ==</span> Astro</span>.</span>params</span>.</span>slug</span>)</span>;</span></span>
const</span> previousPost</span> =</span> currentPostIndex</span> +</span> 1</span> ===</span> posts</span>.</span>length</span> ?</span> undefined</span> :</span> posts</span>[</span>currentPostIndex</span> +</span> 1</span>]</span>;</span></span>
const</span> nextPost</span> =</span> currentPostIndex</span> ===</span> 0</span> ?</span> undefined</span> :</span> posts</span>[</span>currentPostIndex</span> -</span> 1</span>]</span>;</span></span>
--</span>-</span></span>
</span>
{</span></span>
  (</span>previousPost</span> ||</span> nextPost</span>)</span> &&</span> (</span></span>
    <</span>nav</span>></span></span>
      {</span> previousPost</span> &&</span> (</span> <</span>p</span>></span>Previous Post: </span><</span>a</span> href</span>=</span>{</span>`</span>/posts/</span>${</span>previousPost</span>.</span>id</span>}</span>/</span>`</span>}</span>></span>{</span>previousPost</span>.</span>data</span>.</span>title</span>}</span></</span>a</span>></span></</span>p</span>></span> )</span> }</span></span>
      {</span> nextPost</span> &&</span> (</span> <</span>p</span>></span>Next Post: </span><</span>a</span> href</span>=</span>{</span>`</span>/posts/</span>${</span>nextPost</span>.</span>id</span>}</span>/</span>`</span>}</span>></span>{</span>nextPost</span>.</span>data</span>.</span>title</span>}</span></</span>a</span>></span></</span>p</span>></span> )</span> }</span></span>
    </</span>nav</span>></span></span>
  )</span></span>
}</span></span></code></pre>
Add the BlogPostNavPrevNext</code> component to the page.</p>
Import Meta Glob</h3>
Blog</a>: Display recent posts and featured post.</p>
{</span>posts</span>.</span>slice</span>(</span>0</span>,</span> 3</span>)</span>.</span>map</span>(</span>(</span>post</span>)</span> =></span> (</span></span>
</span>
       <</span>h3</span>></span>{</span>post</span>.</span>data</span>.</span>title</span>}</span></</span>h3</span>></span></span>
       <</span>p</span>></span>{</span>post</span>.</span>data</span>.</span>pubDate</span>.</span>toLocaleDateString</span>(</span>)</span>}</span></</span>p</span>></span></span>
    <</span>p</span>></span>{</span>post</span>.</span>data</span>.</span>description</span>}</span></</span>p</span>></span></span>
 <</span>a</span> href</span>=</span>{</span>`</span>/posts/</span>${</span>post</span>.</span>id</span>}</span>/</span>`</span>}</span>></span>Read more</span></</span>a</span>></span></span>
)</span>)</span>}</span></span></code></pre>Adding full content to RSS feed</h3>
Source</a>: Add sanitize-html</code> and markdown-it</code> packages and insert below code into RSS file.</del></p>
content</span>:</span> sanitizeHtml</span>(</span>parser</span>.</span>render</span>(</span>post</span>.</span>body</span>)</span>,</span> {</span></span>
        allowedTags</span>:</span> sanitizeHtml</span>.</span>defaults</span>.</span>allowedTags</span>.</span>concat</span>(</span>[</span>'</span>img</span>'</span>]</span>)</span></span>
      }</span>)</span>,</span></span>
      ...</span>post</span>.</span>data</span>,</span></span></code></pre>
Edit</strong>: I ended up completely changing the RSS file to this one</a> found on Github. I installed MDX and made the necessary changes for Astro 5:</p>

Change import { getCollection } from "astro:content";</code> to getCollection, render</code></li>
Remove import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";</code> (I don't have a consts folder on that blog)</li>
Change const { Content } = await post.render();</code> to const { Content } = await render(post);</code></li>
Change feedItems.push({ ...post.data, link: /blog/${post.**slug**}/, content });</code> to post.id</code></li>
</ul>
Now I have a feed that basically matches my Bearblog one!</p>
More Resources: Pagination</a></p>

cmndctrl

Learning Gleam

Customizing an Astro blog

cmndctrl

Learning Gleam

Blog Posts</h2> Things I like about Gleam's Syntax</a></li> My Favorite Gleam Feature</a></li> A new Gleam feature I love</a></li> </ul> Packages</h2> I'm only listing ones I've become familiar with so far.</p>

Packages</h2> I'm only listing ones I've become familiar with so far.</p>

Customizing an Astro blog