Upgrade to Astro 5, apply bincio design system, fix mdast-util-from-markdown v2 compat

- Bump astro@5, @astrojs/mdx@4, @astrojs/rss@4, @astrojs/sitemap@3 - Add @astrojs/tailwind, @astrojs/svelte, tailwindcss, svelte - Add patch-package + patches for mdast-util-wikirefs and mdast-util-caml to fix getData/setData → this.data.key and this.exit() return value for mdast-util-from-markdown v2 API compatibility - Fix wikirefs.ts resolveEmbedContent signature for new 3-arg call - Fix backrefs.ts: guard wikirefs.scan() against non-iterable return - Add Base.astro layout with bincio dark/light theme tokens, nav, Inter font - Replace global.css with bincio CSS variables + wiki-specific prose styles - Update Entry.astro, BlogPost.astro, index.astro, map.astro, blog/index.astro to use Base.astro layout with Tailwind utility classes - Add tailwind.config.mjs (Inter + JetBrains Mono, zinc palette) - Update SITE_TITLE to BincioWiki, site URL to wiki.bincio.com
2026-04-22 22:47:59 +02:00
parent 9cf5bfbd96
commit e1e3b0a85b
17 changed files with 7847 additions and 8175 deletions
@@ -1,8 +1,6 @@
 ---
 import type { CollectionEntry } from 'astro:content';
-import BaseHead from '../components/BaseHead.astro';
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
+import Base from './Base.astro';
 import FormattedDate from '../components/FormattedDate.astro';

 type Props = CollectionEntry<'blog'>['data'];
@@ -10,76 +8,22 @@ type Props = CollectionEntry<'blog'>['data'];
 const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 ---

-<html lang="en">
-	<head>
-		<BaseHead title={title} description={description} />
-		<style>
-			main {
-				width: calc(100% - 2em);
-				max-width: 100%;
-				margin: 0;
-			}
-			.hero-image {
-				width: 100%;
-			}
-			.hero-image img {
-				display: block;
-				margin: 0 auto;
-				border-radius: 12px;
-				box-shadow: var(--box-shadow);
-			}
-			.prose {
-				width: 720px;
-				max-width: calc(100% - 2em);
-				margin: auto;
-				padding: 1em;
-				color: rgb(var(--gray-dark));
-			}
-			.title {
-				margin-bottom: 1em;
-				padding: 1em 0;
-				text-align: center;
-				line-height: 1;
-			}
-			.title h1 {
-				margin: 0 0 0.5em 0;
-			}
-			.date {
-				margin-bottom: 0.5em;
-				color: rgb(var(--gray));
-			}
-			.last-updated-on {
-				font-style: italic;
-			}
-		</style>
-	</head>
-
-	<body>
-		<Header />
-		<main>
-			<article>
-				<div class="hero-image">
-					{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
-				</div>
-				<div class="prose">
-					<div class="title">
-						<div class="date">
-							<FormattedDate date={pubDate} />
-							{
-								updatedDate && (
-									<div class="last-updated-on">
-										Last updated on <FormattedDate date={updatedDate} />
-									</div>
-								)
-							}
-						</div>
-						<h1>{title}</h1>
-						<hr />
-					</div>
-					<slot />
-				</div>
-			</article>
-		</main>
-		<Footer />
-	</body>
-</html>
+<Base title={title} description={description}>
+  <article class="max-w-3xl mx-auto">
+    {heroImage && (
+      <img class="w-full rounded-xl mb-6 object-cover" style="max-height: 400px" src={heroImage} alt="" />
+    )}
+    <div class="mb-6 pb-4 border-b" style="border-color: var(--border)">
+      <div class="text-sm mb-2" style="color: var(--text-4)">
+        <FormattedDate date={pubDate} />
+        {updatedDate && (
+          <span class="italic"> · Updated <FormattedDate date={updatedDate} /></span>
+        )}
+      </div>
+      <h1 class="text-3xl font-bold" style="color: var(--text-primary)">{title}</h1>
+    </div>
+    <div class="prose-wiki">
+      <slot />
+    </div>
+  </article>
+</Base>