open-productive-stack/drupal/nextjs/components/node-article.tsx
rnsrk f8b8f53d54 Add Drupal headless stack with Next.js frontend
- Add Next.js frontend service (nextjs) with Dockerfile and source
- Update docker-compose.yml: image names, Drupal 11.3.3, nextjs service
- Add docker-compose.override.yml.disabled for dev hot-reload
- Add install-headless-modules.sh for OAuth/JSON:API module setup
- Add README.md with full setup and configuration guide
- Update nginx/Dockerfile and nginx.conf.template for cms. subdomain
- Update drupal/Dockerfile PHP-FPM build args
- Gitignore **/.vscode/ to prevent IDE workspace files from being tracked
2026-03-30 11:14:17 +02:00

35 lines
1.1 KiB
TypeScript

import type { DrupalNode } from "@/lib/types"
interface NodeArticleProps {
node: DrupalNode
}
export function NodeArticle({ node }: NodeArticleProps) {
return (
<article className="mx-auto max-w-4xl">
<h1 className="mb-4 text-4xl font-bold tracking-tight text-emerald-600">
{node.title}
</h1>
<div className="mb-8 flex items-center gap-3 text-sm text-slate-600">
{node.uid?.display_name && (
<span>By {node.uid.display_name}</span>
)}
<time dateTime={node.created}>
{new Date(node.created).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
day: "numeric",
})}
</time>
</div>
{(node.body?.processed ?? node.body?.value) && (
<div
className="pemerald pemerald-slate max-w-none pemerald-a:text-emerald-600 pemerald-a:underline hover:pemerald-a:text-emerald-500"
dangerouslySetInnerHTML={{
__html: node.body.processed ?? node.body?.value ?? "",
}}
/>
)}
</article>
)
}