markstream-vue 0.0.9 → 0.0.10-beta.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/.agents/skills/markstream-custom-components/SKILL.md +46 -0
- package/.agents/skills/markstream-custom-components/agents/openai.yaml +4 -0
- package/.agents/skills/markstream-custom-components/references/patterns.md +31 -0
- package/.agents/skills/markstream-install/SKILL.md +45 -0
- package/.agents/skills/markstream-install/agents/openai.yaml +4 -0
- package/.agents/skills/markstream-install/references/scenarios.md +33 -0
- package/.agents/skills/markstream-migration/SKILL.md +50 -0
- package/.agents/skills/markstream-migration/agents/openai.yaml +4 -0
- package/.agents/skills/markstream-migration/references/adoption-checklist.md +30 -0
- package/README.md +51 -0
- package/README.zh-CN.md +51 -0
- package/bin/markstream-vue.mjs +116 -0
- package/bin/prompts-lib.mjs +49 -0
- package/bin/skills-lib.mjs +214 -0
- package/dist/CodeBlockNode.js +1 -0
- package/dist/D2BlockNode.js +1 -0
- package/dist/InfographicBlockNode.js +1 -0
- package/dist/MathBlockNode.js +1 -0
- package/dist/MathInlineNode.js +1 -0
- package/dist/MermaidBlockNode.js +1 -0
- package/dist/_plugin-vue_export-helper.js +1 -0
- package/dist/d2.js +1 -0
- package/dist/index.css +2 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/dist/index.px.css +2 -1
- package/dist/index.tailwind.css +2 -1
- package/dist/katexWorkerClient.js +1 -0
- package/dist/languageIconExtended.js +1 -1
- package/dist/mermaidWorkerClient.js +1 -0
- package/dist/objectSpread2.js +1 -0
- package/dist/safeRaf.js +1 -0
- package/dist/tailwind.ts +0 -0
- package/dist/useSafeI18n.js +1 -0
- package/dist/utils.js +1 -0
- package/dist/viewportPriority.js +1 -0
- package/dist/workers/katexRenderer.worker.js +59 -1
- package/dist/workers/mermaidParser.worker.js +62 -1
- package/package.json +30 -8
- package/prompts/add-custom-tag-thinking.md +25 -0
- package/prompts/audit-markstream-integration.md +23 -0
- package/prompts/install-markstream.md +27 -0
- package/prompts/migrate-react-markdown.md +25 -0
- package/prompts/override-built-in-components.md +25 -0
- package/dist/exports.js +0 -1
- package/dist/index2.js +0 -1
- package/dist/index3.js +0 -1
- package/dist/index4.js +0 -1
- package/dist/index5.js +0 -1
- package/dist/index6.js +0 -1
- package/dist/index7.js +0 -1
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: markstream-custom-components
|
|
3
|
+
description: Override built-in Markstream node renderers and add trusted custom tags. Use when Codex needs to apply `setCustomComponents`, keep overrides scoped with `customId`, map override keys like `image`, `code_block`, `mermaid`, or `link`, or wire `customHtmlTags` and nested renderers for tags such as `thinking`.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Markstream Custom Components
|
|
7
|
+
|
|
8
|
+
Use this skill when the task is to change how Markstream renders specific nodes or custom tags.
|
|
9
|
+
|
|
10
|
+
Read [references/patterns.md](references/patterns.md) before choosing an override strategy.
|
|
11
|
+
|
|
12
|
+
## Workflow
|
|
13
|
+
|
|
14
|
+
1. Classify the request.
|
|
15
|
+
- `built-in override`: replace an existing renderer such as `image`, `link`, `code_block`, `mermaid`, `d2`, or `inline_code`.
|
|
16
|
+
- `custom tag`: support trusted HTML-like tags such as `thinking`.
|
|
17
|
+
- `parser-level`: requires token transforms or AST reshaping. Only then should you leave this skill and use low-level parser hooks.
|
|
18
|
+
2. Prefer scoped mappings.
|
|
19
|
+
- Use `setCustomComponents(customId, mapping)` instead of global mappings whenever practical.
|
|
20
|
+
- Pass the same `customId` or `custom-id` to the renderer instance.
|
|
21
|
+
3. Start with the smallest safe override.
|
|
22
|
+
- Leaf-like nodes (`image`, `link`, `inline_code`, `mermaid`) are easier than container nodes (`heading`, `paragraph`, `list_item`).
|
|
23
|
+
- If the request only changes Mermaid, use `mermaid`, not `code_block`.
|
|
24
|
+
4. Preserve nested Markdown when needed.
|
|
25
|
+
- For trusted custom tags with inner Markdown, render `node.content` with a nested renderer.
|
|
26
|
+
- Pass the same custom-tag allowlist to nested renderers.
|
|
27
|
+
5. Keep props and cleanup intact.
|
|
28
|
+
- Preserve `node`, `loading`, `indexKey`, `customId`, and `isDark`.
|
|
29
|
+
- Remove temporary scoped mappings with `removeCustomComponents(customId)` when the scope is no longer needed.
|
|
30
|
+
6. Validate with the smallest useful check.
|
|
31
|
+
- Prefer a local demo, targeted test, or docs build.
|
|
32
|
+
- Call out whether the implementation is safe for repeated and nested custom tags.
|
|
33
|
+
|
|
34
|
+
## Default Decisions
|
|
35
|
+
|
|
36
|
+
- Scoped overrides first, global overrides only when the whole app truly needs them.
|
|
37
|
+
- Leaf-node overrides before container-node overrides.
|
|
38
|
+
- `customHtmlTags` plus scoped custom components before parser hooks.
|
|
39
|
+
- Nested renderers for tag bodies that contain Markdown.
|
|
40
|
+
|
|
41
|
+
## Useful Doc Targets
|
|
42
|
+
|
|
43
|
+
- `docs/guide/component-overrides.md`
|
|
44
|
+
- `docs/guide/custom-components.md`
|
|
45
|
+
- `docs/guide/components.md`
|
|
46
|
+
- `docs/guide/advanced.md`
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
# Override Patterns
|
|
2
|
+
|
|
3
|
+
## Common override keys
|
|
4
|
+
|
|
5
|
+
| Key | Typical use |
|
|
6
|
+
|-----|-------------|
|
|
7
|
+
| `image` | lightboxes, captions, lazy-loading wrappers |
|
|
8
|
+
| `link` | analytics, router integration, custom tooltip behavior |
|
|
9
|
+
| `code_block` | replace regular fenced code blocks |
|
|
10
|
+
| `mermaid` | customize Mermaid only |
|
|
11
|
+
| `d2` | customize D2 only |
|
|
12
|
+
| `infographic` | customize infographic blocks only |
|
|
13
|
+
| `inline_code` | typography or special inline behavior |
|
|
14
|
+
| `heading`, `paragraph`, `list_item` | container overrides that must render children |
|
|
15
|
+
|
|
16
|
+
## Trusted custom-tag pattern
|
|
17
|
+
|
|
18
|
+
1. register the tag in `customHtmlTags`
|
|
19
|
+
2. map the same tag name with `setCustomComponents(customId, { tagName: Component })`
|
|
20
|
+
3. if the tag body contains Markdown, render `node.content` with a nested renderer
|
|
21
|
+
4. pass the same `customHtmlTags` list to the nested renderer
|
|
22
|
+
|
|
23
|
+
## Nested renderer defaults
|
|
24
|
+
|
|
25
|
+
- `typewriter: false`
|
|
26
|
+
- `viewportPriority: false`
|
|
27
|
+
- `deferNodesUntilVisible: false`
|
|
28
|
+
- `maxLiveNodes: 0`
|
|
29
|
+
- `batchRendering: false`
|
|
30
|
+
|
|
31
|
+
Use those defaults when predictable nested streaming behavior matters more than optimization.
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: markstream-install
|
|
3
|
+
description: Install and wire markstream-vue, markstream-react, markstream-vue2, or markstream-angular into an existing repository. Use when Codex needs to choose the right package, install the smallest peer-dependency set, fix CSS/reset order, decide between `content` and `nodes`, or add a minimal working renderer example.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Markstream Install
|
|
7
|
+
|
|
8
|
+
Use this skill when the task is "add markstream to an app" or "fix a broken markstream install".
|
|
9
|
+
|
|
10
|
+
Read [references/scenarios.md](references/scenarios.md) before making dependency choices.
|
|
11
|
+
|
|
12
|
+
## Workflow
|
|
13
|
+
|
|
14
|
+
1. Detect the target framework and CSS stack.
|
|
15
|
+
- Check `package.json`, app entry files, Tailwind or UnoCSS config, and whether the repo is SSR or streaming-focused.
|
|
16
|
+
- Choose the package that matches the host app: `markstream-vue`, `markstream-vue2`, `markstream-react`, or `markstream-angular`.
|
|
17
|
+
2. Install the smallest peer set that matches the requested features.
|
|
18
|
+
- Add peers only for features the user actually needs: Monaco, Mermaid, D2, KaTeX, or Shiki.
|
|
19
|
+
- Do not install every optional peer by default.
|
|
20
|
+
3. Fix CSS order.
|
|
21
|
+
- Put reset styles before Markstream styles.
|
|
22
|
+
- In Tailwind or UnoCSS projects, place `markstream-*/index.css` inside `@layer components`.
|
|
23
|
+
- Import `katex/dist/katex.min.css` when math is enabled.
|
|
24
|
+
4. Add the smallest working render example.
|
|
25
|
+
- Use `content` for static or low-frequency rendering.
|
|
26
|
+
- Use `nodes` plus `final` when the app receives streaming updates.
|
|
27
|
+
5. Keep customization scoped.
|
|
28
|
+
- If the task requires overrides, prefer `customId` / `custom-id` plus scoped `setCustomComponents(...)`.
|
|
29
|
+
6. Validate.
|
|
30
|
+
- Run the smallest relevant build, typecheck, test, or docs build command.
|
|
31
|
+
- Report which peers were installed, where CSS lives, and whether the repo should later adopt `nodes`.
|
|
32
|
+
|
|
33
|
+
## Default Decisions
|
|
34
|
+
|
|
35
|
+
- Prefer the minimal peer set over "install everything".
|
|
36
|
+
- Prefer `content` unless the app is clearly SSE, chat, token-streaming, or worker-preparsed.
|
|
37
|
+
- Treat CSS order as a first-class part of installation, not a later cleanup.
|
|
38
|
+
- When the request includes SSR, explicitly gate browser-only peers behind client-only boundaries.
|
|
39
|
+
|
|
40
|
+
## Useful Doc Targets
|
|
41
|
+
|
|
42
|
+
- `docs/guide/installation.md`
|
|
43
|
+
- `docs/guide/usage.md`
|
|
44
|
+
- `docs/guide/troubleshooting.md`
|
|
45
|
+
- `docs/guide/component-overrides.md`
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# Install Scenarios
|
|
2
|
+
|
|
3
|
+
## Package selection
|
|
4
|
+
|
|
5
|
+
| Host app | Package |
|
|
6
|
+
|----------|---------|
|
|
7
|
+
| Vue 3 / Nuxt 3 | `markstream-vue` |
|
|
8
|
+
| Vue 2.6 / 2.7 | `markstream-vue2` |
|
|
9
|
+
| React 18+ | `markstream-react` |
|
|
10
|
+
| Angular 20+ | `markstream-angular` |
|
|
11
|
+
|
|
12
|
+
## Peer selection
|
|
13
|
+
|
|
14
|
+
| Feature | Peers |
|
|
15
|
+
|---------|-------|
|
|
16
|
+
| Lightweight highlighted code blocks | `shiki`, `stream-markdown` |
|
|
17
|
+
| Monaco-powered code blocks | `stream-monaco` |
|
|
18
|
+
| Mermaid | `mermaid` |
|
|
19
|
+
| D2 | `@terrastruct/d2` |
|
|
20
|
+
| KaTeX math | `katex` |
|
|
21
|
+
|
|
22
|
+
## CSS checklist
|
|
23
|
+
|
|
24
|
+
- reset first
|
|
25
|
+
- Markstream CSS after reset
|
|
26
|
+
- in Tailwind or UnoCSS projects, keep Markstream CSS inside `@layer components`
|
|
27
|
+
- import KaTeX CSS when math is used
|
|
28
|
+
- when standalone node components are rendered directly, wrap them with `.markstream-vue`
|
|
29
|
+
|
|
30
|
+
## Input choice
|
|
31
|
+
|
|
32
|
+
- `content`: docs pages, static articles, low-frequency updates
|
|
33
|
+
- `nodes` + `final`: SSE, token streaming, AI chat, worker-preparsed content
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: markstream-migration
|
|
3
|
+
description: Audit and migrate existing Markdown rendering to Markstream. Use when Codex needs to replace another renderer, classify direct vs custom vs plugin-heavy usage, preserve behavior during adoption, migrate custom renderers into scoped Markstream overrides, or decide when `nodes` streaming is worth adopting.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Markstream Migration
|
|
7
|
+
|
|
8
|
+
Use this skill when a repo already renders Markdown and the task is to adopt Markstream safely.
|
|
9
|
+
|
|
10
|
+
Read [references/adoption-checklist.md](references/adoption-checklist.md) before changing code.
|
|
11
|
+
|
|
12
|
+
## Workflow
|
|
13
|
+
|
|
14
|
+
1. Audit the repo's current renderer usage.
|
|
15
|
+
- Search for markdown renderers, plugin chains, raw HTML handling, security props, and custom renderers.
|
|
16
|
+
- List every call site that will be touched.
|
|
17
|
+
2. Classify the migration.
|
|
18
|
+
- `direct`: simple string-in renderer swap.
|
|
19
|
+
- `renderer-custom`: custom renderers but limited parser work.
|
|
20
|
+
- `plugin-heavy`: remark, rehype, markdown-it, or other transform-heavy pipelines.
|
|
21
|
+
- `security-heavy`: allow or deny lists, URL rewriting, sanitization, or raw HTML policies.
|
|
22
|
+
3. Swap the renderer first.
|
|
23
|
+
- Introduce the correct Markstream package and CSS.
|
|
24
|
+
- Preserve user-visible behavior before adding richer Markstream-only features.
|
|
25
|
+
4. Migrate custom renderers.
|
|
26
|
+
- Convert tag-based renderers into node-type overrides with scoped `setCustomComponents`.
|
|
27
|
+
- For trusted tag-like content, prefer `customHtmlTags`.
|
|
28
|
+
5. Review gaps honestly.
|
|
29
|
+
- Do not claim 1:1 parity where none exists.
|
|
30
|
+
- Call out parser, plugin, security, or HTML behavior that still needs manual review.
|
|
31
|
+
6. Treat streaming as a second pass unless clearly required now.
|
|
32
|
+
- Move to `nodes` only when the app receives streaming or high-frequency updates.
|
|
33
|
+
7. Validate and summarize.
|
|
34
|
+
- Run the smallest relevant tests or build.
|
|
35
|
+
- Report direct mappings, TODOs, and remaining verification work.
|
|
36
|
+
|
|
37
|
+
## Default Decisions
|
|
38
|
+
|
|
39
|
+
- Renderer swap first, streaming optimization second.
|
|
40
|
+
- Preserve safety over feature parity when HTML or security rules are involved.
|
|
41
|
+
- Prefer explicit TODOs over vague claims.
|
|
42
|
+
- Recommend against migration when the current stack depends heavily on transforms that Markstream does not mirror directly.
|
|
43
|
+
|
|
44
|
+
## Useful Doc Targets
|
|
45
|
+
|
|
46
|
+
- `docs/guide/react-markdown-migration.md`
|
|
47
|
+
- `docs/guide/react-markdown-migration-cookbook.md`
|
|
48
|
+
- `docs/guide/installation.md`
|
|
49
|
+
- `docs/guide/component-overrides.md`
|
|
50
|
+
- `docs/guide/advanced.md`
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
interface:
|
|
2
|
+
display_name: "Markstream Migration"
|
|
3
|
+
short_description: "Audit and migrate existing Markdown rendering to Markstream"
|
|
4
|
+
default_prompt: "Use $markstream-migration to audit this repository's current Markdown renderer and migrate it to the appropriate Markstream package."
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# Adoption Checklist
|
|
2
|
+
|
|
3
|
+
## Audit queries
|
|
4
|
+
|
|
5
|
+
- `react-markdown`
|
|
6
|
+
- `remarkPlugins`
|
|
7
|
+
- `rehypePlugins`
|
|
8
|
+
- `markdown-it`
|
|
9
|
+
- `marked`
|
|
10
|
+
- `rehypeRaw`
|
|
11
|
+
- `skipHtml`
|
|
12
|
+
- `allowedElements`
|
|
13
|
+
- `disallowedElements`
|
|
14
|
+
- `allowElement`
|
|
15
|
+
- `urlTransform`
|
|
16
|
+
- custom renderers and wrapper components
|
|
17
|
+
|
|
18
|
+
## Classification guide
|
|
19
|
+
|
|
20
|
+
- `direct`: plain renderer swap, little or no custom behavior
|
|
21
|
+
- `renderer-custom`: existing custom renderers can become Markstream node overrides
|
|
22
|
+
- `plugin-heavy`: large transform chains need manual review
|
|
23
|
+
- `security-heavy`: HTML policies and URL rewriting need explicit review
|
|
24
|
+
|
|
25
|
+
## Migration defaults
|
|
26
|
+
|
|
27
|
+
- swap the renderer package first
|
|
28
|
+
- keep CSS order correct before debugging visual differences
|
|
29
|
+
- move to scoped `setCustomComponents` instead of global mutations
|
|
30
|
+
- only adopt `nodes` if the app is streaming or frequently re-parsing
|
package/README.md
CHANGED
|
@@ -25,6 +25,7 @@ Looking for other frameworks?
|
|
|
25
25
|
## Contents
|
|
26
26
|
|
|
27
27
|
- [TL;DR Highlights](#tldr-highlights)
|
|
28
|
+
- [Choose Your Path](#choose-your-path)
|
|
28
29
|
- [Try It Now](#-try-it-now)
|
|
29
30
|
- [Community & support](#-community--support)
|
|
30
31
|
- [Quick Start](#-quick-start)
|
|
@@ -56,6 +57,17 @@ Looking for other frameworks?
|
|
|
56
57
|
- Works with **raw Markdown strings or pre-parsed nodes**, supports **custom Vue components** inline.
|
|
57
58
|
- TypeScript-first, ship-ready defaults — import CSS and render.
|
|
58
59
|
|
|
60
|
+
## Choose Your Path
|
|
61
|
+
|
|
62
|
+
| If you want to... | Start here | Then go to |
|
|
63
|
+
| --- | --- | --- |
|
|
64
|
+
| get the first render on screen | [Quick Start](#-quick-start) | [Installation guide](https://markstream-vue-docs.simonhe.me/guide/installation) |
|
|
65
|
+
| integrate it into a docs site or VitePress theme | [Docs Site & VitePress](https://markstream-vue-docs.simonhe.me/guide/vitepress-docs-integration) | [Custom Tags & Advanced Components](https://markstream-vue-docs.simonhe.me/guide/custom-components) |
|
|
66
|
+
| build an AI chat UI or SSE stream | [AI Chat & Streaming](https://markstream-vue-docs.simonhe.me/guide/ai-chat-streaming) | [Performance](https://markstream-vue-docs.simonhe.me/guide/performance) |
|
|
67
|
+
| replace one built-in renderer | [Override Built-in Components](https://markstream-vue-docs.simonhe.me/guide/component-overrides) | [Renderer & Node Components](https://markstream-vue-docs.simonhe.me/guide/components) |
|
|
68
|
+
| add trusted tags such as `thinking` | [Custom Tags & Advanced Components](https://markstream-vue-docs.simonhe.me/guide/custom-components) | [API Reference](https://markstream-vue-docs.simonhe.me/guide/api) |
|
|
69
|
+
| debug a broken integration but do not know why yet | [Troubleshooting by Symptom](https://markstream-vue-docs.simonhe.me/guide/troubleshooting-path) | [Troubleshooting](https://markstream-vue-docs.simonhe.me/guide/troubleshooting) |
|
|
70
|
+
|
|
59
71
|
## 🚀 Try It Now
|
|
60
72
|
|
|
61
73
|
- Playground (interactive demo): https://markstream-vue.simonhe.me/
|
|
@@ -68,6 +80,37 @@ Looking for other frameworks?
|
|
|
68
80
|
- Nuxt playground: `pnpm play:nuxt`
|
|
69
81
|
- Discord: https://discord.gg/vkzdkjeRCW
|
|
70
82
|
|
|
83
|
+
## CLI helpers for skills and prompts
|
|
84
|
+
|
|
85
|
+
If you want the packaged AI assets without cloning the repo:
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
npx skills add Simon-He95/markstream-vue
|
|
89
|
+
npx markstream-vue skills list
|
|
90
|
+
npx markstream-vue skills install
|
|
91
|
+
npx markstream-vue prompts list
|
|
92
|
+
npx markstream-vue prompts show install-markstream
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Recommended usage:
|
|
96
|
+
|
|
97
|
+
- `npx skills add Simon-He95/markstream-vue` is the primary path for Codex-compatible skill discovery because it reads `.agents/skills` directly from the GitHub repository
|
|
98
|
+
- `skills install` installs the bundled skills into your agent skill directory (default: `~/.agents/skills`)
|
|
99
|
+
- `prompts list` and `prompts show` to discover and copy maintained prompt templates
|
|
100
|
+
|
|
101
|
+
Other `npx skills add` forms also work:
|
|
102
|
+
|
|
103
|
+
```bash
|
|
104
|
+
# Full GitHub URL
|
|
105
|
+
npx skills add https://github.com/Simon-He95/markstream-vue
|
|
106
|
+
|
|
107
|
+
# Direct path to one skill in this repo
|
|
108
|
+
npx skills add https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-install
|
|
109
|
+
|
|
110
|
+
# Any git URL
|
|
111
|
+
npx skills add git@github.com:Simon-He95/markstream-vue.git
|
|
112
|
+
```
|
|
113
|
+
|
|
71
114
|
## 💬 Community & support
|
|
72
115
|
|
|
73
116
|
- Discussions: https://github.com/Simon-He95/markstream-vue/discussions
|
|
@@ -76,6 +119,14 @@ Looking for other frameworks?
|
|
|
76
119
|
|
|
77
120
|
The test page gives you an editor + live preview plus “generate share link” that encodes the input in the URL (with a fallback to open directly or pre-fill a GitHub Issue for long payloads).
|
|
78
121
|
|
|
122
|
+
## Support the project
|
|
123
|
+
|
|
124
|
+
If markstream-vue helps your work, you can support ongoing maintenance with one of these QR codes.
|
|
125
|
+
|
|
126
|
+
| Alipay | WeChat Pay |
|
|
127
|
+
| --- | --- |
|
|
128
|
+
| <img src="https://raw.githubusercontent.com/Simon-He95/markstream-vue/main/docs/public/sponsor/zhifubao.jpg" alt="Alipay QR code" width="240" /> | <img src="https://raw.githubusercontent.com/Simon-He95/markstream-vue/main/docs/public/sponsor/weixin.jpg" alt="WeChat Pay QR code" width="240" /> |
|
|
129
|
+
|
|
79
130
|
## ⚡ Quick Start
|
|
80
131
|
|
|
81
132
|
```bash
|
package/README.zh-CN.md
CHANGED
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
## 目录
|
|
26
26
|
|
|
27
27
|
- [速览](#速览)
|
|
28
|
+
- [按场景选择入口](#按场景选择入口)
|
|
28
29
|
- [立即试用](#-立即试用)
|
|
29
30
|
- [社区与支持](#-社区与支持)
|
|
30
31
|
- [快速上手](#-快速上手)
|
|
@@ -57,6 +58,17 @@
|
|
|
57
58
|
- 同时支持 **Markdown 字符串或预解析节点**,可在 Markdown 中嵌入 **自定义 Vue 组件**。
|
|
58
59
|
- TypeScript 优先,开箱默认即可上线(导入 CSS 即用)。
|
|
59
60
|
|
|
61
|
+
## 按场景选择入口
|
|
62
|
+
|
|
63
|
+
| 如果你现在想做的是... | 先看这里 | 然后看 |
|
|
64
|
+
| --- | --- | --- |
|
|
65
|
+
| 先把第一段渲染跑起来 | [快速上手](#-快速上手) | [安装指南](https://markstream-vue-docs.simonhe.me/zh/guide/installation) |
|
|
66
|
+
| 接到文档站或 VitePress 主题里 | [文档站与 VitePress 集成](https://markstream-vue-docs.simonhe.me/zh/guide/vitepress-docs-integration) | [自定义标签与高级组件](https://markstream-vue-docs.simonhe.me/zh/guide/custom-components) |
|
|
67
|
+
| 做 AI 聊天界面或 SSE 流式输出 | [AI 聊天与流式输出](https://markstream-vue-docs.simonhe.me/zh/guide/ai-chat-streaming) | [性能](https://markstream-vue-docs.simonhe.me/zh/guide/performance) |
|
|
68
|
+
| 替换一个内置节点渲染器 | [覆盖内置组件](https://markstream-vue-docs.simonhe.me/zh/guide/component-overrides) | [渲染器与节点组件](https://markstream-vue-docs.simonhe.me/zh/guide/components) |
|
|
69
|
+
| 增加 `thinking` 这类可信标签 | [自定义标签与高级组件](https://markstream-vue-docs.simonhe.me/zh/guide/custom-components) | [API 参考](https://markstream-vue-docs.simonhe.me/zh/guide/api) |
|
|
70
|
+
| 接入坏了但还不知道原因 | [按症状排查](https://markstream-vue-docs.simonhe.me/zh/guide/troubleshooting-path) | [排查问题](https://markstream-vue-docs.simonhe.me/zh/guide/troubleshooting) |
|
|
71
|
+
|
|
60
72
|
## 🚀 立即试用
|
|
61
73
|
|
|
62
74
|
- Playground(交互演示): https://markstream-vue.simonhe.me/
|
|
@@ -69,6 +81,37 @@
|
|
|
69
81
|
- Nuxt playground:`pnpm play:nuxt`
|
|
70
82
|
- Discord: https://discord.gg/vkzdkjeRCW
|
|
71
83
|
|
|
84
|
+
## skills 和 prompts 的 CLI
|
|
85
|
+
|
|
86
|
+
如果你想直接拿到打包后的 AI 资产,而不是先克隆仓库:
|
|
87
|
+
|
|
88
|
+
```bash
|
|
89
|
+
npx skills add Simon-He95/markstream-vue
|
|
90
|
+
npx markstream-vue skills list
|
|
91
|
+
npx markstream-vue skills install
|
|
92
|
+
npx markstream-vue prompts list
|
|
93
|
+
npx markstream-vue prompts show install-markstream
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
推荐这样理解:
|
|
97
|
+
|
|
98
|
+
- `npx skills add Simon-He95/markstream-vue` 是最推荐的安装方式,因为它会直接读取 GitHub 仓库里的 `.agents/skills`
|
|
99
|
+
- `skills install` 会把打包好的 skills 安装到你的 agent skills 目录,默认是 `~/.agents/skills`
|
|
100
|
+
- `prompts list` / `prompts show` 用来发现并直接复制官方维护的 prompt 模板
|
|
101
|
+
|
|
102
|
+
`npx skills add` 也支持这些来源:
|
|
103
|
+
|
|
104
|
+
```bash
|
|
105
|
+
# 完整 GitHub URL
|
|
106
|
+
npx skills add https://github.com/Simon-He95/markstream-vue
|
|
107
|
+
|
|
108
|
+
# 仓库里的单个 skill 直链
|
|
109
|
+
npx skills add https://github.com/Simon-He95/markstream-vue/tree/main/.agents/skills/markstream-install
|
|
110
|
+
|
|
111
|
+
# 任意 git URL
|
|
112
|
+
npx skills add git@github.com:Simon-He95/markstream-vue.git
|
|
113
|
+
```
|
|
114
|
+
|
|
72
115
|
## 💬 社区与支持
|
|
73
116
|
|
|
74
117
|
- Discussions:https://github.com/Simon-He95/markstream-vue/discussions
|
|
@@ -77,6 +120,14 @@
|
|
|
77
120
|
|
|
78
121
|
测试页内置编辑器 + 实时预览,并提供“生成分享链接”功能(过长内容会回退为直接打开或预填 GitHub Issue)。
|
|
79
122
|
|
|
123
|
+
## 支持项目
|
|
124
|
+
|
|
125
|
+
如果 markstream-vue 对你的工作有帮助,欢迎通过下面的收款码支持项目的持续维护。
|
|
126
|
+
|
|
127
|
+
| 支付宝 | 微信收款 |
|
|
128
|
+
| --- | --- |
|
|
129
|
+
| <img src="https://raw.githubusercontent.com/Simon-He95/markstream-vue/main/docs/public/sponsor/zhifubao.jpg" alt="支付宝收款码" width="240" /> | <img src="https://raw.githubusercontent.com/Simon-He95/markstream-vue/main/docs/public/sponsor/weixin.jpg" alt="微信收款码" width="240" /> |
|
|
130
|
+
|
|
80
131
|
## ⚡ 快速上手
|
|
81
132
|
|
|
82
133
|
```bash
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import process from 'node:process'
|
|
4
|
+
import { defaultPromptsRoot, listPromptNames, readPrompt } from './prompts-lib.mjs'
|
|
5
|
+
import {
|
|
6
|
+
listSkillNames,
|
|
7
|
+
parseInstallArgs,
|
|
8
|
+
printInstallHelp,
|
|
9
|
+
printInstallSummary,
|
|
10
|
+
runSkillsInstall,
|
|
11
|
+
} from './skills-lib.mjs'
|
|
12
|
+
|
|
13
|
+
function printCliHelp() {
|
|
14
|
+
console.log(`Usage: markstream-vue <command>
|
|
15
|
+
|
|
16
|
+
Commands:
|
|
17
|
+
skills list List bundled skills
|
|
18
|
+
skills install [options] Install bundled skills
|
|
19
|
+
prompts list List bundled prompt templates
|
|
20
|
+
prompts dir Print bundled prompt directory
|
|
21
|
+
prompts show <name> Print a bundled prompt template
|
|
22
|
+
|
|
23
|
+
Examples:
|
|
24
|
+
markstream-vue skills list
|
|
25
|
+
markstream-vue skills install
|
|
26
|
+
markstream-vue skills install --target codex
|
|
27
|
+
markstream-vue skills install --mode copy --force
|
|
28
|
+
markstream-vue prompts list
|
|
29
|
+
markstream-vue prompts show install-markstream
|
|
30
|
+
`)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
async function main() {
|
|
34
|
+
const argv = process.argv.slice(2)
|
|
35
|
+
const [namespace, action, ...rest] = argv
|
|
36
|
+
|
|
37
|
+
if (!namespace || namespace === '--help' || namespace === '-h' || namespace === 'help') {
|
|
38
|
+
printCliHelp()
|
|
39
|
+
return
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
if (namespace === 'prompts') {
|
|
43
|
+
if (!action || action === 'help') {
|
|
44
|
+
console.log(`Usage: markstream-vue prompts <list|dir|show> [name]
|
|
45
|
+
|
|
46
|
+
Examples:
|
|
47
|
+
markstream-vue prompts list
|
|
48
|
+
markstream-vue prompts dir
|
|
49
|
+
markstream-vue prompts show install-markstream
|
|
50
|
+
`)
|
|
51
|
+
return
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
if (action === 'list') {
|
|
55
|
+
const promptNames = await listPromptNames()
|
|
56
|
+
console.log(`Bundled prompts (${promptNames.length}):`)
|
|
57
|
+
for (const promptName of promptNames)
|
|
58
|
+
console.log(`- ${promptName}`)
|
|
59
|
+
return
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
if (action === 'dir') {
|
|
63
|
+
console.log(defaultPromptsRoot)
|
|
64
|
+
return
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
if (action === 'show') {
|
|
68
|
+
const [promptName] = rest
|
|
69
|
+
const { content } = await readPrompt(promptName)
|
|
70
|
+
process.stdout.write(content)
|
|
71
|
+
if (!content.endsWith('\n'))
|
|
72
|
+
process.stdout.write('\n')
|
|
73
|
+
return
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
throw new Error(`Unknown prompts action: ${action}`)
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
if (namespace !== 'skills') {
|
|
80
|
+
throw new Error(`Unknown command namespace: ${namespace}`)
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
if (!action || action === 'help') {
|
|
84
|
+
printInstallHelp('markstream-vue skills install', 'copy')
|
|
85
|
+
return
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
if (action === 'list') {
|
|
89
|
+
const skillNames = await listSkillNames()
|
|
90
|
+
console.log(`Bundled skills (${skillNames.length}):`)
|
|
91
|
+
for (const skillName of skillNames)
|
|
92
|
+
console.log(`- ${skillName}`)
|
|
93
|
+
return
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
if (action === 'install') {
|
|
97
|
+
const args = parseInstallArgs(rest, {
|
|
98
|
+
target: 'agents',
|
|
99
|
+
mode: 'copy',
|
|
100
|
+
})
|
|
101
|
+
if (args.help) {
|
|
102
|
+
printInstallHelp('markstream-vue skills install', 'copy')
|
|
103
|
+
return
|
|
104
|
+
}
|
|
105
|
+
const result = await runSkillsInstall(args)
|
|
106
|
+
printInstallSummary(result)
|
|
107
|
+
return
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
throw new Error(`Unknown skills action: ${action}`)
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
main().catch((error) => {
|
|
114
|
+
console.error(error instanceof Error ? error.message : error)
|
|
115
|
+
process.exit(1)
|
|
116
|
+
})
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import fs from 'node:fs/promises'
|
|
2
|
+
import path from 'node:path'
|
|
3
|
+
import { fileURLToPath } from 'node:url'
|
|
4
|
+
|
|
5
|
+
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
|
6
|
+
export const packageRoot = path.resolve(__dirname, '..')
|
|
7
|
+
export const defaultPromptsRoot = path.join(packageRoot, 'prompts')
|
|
8
|
+
|
|
9
|
+
export async function listPromptFiles(promptsRoot = defaultPromptsRoot) {
|
|
10
|
+
const dirents = await fs.readdir(promptsRoot, { withFileTypes: true })
|
|
11
|
+
return dirents
|
|
12
|
+
.filter(dirent => dirent.isFile() && dirent.name.endsWith('.md'))
|
|
13
|
+
.map(dirent => dirent.name)
|
|
14
|
+
.sort()
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export async function listPromptNames(promptsRoot = defaultPromptsRoot) {
|
|
18
|
+
return (await listPromptFiles(promptsRoot)).map(file => file.replace(/\.md$/i, ''))
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export async function resolvePromptPath(name, promptsRoot = defaultPromptsRoot) {
|
|
22
|
+
const normalized = String(name ?? '').trim()
|
|
23
|
+
if (!normalized)
|
|
24
|
+
throw new Error('Prompt name is required')
|
|
25
|
+
|
|
26
|
+
const candidates = normalized.endsWith('.md')
|
|
27
|
+
? [normalized]
|
|
28
|
+
: [`${normalized}.md`, normalized]
|
|
29
|
+
|
|
30
|
+
for (const candidate of candidates) {
|
|
31
|
+
const fullPath = path.join(promptsRoot, candidate)
|
|
32
|
+
try {
|
|
33
|
+
await fs.access(fullPath)
|
|
34
|
+
return fullPath
|
|
35
|
+
}
|
|
36
|
+
catch {
|
|
37
|
+
// continue
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const available = await listPromptNames(promptsRoot)
|
|
42
|
+
throw new Error(`Unknown prompt: ${normalized}. Available prompts: ${available.join(', ')}`)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export async function readPrompt(name, promptsRoot = defaultPromptsRoot) {
|
|
46
|
+
const fullPath = await resolvePromptPath(name, promptsRoot)
|
|
47
|
+
const content = await fs.readFile(fullPath, 'utf8')
|
|
48
|
+
return { fullPath, content }
|
|
49
|
+
}
|