Skip to content
days.

Latest 🗞️

Monday, March 9

Git Commits

days commits 11 ohnsh/days

  • 8:46 pm — John Sherrell <dev@ohn.sh>

    New paginated latest posts feed. It will soon be the default (index) route. Had to get a little hacky to get pagination working within Starlight's template system. This endpoint is outside of Starlight's regular scope but renders a <StarlightPage> layout component, so it looks identical.

  • 7:44 pm — John Sherrell <dev@ohn.sh>

    Extract `getCollection` procedure into a util function `getPosts`.

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

    Add color to dark them accent color, clean up CSS, make code blocks consistent.

  • 3:28 pm — John Sherrell <dev@ohn.sh>

    Refactor to allow index page (and others) to force og:image in frontmatter.

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

    Fixed og:image bug on index page. routeData.ts improvements. Use content collection filtering API with `getCollection`. The index entry has id `index` when returned by `getCollection` but it's the empty string when accessed through `Astro.locals.starlightRoute`.

  • 3:12 am — John Sherrell <dev@ohn.sh>

    Minor fix to favicon code snippet.

  • 2:58 am — John Sherrell <dev@ohn.sh>

    New apple-touch-icon.

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

    Remove early return in middleware that was preventing og:image tags on index page.

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

    Add 9th, tweak GithubDay styles.

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

    Added today's run.

  • 12:50 am — John Sherrell <dev@ohn.sh>

    Brought in Github day-loader from scratch project. Had to change dynamic imports in content loader to `import.meta.glob` to make Vite happy. The `eager` option is crucial; without it the imports are still basically dynamic and Vite crashes. Unfortunately, components rendered in mdx can't automatically detect *which day* they're being rendered for on the index page, where the route information doesn't help. I've tried a bunch of things, including @astropub/context, but nothing seems to work. For now, it will be necessary to pass a `date` prop in each mdx file. Which makes perfect sense, but it's going to add up to a lot of date props.

scratch commits 1 ohnsh/scratch

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

    Brought over fixes from days. Dynamic JSON imports in the github content loader were breaking Vite builds.

YouTube

Saturday, March 7

Starlight CSS tweaks: A hero for a blog index page

Yesterday, I created (a rough version of) an Astro component that renders a stream of recent posts for a blog index page. I’m already using it on days.ohn.sh. For now, I’m using Astro’s Starlight documentation framework, which means the default styling isn’t optimized for a blog.

In Starlight, styles can be customized site-wide with the global customCss config option. In this case, I only wanted to modify the hero on the main index page. Luckily, you can import CSS into an MDX page, just like you would in an Astro component. Doing so allows for page-specific CSS tweaks.

View full post…

Git Commits

days commits 11 ohnsh/days

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

    Favicon discussion.

  • 6:36 pm — John Sherrell <dev@ohn.sh>

    Applying splash.css site-wide.

  • 6:32 pm — John Sherrell <dev@ohn.sh>

    Content update (OG images).

  • 6:21 pm — John Sherrell <dev@ohn.sh>

    Fix rendering of plain markdown code blocks by removing mdx config from astro.config.mjs. By default the mdx config extends the markdown config, making it redundant anyway.

  • 5:24 pm — John Sherrell <dev@ohn.sh>

    Added video, section about external links.

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

    Add rehype plugin to open external links in new tab.

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

    Content update: themes.

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

    Added content explaining recent Starlight customizations.

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

    Added splash-like hero to the index, tweaked CSS for that specific page. Considering hiding TOC site-wide.

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

    Style tweaks.

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

    Added recent days feed to index page. Used HiDeoo/starlight-blog as a starting point but kept very little code.

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.

Thursday, March 5

Stupid sidebar tricks

I wanted to add my name and some external (non-social) links to the main layout. Starlight, being a documentation framework, isn’t really designed with that sort of thing in mind. I decided to use the sidebar, essentially dividing it into a header (for the author’s name), a main area, and a footer (for external links). Note that the sidebar is hidden behind a menu button at mobile sizes.

You can always override Starlight’s <Sidebar> component, which is probably what I should do. But for now, this config-only hack kind of works, helped by some custom CSS for the .author class.

View full post…

Git Commits

scratch commits 9 ohnsh/scratch

  • 11:15 pm — John Sherrell <dev@ohn.sh>

    Clean up formatting.

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

    Split log into different project.

  • 7:00 pm — John Sherrell <dev@ohn.sh>

    Ready to split into scratch/log.

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

    Added routeData middleware to inject og:image meta tags pointing at YouTube thumbnails.

  • 3:13 pm — John Sherrell <dev@ohn.sh>

    Test OG image on March 3.

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

    New videos.

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

    Shim docs content loader to generate redundant sidebar frontmatter options.

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

    Added `date` frontmatter to log posts. Going to eliminate some or all of the rest.

  • 12:46 am — John Sherrell <dev@ohn.sh>

    New videos.

days commits 4 ohnsh/days

  • 10:29 pm — John Sherrell <dev@ohn.sh>

    Clean-up.

  • 10:24 pm — John Sherrell <dev@ohn.sh>

    New videos.

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

    Fix up favicons, add logo, clean up public.

  • 9:46 pm — John Sherrell <dev@ohn.sh>

    Bringing in starlight-based blog from scratch project. Old setup is on branch `orig`.