brut/bincio-wiki-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
brutsalvadi
2026-04-22 22:47:59 +02:00
committed by brutsalvadi
parent 9cf5bfbd96
commit e1e3b0a85b
17 changed files with 7847 additions and 8175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/consts.ts
+2 -2
View File
@@ -1,5 +1,5 @@
// Place any global data in this file.
// You can import this data from anywhere in your site by using the `import` keyword.
export const SITE_TITLE = 'Astro-Bloomz';
export const SITE_DESCRIPTION = 'Welcome to my digital garden!';
export const SITE_TITLE = 'BincioWiki';
export const SITE_DESCRIPTION = 'The Bincio group wiki';
src/layouts/Base.astro
+148
View File
@@ -0,0 +1,148 @@
---
import '../styles/global.css';
interface Props {
title?: string;
description?: string;
}
const { title = 'BincioWiki', description = 'The Bincio group wiki' } = Astro.props;
const editUrl = import.meta.env.PUBLIC_EDIT_URL ?? '';
const editEnabled = editUrl !== '';
---
<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content={description} />
<title>{title}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
<!-- Set theme before first paint to avoid flash -->
<script is:inline>
const t = localStorage.getItem('bincio-theme') || 'dark';
document.documentElement.setAttribute('data-theme', t);
</script>
<style is:global>
/* ── Theme tokens ───────────────────────────────────────────────── */
:root, [data-theme="dark"] {
--bg-base: #09090b;
--bg-card: #18181b;
--bg-elevated: #27272a;
--bg-subtle: #3f3f46;
--text-primary: #ffffff;
--text-2: #e4e4e7;
--text-3: #d4d4d8;
--text-4: #a1a1aa;
--text-5: #71717a;
--border: #27272a;
--border-sub: #3f3f46;
--accent: #00c8ff;
--accent-dim: rgba(0,200,255,0.15);
--text-color-wiki: #00c8ff;
--text-color-wiki-visited: #009ab8;
--text-color-invalid-wikilink: #52525b;
}
[data-theme="light"] {
--bg-base: #fafafa;
--bg-card: #f4f4f5;
--bg-elevated: #e4e4e7;
--bg-subtle: #d4d4d8;
--text-primary: #18181b;
--text-2: #27272a;
--text-3: #3f3f46;
--text-4: #52525b;
--text-5: #71717a;
--border: #e4e4e7;
--border-sub: #d4d4d8;
--accent: #0284c7;
--accent-dim: rgba(2,132,199,0.12);
--text-color-wiki: #0284c7;
--text-color-wiki-visited: #0369a1;
--text-color-invalid-wikilink: #a1a1aa;
}
/* ── Tailwind light mode overrides ──────────────────────────────── */
[data-theme="light"] .bg-zinc-950 { background-color: var(--bg-base) !important; }
[data-theme="light"] .bg-zinc-900 { background-color: var(--bg-card) !important; }
[data-theme="light"] .bg-zinc-800 { background-color: var(--bg-elevated) !important; }
[data-theme="light"] .bg-zinc-700 { background-color: var(--bg-subtle) !important; }
[data-theme="light"] .text-white { color: var(--text-primary) !important; }
[data-theme="light"] .text-zinc-100{ color: var(--text-primary) !important; }
[data-theme="light"] .text-zinc-200{ color: var(--text-2) !important; }
[data-theme="light"] .text-zinc-300{ color: var(--text-3) !important; }
[data-theme="light"] .text-zinc-400{ color: var(--text-4) !important; }
[data-theme="light"] .text-zinc-500{ color: var(--text-5) !important; }
[data-theme="light"] .border-zinc-800 { border-color: var(--border) !important; }
[data-theme="light"] .border-zinc-700 { border-color: var(--border-sub) !important; }
[data-theme="light"] .bg-zinc-950\/90 { background-color: rgba(250,250,250,0.92) !important; }
/* ── Base reset ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
</style>
</head>
<body
class="font-sans antialiased min-h-screen"
style="background-color: var(--bg-base); color: var(--text-primary)"
>
<nav
class="border-b sticky top-0 z-50 bg-zinc-950/90 backdrop-blur"
style="border-color: var(--border)"
>
<div class="max-w-5xl mx-auto px-4 h-12 flex items-center gap-3">
<a href="/" class="font-bold text-white tracking-tight hover:text-[color:var(--accent)] transition-colors shrink-0">
Bincio<span style="color: var(--accent)">Wiki</span>
</a>
<div class="flex items-center gap-5 flex-1 min-w-0 overflow-x-auto" style="scrollbar-width:none">
<a href="/" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Home</a>
<a href="/entries" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Pages</a>
<a href="/blog" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Blog</a>
<a href="/map" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Map</a>
</div>
<div class="ml-auto shrink-0 flex items-center gap-1">
{editEnabled && (
<a
href={editUrl}
target="_blank"
class="text-xs text-zinc-400 hover:text-white transition-colors px-2 py-1 rounded border border-zinc-700 hover:border-zinc-500"
>Edit</a>
)}
<button
id="theme-toggle"
class="text-zinc-400 hover:text-white transition-colors w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-800 text-base"
aria-label="Toggle theme"
>☀</button>
</div>
</div>
</nav>
<main class="max-w-5xl mx-auto px-4 py-6">
<slot />
</main>
<footer class="border-t mt-12 py-6 text-center text-sm" style="border-color: var(--border); color: var(--text-5)">
<p>BincioWiki &mdash; built with <a href="https://astro.build" class="hover:text-white transition-colors" style="color: var(--accent)">Astro</a> &amp; <a href="https://github.com/wikibonsai/astro-bloomz" class="hover:text-white transition-colors" style="color: var(--accent)">astro-bloomz</a></p>
</footer>
<script>
const btn = document.getElementById('theme-toggle') as HTMLButtonElement;
function applyTheme(theme: string) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('bincio-theme', theme);
btn.textContent = theme === 'dark' ? '☀' : '☾';
btn.title = theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
}
const current = document.documentElement.getAttribute('data-theme') || 'dark';
applyTheme(current);
btn.addEventListener('click', () => {
const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
applyTheme(next);
});
</script>
</body>
</html>
src/layouts/BlogPost.astro
+20 -76
View File
@@ -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>
src/layouts/Entry.astro
+15 -53
View File
@@ -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 BreadCrumbs from '../components/BreadCrumbs.astro';
import BackRefs from '../components/BackRefs.astro';
@@ -11,53 +9,17 @@ type Props = CollectionEntry<'entries'>['data'];
const { title, frontmatter } = Astro.props;
---
<html lang="en">
<head>
<BaseHead title={title} />
<style>
main {
width: calc(100% - 2em);
max-width: 100%;
margin: 0;
}
.prose {
min-height: 100vh;
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));
}
</style>
</head>
<body>
<Header />
<main>
<article>
<div class="prose">
<div class="title">
<h1>{title}</h1>
<BreadCrumbs current={frontmatter.fname}/>
<hr />
</div>
<slot />
</div>
<BackRefs frontmatter={frontmatter}/>
</article>
</main>
<Footer />
</body>
</html>
<Base title={title}>
<article class="max-w-3xl mx-auto">
<div class="mb-6 pb-4 border-b" style="border-color: var(--border)">
<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">{title}</h1>
<BreadCrumbs current={frontmatter.fname} />
</div>
<div class="prose-wiki">
<slot />
</div>
<div class="mt-8 pt-6 border-t" style="border-color: var(--border)">
<BackRefs frontmatter={frontmatter} />
</div>
</article>
</Base>
src/pages/blog/index.astro
+36 -102
View File
@@ -1,111 +1,45 @@
---
import BaseHead from '../../components/BaseHead.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import Base from '../../layouts/Base.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';
const posts = (await getCollection('blog')).sort(
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);
---
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style>
main {
width: 960px;
}
ul {
display: flex;
flex-wrap: wrap;
gap: 2rem;
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
width: calc(50% - 1rem);
}
ul li * {
text-decoration: none;
transition: 0.2s ease;
}
ul li:first-child {
width: 100%;
margin-bottom: 1rem;
text-align: center;
}
ul li:first-child img {
width: 100%;
}
ul li:first-child .title {
font-size: 2.369rem;
}
ul li img {
margin-bottom: 0.5rem;
border-radius: 12px;
}
ul li a {
display: block;
}
.title {
margin: 0;
color: rgb(var(--black));
line-height: 1;
}
.date {
margin: 0;
color: rgb(var(--gray));
}
ul li a:hover h4,
ul li a:hover .date {
color: rgb(var(--accent));
}
ul a:hover img {
box-shadow: var(--box-shadow);
}
@media (max-width: 720px) {
ul {
gap: 0.5em;
}
ul li {
width: 100%;
text-align: center;
}
ul li:first-child {
margin-bottom: 0;
}
ul li:first-child .title {
font-size: 1.563em;
}
}
</style>
</head>
<body>
<Header />
<main>
<section>
<ul>
{
posts.map((post) => (
<li>
<a href={`/blog/${post.slug}/`}>
<img width={720} height={360} src={post.data.heroImage} alt="" />
<h4 class="title">{post.data.title}</h4>
<p class="date">
<FormattedDate date={post.data.pubDate} />
</p>
</a>
</li>
))
}
</ul>
</section>
</main>
<Footer />
</body>
</html>
<Base title={`Blog — ${SITE_TITLE}`} description={SITE_DESCRIPTION}>
<div class="max-w-3xl mx-auto">
<h1 class="text-3xl font-bold mb-6" style="color: var(--text-primary)">Blog</h1>
{posts.length === 0 && (
<p style="color: var(--text-4)">No posts yet.</p>
)}
<ul class="space-y-4">
{posts.map(post => (
<li>
<a
href={`/blog/${post.slug}/`}
class="block px-4 py-3 rounded-lg hover:bg-zinc-800 transition-colors group"
style="background: var(--bg-card)"
>
{post.data.heroImage && (
<img
class="w-full rounded-lg mb-3 object-cover"
style="max-height: 200px"
src={post.data.heroImage}
alt=""
/>
)}
<h2 class="text-base font-semibold group-hover:text-white transition-colors" style="color: var(--text-2)">
{post.data.title}
</h2>
<p class="text-xs mt-1" style="color: var(--text-5)">
<FormattedDate date={post.data.pubDate} />
</p>
</a>
</li>
))}
</ul>
</div>
</Base>
src/pages/index.astro
+41 -64
View File
@@ -1,68 +1,45 @@
---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import Base from '../layouts/Base.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import { getCollection } from 'astro:content';
const entries = (await getCollection('entries'))
.sort((a, b) => (b.data.updatedDate ?? b.data.pubDate ?? new Date(0)).valueOf()
- (a.data.updatedDate ?? a.data.pubDate ?? new Date(0)).valueOf())
.slice(0, 10);
---
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<Header title={SITE_TITLE} />
<main>
<h1>🧑‍🌾 Hello, Gardener!</h1>
<p>
Welcome to <a class="wiki" href="/entries/astro-bloomz/">astro-bloomz</a>, a digital garden starter template.
This template serves as a lightweight, minimally-styled starting point for anyone looking to
build a personal website, blog, digital garden, or portfolio with <a href="https://astro.build">Astro</a> -- and <a href="https://github.com/wikibonsai/wikibonsai">WikiBonsai</a>.
</p>
<p>
This template comes with a few integrations already configured in your
<code>astro.config.mjs</code> file. You can customize your setup with
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like
Tailwind, React, or Vue to your project.
</p>
<p>Here are a few ideas on how to get started with the template:</p>
<ul>
<li>Configs</li>
<ul>
<li>Edit Astro configs in <code>astro.config.mjs</code></li>
<li>Edit Bloomz setup and configs and logic in <code>src/wikibonsai/</code></li>
</ul>
<li>Pages</li>
<ul>
<li>Edit this page in <code>src/pages/index.astro</code></li>
<li>Edit the tag tree map in <code>src/pages/map.astro</code></li>
</ul>
<li>Layouts</li>
<ul>
<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
<li>Customize the entry page layout in <code>src/layouts/Entry.astro</code></li>
</ul>
<li>Components</li>
<ul>
<li>Edit the site header items in <code>src/components/Header.astro</code></li>
<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
<li>Edit the tag tree map branching in <code>src/components/Branch.astro</code></li>
<li>Edit the entry breadcrumb items in <code>src/components/BreadCrumbs.astro</code></li>
<li>Edit the entry backrefs items in <code>src/components/BackRefs.astro</code></li>
</ul>
<li>Content</li>
<ul>
<li>Check out the included blog posts in <code>src/pages/blog/</code></li>
<li>Check out the included entries in <code>src/pages/entries/</code></li>
<li>Check out the included topic index in <code>src/pages/index/</code></li>
</ul>
</ul>
<p>
Have fun! If you get stuck, remember to checkout the <a href="https://docs.astro.build/"
>astro docs</a> or <a href="https://github.com/wikibonsai/wikibonsai/"
>wikibonsai docs</a>.
</p>
</main>
<Footer />
</body>
</html>
<Base title={SITE_TITLE} description={SITE_DESCRIPTION}>
<div class="max-w-3xl mx-auto">
<div class="mb-8">
<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">
Bincio<span style="color: var(--accent)">Wiki</span>
</h1>
<p style="color: var(--text-4)">The collective memory of the Bincio group.</p>
</div>
{entries.length > 0 && (
<section>
<h2 class="text-lg font-semibold mb-4" style="color: var(--text-2)">Recent pages</h2>
<ul class="space-y-2">
{entries.map(entry => (
<li>
<a
href={`/entries/${entry.slug}/`}
class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-zinc-800 transition-colors group"
style="background: var(--bg-card)"
>
<span class="text-sm font-medium group-hover:text-white transition-colors" style="color: var(--text-2)">
{entry.data.title}
</span>
</a>
</li>
))}
</ul>
<p class="mt-4 text-sm">
<a href="/entries" style="color: var(--accent)" class="hover:opacity-80 transition-opacity">All pages →</a>
</p>
</section>
)}
</div>
</Base>
src/pages/map.astro
+9 -18
View File
@@ -1,8 +1,5 @@
---
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 '../layouts/Base.astro';
import Branch from '../components/Branch.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import { bonsai } from '../wikibonsai/semtree';
@@ -11,17 +8,11 @@ const root = bonsai ? bonsai.root : '';
const treeNodes = bonsai ? bonsai.nodes : [];
---
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<Header title={SITE_TITLE} />
<main>
<h1>Tag Map</h1>
<Branch nodes={treeNodes.filter(tn => tn.text === root)} />
</main>
<Footer />
</body>
</html>
<Base title={`Map — ${SITE_TITLE}`} description={SITE_DESCRIPTION}>
<div class="max-w-3xl mx-auto">
<h1 class="text-3xl font-bold mb-6" style="color: var(--text-primary)">Tag Map</h1>
<div class="prose-wiki">
<Branch nodes={treeNodes.filter(tn => tn.text === root)} />
</div>
</div>
</Base>
src/styles/global.css
+137 -252
View File
@@ -1,288 +1,173 @@
/*
The CSS in this style tag is based off of Bear Blog's default CSS.
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
*/
/* Wiki-specific styles — base variables and Tailwind utilities are in Base.astro */
:root {
--accent: #2337ff;
--accent-dark: #000d8a;
--black: 15, 18, 25;
--gray: 96, 115, 159;
--gray-light: 229, 233, 240;
--gray-dark: 34, 41, 57;
--gray-gradient: rgba(var(--gray-light), 50%), #fff;
--box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
0 16px 32px rgba(var(--gray), 33%);
/* wiki colors */
--text-color-wiki: #009c7b;
--text-color-wiki-visited: #008064;
--text-color-invalid-wikilink: #8c8c8c;
/* for dark themes */
/* --text-color-wiki: #a0e4a0;
--text-color-wiki-visited: #90f390;
--text-color-invalid-wikilink: #8c8c8c;
--background-color: #27262b; */
/* ── Prose typography ────────────────────────────────────────────────── */
.prose-wiki {
color: var(--text-2);
line-height: 1.75;
font-size: 1rem;
}
@font-face {
font-family: 'Atkinson';
src: url('/fonts/atkinson-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
.prose-wiki h1,
.prose-wiki h2,
.prose-wiki h3,
.prose-wiki h4,
.prose-wiki h5,
.prose-wiki h6 {
color: var(--text-primary);
font-weight: 700;
line-height: 1.3;
margin: 1.5em 0 0.5em;
}
@font-face {
font-family: 'Atkinson';
src: url('/fonts/atkinson-bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
.prose-wiki h1 { font-size: 2em; }
.prose-wiki h2 { font-size: 1.5em; }
.prose-wiki h3 { font-size: 1.25em; }
.prose-wiki h4 { font-size: 1.1em; }
.prose-wiki p { margin-bottom: 1em; }
.prose-wiki a { color: var(--accent); text-decoration: underline; }
.prose-wiki a:hover { opacity: 0.8; }
.prose-wiki ul,
.prose-wiki ol { padding-left: 1.5em; margin-bottom: 1em; }
.prose-wiki li { margin-bottom: 0.25em; }
.prose-wiki strong { color: var(--text-primary); font-weight: 600; }
.prose-wiki code {
background: var(--bg-elevated);
padding: 2px 5px;
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.875em;
}
body {
font-family: 'Atkinson', sans-serif;
margin: 0;
padding: 0;
text-align: left;
background: linear-gradient(var(--gray-gradient)) no-repeat;
background-size: 100% 600px;
word-wrap: break-word;
overflow-wrap: break-word;
color: rgb(var(--gray-dark));
font-size: 20px;
line-height: 1.7;
.prose-wiki pre {
background: var(--bg-card);
border: 1px solid var(--border);
padding: 1.25em;
border-radius: 8px;
overflow-x: auto;
margin-bottom: 1em;
}
main {
width: 720px;
max-width: calc(100% - 2em);
margin: auto;
padding: 3em 1em;
.prose-wiki pre > code { background: none; padding: 0; font-size: 0.875em; }
.prose-wiki blockquote {
border-left: 3px solid var(--accent);
padding-left: 1em;
margin: 0 0 1em 0;
color: var(--text-4);
font-style: italic;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 0.5rem 0;
color: rgb(var(--black));
line-height: 1.2;
.prose-wiki img {
max-width: 100%;
border-radius: 8px;
}
h1 {
font-size: 3.052em;
.prose-wiki hr {
border: none;
border-top: 1px solid var(--border);
margin: 2em 0;
}
h2 {
font-size: 2.441em;
.prose-wiki table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1em;
}
h3 {
font-size: 1.953em;
.prose-wiki th,
.prose-wiki td {
padding: 0.5em 0.75em;
border: 1px solid var(--border);
}
h4 {
font-size: 1.563em;
}
h5 {
font-size: 1.25em;
}
strong,
b {
font-weight: 700;
}
a {
color: var(--accent);
}
a:hover {
color: var(--accent);
}
p {
margin-bottom: 1em;
}
.prose p {
margin-bottom: 2em;
}
textarea {
width: 100%;
font-size: 16px;
}
input {
font-size: 16px;
}
table {
width: 100%;
}
img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
code {
padding: 2px 5px;
background-color: rgb(var(--gray-light));
border-radius: 2px;
}
pre {
padding: 1.5em;
border-radius: 8px;
}
pre > code {
all: unset;
}
blockquote {
border-left: 4px solid var(--accent);
padding: 0 0 0 20px;
margin: 0px;
font-size: 1.333em;
}
hr {
border: none;
border-top: 1px solid rgb(var(--gray-light));
}
@media (max-width: 720px) {
body {
font-size: 18px;
}
main {
padding: 1em;
}
.prose-wiki th {
background: var(--bg-elevated);
color: var(--text-primary);
font-weight: 600;
}
.sr-only {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px 1px 1px 1px);
/* maybe deprecated but we need to support legacy browsers */
clip: rect(1px, 1px, 1px, 1px);
/* modern browsers, clip-path works inwards from each corner */
clip-path: inset(50%);
/* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
white-space: nowrap;
}
/* tag map / semantic tree */
/* ── Semantic tree ──────────────────────────────────────────────────── */
.branch {
color: var(--text-color-wiki);
list-style: "#";
color: var(--accent);
list-style: "#";
}
/******************/
/* wikiref styles */
/******************/
/* ── Accessibility ──────────────────────────────────────────────────── */
.sr-only {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
}
/* wikiattr */
/* ── Wikiref styles ─────────────────────────────────────────────────── */
/* attrbox */
aside.attrbox {
text-align: center;
border: 1px double #ccc;
color: #4F534F;
border-radius: 25px;
border-spacing: 1em;
/* @noflip */
margin: 0.5em;
padding: 0.2em;
/* @noflip */
float: right;
text-align: center;
border: 1px double var(--border-sub);
color: var(--text-4);
border-radius: 12px;
margin: 0.5em;
padding: 0.2em;
float: right;
background: var(--bg-card);
}
span.attrbox-title {
margin: 0.5em;
color: #4F534F;
}
/* from: https://www.the-art-of-web.com/css/format-dl/ */
dl {
margin: 0.5em;
margin: 0.5em;
color: var(--text-4);
}
dl { margin: 0.5em; }
dt {
width: 100px;
float: left;
clear: left;
text-align: right;
font-weight: bold;
}
dt::after {
content: ":";
width: 100px;
float: left;
clear: left;
text-align: right;
font-weight: bold;
color: var(--text-3);
}
dt::after { content: ":"; }
dd {
margin: 0 0 0 110px;
padding: 0 0 0.5em 0;
margin: 0 0 0 110px;
padding: 0 0 0.5em 0;
}
/* (internal) wiki links */
a.wiki[href] {
color: var(--text-color-wiki);
}
a.wiki[href]:visited {
color: var(--text-color-wiki-visited);
}
/* Wiki links */
a.wiki[href] { color: var(--text-color-wiki); }
a.wiki[href]:visited { color: var(--text-color-wiki-visited); }
a.invalid {
color: var(--text-color-invalid-wikilink);
cursor: help;
color: var(--text-color-invalid-wikilink);
cursor: help;
}
/* !wikiembed */
/* ── Embed styles ───────────────────────────────────────────────────── */
.embed-wrapper {
border: 1px solid #535353;
border-radius: 6px;
padding: 5px 20px 15px 20px;
margin: 0 20px;
position: relative;
border: 1px solid var(--border-sub);
border-radius: 6px;
padding: 5px 20px 15px 20px;
margin: 0 20px;
position: relative;
background: var(--bg-card);
}
.embed-title {
height: 36px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 26px;
line-height: 42px;
top: 5px;
left: 0;
right: 0;
width: 100%;
text-align: center;
font-weight: 900;
height: 36px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 26px;
line-height: 42px;
width: 100%;
text-align: center;
font-weight: 900;
color: var(--text-primary);
}
.embed-link {
position: absolute;
top: 6px;
right: 12px;
cursor: pointer;
}
.embed-link-icon {
text-decoration: none;
}
.link-icon {
font-size: 18px;
color: #535353;
}
.link-icon::before{
content: "🔗";
}
.embed-content {
max-height: 500px;
overflow-y: auto;
padding-right: 10px;
}
/* embed media */
.embed-media {
display: flex;
justify-content: center;
margin: 0 auto;
}
.embed-audio {
height: 100%;
width: 100%;
}
.embed-image {
height: 75%;
width: 75%;
}
.embed-video {
height: 75%;
width: 75%;
position: absolute;
top: 6px;
right: 12px;
cursor: pointer;
}
.embed-link-icon { text-decoration: none; }
.link-icon { font-size: 18px; color: var(--text-5); }
.link-icon::before { content: "🔗"; }
.embed-content { max-height: 500px; overflow-y: auto; padding-right: 10px; }
.embed-media { display: flex; justify-content: center; margin: 0 auto; }
.embed-audio { height: 100%; width: 100%; }
.embed-image { height: 75%; width: 75%; }
.embed-video { height: 75%; width: 75%; }
src/wikibonsai/backrefs.ts
+4 -2
View File
@@ -23,7 +23,8 @@ export async function generateBlogBackRefs(thisFileName: string) {
for (const thatDoc of allBlogPosts) {
const thatFName: string = path.basename(thatDoc.id, '.md');
if (thatFName === thisFileName) { continue; }
const wiki = wikirefs.scan(thatDoc.body);
const wikiRaw = thatDoc.body ? wikirefs.scan(thatDoc.body) : null;
const wiki: any[] = Array.isArray(wikiRaw) ? wikiRaw : [];
for (const w of wiki) {
if (w.kind === wikirefs.CONST.WIKI.ATTR) {
// @ts-expect-error
@@ -71,7 +72,8 @@ export async function generateEntryBackRefs(thisFileName: string) {
for (const thatDoc of allEntryDocs) {
const thatFName: string = path.basename(thatDoc.id, '.md');
if (thatFName === thisFileName) { continue; }
const wiki = wikirefs.scan(thatDoc.body);
const wikiRaw = thatDoc.body ? wikirefs.scan(thatDoc.body) : null;
const wiki: any[] = Array.isArray(wikiRaw) ? wikiRaw : [];
for (const w of wiki) {
if (w.kind === wikirefs.CONST.WIKI.ATTR) {
// @ts-expect-error
src/wikibonsai/wikirefs.ts
+2 -1
View File
@@ -29,7 +29,8 @@ export function createResolveEmbedContent(remarkPlugins: any[]) {
// note: we're not using remarkRehype or rehypeStringify here
}
return function resolveEmbedContentInternal(filename: string): any {
return function resolveEmbedContentInternal(_unused: unknown, filename: string): any {
if (!filename) { return; }
// markdown-only
if (wikirefs.isMedia(filename)) { return; }
// cycle detection