HangerThem
30ef0d611e
## 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
75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import { SITE_NAME } from '@/app/metadata'
|
|
import { NavLinks } from '@/components/layout/NavLinks'
|
|
import { siBluesky, siGithub, siMatrix, siTelegram, type SimpleIcon } from 'simple-icons'
|
|
import { ExternalLink } from '@/components/ui/ExternalLink'
|
|
import { getGitCommitHash } from '@/utils/git'
|
|
import Image from 'next/image'
|
|
|
|
type SocialLink = {
|
|
icon: SimpleIcon
|
|
url: string
|
|
}
|
|
|
|
const socialLinks: SocialLink[] = [
|
|
{
|
|
icon: siBluesky,
|
|
url: 'https://bsky.app/profile/hangerthem.com',
|
|
},
|
|
{
|
|
icon: siGithub,
|
|
url: 'https://github.com/hangerthem',
|
|
},
|
|
{
|
|
icon: siMatrix,
|
|
url: 'https://matrix.to/#/@hangerthem:hangerthem.com',
|
|
},
|
|
{
|
|
icon: siTelegram,
|
|
url: 'https://t.me/hangerthem',
|
|
},
|
|
]
|
|
|
|
const gitCommitHash = await getGitCommitHash()
|
|
const gitOriginUrl = process.env.GIT_ORIGIN_URL
|
|
|
|
export async function Sidebar() {
|
|
return (
|
|
<aside className="hidden lg:block w-64 shrink-0 px-4 bg-fg/5">
|
|
<div className="sticky top-0 flex flex-col h-screen gap-4 py-4">
|
|
<div>
|
|
<h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
|
|
<Image src="/logo.png" alt="Ephemeris Logo" width={32} height={32} />
|
|
<span>{SITE_NAME}</span>
|
|
</h2>
|
|
<ul className="space-y-2">
|
|
<NavLinks />
|
|
</ul>
|
|
</div>
|
|
<div className="mt-auto flex gap-4 mx-auto">
|
|
{socialLinks.map(({ icon, url }) => (
|
|
<ExternalLink key={url} href={url} skipIcon aria-label={icon.title}>
|
|
<svg
|
|
aria-hidden="true"
|
|
dangerouslySetInnerHTML={{ __html: icon.svg }}
|
|
className="inline-block w-6 h-6 mr-1 fill-fg-dim hover:fill-accent transition-colors"
|
|
/>
|
|
</ExternalLink>
|
|
))}
|
|
</div>
|
|
|
|
{gitCommitHash && gitOriginUrl && (
|
|
<div className="text-xs text-fg-dim mt-2 mx-auto">
|
|
<span>Commit: </span>
|
|
<ExternalLink
|
|
href={gitOriginUrl + '/commit/' + gitCommitHash}
|
|
className="hover:underline"
|
|
skipIcon
|
|
>
|
|
{gitCommitHash.slice(0, 7)}
|
|
</ExternalLink>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|