Technical proposals for the Vortex file format.
+${filterButtons}...([\s\S]*?)<\/code><\/pre>/g;
+
+ const matches = [...html.matchAll(codeBlockRegex)];
+ let result = html;
+
+ for (const match of matches) {
+ const [fullMatch, lang, code] = match;
+ if (!lang || !code) continue;
+
+ // Decode HTML entities back to raw code
+ const rawCode = code
+ .replace(/</g, "<")
+ .replace(/>/g, ">")
+ .replace(/&/g, "&")
+ .replace(/"/g, '"')
+ .replace(/'/g, "'");
+
+ // Check if this language is supported
+ const loadedLangs = hl.getLoadedLanguages();
+ if (!loadedLangs.includes(lang)) {
+ // Skip unsupported languages, leave original markup
+ continue;
+ }
+
+ // Generate highlighted HTML with both themes using CSS variables
+ const highlighted = hl.codeToHtml(rawCode.trim(), {
+ lang,
+ themes: {
+ light: "github-light",
+ dark: "github-dark",
+ },
+ defaultColor: false,
+ });
+
+ result = result.replace(fullMatch, highlighted);
+ }
+
+ return result;
+}
+
async function build(liveReload: boolean = false): Promise {
console.log("Building Vortex RFC site...\n");
@@ -402,22 +515,29 @@ async function build(liveReload: boolean = false): Promise {
const glob = new Bun.Glob("*.md");
const rfcs: RFC[] = [];
- // Parse all RFC markdown files
- for await (const filename of glob.scan("./proposals")) {
- console.log(`Processing ${filename}...`);
+ // Parse all RFC markdown files from each state folder
+ for (const state of RFC_STATES) {
+ const folder = `./${state}`;
+
+ for await (const filename of glob.scan(folder)) {
+ console.log(`Processing ${state}/${filename}...`);
- const path = `./proposals/${filename}`;
- const content = await Bun.file(path).text();
- const html = Bun.markdown.html(content, { autolinks: true });
- const number = parseRFCNumber(filename);
- const title = parseTitle(content, filename);
- const git = await getGitHistory(path, repoPath);
+ const path = `${folder}/${filename}`;
+ const content = await Bun.file(path).text();
+ const rawHtml = Bun.markdown.html(content, { autolinks: true });
+ const html = await highlightCodeBlocks(rawHtml);
+ const number = parseRFCNumber(filename);
+ const title = parseTitle(content, filename);
+ const git = await getGitHistory(path, repoPath);
- rfcs.push({ number, title, filename, html, git });
+ rfcs.push({ number, title, filename, html, git, state });
+ }
}
if (rfcs.length === 0) {
- console.log("No RFC files found in ./proposals/");
+ console.log(
+ "No RFC files found in ./proposed/, ./accepted/, or ./completed/",
+ );
return 0;
}
@@ -468,7 +588,9 @@ async function startDevServer() {
// Initial build with live reload enabled
await build(true);
console.log(`\nStarting dev server at http://localhost:${PORT}`);
- console.log("Watching for changes in ./proposals/ and ./styles.css\n");
+ console.log(
+ "Watching for changes in ./proposed/, ./accepted/, ./completed/, and ./styles.css\n",
+ );
// Debounce rebuilds
let rebuildTimeout: Timer | null = null;
@@ -481,12 +603,14 @@ async function startDevServer() {
}, 100);
};
- // Watch proposals directory
- watch("./proposals", { recursive: true }, (_event, filename) => {
- if (filename?.endsWith(".md")) {
- scheduleRebuild();
- }
- });
+ // Watch all state directories
+ for (const state of RFC_STATES) {
+ watch(`./${state}`, { recursive: true }, (_event, filename) => {
+ if (filename?.endsWith(".md")) {
+ scheduleRebuild();
+ }
+ });
+ }
// Watch styles.css
watch("./styles.css", () => {
diff --git a/package.json b/package.json
index b539045..3cf61b3 100644
--- a/package.json
+++ b/package.json
@@ -14,5 +14,8 @@
},
"peerDependencies": {
"typescript": "^5"
+ },
+ "dependencies": {
+ "shiki": "^4.0.0"
}
}
diff --git a/proposed/.keep b/proposed/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/styles.css b/styles.css
index 4f65a45..60c5f0b 100644
--- a/styles.css
+++ b/styles.css
@@ -493,3 +493,126 @@ footer {
color: var(--fg-muted);
font-size: 0.875rem;
}
+
+/* State filter bar */
+.filter-bar {
+ display: flex;
+ gap: 0.5rem;
+ margin-bottom: 1.5rem;
+ flex-wrap: wrap;
+}
+
+.filter-btn {
+ font-family: inherit;
+ font-size: 0.875rem;
+ padding: 0.375rem 0.75rem;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ background: var(--bg);
+ color: var(--fg-muted);
+ cursor: pointer;
+ transition:
+ background 0.15s ease,
+ color 0.15s ease,
+ border-color 0.15s ease;
+}
+
+.filter-btn:hover {
+ background: var(--bg-alt);
+ color: var(--fg);
+}
+
+.filter-btn.active {
+ background: var(--fg);
+ color: var(--bg);
+ border-color: var(--fg);
+}
+
+/* State pills */
+.rfc-state-pill {
+ display: inline-block;
+ font-size: 0.75rem;
+ font-weight: 500;
+ padding: 0.125rem 0.5rem;
+ border-radius: 9999px;
+ text-transform: capitalize;
+ flex-shrink: 0;
+}
+
+.state-proposed {
+ background: #fef3c7;
+ color: #92400e;
+}
+
+.state-accepted {
+ background: #dbeafe;
+ color: #1e40af;
+}
+
+.state-completed {
+ background: #d1fae5;
+ color: #065f46;
+}
+
+:root[data-theme="dark"] .state-proposed {
+ background: #78350f;
+ color: #fef3c7;
+}
+
+:root[data-theme="dark"] .state-accepted {
+ background: #1e3a8a;
+ color: #dbeafe;
+}
+
+:root[data-theme="dark"] .state-completed {
+ background: #064e3b;
+ color: #d1fae5;
+}
+
+/* Shiki syntax highlighting - dual theme support */
+pre.shiki {
+ font-family:
+ "IBM Plex Mono", "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ padding: 1rem;
+ overflow-x: auto;
+ margin-bottom: 1rem;
+ font-size: 0.875rem;
+ line-height: 1.5;
+}
+
+pre.shiki code {
+ background: none;
+ padding: 0;
+ border-radius: 0;
+}
+
+/* Light theme (default) */
+:root pre.shiki,
+:root pre.shiki span {
+ color: var(--shiki-light);
+ background-color: var(--shiki-light-bg);
+}
+
+:root[data-theme="light"] pre.shiki,
+:root[data-theme="light"] pre.shiki span {
+ color: var(--shiki-light);
+ background-color: var(--shiki-light-bg);
+}
+
+/* Dark theme */
+:root[data-theme="dark"] pre.shiki,
+:root[data-theme="dark"] pre.shiki span {
+ color: var(--shiki-dark);
+ background-color: var(--shiki-dark-bg);
+}
+
+/* System preference dark mode */
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) pre.shiki,
+ :root:not([data-theme="light"]) pre.shiki span {
+ color: var(--shiki-dark);
+ background-color: var(--shiki-dark-bg);
+ }
+}