Skip to content
days.

Latest 🗞️

Sunday, March 8

Git Commits

scratch commits 1 ohnsh/scratch

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

    GitHub day-loader prototype.

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`.

Wednesday, March 4

Git Commits

scratch commits 6 ohnsh/scratch

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

    New videos.

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

    Add READMEs to vendor code directories.

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

    Start of object detection demo. Library code copied from emergentai/yolov12-onnxruntime-web.

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

    New beaker favicon/logo.

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

    New videos.

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

    Some notes about OG images. Add January.