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
This commit is contained in:
brutsalvadi
brutsalvadi
+21
-30
@@ -1,44 +1,35 @@
|
|||||||
import { base, defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import sitemap from '@astrojs/sitemap';
|
import sitemap from '@astrojs/sitemap';
|
||||||
|
import tailwind from '@astrojs/tailwind';
|
||||||
|
import svelte from '@astrojs/svelte';
|
||||||
import { remarkWikiRefs } from 'remark-wikirefs';
|
import { remarkWikiRefs } from 'remark-wikirefs';
|
||||||
import { remarkCaml } from 'remark-caml';
|
import { remarkCaml } from 'remark-caml';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
resolveHtmlHref,
|
resolveHtmlHref,
|
||||||
resolveHtmlText,
|
resolveHtmlText,
|
||||||
createResolveEmbedContent,
|
createResolveEmbedContent,
|
||||||
generateForeRefsRemarkPlugin,
|
generateForeRefsRemarkPlugin,
|
||||||
} from './src/wikibonsai/wikirefs';
|
} from './src/wikibonsai/wikirefs';
|
||||||
|
|
||||||
|
|
||||||
const remarkPlugins = [
|
const remarkPlugins = [
|
||||||
remarkCaml,
|
remarkCaml,
|
||||||
[
|
[
|
||||||
remarkWikiRefs,
|
remarkWikiRefs,
|
||||||
{
|
{
|
||||||
resolveHtmlHref: resolveHtmlHref,
|
resolveHtmlHref,
|
||||||
resolveHtmlText: resolveHtmlText,
|
resolveHtmlText,
|
||||||
resolveEmbedContent: null, // we'll set this later -- see below
|
resolveEmbedContent: null,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
generateForeRefsRemarkPlugin,
|
generateForeRefsRemarkPlugin,
|
||||||
];
|
];
|
||||||
|
|
||||||
// embed content needs access to a unified processor
|
|
||||||
const resolveEmbedContent = createResolveEmbedContent(remarkPlugins);
|
const resolveEmbedContent = createResolveEmbedContent(remarkPlugins);
|
||||||
remarkPlugins[1][1].resolveEmbedContent = resolveEmbedContent;
|
remarkPlugins[1][1].resolveEmbedContent = resolveEmbedContent;
|
||||||
|
|
||||||
// https://astro.build/config
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: 'https://astro-bloomz.netlify.app',
|
site: 'https://wiki.bincio.com',
|
||||||
integrations: [
|
integrations: [sitemap(), tailwind(), svelte()],
|
||||||
sitemap(),
|
legacy: { collections: true },
|
||||||
],
|
markdown: { remarkPlugins },
|
||||||
assetsInclude: true,
|
|
||||||
markdown: {
|
|
||||||
// Preserve Astro's default plugins: GitHub-flavored Markdown and Smartypants
|
|
||||||
extendDefaultPlugins: true,
|
|
||||||
// Applied to .md and .mdx files
|
|
||||||
remarkPlugins: remarkPlugins,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|||||||
Generated
+7291
-3678
File diff suppressed because it is too large
Load Diff
+18
-17
@@ -1,35 +1,36 @@
|
|||||||
{
|
{
|
||||||
"name": "astro-bloomz",
|
"name": "bincio-wiki",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.0.2",
|
"version": "0.1.0",
|
||||||
"description": "A starter project for a WikiBonsai digital garden using the Astro static site generator.",
|
"private": true,
|
||||||
"license": "MIT",
|
|
||||||
"author": {
|
|
||||||
"name": "manunamz",
|
|
||||||
"email": "manuanmz@pm.me"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/wikibonsai/astro-bloomz"
|
|
||||||
},
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
"start": "astro dev",
|
"start": "astro dev",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"preview": "astro preview",
|
"preview": "astro preview",
|
||||||
"astro": "astro"
|
"astro": "astro",
|
||||||
|
"postinstall": "patch-package"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/mdx": "^1.1.0",
|
"@astrojs/mdx": "^4.0.0",
|
||||||
"@astrojs/rss": "^3.0.0",
|
"@astrojs/rss": "^4.0.0",
|
||||||
"@astrojs/sitemap": "^3.0.0",
|
"@astrojs/sitemap": "^3.2.0",
|
||||||
"astro": "^3.1.4",
|
"@astrojs/svelte": "^7.0.0",
|
||||||
|
"@astrojs/tailwind": "^5.1.0",
|
||||||
|
"astro": "^5.0.0",
|
||||||
"fast-glob": "^3.3.1",
|
"fast-glob": "^3.3.1",
|
||||||
"gray-matter": "^4.0.3",
|
"gray-matter": "^4.0.3",
|
||||||
"remark-caml": "^0.0.6-rm",
|
"remark-caml": "^0.0.6-rm",
|
||||||
"remark-wikirefs": "^0.0.8-rm",
|
"remark-wikirefs": "^0.0.8-rm",
|
||||||
"semtree": "^0.0.15",
|
"semtree": "^0.0.15",
|
||||||
|
"svelte": "^5.0.0",
|
||||||
|
"tailwindcss": "^3.4.0",
|
||||||
"unist-util-select": "^5.0.0",
|
"unist-util-select": "^5.0.0",
|
||||||
"wikirefs": "^0.0.8"
|
"wikirefs": "^0.0.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22.0.0",
|
||||||
|
"patch-package": "^8.0.1",
|
||||||
|
"typescript": "^5.7.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,32 @@
|
|||||||
|
diff --git a/node_modules/mdast-util-caml/dist/index.js b/node_modules/mdast-util-caml/dist/index.js
|
||||||
|
index a8ec999..3fc00e3 100644
|
||||||
|
--- a/node_modules/mdast-util-caml/dist/index.js
|
||||||
|
+++ b/node_modules/mdast-util-caml/dist/index.js
|
||||||
|
@@ -352,9 +352,9 @@ function fromMarkdownCaml(opts) {
|
||||||
|
// is accessible via 'this.stack' (see below)
|
||||||
|
this.enter(attrBoxDataNode, token);
|
||||||
|
// current key
|
||||||
|
- var curKey = this.getData('curKey');
|
||||||
|
+ var curKey = this.data.curKey;
|
||||||
|
if (curKey === undefined) {
|
||||||
|
- this.setData('curKey', '');
|
||||||
|
+ this.data.curKey = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function exitAttrKey(token) {
|
||||||
|
@@ -363,13 +363,13 @@ function fromMarkdownCaml(opts) {
|
||||||
|
if (current.data && current.data.items && !Object.keys(current.data.items).includes(key)) {
|
||||||
|
current.data.items[key] = [];
|
||||||
|
}
|
||||||
|
- this.setData('curKey', key);
|
||||||
|
+ this.data.curKey = key;
|
||||||
|
}
|
||||||
|
function exitAttrVal(token) {
|
||||||
|
var stringValue = this.sliceSerialize(token);
|
||||||
|
var item = resolve(stringValue);
|
||||||
|
var current = top(this.stack);
|
||||||
|
- var curKey = this.getData('curKey');
|
||||||
|
+ var curKey = this.data.curKey;
|
||||||
|
if (current.data && current.data.items) {
|
||||||
|
if (curKey !== undefined) {
|
||||||
|
current.data.items[curKey].push(item);
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
diff --git a/node_modules/mdast-util-wikirefs/dist/index.js b/node_modules/mdast-util-wikirefs/dist/index.js
|
||||||
|
index 2ca356d..7b2a919 100644
|
||||||
|
--- a/node_modules/mdast-util-wikirefs/dist/index.js
|
||||||
|
+++ b/node_modules/mdast-util-wikirefs/dist/index.js
|
||||||
|
@@ -278,9 +278,9 @@ function fromMarkdownWikiAttrs(opts) {
|
||||||
|
// is accessible via 'this.stack' (see below)
|
||||||
|
this.enter(attrBoxDataNode, token);
|
||||||
|
// current key
|
||||||
|
- var curKey = this.getData('curKey');
|
||||||
|
+ var curKey = this.data.curKey;
|
||||||
|
if (curKey === undefined) {
|
||||||
|
- this.setData('curKey', '');
|
||||||
|
+ this.data.curKey = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function exitWikiAttrKey(token) {
|
||||||
|
@@ -289,7 +289,7 @@ function fromMarkdownWikiAttrs(opts) {
|
||||||
|
if (current.data && current.data.items && !Object.keys(current.data.items).includes(attrtype)) {
|
||||||
|
current.data.items[attrtype] = [];
|
||||||
|
}
|
||||||
|
- this.setData('curKey', attrtype);
|
||||||
|
+ this.data.curKey = attrtype;
|
||||||
|
}
|
||||||
|
function exitWikiAttrVal(token) {
|
||||||
|
var filename = this.sliceSerialize(token);
|
||||||
|
@@ -320,7 +320,7 @@ function fromMarkdownWikiAttrs(opts) {
|
||||||
|
baseUrl: baseUrl
|
||||||
|
};
|
||||||
|
if (current.data && current.data.items) {
|
||||||
|
- var curKey = this.getData('curKey');
|
||||||
|
+ var curKey = this.data.curKey;
|
||||||
|
if (curKey !== undefined) {
|
||||||
|
current.data.items[curKey].push(item);
|
||||||
|
}
|
||||||
|
@@ -411,7 +411,8 @@ function fromMarkdownWikiLinks(opts) {
|
||||||
|
// <a class="wiki link doctype__doctype" href="/tests/fixtures/fname-a" data-href="/tests/fixtures/fname-a">title a</a>
|
||||||
|
|
||||||
|
function exitWikiLink(token) {
|
||||||
|
- var wikiLink = this.exit(token);
|
||||||
|
+ var wikiLink = this.stack[this.stack.length - 1];
|
||||||
|
+ this.exit(token);
|
||||||
|
|
||||||
|
// html-text
|
||||||
|
var labelText = wikiLink.data.item.label;
|
||||||
|
@@ -596,7 +597,8 @@ function fromMarkdownWikiEmbeds(opts) {
|
||||||
|
|
||||||
|
function exitWikiEmbed(token) {
|
||||||
|
var _wikiEmbed$data$item$;
|
||||||
|
- var wikiEmbed = this.exit(token);
|
||||||
|
+ var wikiEmbed = this.stack[this.stack.length - 1];
|
||||||
|
+ this.exit(token);
|
||||||
|
// init vars (guard: filename can be unset if token stream omits it)
|
||||||
|
var filename = (_wikiEmbed$data$item$ = wikiEmbed.data.item.filename) !== null && _wikiEmbed$data$item$ !== void 0 ? _wikiEmbed$data$item$ : '';
|
||||||
|
var header = wikiEmbed.data.item.header;
|
||||||
+2
-2
@@ -1,5 +1,5 @@
|
|||||||
// Place any global data in this file.
|
// Place any global data in this file.
|
||||||
// You can import this data from anywhere in your site by using the `import` keyword.
|
// You can import this data from anywhere in your site by using the `import` keyword.
|
||||||
|
|
||||||
export const SITE_TITLE = 'Astro-Bloomz';
|
export const SITE_TITLE = 'BincioWiki';
|
||||||
export const SITE_DESCRIPTION = 'Welcome to my digital garden!';
|
export const SITE_DESCRIPTION = 'The Bincio group wiki';
|
||||||
|
|||||||
@@ -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 — built with <a href="https://astro.build" class="hover:text-white transition-colors" style="color: var(--accent)">Astro</a> & <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>
|
||||||
+20
-76
@@ -1,8 +1,6 @@
|
|||||||
---
|
---
|
||||||
import type { CollectionEntry } from 'astro:content';
|
import type { CollectionEntry } from 'astro:content';
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
import Base from './Base.astro';
|
||||||
import Header from '../components/Header.astro';
|
|
||||||
import Footer from '../components/Footer.astro';
|
|
||||||
import FormattedDate from '../components/FormattedDate.astro';
|
import FormattedDate from '../components/FormattedDate.astro';
|
||||||
|
|
||||||
type Props = CollectionEntry<'blog'>['data'];
|
type Props = CollectionEntry<'blog'>['data'];
|
||||||
@@ -10,76 +8,22 @@ type Props = CollectionEntry<'blog'>['data'];
|
|||||||
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
|
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<Base title={title} description={description}>
|
||||||
<head>
|
<article class="max-w-3xl mx-auto">
|
||||||
<BaseHead title={title} description={description} />
|
{heroImage && (
|
||||||
<style>
|
<img class="w-full rounded-xl mb-6 object-cover" style="max-height: 400px" src={heroImage} alt="" />
|
||||||
main {
|
)}
|
||||||
width: calc(100% - 2em);
|
<div class="mb-6 pb-4 border-b" style="border-color: var(--border)">
|
||||||
max-width: 100%;
|
<div class="text-sm mb-2" style="color: var(--text-4)">
|
||||||
margin: 0;
|
<FormattedDate date={pubDate} />
|
||||||
}
|
{updatedDate && (
|
||||||
.hero-image {
|
<span class="italic"> · Updated <FormattedDate date={updatedDate} /></span>
|
||||||
width: 100%;
|
)}
|
||||||
}
|
</div>
|
||||||
.hero-image img {
|
<h1 class="text-3xl font-bold" style="color: var(--text-primary)">{title}</h1>
|
||||||
display: block;
|
</div>
|
||||||
margin: 0 auto;
|
<div class="prose-wiki">
|
||||||
border-radius: 12px;
|
<slot />
|
||||||
box-shadow: var(--box-shadow);
|
</div>
|
||||||
}
|
</article>
|
||||||
.prose {
|
</Base>
|
||||||
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>
|
|
||||||
|
|||||||
+15
-53
@@ -1,8 +1,6 @@
|
|||||||
---
|
---
|
||||||
import type { CollectionEntry } from 'astro:content';
|
import type { CollectionEntry } from 'astro:content';
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
import Base from './Base.astro';
|
||||||
import Header from '../components/Header.astro';
|
|
||||||
import Footer from '../components/Footer.astro';
|
|
||||||
import BreadCrumbs from '../components/BreadCrumbs.astro';
|
import BreadCrumbs from '../components/BreadCrumbs.astro';
|
||||||
import BackRefs from '../components/BackRefs.astro';
|
import BackRefs from '../components/BackRefs.astro';
|
||||||
|
|
||||||
@@ -11,53 +9,17 @@ type Props = CollectionEntry<'entries'>['data'];
|
|||||||
const { title, frontmatter } = Astro.props;
|
const { title, frontmatter } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<Base title={title}>
|
||||||
<head>
|
<article class="max-w-3xl mx-auto">
|
||||||
<BaseHead title={title} />
|
<div class="mb-6 pb-4 border-b" style="border-color: var(--border)">
|
||||||
<style>
|
<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">{title}</h1>
|
||||||
main {
|
<BreadCrumbs current={frontmatter.fname} />
|
||||||
width: calc(100% - 2em);
|
</div>
|
||||||
max-width: 100%;
|
<div class="prose-wiki">
|
||||||
margin: 0;
|
<slot />
|
||||||
}
|
</div>
|
||||||
.prose {
|
<div class="mt-8 pt-6 border-t" style="border-color: var(--border)">
|
||||||
min-height: 100vh;
|
<BackRefs frontmatter={frontmatter} />
|
||||||
width: 720px;
|
</div>
|
||||||
max-width: calc(100% - 2em);
|
</article>
|
||||||
margin: auto;
|
</Base>
|
||||||
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>
|
|
||||||
|
|||||||
+36
-102
@@ -1,111 +1,45 @@
|
|||||||
---
|
---
|
||||||
import BaseHead from '../../components/BaseHead.astro';
|
import Base from '../../layouts/Base.astro';
|
||||||
import Header from '../../components/Header.astro';
|
|
||||||
import Footer from '../../components/Footer.astro';
|
|
||||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
|
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
|
||||||
import { getCollection } from 'astro:content';
|
import { getCollection } from 'astro:content';
|
||||||
import FormattedDate from '../../components/FormattedDate.astro';
|
import FormattedDate from '../../components/FormattedDate.astro';
|
||||||
|
|
||||||
const posts = (await getCollection('blog')).sort(
|
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>
|
<Base title={`Blog — ${SITE_TITLE}`} description={SITE_DESCRIPTION}>
|
||||||
<html lang="en">
|
<div class="max-w-3xl mx-auto">
|
||||||
<head>
|
<h1 class="text-3xl font-bold mb-6" style="color: var(--text-primary)">Blog</h1>
|
||||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
{posts.length === 0 && (
|
||||||
<style>
|
<p style="color: var(--text-4)">No posts yet.</p>
|
||||||
main {
|
)}
|
||||||
width: 960px;
|
<ul class="space-y-4">
|
||||||
}
|
{posts.map(post => (
|
||||||
ul {
|
<li>
|
||||||
display: flex;
|
<a
|
||||||
flex-wrap: wrap;
|
href={`/blog/${post.slug}/`}
|
||||||
gap: 2rem;
|
class="block px-4 py-3 rounded-lg hover:bg-zinc-800 transition-colors group"
|
||||||
list-style-type: none;
|
style="background: var(--bg-card)"
|
||||||
margin: 0;
|
>
|
||||||
padding: 0;
|
{post.data.heroImage && (
|
||||||
}
|
<img
|
||||||
ul li {
|
class="w-full rounded-lg mb-3 object-cover"
|
||||||
width: calc(50% - 1rem);
|
style="max-height: 200px"
|
||||||
}
|
src={post.data.heroImage}
|
||||||
ul li * {
|
alt=""
|
||||||
text-decoration: none;
|
/>
|
||||||
transition: 0.2s ease;
|
)}
|
||||||
}
|
<h2 class="text-base font-semibold group-hover:text-white transition-colors" style="color: var(--text-2)">
|
||||||
ul li:first-child {
|
{post.data.title}
|
||||||
width: 100%;
|
</h2>
|
||||||
margin-bottom: 1rem;
|
<p class="text-xs mt-1" style="color: var(--text-5)">
|
||||||
text-align: center;
|
<FormattedDate date={post.data.pubDate} />
|
||||||
}
|
</p>
|
||||||
ul li:first-child img {
|
</a>
|
||||||
width: 100%;
|
</li>
|
||||||
}
|
))}
|
||||||
ul li:first-child .title {
|
</ul>
|
||||||
font-size: 2.369rem;
|
</div>
|
||||||
}
|
</Base>
|
||||||
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>
|
|
||||||
|
|||||||
+41
-64
@@ -1,68 +1,45 @@
|
|||||||
---
|
---
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
import Base from '../layouts/Base.astro';
|
||||||
import Header from '../components/Header.astro';
|
|
||||||
import Footer from '../components/Footer.astro';
|
|
||||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
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>
|
<Base title={SITE_TITLE} description={SITE_DESCRIPTION}>
|
||||||
<html lang="en">
|
<div class="max-w-3xl mx-auto">
|
||||||
<head>
|
<div class="mb-8">
|
||||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">
|
||||||
</head>
|
Bincio<span style="color: var(--accent)">Wiki</span>
|
||||||
<body>
|
</h1>
|
||||||
<Header title={SITE_TITLE} />
|
<p style="color: var(--text-4)">The collective memory of the Bincio group.</p>
|
||||||
<main>
|
</div>
|
||||||
<h1>🧑🌾 Hello, Gardener!</h1>
|
|
||||||
<p>
|
{entries.length > 0 && (
|
||||||
Welcome to <a class="wiki" href="/entries/astro-bloomz/">astro-bloomz</a>, a digital garden starter template.
|
<section>
|
||||||
This template serves as a lightweight, minimally-styled starting point for anyone looking to
|
<h2 class="text-lg font-semibold mb-4" style="color: var(--text-2)">Recent pages</h2>
|
||||||
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>.
|
<ul class="space-y-2">
|
||||||
</p>
|
{entries.map(entry => (
|
||||||
<p>
|
<li>
|
||||||
This template comes with a few integrations already configured in your
|
<a
|
||||||
<code>astro.config.mjs</code> file. You can customize your setup with
|
href={`/entries/${entry.slug}/`}
|
||||||
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like
|
class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-zinc-800 transition-colors group"
|
||||||
Tailwind, React, or Vue to your project.
|
style="background: var(--bg-card)"
|
||||||
</p>
|
>
|
||||||
<p>Here are a few ideas on how to get started with the template:</p>
|
<span class="text-sm font-medium group-hover:text-white transition-colors" style="color: var(--text-2)">
|
||||||
<ul>
|
{entry.data.title}
|
||||||
<li>Configs</li>
|
</span>
|
||||||
<ul>
|
</a>
|
||||||
<li>Edit Astro configs in <code>astro.config.mjs</code></li>
|
</li>
|
||||||
<li>Edit Bloomz setup and configs and logic in <code>src/wikibonsai/</code></li>
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<li>Pages</li>
|
<p class="mt-4 text-sm">
|
||||||
<ul>
|
<a href="/entries" style="color: var(--accent)" class="hover:opacity-80 transition-opacity">All pages →</a>
|
||||||
<li>Edit this page in <code>src/pages/index.astro</code></li>
|
</p>
|
||||||
<li>Edit the tag tree map in <code>src/pages/map.astro</code></li>
|
</section>
|
||||||
</ul>
|
)}
|
||||||
<li>Layouts</li>
|
</div>
|
||||||
<ul>
|
</Base>
|
||||||
<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>
|
|
||||||
|
|||||||
+9
-18
@@ -1,8 +1,5 @@
|
|||||||
---
|
---
|
||||||
import type { CollectionEntry } from 'astro:content';
|
import Base from '../layouts/Base.astro';
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
|
||||||
import Header from '../components/Header.astro';
|
|
||||||
import Footer from '../components/Footer.astro';
|
|
||||||
import Branch from '../components/Branch.astro';
|
import Branch from '../components/Branch.astro';
|
||||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
||||||
import { bonsai } from '../wikibonsai/semtree';
|
import { bonsai } from '../wikibonsai/semtree';
|
||||||
@@ -11,17 +8,11 @@ const root = bonsai ? bonsai.root : '';
|
|||||||
const treeNodes = bonsai ? bonsai.nodes : [];
|
const treeNodes = bonsai ? bonsai.nodes : [];
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<Base title={`Map — ${SITE_TITLE}`} description={SITE_DESCRIPTION}>
|
||||||
<html lang="en">
|
<div class="max-w-3xl mx-auto">
|
||||||
<head>
|
<h1 class="text-3xl font-bold mb-6" style="color: var(--text-primary)">Tag Map</h1>
|
||||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
<div class="prose-wiki">
|
||||||
</head>
|
<Branch nodes={treeNodes.filter(tn => tn.text === root)} />
|
||||||
<body>
|
</div>
|
||||||
<Header title={SITE_TITLE} />
|
</div>
|
||||||
<main>
|
</Base>
|
||||||
<h1>Tag Map</h1>
|
|
||||||
<Branch nodes={treeNodes.filter(tn => tn.text === root)} />
|
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
+137
-252
@@ -1,288 +1,173 @@
|
|||||||
/*
|
/* Wiki-specific styles — base variables and Tailwind utilities are in Base.astro */
|
||||||
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
|
|
||||||
*/
|
|
||||||
|
|
||||||
:root {
|
/* ── Prose typography ────────────────────────────────────────────────── */
|
||||||
--accent: #2337ff;
|
.prose-wiki {
|
||||||
--accent-dark: #000d8a;
|
color: var(--text-2);
|
||||||
--black: 15, 18, 25;
|
line-height: 1.75;
|
||||||
--gray: 96, 115, 159;
|
font-size: 1rem;
|
||||||
--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; */
|
|
||||||
}
|
}
|
||||||
@font-face {
|
.prose-wiki h1,
|
||||||
font-family: 'Atkinson';
|
.prose-wiki h2,
|
||||||
src: url('/fonts/atkinson-regular.woff') format('woff');
|
.prose-wiki h3,
|
||||||
font-weight: 400;
|
.prose-wiki h4,
|
||||||
font-style: normal;
|
.prose-wiki h5,
|
||||||
font-display: swap;
|
.prose-wiki h6 {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin: 1.5em 0 0.5em;
|
||||||
}
|
}
|
||||||
@font-face {
|
.prose-wiki h1 { font-size: 2em; }
|
||||||
font-family: 'Atkinson';
|
.prose-wiki h2 { font-size: 1.5em; }
|
||||||
src: url('/fonts/atkinson-bold.woff') format('woff');
|
.prose-wiki h3 { font-size: 1.25em; }
|
||||||
font-weight: 700;
|
.prose-wiki h4 { font-size: 1.1em; }
|
||||||
font-style: normal;
|
.prose-wiki p { margin-bottom: 1em; }
|
||||||
font-display: swap;
|
.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 {
|
.prose-wiki pre {
|
||||||
font-family: 'Atkinson', sans-serif;
|
background: var(--bg-card);
|
||||||
margin: 0;
|
border: 1px solid var(--border);
|
||||||
padding: 0;
|
padding: 1.25em;
|
||||||
text-align: left;
|
border-radius: 8px;
|
||||||
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
overflow-x: auto;
|
||||||
background-size: 100% 600px;
|
margin-bottom: 1em;
|
||||||
word-wrap: break-word;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
color: rgb(var(--gray-dark));
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1.7;
|
|
||||||
}
|
}
|
||||||
main {
|
.prose-wiki pre > code { background: none; padding: 0; font-size: 0.875em; }
|
||||||
width: 720px;
|
.prose-wiki blockquote {
|
||||||
max-width: calc(100% - 2em);
|
border-left: 3px solid var(--accent);
|
||||||
margin: auto;
|
padding-left: 1em;
|
||||||
padding: 3em 1em;
|
margin: 0 0 1em 0;
|
||||||
|
color: var(--text-4);
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
h1,
|
.prose-wiki img {
|
||||||
h2,
|
max-width: 100%;
|
||||||
h3,
|
border-radius: 8px;
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin: 0 0 0.5rem 0;
|
|
||||||
color: rgb(var(--black));
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
}
|
||||||
h1 {
|
.prose-wiki hr {
|
||||||
font-size: 3.052em;
|
border: none;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
margin: 2em 0;
|
||||||
}
|
}
|
||||||
h2 {
|
.prose-wiki table {
|
||||||
font-size: 2.441em;
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
h3 {
|
.prose-wiki th,
|
||||||
font-size: 1.953em;
|
.prose-wiki td {
|
||||||
|
padding: 0.5em 0.75em;
|
||||||
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
h4 {
|
.prose-wiki th {
|
||||||
font-size: 1.563em;
|
background: var(--bg-elevated);
|
||||||
}
|
color: var(--text-primary);
|
||||||
h5 {
|
font-weight: 600;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sr-only {
|
/* ── Semantic tree ──────────────────────────────────────────────────── */
|
||||||
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 */
|
|
||||||
|
|
||||||
.branch {
|
.branch {
|
||||||
color: var(--text-color-wiki);
|
color: var(--accent);
|
||||||
list-style: "#";
|
list-style: "#";
|
||||||
}
|
}
|
||||||
|
|
||||||
/******************/
|
/* ── Accessibility ──────────────────────────────────────────────────── */
|
||||||
/* wikiref styles */
|
.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 */
|
/* attrbox */
|
||||||
aside.attrbox {
|
aside.attrbox {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 1px double #ccc;
|
border: 1px double var(--border-sub);
|
||||||
color: #4F534F;
|
color: var(--text-4);
|
||||||
border-radius: 25px;
|
border-radius: 12px;
|
||||||
border-spacing: 1em;
|
margin: 0.5em;
|
||||||
/* @noflip */
|
padding: 0.2em;
|
||||||
margin: 0.5em;
|
float: right;
|
||||||
padding: 0.2em;
|
background: var(--bg-card);
|
||||||
/* @noflip */
|
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
span.attrbox-title {
|
span.attrbox-title {
|
||||||
margin: 0.5em;
|
margin: 0.5em;
|
||||||
color: #4F534F;
|
color: var(--text-4);
|
||||||
}
|
|
||||||
/* from: https://www.the-art-of-web.com/css/format-dl/ */
|
|
||||||
dl {
|
|
||||||
margin: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
dl { margin: 0.5em; }
|
||||||
dt {
|
dt {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
float: left;
|
float: left;
|
||||||
clear: left;
|
clear: left;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
color: var(--text-3);
|
||||||
dt::after {
|
|
||||||
content: ":";
|
|
||||||
}
|
}
|
||||||
|
dt::after { content: ":"; }
|
||||||
dd {
|
dd {
|
||||||
margin: 0 0 0 110px;
|
margin: 0 0 0 110px;
|
||||||
padding: 0 0 0.5em 0;
|
padding: 0 0 0.5em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* (internal) wiki links */
|
/* Wiki links */
|
||||||
a.wiki[href] {
|
a.wiki[href] { color: var(--text-color-wiki); }
|
||||||
color: var(--text-color-wiki);
|
a.wiki[href]:visited { color: var(--text-color-wiki-visited); }
|
||||||
}
|
|
||||||
a.wiki[href]:visited {
|
|
||||||
color: var(--text-color-wiki-visited);
|
|
||||||
}
|
|
||||||
a.invalid {
|
a.invalid {
|
||||||
color: var(--text-color-invalid-wikilink);
|
color: var(--text-color-invalid-wikilink);
|
||||||
cursor: help;
|
cursor: help;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* !wikiembed */
|
/* ── Embed styles ───────────────────────────────────────────────────── */
|
||||||
|
|
||||||
.embed-wrapper {
|
.embed-wrapper {
|
||||||
border: 1px solid #535353;
|
border: 1px solid var(--border-sub);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 5px 20px 15px 20px;
|
padding: 5px 20px 15px 20px;
|
||||||
margin: 0 20px;
|
margin: 0 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
background: var(--bg-card);
|
||||||
}
|
}
|
||||||
.embed-title {
|
.embed-title {
|
||||||
height: 36px;
|
height: 36px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
line-height: 42px;
|
line-height: 42px;
|
||||||
top: 5px;
|
width: 100%;
|
||||||
left: 0;
|
text-align: center;
|
||||||
right: 0;
|
font-weight: 900;
|
||||||
width: 100%;
|
color: var(--text-primary);
|
||||||
text-align: center;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
}
|
||||||
.embed-link {
|
.embed-link {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 6px;
|
top: 6px;
|
||||||
right: 12px;
|
right: 12px;
|
||||||
cursor: pointer;
|
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%;
|
|
||||||
}
|
}
|
||||||
|
.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%; }
|
||||||
|
|||||||
@@ -23,7 +23,8 @@ export async function generateBlogBackRefs(thisFileName: string) {
|
|||||||
for (const thatDoc of allBlogPosts) {
|
for (const thatDoc of allBlogPosts) {
|
||||||
const thatFName: string = path.basename(thatDoc.id, '.md');
|
const thatFName: string = path.basename(thatDoc.id, '.md');
|
||||||
if (thatFName === thisFileName) { continue; }
|
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) {
|
for (const w of wiki) {
|
||||||
if (w.kind === wikirefs.CONST.WIKI.ATTR) {
|
if (w.kind === wikirefs.CONST.WIKI.ATTR) {
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
@@ -71,7 +72,8 @@ export async function generateEntryBackRefs(thisFileName: string) {
|
|||||||
for (const thatDoc of allEntryDocs) {
|
for (const thatDoc of allEntryDocs) {
|
||||||
const thatFName: string = path.basename(thatDoc.id, '.md');
|
const thatFName: string = path.basename(thatDoc.id, '.md');
|
||||||
if (thatFName === thisFileName) { continue; }
|
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) {
|
for (const w of wiki) {
|
||||||
if (w.kind === wikirefs.CONST.WIKI.ATTR) {
|
if (w.kind === wikirefs.CONST.WIKI.ATTR) {
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
|
|||||||
@@ -29,7 +29,8 @@ export function createResolveEmbedContent(remarkPlugins: any[]) {
|
|||||||
// note: we're not using remarkRehype or rehypeStringify here
|
// 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
|
// markdown-only
|
||||||
if (wikirefs.isMedia(filename)) { return; }
|
if (wikirefs.isMedia(filename)) { return; }
|
||||||
// cycle detection
|
// cycle detection
|
||||||
|
|||||||
@@ -0,0 +1,17 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
accent: "var(--color-accent, #00c8ff)",
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ["Inter", "system-ui", "sans-serif"],
|
||||||
|
mono: ["JetBrains Mono", "monospace"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user