Latest 🗞️

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.

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

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.

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.

View full post…

Git Commits

scratch commits 7

ohnsh/scratch

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

ohnsh/scratch

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.