void-plugin-hono-jsx 0.1.0-rc.1 → 0.2.0

package/dist/theme/containers.css

@@ -0,0 +1,125 @@
+/* Void Markdown — Containers & GitHub Alerts */
+
+.void-md .custom-block {
+  margin: 1em 0;
+  padding: 1em 1.25em;
+  border-radius: 8px;
+  border-left: 4px solid;
+}
+
+.void-md .custom-block-title {
+  font-weight: 600;
+  margin-bottom: 0.5em;
+}
+
+.void-md .custom-block > :last-child {
+  margin-bottom: 0;
+}
+
+/* Tip */
+.void-md .tip {
+  border-color: #10b981;
+  background: rgba(16, 185, 129, 0.08);
+}
+
+.void-md .tip .custom-block-title {
+  color: #10b981;
+}
+
+/* Info / Note */
+.void-md .info,
+.void-md .note {
+  border-color: #3b82f6;
+  background: rgba(59, 130, 246, 0.08);
+}
+
+.void-md .info .custom-block-title,
+.void-md .note .custom-block-title {
+  color: #3b82f6;
+}
+
+/* Warning / Important */
+.void-md .warning,
+.void-md .important {
+  border-color: #eab308;
+  background: rgba(234, 179, 8, 0.08);
+}
+
+.void-md .warning .custom-block-title,
+.void-md .important .custom-block-title {
+  color: #ca8a04;
+}
+
+/* Danger / Caution */
+.void-md .danger,
+.void-md .caution {
+  border-color: #ef4444;
+  background: rgba(239, 68, 68, 0.08);
+}
+
+.void-md .danger .custom-block-title,
+.void-md .caution .custom-block-title {
+  color: #ef4444;
+}
+
+/* Details (collapsible) */
+.void-md details.custom-block {
+  cursor: pointer;
+}
+
+.void-md details.custom-block summary {
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.void-md details.custom-block[open] summary {
+  margin-bottom: 0.5em;
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .void-md .tip {
+    background: rgba(16, 185, 129, 0.12);
+  }
+  :root:not([data-theme='light']) .void-md .info,
+  :root:not([data-theme='light']) .void-md .note {
+    background: rgba(59, 130, 246, 0.12);
+  }
+  :root:not([data-theme='light']) .void-md .warning,
+  :root:not([data-theme='light']) .void-md .important {
+    background: rgba(234, 179, 8, 0.12);
+  }
+  :root:not([data-theme='light']) .void-md .warning .custom-block-title,
+  :root:not([data-theme='light']) .void-md .important .custom-block-title {
+    color: #eab308;
+  }
+  :root:not([data-theme='light']) .void-md .danger,
+  :root:not([data-theme='light']) .void-md .caution {
+    background: rgba(239, 68, 68, 0.12);
+  }
+}
+
+:root[data-theme='dark'] .void-md .tip {
+  background: rgba(16, 185, 129, 0.12);
+}
+:root[data-theme='dark'] .void-md .info,
+:root[data-theme='dark'] .void-md .note {
+  background: rgba(59, 130, 246, 0.12);
+}
+:root[data-theme='dark'] .void-md .warning,
+:root[data-theme='dark'] .void-md .important {
+  background: rgba(234, 179, 8, 0.12);
+}
+:root[data-theme='dark'] .void-md .warning .custom-block-title,
+:root[data-theme='dark'] .void-md .important .custom-block-title {
+  color: #eab308;
+}
+:root[data-theme='dark'] .void-md .danger,
+:root[data-theme='dark'] .void-md .caution {
+  background: rgba(239, 68, 68, 0.12);
+}
+
+/* GitHub Alerts */
+.void-md .github-alert {
+  border-left-width: 4px;
+}

package/dist/theme/content.css

@@ -0,0 +1,4 @@
+/* Void Markdown — Content Styles (scoped to .void-md) */
+@import './prose.css';
+@import './code.css';
+@import './containers.css';

package/dist/theme/index.css

@@ -0,0 +1,7 @@
+/* Void Markdown — Full Theme (reset + baseline + content)
+ *
+ * Use this entry for standalone markdown sites that need a complete stylesheet.
+ * For embedding markdown in an existing app, use content.css instead.
+ */
+@import './reset.css';
+@import './content.css';

package/dist/theme/prose.css

@@ -0,0 +1,294 @@
+/* Void Markdown — Prose Typography */
+
+.void-md {
+  --vmd-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --vmd-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+  --vmd-text: #1a1a2e;
+  --vmd-text-muted: #64748b;
+  --vmd-link: #2563eb;
+  --vmd-link-hover: #1d4ed8;
+  --vmd-border: #e2e8f0;
+  --vmd-bg-soft: #f8fafc;
+  --vmd-line-height: 1.75;
+
+  font-family: var(--vmd-font-body);
+  color: var(--vmd-text);
+  line-height: var(--vmd-line-height);
+  word-wrap: break-word;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .void-md {
+    --vmd-text: #e2e8f0;
+    --vmd-text-muted: #94a3b8;
+    --vmd-link: #60a5fa;
+    --vmd-link-hover: #93bbfd;
+    --vmd-border: #334155;
+    --vmd-bg-soft: #1e293b;
+  }
+}
+
+:root[data-theme='dark'] .void-md {
+  --vmd-text: #e2e8f0;
+  --vmd-text-muted: #94a3b8;
+  --vmd-link: #60a5fa;
+  --vmd-link-hover: #93bbfd;
+  --vmd-border: #334155;
+  --vmd-bg-soft: #1e293b;
+}
+
+/* Headings */
+.void-md h1,
+.void-md h2,
+.void-md h3,
+.void-md h4,
+.void-md h5,
+.void-md h6 {
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.void-md h1 {
+  font-size: 2em;
+  margin-top: 0;
+}
+.void-md h2 {
+  font-size: 1.5em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--vmd-border);
+}
+.void-md h3 {
+  font-size: 1.25em;
+}
+.void-md h4 {
+  font-size: 1em;
+}
+
+/* Paragraphs */
+.void-md p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+/* Links */
+.void-md a {
+  color: var(--vmd-link);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.void-md a:hover {
+  color: var(--vmd-link-hover);
+  text-decoration: underline;
+}
+
+/* Lists */
+.void-md ul,
+.void-md ol {
+  padding-left: 1.5em;
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+.void-md li {
+  margin-bottom: 0.25em;
+}
+
+.void-md li > p {
+  margin-bottom: 0.5em;
+}
+
+/* Blockquotes */
+.void-md blockquote {
+  margin: 0 0 1em;
+  padding: 0.5em 1em;
+  border-left: 4px solid var(--vmd-border);
+  color: var(--vmd-text-muted);
+}
+
+.void-md blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+/* Tables */
+.void-md table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1em;
+  display: block;
+  overflow-x: auto;
+}
+
+.void-md th,
+.void-md td {
+  padding: 0.5em 1em;
+  border: 1px solid var(--vmd-border);
+  text-align: left;
+}
+
+.void-md th {
+  font-weight: 600;
+  background: var(--vmd-bg-soft);
+}
+
+/* Inline code */
+.void-md :not(pre) > code {
+  font-family: var(--vmd-font-mono);
+  font-size: 0.875em;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  background: var(--vmd-bg-soft);
+  border: 1px solid var(--vmd-border);
+}
+
+/* Horizontal rule */
+.void-md hr {
+  border: none;
+  border-top: 1px solid var(--vmd-border);
+  margin: 2em 0;
+}
+
+/* Images */
+.void-md img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Strong / emphasis */
+.void-md strong {
+  font-weight: 600;
+}
+
+/* Anchor links */
+.void-md .header-anchor {
+  float: left;
+  margin-left: -0.87em;
+  padding-right: 0.23em;
+  font-weight: 500;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.void-md h1:hover .header-anchor,
+.void-md h2:hover .header-anchor,
+.void-md h3:hover .header-anchor,
+.void-md h4:hover .header-anchor,
+.void-md h5:hover .header-anchor,
+.void-md h6:hover .header-anchor {
+  opacity: 1;
+}
+
+/* Task lists */
+.void-md ul.contains-task-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.void-md .task-list-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5em;
+}
+
+.void-md .task-list-item input[type='checkbox'] {
+  margin: 0;
+  flex-shrink: 0;
+}
+
+/* Nested task lists */
+.void-md .task-list-item ul.contains-task-list {
+  margin-top: 0.25em;
+}
+
+/* Keyboard input */
+.void-md kbd {
+  font-family: var(--vmd-font-mono);
+  font-size: 0.875em;
+  padding: 0.1em 0.4em;
+  border-radius: 4px;
+  border: 1px solid var(--vmd-border);
+  box-shadow: 0 1px 0 var(--vmd-border);
+  background: var(--vmd-bg-soft);
+}
+
+/* Highlighted text */
+.void-md mark {
+  background: rgba(234, 179, 8, 0.3);
+  padding: 0.1em 0.2em;
+  border-radius: 2px;
+  color: inherit;
+}
+
+/* Definition lists */
+.void-md dl {
+  margin-bottom: 1em;
+}
+
+.void-md dt {
+  font-weight: 600;
+  margin-top: 0.5em;
+}
+
+.void-md dd {
+  margin-left: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+/* Abbreviations */
+.void-md abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+}
+
+/* Subscript / Superscript */
+.void-md sub,
+.void-md sup {
+  font-size: 0.75em;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+.void-md sup {
+  top: -0.5em;
+}
+
+.void-md sub {
+  bottom: -0.25em;
+}
+
+/* Footnotes */
+.void-md section.footnotes {
+  margin-top: 2em;
+  padding-top: 1em;
+  border-top: 1px solid var(--vmd-border);
+  font-size: 0.875em;
+  color: var(--vmd-text-muted);
+}
+
+.void-md .footnote-ref a {
+  font-size: 0.75em;
+  vertical-align: super;
+  line-height: 0;
+  margin-left: 0.1em;
+}
+
+.void-md .footnote-backref {
+  font-family: initial;
+}
+
+/* Table of contents */
+.void-md .table-of-contents {
+  margin-bottom: 1em;
+}
+
+.void-md .table-of-contents ul {
+  list-style: none;
+  padding-left: 1em;
+}
+
+.void-md .table-of-contents > ul {
+  padding-left: 0;
+}

package/dist/theme/reset.css

@@ -0,0 +1,100 @@
+/* Void Markdown — Reset & Baseline
+ *
+ * Opinionated modern reset for markdown-driven sites.
+ * Imported by index.css — not intended for standalone use.
+ */
+
+/* Box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margins */
+* {
+  margin: 0;
+}
+
+/* Document */
+html {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+
+/* Body */
+body {
+  min-height: 100dvh;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+
+p {
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+/* Media */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+img,
+video {
+  height: auto;
+}
+
+/* Forms */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Monospace */
+code,
+kbd,
+samp,
+pre {
+  font-family:
+    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+  font-size: 1em;
+}
+
+/* Links */
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/* Tables */
+table {
+  border-collapse: collapse;
+}
+
+/* Horizontal rule */
+hr {
+  border: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "void-plugin-hono-jsx",
-  "version": "0.1.0-rc.1",
+  "version": "0.2.0",
   "private": false,
   "description": "Hono JSX Pages adapter for Void",
   "type": "module",
@@ -36,6 +36,12 @@
     "./markdown": {
       "types": "./dist/server/markdown.d.ts",
       "default": "./dist/server/markdown.js"
+    },
+    "./theme.css": {
+      "default": "./dist/theme/index.css"
+    },
+    "./theme-content.css": {
+      "default": "./dist/theme/content.css"
     }
   },
   "peerDependencies": {
@@ -43,7 +49,10 @@
     "void": ">=1.1.11 <1.2.0",
     "vite": ">=8.0.16 <9.0.0",
     "markdown-exit": ">=1.3.0 <2.0.0",
-    "yaml": ">=2.9.1 <3.0.0"
+    "yaml": ">=2.9.1 <3.0.0",
+    "markdown-it-container": ">=4.0.0 <5.0.0",
+    "shiki": ">=4.5.0 <5.0.0",
+    "@shikijs/transformers": ">=4.5.0 <5.0.0"
   },
   "repository": {
     "type": "git",
@@ -72,6 +81,15 @@
     },
     "yaml": {
       "optional": true
+    },
+    "markdown-it-container": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    },
+    "@shikijs/transformers": {
+      "optional": true
     }
   }
 }

package/src/plugins/hono-islands.ts

@@ -2,7 +2,7 @@ import { readFileSync, realpathSync } from 'node:fs';
 import { join, relative, resolve, dirname, basename } from 'node:path';
 import { normalizePath, parseSync, type Plugin } from 'vite';
 import { scanPages, resolveEffectiveLayoutChain, resolvePagesDir, type PageScanResult } from 'void/pages';
-import { findIslandImports, editIslandSource, computePagesNeedingClientJS, ISLANDS_RENDERER_ID, ISLANDS_CLIENT_ENTRY_ID } from 'void/pages-islands-plugin';
+import { findIslandImports, findStaticCssImports, rewriteCssImportForVirtualModule, editIslandSource, computePagesNeedingClientJS, ISLANDS_RENDERER_ID, ISLANDS_CLIENT_ENTRY_ID } from 'void/pages-islands-plugin';
 
 import { resolveComponent } from './resolve-component.ts';
 
@@ -15,6 +15,7 @@ export function honoIslands(): Plugin {
   const islands = new Map<string, string>();
   const pageFiles = new Set<string>();
   let dependencyFiles = new Set<string>();
+  let cssImports: string[] = [];
   const graph = new Map<string, Set<string>>();
   const directlyInteractive = new Set<string>();
   const interactivePages = new Set<string>();
@@ -123,6 +124,10 @@ export function honoIslands(): Plugin {
     for (const page of scan.pages.filter((page) => !page.island)) {
       for (const file of [page.componentPath, ...resolveEffectiveLayoutChain(page, scan.layouts, scan.namedLayouts).map((layout) => layout.filePath)]) validateInteractive(join(pagesDir, file));
     }
+    // Match the official adapters: retain static-layout CSS in the client build
+    // even when the document itself needs no client-side JavaScript. Reuse the
+    // analysis snapshot rather than rereading modules during entry generation.
+    cssImports = [...new Set([...pageFiles].flatMap(file => findStaticCssImports(analyses.get(file)!.code, file).map(item => rewriteCssImportForVirtualModule(item.statement, item.specifier, file))))];
     dependencyFiles = watched;
     const needsJS = new Set(directlyInteractive);
     let changed = true;
@@ -210,9 +215,12 @@ export function renderIslandPage(page, assets) {
 }`;
       }
       if (id === `\0${ISLANDS_CLIENT_ENTRY_ID}`) {
-        if (!islands.size || !interactivePages.size) return 'export {};';
+        // Void owns dev first-paint CSS. Production needs the static imports
+        // so its shared manifest asset collector can emit stylesheet links.
+        const styles = this.environment?.mode === 'dev' ? '' : cssImports.join('\n');
+        if (!islands.size || !interactivePages.size) return styles || 'export {};';
         const loaders = [...islands].map(([name, path]) => `${JSON.stringify(name)}: () => import(${JSON.stringify(path)})`).join(',\n');
-        return `${markdown ? "import { MarkdownContext } from 'void-plugin-hono-jsx/markdown';" : ''}
+        return `${styles}\n${markdown ? "import { MarkdownContext } from 'void-plugin-hono-jsx/markdown';" : ''}
 import { initIslands } from 'void/pages-client';
 import { jsx } from 'hono/jsx/dom/jsx-runtime';
 import { render } from 'hono/jsx/dom';

package/src/plugins/hono-markdown.ts

@@ -3,7 +3,10 @@ import { join, relative, dirname } from 'node:path';
 import { normalizePath, type Plugin } from 'vite';
 import { resolvePagesDir } from 'void/pages';
 import { resolveComponent } from './resolve-component.ts';
-import { compileMarkdown, extractMarkdown, renderChunks } from './markdown-compiler.ts';
+import { createMarkdownCompiler, renderChunks } from './markdown-compiler.ts';
+import type { HonoMarkdownOptions } from './markdown-features.ts';
+import { markdownCopyId, markdownCopyCode } from './markdown-copy.ts';
+export type { HonoMarkdownOptions } from './markdown-features.ts';
 import type { HonoMarkdownApi } from './markdown-api.ts';
 
 const clientId = 'virtual:void-hono-markdown-client';
@@ -11,22 +14,24 @@ const scriptQuery = '?hono-markdown-script';
 const literal = (value: unknown) => `JSON.parse(${JSON.stringify(JSON.stringify(value))})`;
 
 /** Optional authored Markdown compiler; independent of @void/md private files. */
-export function voidHonoMarkdown(): Plugin {
+export function voidHonoMarkdown(options: HonoMarkdownOptions = {}): Plugin {
+  const compiler = createMarkdownCompiler(options);
   let root = process.cwd();
   let pagesDir = resolvePagesDir(root);
   let scripts = new Map<string, string>();
   let files = new Map<string, string>();
-  let sources = new Map<string, ReturnType<typeof extractMarkdown>>();
+  let sources = new Map<string, ReturnType<typeof compiler.parse>>();
   function rescan() {
     const nextScripts = new Map<string, string>();
     const nextFiles = new Map<string, string>();
-    const nextSources = new Map<string, ReturnType<typeof extractMarkdown>>();
+    const nextSources = new Map<string, ReturnType<typeof compiler.parse>>();
     for (const entry of existsSync(pagesDir) ? readdirSync(pagesDir, { recursive: true, withFileTypes: true }) : []) {
       if (!entry.isFile() || !entry.name.endsWith('.md')) continue;
       const file = join(entry.parentPath, entry.name);
       const id = normalizePath(relative(pagesDir, file)).replace(/\.md$/, '').replace(/\.island$/, '').replace(/\/index$/, '').replace(/^index$/, '') || 'index';
       const canonical = realpathSync(file);
-      const extracted = nextSources.get(canonical) ?? extractMarkdown(readFileSync(canonical, 'utf8'));
+      const extracted = nextSources.get(canonical) ?? compiler.parse(readFileSync(canonical, 'utf8'));
+      if (!nextSources.has(canonical) && extracted.hasCode) extracted.clientCode = `import ${JSON.stringify(markdownCopyId)};\n` + extracted.clientCode;
       nextSources.set(canonical, extracted);
       if (extracted.clientCode) { nextScripts.set(id, extracted.clientCode); nextFiles.set(id, file); }
     }
@@ -51,8 +56,9 @@ export function voidHonoMarkdown(): Plugin {
       const entry = this.environment.moduleGraph.getModuleById(`\0${clientId}`);
       if (entry) this.environment.moduleGraph.invalidateModule(entry, new Set(), timestamp, true);
     },
-    resolveId(id) { if (id === clientId) return `\0${id}`; },
+    resolveId(id) { if (id === clientId || id === markdownCopyId) return `\0${id}`; },
     load(id) {
+      if (id === `\0${markdownCopyId}`) return markdownCopyCode;
       if (id.endsWith(scriptQuery)) return source(id.slice(0, -scriptQuery.length)).clientCode || 'export {};';
       if (id !== `\0${clientId}`) return;
       if (!files.size) return 'export {};';
@@ -62,8 +68,9 @@ if (id && scripts[id]) await scripts[id]();`;
     },
     transform: {
       filter: { id: /\.md$/ },
-      handler(source, id) {
-        const result = compileMarkdown(source);
+      async handler(source, id) {
+        const cached = sources.get(realpathSync(id));
+        const result = await compiler.render(cached?.source === source ? cached : compiler.parse(source));
         const imports = result.imports.map((entry, index) => {
           const target = resolveComponent(entry.specifier, dirname(id), ['.tsx', '.jsx']);
           if (!target || !entry.specifier.startsWith('.')) throw new Error(`Hono Markdown: cannot resolve relative TSX/JSX island ${entry.specifier} in ${id}.`);