Skip to content
days.

Friday, March 6

Creating an index page.

On a blog, the main (root) page should contain a list of recent posts. Starlight doesn’t have that functionality built-in, so here’s a first pass at a custom <RecentPosts> component. It’s already being used at days.ohn.sh.

RecentPosts.astro
---
import Preview from './Preview.astro'
import { getCollection } from 'astro:content'


const posts = await getCollection('docs')
posts.sort((a, b) => Number(b.data.date) - Number(a.data.date))
const numPosts = 5
---


<section>
  {
    posts.slice(0, numPosts).map((entry) => (
        <Preview {entry} />
        <hr />
    ))
  }
</section>
<style>
  hr {
    margin-block: 3rem;
    border: none;
    border-top: 1px solid var(--sl-color-gray-5);
  }
</style>

Notice that Astro’s JSX-like templates can contain unwrapped fragments like <Preview /><hr />. Additionally, since they only render once (at build time in this case), there’s no need for a React-like key prop on map-generated elements.

View full post…

Git Commits

days commits 6 ohnsh/days

  • 4:37 pm — John Sherrell <dev@ohn.sh>

    Tweak colors.

  • 1:17 pm — John Sherrell <dev@ohn.sh>

    After neglecting light mode while tweaking theme colors, I decided to use flexoki, an off-the-shelf theme, with only accent color modifications. For now.

  • 11:33 am — John Sherrell <dev@ohn.sh>

    Fix GitHub link.

  • 11:26 am — John Sherrell <dev@ohn.sh>

    Added author to sidebar. Using config, but a component override would probably be better.

  • 4:59 am — John Sherrell <dev@ohn.sh>

    Theme work, now using values from Srcery (ghostty).

  • 1:28 am — John Sherrell <dev@ohn.sh>

    Tweak theme, add socials.

scratch commits 5 ohnsh/scratch

  • 12:57 pm — John Sherrell <dev@ohn.sh>

    After neglecting light mode while tweaking theme colors, I decided to use flexoki, an off-the-shelf theme. For now.

  • 11:26 am — John Sherrell <dev@ohn.sh>

    Added author to sidebar. Using config but a component override would probably be better.

  • 5:27 am — John Sherrell <dev@ohn.sh>

    More color tweaks. Using oklch() for the first time. Niice.

  • 5:00 am — John Sherrell <dev@ohn.sh>

    Theme work, now using values from Srcery (ghostty).

  • 1:30 am — John Sherrell <dev@ohn.sh>

    Tweaked theme, added socials.

YouTube