Notes

Short notes & TIL

Quick thoughts, snippets, and things learned along the way — smaller than a full post, kept in one stream.

Subscribe
#astro #content

Astro’s glob() loader keys each entry by its file path, so the filename (minus extension) becomes a stable entry.id. That makes it a perfect anchor target for a single-page notes stream — no extra slug field needed.

const notes = defineCollection({
  loader: glob({ base: './src/content/notes', pattern: '**/*.mdx' }),
})
#css

A sticky header will happily cover whatever an in-page anchor jumps to. The fix is one line on the scroll target, not JavaScript:

.note {
  scroll-margin-top: 7rem;
}

scroll-margin reserves space above the element when the browser scrolls it into view — including for #hash navigation.