@dominikcz/greg 0.9.27

package/src/lib/MarkdownDocs/vitePluginCopyDocs.js

@@ -0,0 +1,153 @@
+/**
+ * vitePluginCopyDocs
+ *
+ * Copies docs/**\/*.md (and optional extra static dirs) to the build output
+ * directory as-is, so they can be fetched at runtime by the browser without
+ * being compiled by mdsvex/rollup.
+ *
+ * This is the key enabler of the "runtime markdown" architecture: Vite only
+ * compiles the app shell, and page content is fetched on demand.
+ *
+ * The `staticDirs` option (default: ['snippets']) lists additional project-root
+ * directories whose files should also be served/copied verbatim.  This is
+ * needed for `<<< @”‹/snippets/file.js` style snippet includes.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+
+function trimSlashes(value) {
+    return String(value || '').replace(/^\/+|\/+$/g, '');
+}
+
+export function vitePluginCopyDocs({ docsDir = 'docs', srcDir = '/docs', staticDirs = ['snippets'] } = {}) {
+    let root = process.cwd();
+    let outDir = 'dist';
+    let viteBase = '/';
+
+    function* walkAll(dir) {
+        if (!fs.existsSync(dir)) return;
+        for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+            const full = path.join(dir, entry.name);
+            if (entry.isDirectory()) {
+                yield* walkAll(full);
+            } else if (entry.isFile()) {
+                yield full;
+            }
+        }
+    }
+
+    function* walkMd(dir) {
+        for (const full of walkAll(dir)) {
+            if (full.endsWith('.md')) yield full;
+        }
+    }
+
+    function toPosix(value) {
+        return String(value).replace(/\\/g, '/');
+    }
+
+    function resolveRootPrefix() {
+        const cleaned = trimSlashes(srcDir);
+        return cleaned ? '/' + cleaned : '';
+    }
+
+    return {
+        name: 'greg:copy-docs',
+
+        configResolved(config) {
+            root = config.root;
+            outDir = path.resolve(config.root, config.build.outDir);
+            viteBase = config.base ?? '/';
+        },
+
+        /**
+         * In dev mode: serve .md files and staticDirs files as plain text.
+         * Vite doesn't auto-serve project files outside public/ as raw assets.
+         */
+        configureServer(server) {
+            const rootPrefix = resolveRootPrefix();
+            server.middlewares.use((req, res, next) => {
+                const originalUrl = req.url ?? '';
+                const [urlPath, query = ''] = originalUrl.split('?');
+                const rawUrl = urlPath ?? '';
+
+                // Let Vite handle module requests like `/docs/file.md?import`.
+                if (query) {
+                    next();
+                    return;
+                }
+
+                // Strip the Vite base prefix (e.g. /greg/) from the URL.
+                // configureServer middleware runs before Vite's own base-stripping
+                // middleware, so req.url still contains the full base prefix.
+                const base = viteBase === '/' ? '' : viteBase.replace(/\/$/, '');
+                const url = (base && rawUrl.startsWith(base))
+                    ? '/' + rawUrl.slice(base.length).replace(/^\/+/, '')
+                    : rawUrl;
+
+                // Docs markdown files
+                const isDocsMarkdown = rootPrefix
+                    ? (url === rootPrefix || url.startsWith(rootPrefix + '/')) && url.endsWith('.md')
+                    : url.startsWith('/') && url.endsWith('.md');
+                if (isDocsMarkdown) {
+                    const rel = url.slice(rootPrefix.length).replace(/^\//, '');
+                    for (const dir of (Array.isArray(docsDir) ? docsDir : [docsDir])) {
+                        const filePath = path.resolve(root, dir, rel);
+                        if (fs.existsSync(filePath)) {
+                            res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+                            res.end(fs.readFileSync(filePath, 'utf8'));
+                            return;
+                        }
+                    }
+                }
+
+                // Extra static dirs (snippets etc.)
+                for (const dir of staticDirs) {
+                    if (url.startsWith('/' + dir + '/') || url === '/' + dir) {
+                        const filePath = path.resolve(root, url.slice(1));
+                        if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+                            res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+                            res.end(fs.readFileSync(filePath, 'utf8'));
+                            return;
+                        }
+                    }
+                }
+
+                next();
+            });
+        },
+
+        /** After bundle is written, copy .md files and staticDirs verbatim. */
+        writeBundle() {
+            let count = 0;
+            const rootPrefix = trimSlashes(resolveRootPrefix());
+
+            // Copy markdown docs from all source dirs
+            for (const dir of (Array.isArray(docsDir) ? docsDir : [docsDir])) {
+                const docsRoot = path.resolve(root, dir);
+                for (const srcFile of walkMd(docsRoot)) {
+                    const rel = toPosix(path.relative(docsRoot, srcFile));
+                    const destFile = path.join(outDir, rootPrefix, rel);
+                    fs.mkdirSync(path.dirname(destFile), { recursive: true });
+                    fs.copyFileSync(srcFile, destFile);
+                    count++;
+                }
+            }
+
+            // Copy extra static dirs
+            for (const dir of staticDirs) {
+                const dirRoot = path.resolve(root, dir);
+                for (const srcFile of walkAll(dirRoot)) {
+                    const rel = path.relative(root, srcFile);
+                    const destFile = path.join(outDir, rel);
+                    fs.mkdirSync(path.dirname(destFile), { recursive: true });
+                    fs.copyFileSync(srcFile, destFile);
+                    count++;
+                }
+            }
+
+            console.log(`\x1b[32m✓\x1b[0m greg:copy-docs – ${count} files copied to ${path.relative(root, outDir)}/`);
+        },
+    };
+}

package/src/lib/MarkdownDocs/vitePluginFrontmatter.js

@@ -0,0 +1,109 @@
+/**
+ * vitePluginFrontmatter
+ *
+ * Scans all markdown files under `docsDir` at build/dev time, extracts their
+ * YAML frontmatter using js-yaml and exposes the result as a virtual module:
+ *
+ *   import frontmatters from 'virtual:greg-frontmatter';
+ *   // → Record<string, { title?, order?, layout?, hero?, features?, ... }>
+ *   // keys are route-prefixed paths, e.g. '/docs/guide/index.md'
+ *
+ * HMR: when a .md file changes its virtual module is invalidated so the dev
+ * server reloads navigation/layout info without a full page reload.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import yaml from 'js-yaml';
+
+const VIRTUAL_ID = 'virtual:greg-frontmatter';
+const RESOLVED_ID = '\0' + VIRTUAL_ID;
+
+/** Extract the YAML block between the first pair of `---` lines. */
+function parseFrontmatter(content) {
+    const m = content.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+    if (!m) return {};
+    try {
+        const parsed = yaml.load(m[1]);
+        return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+            ? parsed
+            : {};
+    } catch {
+        return {};
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Plugin
+// ---------------------------------------------------------------------------
+export function vitePluginFrontmatter({ docsDir = 'docs', srcDir = '/docs' } = {}) {
+    let root = process.cwd();
+
+    function normalizeSrcDir(value) {
+        const cleaned = String(value ?? '').replace(/^\/+|\/+$/g, '');
+        return cleaned ? `/${cleaned}` : '/';
+    }
+
+    /** Collect all .md paths and return the virtual module source. */
+    function buildModule() {
+        const absDirs = (Array.isArray(docsDir) ? docsDir : [docsDir]).map(d => path.resolve(root, d));
+        const normalizedSrcDir = normalizeSrcDir(srcDir);
+        const entries = {};
+
+        function walk(dir, baseDir) {
+            let items;
+            try { items = fs.readdirSync(dir, { withFileTypes: true }); }
+            catch { return; }
+            for (const item of items) {
+                const full = path.join(dir, item.name);
+                if (item.isDirectory()) {
+                    walk(full, baseDir);
+                } else if (item.isFile() && item.name.endsWith('.md') && !item.name.startsWith('__')) {
+                    const rel = path.relative(baseDir, full).replace(/\\/g, '/');
+                    const viteKey = normalizedSrcDir === '/'
+                        ? `/${rel}`
+                        : `${normalizedSrcDir}/${rel}`; // e.g. /docs/guide/index.md
+                    try {
+                        const content = fs.readFileSync(full, 'utf8');
+                        const stat = fs.statSync(full);
+                        entries[viteKey] = {
+                            ...parseFrontmatter(content),
+                            _mtime: stat.mtime.toISOString(),
+                        };
+                    } catch { /* skip unreadable files */ }
+                }
+            }
+        }
+
+        for (const absDocsDir of absDirs) {
+            walk(absDocsDir, absDocsDir);
+        }
+        return `export default ${JSON.stringify(entries)};`;
+    }
+
+    return {
+        name: 'greg:frontmatter',
+
+        configResolved(config) {
+            root = config.root;
+        },
+
+        resolveId(id) {
+            if (id === VIRTUAL_ID) return RESOLVED_ID;
+        },
+
+        load(id) {
+            if (id === RESOLVED_ID) return buildModule();
+        },
+
+        handleHotUpdate({ file, server }) {
+            if (file.endsWith('.md')) {
+                const mod = server.moduleGraph.getModuleById(RESOLVED_ID);
+                if (mod) {
+                    server.moduleGraph.invalidateModule(mod);
+                    server.hot.send({ type: 'full-reload' });
+                }
+            }
+        },
+    };
+}

package/src/lib/MarkdownDocs/vitePluginGregConfig.js

@@ -0,0 +1,108 @@
+/**
+ * vitePluginGregConfig
+ *
+ * Reads the project-root `greg.config.js` file and exposes its default export
+ * as the `virtual:greg-config` virtual module.
+ *
+ * When the file is absent the module resolves to `export default {}`.
+ *
+ * Supported config keys (all optional):
+ *   srcDir       string           – physical docs source directory, relative to project root (default: 'docs')
+ *   srcExclude   string[]         – glob patterns to exclude from docs source (VitePress-compatible, default: [])
+ *   docsBase     string           – URL prefix for the docs section, e.g. 'docs' → URLs like /docs/guide (default: 'docs')
+ *   srcDir     string           – @deprecated, use docsBase instead
+ *   version      string           – version badge text
+ *   mainTitle    string           – site title shown in the header
+ *   outline      OutlineOption    – global outline setting (VitePress-compatible)
+ *   mermaidTheme string           – default mermaid theme key
+ *   carbonAds    { code, placement } | null
+ *   breadcrumb   boolean          – show breadcrumb above content
+ *   backToTop    boolean          – show Back To Top button
+ *   lastModified boolean          – show last-modified date below content
+ *   locales      Record<string, LocaleConfig> – VitePress-style locale map
+ *   sidebar      'auto' | SidebarItem[]
+ *
+ * HMR: changing greg.config.* or prv/greg.config.js triggers a full page reload.
+ */
+
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { loadGregConfig, resolveGregConfigPaths } from './loadGregConfig.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+/** Absolute path to greg's own components directory (inside the package). */
+const GREG_COMPONENTS_DIR = path.resolve(__dirname, '../components');
+
+const VIRTUAL_ID = 'virtual:greg-config';
+const RESOLVED_ID = '\0' + VIRTUAL_ID;
+
+export function vitePluginGregConfig() {
+    let root = process.cwd();
+    let { mainConfigPath, prvConfigPath } = resolveGregConfigPaths(root);
+
+    function isWatchedConfig(file) {
+        return file === mainConfigPath || file === prvConfigPath;
+    }
+
+    return {
+        name: 'greg:config',
+
+        config() {
+            return {
+                resolve: {
+                    alias: {
+                        '$components': GREG_COMPONENTS_DIR,
+                    },
+                },
+                optimizeDeps: {
+                    exclude: ['@dominikcz/greg'],
+                    include: [
+                        '@dominikcz/greg > unified',
+                        '@dominikcz/greg > remark-parse',
+                        '@dominikcz/greg > remark-gfm',
+                        '@dominikcz/greg > remark-rehype',
+                        '@dominikcz/greg > rehype-stringify',
+                        '@dominikcz/greg > rehype-slug',
+                        '@dominikcz/greg > rehype-autolink-headings',
+                        '@dominikcz/greg > unist-util-visit',
+                        '@dominikcz/greg > shiki',
+                        '@dominikcz/greg > fuse.js',
+                        '@dominikcz/greg > mermaid',
+                    ],
+                },
+            };
+        },
+
+        configResolved(config) {
+            root = config.root;
+            ({ mainConfigPath, prvConfigPath } = resolveGregConfigPaths(root));
+        },
+
+        resolveId(id) {
+            if (id === VIRTUAL_ID) return RESOLVED_ID;
+        },
+
+        async load(id) {
+            if (id !== RESOLVED_ID) return;
+            if (!mainConfigPath && !prvConfigPath) return `export default {};`;
+            try {
+                const config = await loadGregConfig(root);
+                return `export default ${JSON.stringify(config)};`;
+            } catch (e) {
+                console.warn('[greg] Failed to load config:', e.message);
+                return `export default {};`;
+            }
+        },
+
+        handleHotUpdate({ file, server }) {
+            ({ mainConfigPath, prvConfigPath } = resolveGregConfigPaths(root));
+            if (isWatchedConfig(file)) {
+                const mod = server.moduleGraph.getModuleById(RESOLVED_ID);
+                if (mod) {
+                    server.moduleGraph.invalidateModule(mod);
+                    server.hot.send({ type: 'full-reload' });
+                }
+            }
+        },
+    };
+}

package/src/lib/MarkdownDocs/vitePluginSearchIndex.js

@@ -0,0 +1,57 @@
+import { resolve } from 'node:path';
+import { buildSearchIndex, invalidateSearchIndexCache } from './searchIndexBuilder.js';
+
+/**
+ * Vite plugin: serves /search-index.json in dev and emits it as a build asset.
+ *
+ * The build is shared with vitePluginSearchServer via the module-level cache
+ * in searchIndexBuilder.js — both plugins pay the I/O cost only once.
+ *
+ * @param {object} options
+ * @param {string} [options.docsDir='docs']   - directory (relative to project root)
+ * @param {string} [options.srcDir='/docs'] - SPA route prefix
+ */
+export function vitePluginSearchIndex({ docsDir = 'docs', srcDir = '/docs' } = {}) {
+	let resolvedDocsDirs;
+
+	return {
+		name: 'vite-plugin-search-index',
+
+		configResolved(config) {
+			const dirs = Array.isArray(docsDir) ? docsDir : [docsDir];
+			resolvedDocsDirs = dirs.map(d => resolve(config.root, d));
+		},
+
+		// Dev-server: answer GET /search-index.json with the cached index
+		configureServer(server) {
+			// Invalidate cache when any markdown file changes
+			server.watcher.on('change', f => { if (f.endsWith('.md')) invalidateSearchIndexCache(); });
+			server.watcher.on('add', f => { if (f.endsWith('.md')) invalidateSearchIndexCache(); });
+			server.watcher.on('unlink', f => { if (f.endsWith('.md')) invalidateSearchIndexCache(); });
+
+			server.middlewares.use(async (req, res, next) => {
+				if (req.url !== '/search-index.json' || req.method !== 'GET') return next();
+				try {
+					const index = await buildSearchIndex(resolvedDocsDirs, srcDir);
+					res.writeHead(200, {
+						'Content-Type': 'application/json; charset=utf-8',
+						'Cache-Control': 'no-cache',
+					});
+					res.end(JSON.stringify(index));
+				} catch (err) {
+					next(err);
+				}
+			});
+		},
+
+		// Production build: emit search-index.json as a static asset
+		async generateBundle() {
+			const index = await buildSearchIndex(resolvedDocsDirs, srcDir);
+			this.emitFile({
+				type: 'asset',
+				fileName: 'search-index.json',
+				source: JSON.stringify(index),
+			});
+		},
+	};
+}

package/src/lib/MarkdownDocs/vitePluginSearchServer.js

@@ -0,0 +1,190 @@
+/**
+ * vitePluginSearchServer
+ *
+ * Vite plugin that exposes a GET /api/search?q=&limit= search endpoint
+ * in both dev (`configureServer`) and preview (`configurePreviewServer`) modes.
+ *
+ * The search index is built on first request and cached in memory via the
+ * shared `buildSearchIndex` from searchIndexBuilder.js.
+ * Both this plugin and vitePluginSearchIndex share the same cache, so the
+ * docs are only scanned once per process start (or after a file change).
+ *
+ * For production deployments, use the standalone `searchServer.js` instead
+ * (invoked via `greg search-server`).
+ *
+ * @param {object} options
+ * @param {string} [options.docsDir='docs']        - docs directory (relative to project root)
+ * @param {string} [options.srcDir='/docs']      - SPA route prefix
+ * @param {string} [options.searchUrl='/api/search'] - URL path for the search endpoint
+ */
+
+import path from 'node:path';
+import Fuse from 'fuse.js';
+import { buildSearchIndex, buildFuseResult, invalidateSearchIndexCache } from './searchIndexBuilder.js';
+
+const FUSE_OPTIONS = {
+	includeScore: true,
+	includeMatches: true,
+	threshold: 0.4,
+	ignoreLocation: true,
+	minMatchCharLength: 2,
+	keys: [
+		{ name: 'title', weight: 3 },
+		{ name: 'sections.heading', weight: 2 },
+		{ name: 'sections.content', weight: 1 },
+	],
+};
+
+export function vitePluginSearchServer({
+	docsDir = 'docs',
+	srcDir = '/docs',
+	searchUrl = '/api/search',
+	fuzzy = {},
+} = {}) {
+	let resolvedDocsDir;
+	let viteBase = '/';
+	const fuzzyConfig = /** @type {{ threshold?: number; minMatchCharLength?: number; ignoreLocation?: boolean }} */ (fuzzy);
+	const threshold = Number.isFinite(Number(fuzzyConfig.threshold))
+		? Number(fuzzyConfig.threshold)
+		: 0.35;
+	const minMatchCharLength = Number.isFinite(Number(fuzzyConfig.minMatchCharLength))
+		? Math.max(1, Number(fuzzyConfig.minMatchCharLength))
+		: 3;
+	const ignoreLocation = fuzzyConfig.ignoreLocation !== false;
+	const fuseOptions = {
+		includeScore: true,
+		includeMatches: true,
+		threshold,
+		ignoreLocation,
+		minMatchCharLength,
+		keys: FUSE_OPTIONS.keys,
+	};
+
+	// Fuse instance, lazily built and cached between requests.
+	// Cleared whenever a .md file changes.
+	/** @type {Fuse<any> | null} */
+	let fuseCache = null;
+	/** @type {Promise<Fuse<any>> | null} */
+	let buildPromise = null;
+
+	async function loadFuse() {
+		if (fuseCache) return fuseCache;
+		if (!buildPromise) {
+			buildPromise = buildSearchIndex(resolvedDocsDir, srcDir).then(index => {
+				fuseCache = new Fuse(index, fuseOptions);
+				return fuseCache;
+			}).catch(err => {
+				buildPromise = null; // allow retry
+				throw err;
+			});
+		}
+		return buildPromise;
+	}
+
+	function invalidate() {
+		fuseCache = null;
+		buildPromise = null;
+		invalidateSearchIndexCache();
+	}
+
+	function normalizePath(value) {
+		const raw = String(value ?? '').trim();
+		if (!raw || raw === '/') return '/';
+		return '/' + raw.replace(/^\/+|\/+$/g, '');
+	}
+
+	function isPathInLocale(id, localeRoot, baseRoot, localeRoots) {
+		const currentRoot = normalizePath(localeRoot);
+		const normalizedBase = normalizePath(baseRoot);
+		const normalizedId = normalizePath(id);
+		const roots = (localeRoots ?? []).map(normalizePath);
+
+		const inCurrentRoot = currentRoot === '/'
+			? normalizedId.startsWith('/')
+			: (normalizedId === currentRoot || normalizedId.startsWith(currentRoot + '/'));
+
+		if (!inCurrentRoot) {
+			return false;
+		}
+
+		if (currentRoot === normalizedBase) {
+			const otherRoots = roots.filter((rp) => rp !== currentRoot);
+			if (otherRoots.some((rp) => normalizedId === rp || normalizedId.startsWith(rp + '/'))) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	/** Connect-compatible middleware factory */
+	function middleware() {
+		return async (req, res, next) => {
+			const urlStr = req.url ?? '';
+			const qIdx = urlStr.indexOf('?');
+			const rawPathname = qIdx >= 0 ? urlStr.slice(0, qIdx) : urlStr;
+			// Strip the Vite base prefix — configureServer runs before Vite's
+			// own base-stripping middleware, so req.url still has the full prefix.
+			const base = viteBase === '/' ? '' : viteBase.replace(/\/$/, '');
+			const pathname = (base && rawPathname.startsWith(base))
+				? '/' + rawPathname.slice(base.length).replace(/^\/+/, '')
+				: rawPathname;
+			if (pathname !== searchUrl || req.method !== 'GET') return next();
+
+			const params = new URLSearchParams(qIdx >= 0 ? urlStr.slice(qIdx + 1) : '');
+			const q = (params.get('q') ?? '').trim();
+			// Cap limit to protect server from expensive searches
+			const limit = Math.min(Math.max(parseInt(params.get('limit') ?? '10', 10) || 10, 1), 50);
+			const localeRoot = params.get('localeRoot');
+			const baseRoot = params.get('baseRoot');
+			const localeRoots = (params.get('localeRoots') ?? '')
+				.split(',')
+				.map(v => v.trim())
+				.filter(Boolean);
+
+			try {
+				const fuse = await loadFuse();
+				let results = q ? fuse.search(q, { limit }).map(buildFuseResult) : [];
+				if (localeRoot && baseRoot) {
+					results = results.filter((result) =>
+						isPathInLocale(result.id, localeRoot, baseRoot, localeRoots),
+					);
+				}
+				const body = JSON.stringify({ query: q, results });
+				res.writeHead(200, {
+					'Content-Type': 'application/json; charset=utf-8',
+					'Cache-Control': 'no-cache',
+					'Content-Length': Buffer.byteLength(body),
+				});
+				res.end(body);
+			} catch (err) {
+				console.error('[greg:search-server]', err.message);
+				const body = JSON.stringify({ query: q, results: [] });
+				res.writeHead(500, { 'Content-Type': 'application/json; charset=utf-8' });
+				res.end(body);
+			}
+		};
+	}
+
+	return {
+		name: 'greg:search-server',
+
+		configResolved(config) {
+			const dirs = Array.isArray(docsDir) ? docsDir : [docsDir];
+			resolvedDocsDir = dirs.map(d => path.resolve(config.root, d));
+			viteBase = config.base ?? '/';
+		},
+
+		configureServer(server) {
+			server.middlewares.use(middleware());
+			// Invalidate Fuse cache on any markdown file change so search stays fresh
+			server.watcher.on('change', f => { if (f.endsWith('.md')) invalidate(); });
+			server.watcher.on('add', f => { if (f.endsWith('.md')) invalidate(); });
+			server.watcher.on('unlink', f => { if (f.endsWith('.md')) invalidate(); });
+		},
+
+		configurePreviewServer(server) {
+			server.middlewares.use(middleware());
+		},
+	};
+}

package/src/lib/components/Badge.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type Props = {
+        text?: string;
+        type?: "info" | "tip" | "warning" | "danger";
+        children?: Snippet;
+    };
+
+    let { text, type = "tip", children }: Props = $props();
+</script>
+
+<span class="badge {type}">
+    {#if children}
+        {@render children()}
+    {:else}
+        {text}
+    {/if}
+</span>
+
+<style>
+    .badge {
+        display: inline-block;
+        margin-left: 2px;
+        border: 1px solid transparent;
+        border-radius: 12px;
+        padding: 0 10px;
+        line-height: 22px;
+        font-size: 12px;
+        font-weight: 500;
+        white-space: nowrap;
+        transform: translateY(-2px);
+        vertical-align: middle;
+    }
+
+    .badge.info {
+        border-color: var(--greg-info-border);
+        color: var(--greg-info-text);
+        background-color: var(--greg-info-bg);
+    }
+
+    .badge.tip {
+        border-color: var(--greg-tip-border);
+        color: var(--greg-tip-text);
+        background-color: var(--greg-tip-bg);
+    }
+
+    .badge.warning {
+        border-color: var(--greg-warning-border);
+        color: var(--greg-warning-text);
+        background-color: var(--greg-warning-bg);
+    }
+
+    .badge.danger {
+        border-color: var(--greg-danger-border);
+        color: var(--greg-danger-text);
+        background-color: var(--greg-danger-bg);
+    }
+</style>