Latest 🗞️

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

Clean up old pagination hack.
9:50 pm — John Sherrell <dev@ohn.sh>

Tweak <YouTube> styles. Copilot pulled out a pretty sweet custom Vite plugin that wraps the component's own CSS in a @layer so it can be overridden with no fuss.
1:17 pm — John Sherrell <dev@ohn.sh>

Add README.
11:57 am — John Sherrell <dev@ohn.sh>

Added 3/9 video, minor edits.
2:55 am — John Sherrell <dev@ohn.sh>

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

Refactor route middleware. Pagination now handled there so no need to override the Pagination component. Remove TOC from latest stream.
12:51 am — John Sherrell <dev@ohn.sh>

Index is now a paginated non-Starlight route with a hero on page 1. Getting rid of content/docs/index.mdx makes sense because it was an outlier in the content collection and because the index really needs to display a stream of recent posts. Astro's built-in pagination is a much better solution for such a stream. Date utils are finally in good shape. Moving away from Starlight-centric approach. Parsing dates directly from slugs rather than relying on route context set by Starlight middleware.

Monday, March 9

Git Commits

days commits 11

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

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

🏃‍♂️
⏳

Sunday, March 8

Git Commits

scratch commits 1

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

GitHub day-loader prototype.

YouTube

🏃‍♂️
⏳

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.

Git Commits

days commits 11

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.

YouTube

🏃‍♂️
⏳

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.

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

Git Commits

days commits 6

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

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

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.

Git Commits

scratch commits 9

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

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

YouTube

🏃‍♂️
⏳

Wednesday, March 4

Git Commits

scratch commits 6

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.

YouTube

🏃‍♂️
⏳

Tuesday, March 3

Notes

Sample code for generating OG images with Satori and Resvg:

import satori from 'satori';
import { Resvg } from '@resvg/resvg-js';
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { title: post.data.title },
  }));
}

export const GET = async ({ props }) => {
  // Satori requires a font as an ArrayBuffer
  const fontData = await fetch('https://example.com').then(res => res.arrayBuffer());

  const svg = await satori(
    { type: 'div', props: { children: props.title, style: { fontSize: 60 } } },
    { width: 1200, height: 630, fonts: [{ name: 'Inter', data: fontData }] }
  );

  const resvg = new Resvg(svg);
  const pngData = resvg.render().asPng();

  return new Response(pngData, { headers: { 'Content-Type': 'image/png' } });
};

See also astro-og-canvas and astro-opengraph-images. See also the frontmatter of this post for a method of setting the <meta> tags manually.

Git Commits

scratch commits 7

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

Overhaul starlight sidebar and structure.
3:41 pm — John Sherrell <dev@ohn.sh>

Add running vids.
2:51 pm — John Sherrell <dev@ohn.sh>

YOLO12 models for demo. From emergentai/yolov12-onnxruntime-web.
2:51 pm — John Sherrell <dev@ohn.sh>

Daily log starter.
11:49 am — John Sherrell <dev@ohn.sh>

Keep only one active WebSocket connection at a time in PTZ demo.
11:18 am — John Sherrell <dev@ohn.sh>

Testing Cloudinary and Mux.
1:52 am — John Sherrell <dev@ohn.sh>

Add KaTeX support.

ptz-websocket commits 1

ohnsh/ptz-websocket

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

New orientation (/ptz/abs) connectors automatically become the active user. And if no active user when a message is received, the sender automatically becomes active.

YouTube

Monday, March 2

Git Commits

ptz-websocket commits 4

ohnsh/ptz-websocket

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

Feeding the typescript monster.
5:15 pm — John Sherrell <dev@ohn.sh>

Add cf-connecting-ip to server logs. New helper command to kill tmux sessions.
4:59 pm — John Sherrell <dev@ohn.sh>

Added my new favorite command to helpers.sh (the command to start the server and share the tmux session).
4:14 pm — John Sherrell <dev@ohn.sh>

Working websocket server for thingino PTZ control.

scratch commits 4

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

Move RemoteTerm out of PtzDemo component.
1:06 pm — John Sherrell <dev@ohn.sh>

Disable ttyd token requests for now. (CORS errors.)
3:10 am — John Sherrell <dev@ohn.sh>

Formatting.
2:57 am — John Sherrell <dev@ohn.sh>

PTZ demo works pretty well.

YouTube

Sunday, March 1

Git Commits

scratch commits 1