blog.hangerthem.com/content/posts/first-post.md at 30ef0d611e57e3cde91e64190cfa282e7f7f1982

HangerThem/blog.hangerthem.com

HangerThem 30ef0d611e Bug fixes, SEO, performance and accessibility pass (#1 )

## Summary

A cleanup pass across the blog: route and feed bugs fixed, SEO basics added, smaller and lazier images, accessibility fixes, and a real README. No content or design changes beyond small fixes.

## Bug fixes

- **Tag/category pages**: static params now use slugs, so pre-rendered pages match the links (before, `/tags/standard-model` was only rendered on demand and the pre-built pages said "Tag not found"). Unknown slugs now return a real 404, and there's a new not-found page.
- **Recently updated**: sorts by last modification *before* taking the top 5, so older posts that were updated recently now show up.
- **Atom feed**: `rel="self"` now points to `/feed.xml` (was `/feed`); `<updated>` uses the `updated` frontmatter field.
- **No-JS flash**: the `no-js` → `js` class swap runs in an inline `<head>` script before first paint, not after hydration.
- **Markdown links**: only internal paths go through `next/link`; `#anchors`, `mailto:` and links without an `href` no longer break.
- **Invalid HTML**: images in a paragraph together with text (e.g. "**Screenshots:**" followed by images on the Projects page) produced `<p><figure>` and a hydration error. Those paragraphs are now split.
- **Dates**: frontmatter dates are normalized to ISO, so `<time datetime>` values are valid. Formatting is pinned to Europe/Prague so a UTC build server can't shift a date by a day.

## SEO

- `sitemap.xml` and `robots.txt`
- Canonical URLs, Twitter cards and a feed link on every page, built by a shared `pageMetadata()` helper
- Generated Open Graph images: a site card, and for each post its cover image or a branded title card (pre-rendered at build time)
- `BlogPosting` JSON-LD on post pages

## Performance

- Only the post cover and the latest-post image are preloaded (was: every image)
- In-post image quality 100 → 90, plus responsive `sizes`
- Screenshots downscaled to 1800px wide; `linkboard-old.png` converted to WebP (3.1 MB → 60 KB)
- `CodeWrapper` is now a server component; only the copy button ships to the client
- Mermaid CDN script pinned to `11.17.2` for reproducible builds

## Accessibility

- Accessible names for icon-only links (share, social, mobile nav) and `aria-current` on active nav items
- Copy button: uses React state instead of mutating `innerHTML`, handles clipboard errors, announces the result to screen readers, and is no longer inside an `aria-hidden` header
- Code-block line numbers hidden from screen readers
- Image captions: the Markdown `"title"` becomes the caption; captions that only repeat the alt text are hidden from screen readers

## Content & maintenance

- **Frontmatter validation**: a missing or malformed field fails the build and names the file, instead of rendering a broken post
- **`draft: true` support**: drafts only render in development
- About/Projects/Setup pages share one `MarkdownPage` component; tag/category lists share `PostList`
- Markdown rendering is cached, so metadata and page share one render
- New README covering features, env vars, frontmatter schema, Markdown extensions and deployment
- Removed unused ESLint setup and the unrelated `hast` package; `oxlint`, `oxfmt` and `puppeteer` moved to devDependencies (locked versions unchanged)
- Typo fix in the Tessera cover alt text; removed unused `math`/`mermaid` flags from two posts

## Deployment notes

- **`SITE_URL` is now required**: the build fails with a clear error if it's missing.
- **Puppeteer is a devDependency now**: Nixpacks installs dev dependencies for the build by default, but check that Mermaid diagrams render on the first deploy (the Standard Model post has one).

## Testing

- `tsc --noEmit` and `bun run lint` pass
- `bun run build` passes; all 81 pages are generated statically
- Smoke-tested `next start`: posts, tags, categories, feed, sitemap and OG images return 200; unknown tags and routes return 404
- No block elements nested inside `<p>` in any built page

Reviewed-on: #1

2026-10-19 12:41:40 +00:00

1.9 KiB

Raw Blame History

title

description

date

A Bit About Me

As you may have read on my "About" page, I'm a 20-year-old software developer from Czechia with a passion for technology, reading, and gaming. When I'm not coding, you'll likely find me lost in a good book or enjoying a game with rich storytelling, like Hollow Knight or Stardew Valley. I also love the creativity involved in Dungeons & Dragons and Warhammer 40k, where I get to build new worlds and adventures. Additionally, I stay active by going to the gym regularly, which helps me maintain a balanced lifestyle.

What to Expect

On this blog, I'll be sharing a mix of content, including:

Tech Insights: From programming tips to insights on the latest technologies, I'll delve into the world of web development and beyond.
Book and Game Recommendations: If you’re a fellow bookworm or gamer, you might find some interesting recommendations or reviews here.
Personal Musings: Expect a few thoughts on life, learning, and the creative processes behind my projects.

Why I Started This Blog

I wanted to create a space where I could share not only my knowledge and experiences but also connect with like-minded individuals. Whether you’re interested in tech, books, or just want to follow along with my projects and adventures, I hope this blog will offer something of value to you.

Thank you for stopping by, and here’s to many interesting discussions and discoveries ahead!

Best,
Frank

1.9 KiB Raw Blame History Unescape Escape

A Bit About Me

What to Expect

Why I Started This Blog

1.9 KiB

Raw Blame History