@void/md 0.23.0 → 0.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -136
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
# @void/md
|
|
2
2
|
|
|
3
|
-
Markdown
|
|
3
|
+
Add Markdown routes to Void Pages with frontmatter, syntax highlighting, layouts, and interactive islands.
|
|
4
4
|
|
|
5
5
|
## Setup
|
|
6
6
|
|
|
7
|
+
Install alongside `void` and your framework adapter:
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install @void/md
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Add `voidMarkdown()` after the adapter in your Vite config. For example, with Vue:
|
|
14
|
+
|
|
7
15
|
```ts
|
|
8
|
-
// vite.config.ts
|
|
9
16
|
import { defineConfig } from 'vite';
|
|
10
17
|
import { voidPlugin } from 'void';
|
|
11
18
|
import { voidVue } from '@void/vue/plugin';
|
|
@@ -16,138 +23,6 @@ export default defineConfig({
|
|
|
16
23
|
});
|
|
17
24
|
```
|
|
18
25
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
## Plugin
|
|
22
|
-
|
|
23
|
-
`voidMarkdown(options?)` returns a Vite plugin array (`Plugin[]`). The plugin runs with `enforce: "pre"`.
|
|
24
|
-
|
|
25
|
-
Options:
|
|
26
|
-
|
|
27
|
-
- `shiki?.themes` — `{ light: string; dark: string }` (default: `github-light` / `github-dark`)
|
|
28
|
-
- `shiki?.langs` — additional Shiki languages to load (default: all bundled languages, lazy-loaded)
|
|
29
|
-
|
|
30
|
-
The plugin exposes an API:
|
|
31
|
-
|
|
32
|
-
- `api.getClientScripts()` — returns `Map<string, string>` of component ID → client code (used by the islands plugin)
|
|
33
|
-
|
|
34
|
-
## Runtime
|
|
35
|
-
|
|
36
|
-
Import from `@void/md`:
|
|
37
|
-
|
|
38
|
-
- **`useFrontmatter()`** — access the current page's frontmatter object. Uses framework-native context (`provide`/`inject` for Vue, `createContext`/`useContext` for React/Solid, `setContext`/`getContext` for Svelte).
|
|
39
|
-
|
|
40
|
-
## Virtual Modules
|
|
41
|
-
|
|
42
|
-
- **`@void/md`** — resolves to `useFrontmatter()` runtime
|
|
43
|
-
- **`@void/md/pages`** — flat array of all `MdPage` objects (HMR-aware), useful for building navs, sidebars, and search indexes
|
|
44
|
-
|
|
45
|
-
```ts
|
|
46
|
-
import pages from '@void/md/pages';
|
|
47
|
-
// MdPage { path, title, frontmatter, headings }
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
## Pages
|
|
51
|
-
|
|
52
|
-
`.md` files in the `pages/` directory become routes. They compile to static HTML at build time with zero client JS by default — auto-prerendered like static island pages.
|
|
53
|
-
|
|
54
|
-
```md
|
|
55
|
-
---
|
|
56
|
-
title: Getting Started
|
|
57
|
-
author: Jane
|
|
58
|
-
---
|
|
59
|
-
|
|
60
|
-
# Getting Started
|
|
61
|
-
|
|
62
|
-
Regular markdown content with **full** syntax support.
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
### Frontmatter
|
|
66
|
-
|
|
67
|
-
YAML frontmatter between `---` fences. Title is extracted from `frontmatter.title` or the first `<h1>`.
|
|
68
|
-
|
|
69
|
-
### Islands
|
|
70
|
-
|
|
71
|
-
Embed interactive components via a `<script>` block with `island` import attributes:
|
|
72
|
-
|
|
73
|
-
```md
|
|
74
|
-
---
|
|
75
|
-
title: Interactive Page
|
|
76
|
-
---
|
|
77
|
-
|
|
78
|
-
<script>
|
|
79
|
-
import Counter from "../components/Counter.vue" with { island: "visible" }
|
|
80
|
-
</script>
|
|
81
|
-
|
|
82
|
-
# Page with Islands
|
|
83
|
-
|
|
84
|
-
Static content above, interactive island below:
|
|
85
|
-
|
|
86
|
-
<Counter />
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
Island strategies: `idle` (default), `visible`, `media(...)`.
|
|
90
|
-
|
|
91
|
-
### Client Scripts
|
|
92
|
-
|
|
93
|
-
Regular imports and statements in `<script>` blocks (without `island` attribute) are bundled as a client module, code-split per page:
|
|
94
|
-
|
|
95
|
-
```md
|
|
96
|
-
<script>
|
|
97
|
-
import { initAnalytics } from "../lib/analytics"
|
|
98
|
-
initAnalytics()
|
|
99
|
-
</script>
|
|
100
|
-
|
|
101
|
-
# My Page
|
|
102
|
-
|
|
103
|
-
Content here.
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
## Markdown Features
|
|
107
|
-
|
|
108
|
-
Full VitePress-parity feature set:
|
|
109
|
-
|
|
110
|
-
- **Syntax highlighting** — Shiki with dual light/dark themes
|
|
111
|
-
- **Line highlighting** — `{1,3-5}` meta in code fences
|
|
112
|
-
- **Notation transforms** — `[!code ++]`, `[!code --]`, `[!code highlight]`, `[!code focus]`, `[!code error]`, `[!code warning]`
|
|
113
|
-
- **Line numbers** — `:line-numbers` / `:no-line-numbers` per fence, `{=N}` start line
|
|
114
|
-
- **Code snippet imports** — `<<< ./file.ext` with region and line range support
|
|
115
|
-
- **Custom containers** — `:::tip`, `:::info`, `:::warning`, `:::danger`, `:::details`
|
|
116
|
-
- **GitHub alerts** — `> [!NOTE]`, `> [!TIP]`, `> [!WARNING]`, `> [!IMPORTANT]`, `> [!CAUTION]`
|
|
117
|
-
- **Emoji** — `:emoji_name:` shortcodes
|
|
118
|
-
- **Footnotes** — `text[^1]` refs with matching `[^1]: definition` blocks
|
|
119
|
-
- **Attributes** — `{.class #id}` on elements via `markdown-it-attrs`
|
|
120
|
-
- **Anchor links** — auto-generated heading anchors
|
|
121
|
-
- **Table of contents** — `[[toc]]` directive
|
|
122
|
-
- **Image lazy loading** — automatic `loading="lazy"` on images
|
|
123
|
-
- **Link handling** — external links get `target="_blank"`, internal `.md` links normalized
|
|
124
|
-
|
|
125
|
-
## Theme
|
|
126
|
-
|
|
127
|
-
Two CSS exports for styling markdown content:
|
|
128
|
-
|
|
129
|
-
- **`@void/md/theme.css`** — full standalone theme (reset + prose + code + containers)
|
|
130
|
-
- **`@void/md/theme-content.css`** — content-only styles scoped to `.void-md` (prose + code + containers)
|
|
131
|
-
|
|
132
|
-
```ts
|
|
133
|
-
// In your layout or entry
|
|
134
|
-
import '@void/md/theme.css'; // or theme-content.css
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
## Architecture
|
|
138
|
-
|
|
139
|
-
- **Compilation pipeline** — `extractScript()` strips `<script>` blocks and collects island imports → `compile()` runs gray-matter + markdown-exit + Shiki → `emit-{framework}()` generates a framework-specific virtual component
|
|
140
|
-
- **Framework-agnostic** — adapter auto-detected from plugin list; emitters for Vue (SFC), React (JSX), Svelte, and Solid
|
|
141
|
-
- **Lightweight metadata extraction** — `extractMetadata()` parses frontmatter + headings without running Shiki, used for `@void/md/pages` scanning
|
|
142
|
-
- **Islands integration** — pages with island imports split HTML into render chunks with `data-island` markers; pages without islands emit static HTML with a frontmatter context provider
|
|
143
|
-
- **Svelte/Solid secondary modules** — emits a JS re-export pointing to a secondary virtual module (`/@void-md-svelte/` or `/@void-md-solid/`) so Vite processes through the framework's own plugin
|
|
144
|
-
|
|
145
|
-
## Tests
|
|
26
|
+
Create `.md` files in `pages/`. The plugin also works with React, Svelte, and Solid.
|
|
146
27
|
|
|
147
|
-
|
|
148
|
-
- `test/unit/extract-script.test.ts` — script extraction: island imports, client code, edge cases
|
|
149
|
-
- `test/unit/plugins.test.ts` — markdown-it plugins: containers, GitHub alerts, links, images, line numbers, emoji, TOC
|
|
150
|
-
- `test/unit/emit-vue.test.ts` — Vue component emission with and without islands
|
|
151
|
-
- `test/unit/emit-react.test.ts` — React component emission with and without islands
|
|
152
|
-
- `test/unit/emit-svelte.test.ts` — Svelte component emission with and without islands
|
|
153
|
-
- `test/unit/emit-solid.test.ts` — Solid component emission with and without islands
|
|
28
|
+
See [Markdown](https://void.cloud/guide/pages-routing/markdown) for frontmatter, themes, navigation, and plugin options, and [Islands](https://void.cloud/guide/pages-routing/islands) for interactive components. Repository verification is documented in [TESTING.md](../../TESTING.md).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@void/md",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.25.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/voidzero-dev/void.git",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@shikijs/engine-javascript": "^4.
|
|
34
|
-
"@shikijs/transformers": "^4.
|
|
33
|
+
"@shikijs/engine-javascript": "^4.5.0",
|
|
34
|
+
"@shikijs/transformers": "^4.5.0",
|
|
35
35
|
"gray-matter": "^4.0.3",
|
|
36
36
|
"markdown-exit": "1.3.0",
|
|
37
37
|
"markdown-it-anchor": "^10.0.0",
|
|
@@ -40,19 +40,19 @@
|
|
|
40
40
|
"markdown-it-emoji": "^3.1.0",
|
|
41
41
|
"markdown-it-footnote": "^4.0.0",
|
|
42
42
|
"pathslash": "^0.1.0",
|
|
43
|
-
"shiki": "^4.
|
|
43
|
+
"shiki": "^4.5.0",
|
|
44
44
|
"tinyglobby": "^0.2.17"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@types/node": "^26.6.
|
|
47
|
+
"@types/node": "^26.6.4",
|
|
48
48
|
"vite": "npm:@voidzero-dev/vite-plus-core@1.0.0",
|
|
49
49
|
"vite-plus": "1.0.0",
|
|
50
|
-
"void": "0.
|
|
50
|
+
"void": "0.25.0",
|
|
51
51
|
"vue": "^3.5.43"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"vite": "^8.0.0",
|
|
55
|
-
"void": "0.
|
|
55
|
+
"void": "0.25.0"
|
|
56
56
|
},
|
|
57
57
|
"scripts": {
|
|
58
58
|
"build": "vp pack",
|