This is the code for my personal blog where I write about my thoughts, experiences, and learnings. I use this blog as a way to document my journey and share my knowledge with others.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
pnpm install |
Installs dependencies |
pnpm dev |
Starts local dev server at localhost:4321 |
pnpm run generate:og |
Generates per-post Open Graph card images |
pnpm run build |
Generates Open Graph cards and builds to dist/ |
pnpm preview |
Preview your build locally, before deploying |
pnpm run typecheck |
Typecheck the project with astro check |
pnpm run test:a11y |
Run Playwright axe accessibility tests |
pnpm run a11y:viewer |
Open the generated axe aggregate report viewer |
pnpm astro ... |
Run CLI commands like astro add, astro check |
pnpm astro -- --help |
Get help using the Astro CLI |
Blog post social cards are generated at build time with
@schalkneethling/opengraph-cards-maker.
- Generator script:
scripts/generate-og-cards.mjs - Card background artwork:
src/assets/open-graph/post-card-template.png - Generated source output:
public/og/posts/ - Built output:
dist/og/posts/ - Metadata wiring:
public/og/ is ignored because the cards are reproducible build output. Run
pnpm run generate:og after changing post frontmatter, the generator script, or
the card template. The full pnpm run build command runs this automatically.
If the card design needs tuning, the current blog-specific layout is the
image-panel layout in
@schalkneethling/opengraph-cards-maker.
The generator uses background.src for the template image and
contentAlign: "align-end" so the post text sits on the right while the
background graphic remains on the left.
Feel free to check our documentation or jump into our Discord server.