Updates to the website

• Added rehype-pretty-code for better code block formatting
• Reworked content collections to use unified schemas
• Added draft functionality
• Began auditing a lot of functional but confusing CSS
• Unified some components/site features that were previously unique
• Fixed some unwise decisions with root CSS

Code blocks

I can now add titles, line numbering and highlights to previously boring and stuffy old code blocks. Astro.js features built-in syntax highlighting, but rehype adds substantial flexibility.

Before

export async function getStaticPaths() {
  const docs = await getPublishedEntries('docs');
  return docs.map((doc) => ({
    params: { slug: doc.id },
    props: doc,
  }));
}

After

export async function getStaticPaths() {
  const docs = await getPublishedEntries('docs');
  return docs.map((doc) => ({
    params: { slug: doc.id },
    props: doc,
  }));
}

Collection schema

The blog and docs collections now each extend a base schema instead of using two entirely distinct schema. This neatens up the code slightly and helps merge blog and doc functionality.

const baseSchema = z.object({
  title: z.string(),
  date: z.date().optional(),
  draft: z.boolean().optional().default(false),
  summary: z.string().optional(),
});

Docs and blog posts now accept a “draft” attribute in frontmatter. There’s a helper utility (src/utils/content.ts) that does a getPublishedEntries function and filters on data.draft before returning published content.

Docs previously lacked a tagging system or timestamps. Both can now be used, although I don’t plan to use tags for the Docs collection.