HangerThem
64ae30b545
- Add sitemap.ts and robots.ts - pageMetadata() helper: consistent title, canonical URL, Open Graph, Twitter card and feed alternate on every page - Generated OG images: a site card, and per post either the cover image or a branded title card (pre-rendered at build) - BlogPosting JSON-LD on post pages - Fail fast with a clear error when SITE_URL is missing Content loading: - Validate post frontmatter at build time and normalize dates to ISO (fixes invalid <time datetime> values) - Add draft: true support (drafts only render in development) - Cache markdown rendering so metadata and page share one render - Replace the three copy-pasted about/projects/setup pages with a shared MarkdownPage component
81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
import fs from 'fs'
|
|
import path from 'path'
|
|
import { ImageResponse } from 'next/og'
|
|
import { SITE_NAME, SITE_URL } from '@/app/metadata'
|
|
|
|
export const ogImageSize = { width: 1200, height: 630 }
|
|
|
|
const colors = { bg: '#040404', fg: '#e0e0e0', fgDim: '#b0b0b0', accent: '#ef1f1f' }
|
|
|
|
function toDataUri(filePath: string, mime: string) {
|
|
return `data:${mime};base64,${fs.readFileSync(filePath).toString('base64')}`
|
|
}
|
|
|
|
const logo = toDataUri(path.join(process.cwd(), 'public/logo.png'), 'image/png')
|
|
|
|
type OgCardProps = {
|
|
title: string
|
|
description?: string
|
|
eyebrow?: string
|
|
}
|
|
|
|
/** Renders the branded title card used for pages and posts without a cover image. */
|
|
export function renderOgCard({ title, description, eyebrow }: OgCardProps) {
|
|
return new ImageResponse(
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
padding: '64px 72px',
|
|
background: colors.bg,
|
|
color: colors.fg,
|
|
borderLeft: `16px solid ${colors.accent}`,
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
|
|
{eyebrow && (
|
|
<div style={{ fontSize: 28, color: colors.accent, textTransform: 'uppercase' }}>
|
|
{eyebrow}
|
|
</div>
|
|
)}
|
|
<div style={{ fontSize: title.length > 50 ? 60 : 76, fontWeight: 700, lineHeight: 1.1 }}>
|
|
{title}
|
|
</div>
|
|
{description && (
|
|
<div style={{ fontSize: 30, color: colors.fgDim, lineHeight: 1.4, maxHeight: 130 }}>
|
|
{description.length > 140 ? description.slice(0, 137).trimEnd() + '…' : description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 16, fontSize: 30 }}>
|
|
{/* oxlint-disable-next-line nextjs/no-img-element -- Satori renders plain <img> only */}
|
|
<img src={logo} width={48} height={48} alt="" />
|
|
<span style={{ fontWeight: 700 }}>{SITE_NAME}</span>
|
|
<span style={{ color: colors.fgDim }}>{SITE_URL.replace(/^https?:\/\//, '')}</span>
|
|
</div>
|
|
</div>,
|
|
ogImageSize,
|
|
)
|
|
}
|
|
|
|
const coverMimeTypes: Record<string, string> = {
|
|
'.png': 'image/png',
|
|
'.jpg': 'image/jpeg',
|
|
'.jpeg': 'image/jpeg',
|
|
}
|
|
|
|
/** Renders a post's cover image at OG size, or null if the format isn't supported by Satori. */
|
|
export function renderOgCover(coverImage: string) {
|
|
const mime = coverMimeTypes[path.extname(coverImage).toLowerCase()]
|
|
if (!mime) return null
|
|
|
|
const src = toDataUri(path.join(process.cwd(), 'public/posts', coverImage), mime)
|
|
return new ImageResponse(
|
|
// oxlint-disable-next-line nextjs/no-img-element -- Satori renders plain <img> only
|
|
<img src={src} width={ogImageSize.width} height={ogImageSize.height} alt="" />,
|
|
ogImageSize,
|
|
)
|
|
}
|