@honeydeck/honeydeck 0.1.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.md +25 -0
- package/DEVELOPMENT.md +522 -0
- package/LICENSE +21 -0
- package/Readme.md +49 -0
- package/SPEC.md +88 -0
- package/docs/components.md +63 -0
- package/docs/configuration.md +91 -0
- package/docs/getting-started.md +116 -0
- package/docs/kit-authoring.md +207 -0
- package/docs/kits.md +387 -0
- package/docs/local-development.md +95 -0
- package/docs/mermaid.md +198 -0
- package/docs/mobile.md +108 -0
- package/docs/navigation.md +93 -0
- package/docs/next-steps.md +377 -0
- package/docs/pdf-export.md +91 -0
- package/docs/presenter-mode.md +104 -0
- package/docs/slides.md +130 -0
- package/docs/slidev-migration.md +42 -0
- package/docs/steps-and-reveals.md +171 -0
- package/package.json +134 -0
- package/skills/SPEC.md +21 -0
- package/skills/honeydeck/SKILL.md +65 -0
- package/skills/presentation-writing/SKILL.md +75 -0
- package/skills/slidev-migration/SKILL.md +153 -0
- package/src/SPEC.md +89 -0
- package/src/assets.d.ts +30 -0
- package/src/cli/SPEC.md +230 -0
- package/src/cli/args.ts +3 -0
- package/src/cli/banner.ts +9 -0
- package/src/cli/bin.js +5 -0
- package/src/cli/build.ts +229 -0
- package/src/cli/deck-path.ts +32 -0
- package/src/cli/dev.ts +263 -0
- package/src/cli/index.ts +126 -0
- package/src/cli/init.ts +369 -0
- package/src/cli/pdf.ts +923 -0
- package/src/cli/skill.ts +75 -0
- package/src/cli/templates/SPEC.md +70 -0
- package/src/cli/templates/deck-mdx.ts +15 -0
- package/src/cli/templates/package-json.ts +36 -0
- package/src/cli/templates/sparkle-button.ts +15 -0
- package/src/cli/templates/starter/components/SparkleButton.tsx +84 -0
- package/src/cli/templates/starter/deck.mdx +153 -0
- package/src/cli/templates/starter/styles.css +14 -0
- package/src/cli/templates/styles-css.ts +14 -0
- package/src/defaults.ts +1 -0
- package/src/layouts/ColorModeImage.tsx +55 -0
- package/src/layouts/SPEC.md +393 -0
- package/src/layouts/SlideFrame.tsx +48 -0
- package/src/layouts/bee/Blank.tsx +12 -0
- package/src/layouts/bee/Cover.tsx +70 -0
- package/src/layouts/bee/Default.tsx +42 -0
- package/src/layouts/bee/Image/Image.tsx +151 -0
- package/src/layouts/bee/Image/placeholder-dark.webp +0 -0
- package/src/layouts/bee/Image/placeholder-vertical-dark.webp +0 -0
- package/src/layouts/bee/Image/placeholder-vertical.webp +0 -0
- package/src/layouts/bee/Image/placeholder.webp +0 -0
- package/src/layouts/bee/ImageLeft.tsx +27 -0
- package/src/layouts/bee/ImageRight.tsx +27 -0
- package/src/layouts/bee/ImageSide.tsx +107 -0
- package/src/layouts/bee/Section.tsx +40 -0
- package/src/layouts/bee/TwoCol.tsx +108 -0
- package/src/layouts/bee/index.ts +40 -0
- package/src/layouts/clean/Blank.tsx +12 -0
- package/src/layouts/clean/Cover.tsx +58 -0
- package/src/layouts/clean/Default.tsx +33 -0
- package/src/layouts/clean/Image/Image.tsx +103 -0
- package/src/layouts/clean/ImageLeft.tsx +27 -0
- package/src/layouts/clean/ImageRight.tsx +27 -0
- package/src/layouts/clean/ImageSide.tsx +113 -0
- package/src/layouts/clean/Section.tsx +35 -0
- package/src/layouts/clean/TwoCol.tsx +63 -0
- package/src/layouts/clean/index.ts +40 -0
- package/src/layouts/index.ts +60 -0
- package/src/layouts/placeholders.ts +9 -0
- package/src/layouts/utils.ts +13 -0
- package/src/remark/SPEC.md +49 -0
- package/src/remark/h1-extract.ts +124 -0
- package/src/remark/index.ts +4 -0
- package/src/remark/shiki-code-blocks.ts +325 -0
- package/src/remark/step-numbering.ts +412 -0
- package/src/runtime/Deck.tsx +533 -0
- package/src/runtime/SPEC.md +256 -0
- package/src/runtime/SlideCanvas.tsx +95 -0
- package/src/runtime/TimelineContext.tsx +122 -0
- package/src/runtime/app-shell/index.html +31 -0
- package/src/runtime/app-shell/main.tsx +42 -0
- package/src/runtime/aspectRatio.ts +34 -0
- package/src/runtime/colorMode.ts +23 -0
- package/src/runtime/components/BrowserFrame.tsx +233 -0
- package/src/runtime/components/Button.tsx +57 -0
- package/src/runtime/components/CodeBlock.tsx +210 -0
- package/src/runtime/components/ColorModeCycleButton.tsx +59 -0
- package/src/runtime/components/ErrorBoundary.tsx +125 -0
- package/src/runtime/components/Keyboard.tsx +87 -0
- package/src/runtime/components/ListStyle.tsx +203 -0
- package/src/runtime/components/NavBar.tsx +223 -0
- package/src/runtime/components/NavBarButton.tsx +47 -0
- package/src/runtime/components/NavBarDivider.tsx +3 -0
- package/src/runtime/components/Notes.tsx +171 -0
- package/src/runtime/components/Reveal.tsx +82 -0
- package/src/runtime/components/RevealGroup.tsx +193 -0
- package/src/runtime/components/SPEC.md +263 -0
- package/src/runtime/components/SlideNumberBadge.tsx +11 -0
- package/src/runtime/components/TimelineSteps.tsx +115 -0
- package/src/runtime/components/index.ts +55 -0
- package/src/runtime/index.ts +42 -0
- package/src/runtime/inputOwnership.ts +68 -0
- package/src/runtime/keyboardTarget.ts +7 -0
- package/src/runtime/lastSlideRoute.ts +56 -0
- package/src/runtime/navigation.ts +211 -0
- package/src/runtime/router.ts +157 -0
- package/src/runtime/slideData.ts +137 -0
- package/src/runtime/sync.ts +267 -0
- package/src/runtime/types.ts +182 -0
- package/src/runtime/useKeyboardNav.ts +138 -0
- package/src/runtime/useSwipeNav.ts +257 -0
- package/src/runtime/views/DocsView.tsx +74 -0
- package/src/runtime/views/OverviewView.tsx +386 -0
- package/src/runtime/views/PresenterNotesPanel.tsx +76 -0
- package/src/runtime/views/PresenterView.tsx +340 -0
- package/src/runtime/views/SPEC.md +152 -0
- package/src/runtime/views/docs/ComponentsTab.tsx +178 -0
- package/src/runtime/views/docs/DocsHeader.tsx +101 -0
- package/src/runtime/views/docs/Intro.tsx +20 -0
- package/src/runtime/views/docs/LayoutsTab.tsx +324 -0
- package/src/runtime/views/docs/ThemeTab.tsx +110 -0
- package/src/runtime/views/index.ts +7 -0
- package/src/runtime/views/overviewGrid.ts +106 -0
- package/src/runtime/views/presenterPreview.ts +27 -0
- package/src/runtime/virtual-modules.d.ts +98 -0
- package/src/theme/SPEC.md +179 -0
- package/src/theme/base.css +623 -0
- package/src/theme/bee.css +35 -0
- package/src/theme/clean.css +38 -0
- package/src/vite-plugin/SPEC.md +114 -0
- package/src/vite-plugin/component-doc-crawler.ts +350 -0
- package/src/vite-plugin/deck-loader.ts +148 -0
- package/src/vite-plugin/index.ts +373 -0
- package/src/vite-plugin/layout-demo-crawler.ts +802 -0
- package/src/vite-plugin/splitter.ts +353 -0
- package/src/vite-plugin/token-manifest.ts +163 -0
- package/src/vite-plugin/virtual-modules.ts +587 -0
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: presentation-writing
|
|
3
|
+
description: Opinionated help for writing excellent slide decks and delivering strong presentations. Use for talk strategy, audience analysis, storylines, slide outlines, headlines, narrative flow, speaker notes, timing, rehearsal, visual clarity, progressive disclosure, and presentation reviews.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Presentation Writing
|
|
7
|
+
|
|
8
|
+
You help the user create clear, memorable presentations. Optimize for audience understanding, speaker confidence, and a strong narrative arc.
|
|
9
|
+
|
|
10
|
+
## First clarify the brief
|
|
11
|
+
|
|
12
|
+
If missing, ask concise questions about:
|
|
13
|
+
|
|
14
|
+
- Audience: who they are, what they know, what they care about
|
|
15
|
+
- Goal: inform, persuade, teach, align, sell, decide, or inspire
|
|
16
|
+
- Desired outcome: what should the audience think, feel, or do afterward
|
|
17
|
+
- Context: venue, format, stakes, speaker role, cultural constraints
|
|
18
|
+
- Duration: total time, Q&A time, and expected depth
|
|
19
|
+
- Material: existing notes, data, demos, examples, or required messages
|
|
20
|
+
|
|
21
|
+
## Opinionated slide principles
|
|
22
|
+
|
|
23
|
+
- One slide, one job. If a slide has two points, split it.
|
|
24
|
+
- Headlines should say the point, not just label the topic.
|
|
25
|
+
- Keep text sparse. Prefer short phrases over paragraphs. Prose belongs in speaker notes, not on slides.
|
|
26
|
+
- Build a storyline before polishing individual slides.
|
|
27
|
+
- Start with the audience problem, tension, or opportunity.
|
|
28
|
+
- Use evidence after the claim, not instead of the claim.
|
|
29
|
+
- Prefer concrete examples over abstract explanation.
|
|
30
|
+
- Use diagrams for relationships, flows, systems, and tradeoffs.
|
|
31
|
+
- Use charts only when the takeaway is obvious in seconds.
|
|
32
|
+
- Use progressive disclosure when complexity would overwhelm.
|
|
33
|
+
- Remove decoration that does not support comprehension.
|
|
34
|
+
- Speaker notes should contain the talk track, transitions, timing cues, and optional details.
|
|
35
|
+
- Good story over tell everything. You might need to kill a darling to get your main point across.
|
|
36
|
+
|
|
37
|
+
## Useful story shapes
|
|
38
|
+
|
|
39
|
+
Choose a simple shape and make it explicit:
|
|
40
|
+
|
|
41
|
+
- Problem โ insight โ solution โ proof โ ask
|
|
42
|
+
- Situation โ pain โ outcome โ path โ decision
|
|
43
|
+
- Question โ exploration โ answer โ implication
|
|
44
|
+
- Before โ after โ bridge
|
|
45
|
+
- Myth โ reality โ what changes
|
|
46
|
+
- Demo setup โ demo โ interpretation โ next step
|
|
47
|
+
|
|
48
|
+
## How to draft
|
|
49
|
+
|
|
50
|
+
1. Write the audience promise in one sentence.
|
|
51
|
+
2. Draft a slide-by-slide headline outline.
|
|
52
|
+
3. Check that the outline tells a story without body text.
|
|
53
|
+
4. Add only the minimum supporting content for each headline.
|
|
54
|
+
5. Add speaker notes for delivery, transitions, and emphasis.
|
|
55
|
+
6. Add visuals, code, diagrams, data, or reveals only where they improve understanding.
|
|
56
|
+
7. Review for pacing: roughly 1โ2 minutes per content slide, less for section breaks.
|
|
57
|
+
|
|
58
|
+
## Review checklist
|
|
59
|
+
|
|
60
|
+
- Can the main message be summarized in one sentence?
|
|
61
|
+
- Does every slide earn its place?
|
|
62
|
+
- Are the opening and closing memorable?
|
|
63
|
+
- Is the call to action or decision explicit?
|
|
64
|
+
- Does each slide have one clear takeaway?
|
|
65
|
+
- Are dense slides split or simplified?
|
|
66
|
+
- Are jargon and acronyms explained for this audience?
|
|
67
|
+
- Are notes useful for speaking, not just duplicated slide text?
|
|
68
|
+
- Is there a plan for questions, objections, or demos failing?
|
|
69
|
+
|
|
70
|
+
## Output style
|
|
71
|
+
|
|
72
|
+
- Be direct and practical.
|
|
73
|
+
- Prefer outlines, rewritten headlines, and concrete slide edits.
|
|
74
|
+
- When writing slides, keep visible text short and put details in speaker notes.
|
|
75
|
+
- This skill is presentation-framework agnostic. If the user is using Honeydeck, pair this guidance with the Honeydeck skill for valid MDX syntax.
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: slidev-migration
|
|
3
|
+
description: Migrate presentations from Slidev (sli.dev) to Honeydeck. Use when the user has a Slidev project, slides.md, Slidev Markdown, Vue components/layouts, v-click/v-clicks, Slidev themes/addons, or asks to move from sli.dev/Slidev to Honeydeck.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Slidev to Honeydeck Migration
|
|
7
|
+
|
|
8
|
+
You help users move Slidev presentations to Honeydeck. Slidev is the framework at `sli.dev`; it uses Markdown plus Vue conventions. Honeydeck uses MDX plus React, Vite, Tailwind v4, explicit imports, and Honeydeck layouts/components.
|
|
9
|
+
|
|
10
|
+
Start by reading all Honeydeck related skills available. Alternatively you can check in the honeydeck node_modules folder and read the docs/skills there.
|
|
11
|
+
|
|
12
|
+
## Source of truth
|
|
13
|
+
|
|
14
|
+
Before changing files, read the available project/package docs:
|
|
15
|
+
|
|
16
|
+
- `Readme.md`, `docs/getting-started.md`, root `SPEC.md`, linked colocated `SPEC.md` files, and `docs/slides.md` for Honeydeck deck structure
|
|
17
|
+
- `docs/configuration.md` for Honeydeck frontmatter
|
|
18
|
+
- `docs/steps-and-reveals.md` for Reveal/RevealGroup/code steps
|
|
19
|
+
- `docs/kits.md` and `docs/kit-authoring.md` for layouts/themes/components
|
|
20
|
+
- Existing Slidev files: `slides.md`, `pages/**/*.md`, `components/**/*.vue`, `layouts/**/*.vue`, `styles/**`, `public/**`, `package.json`, `vite.config.*`, and local theme/addon packages
|
|
21
|
+
|
|
22
|
+
If Honeydeck docs are not nearby, package docs may be in `node_modules/@honeydeck/honeydeck`, or the user can use the public docs site. A migrated deck's runtime reference pages cover active theme tokens, layouts, and built-in components.
|
|
23
|
+
|
|
24
|
+
## Migration goal
|
|
25
|
+
|
|
26
|
+
Create a working Honeydeck presentation that preserves the talk's structure, content, assets, notes, and important reveals. Favor a clear first working migration over a perfect one-to-one port of every Slidev feature.
|
|
27
|
+
|
|
28
|
+
## First pass workflow
|
|
29
|
+
|
|
30
|
+
1. Inspect the repository.
|
|
31
|
+
- Detect Slidev by `slides.md`, `slidev` scripts, `@slidev/cli`, `theme:` frontmatter, `components/*.vue`, or `layouts/*.vue`.
|
|
32
|
+
- Detect Honeydeck by `deck.mdx`, `honeydeck` dependency/scripts, and `styles.css` importing Honeydeck CSS.
|
|
33
|
+
2. Confirm source and target.
|
|
34
|
+
- Default source: `slides.md`.
|
|
35
|
+
- Default Honeydeck target: current repository if it is already a Honeydeck project; otherwise ask whether to migrate in-place or into a new sibling directory.
|
|
36
|
+
3. Initialize Honeydeck if needed.
|
|
37
|
+
- For a new empty/sibling target, run `npx @honeydeck/honeydeck init --name <target-name>` unless the user asked to avoid commands.
|
|
38
|
+
- For an existing Slidev repo migrated in-place, create or merge the Honeydeck starter files manually: `deck.mdx`, `styles.css`, `package.json` scripts/dependencies, `public/`, and `components/`. Do not delete the Slidev source until the user approves.
|
|
39
|
+
- If using a temporary starter (`.honeydeck-migration-starter`), copy only the generated starter patterns you need, then remove the temp directory after asking or when it is clearly safe.
|
|
40
|
+
4. Convert Slidev Markdown to Honeydeck MDX.
|
|
41
|
+
5. Port or stub components/layouts/theme code.
|
|
42
|
+
6. Run validation: `npm install` if needed, then `npm run dev` or at least `npm run build`/`npx honeydeck build` when feasible.
|
|
43
|
+
7. Report what was migrated, what was approximated, and what still needs manual React/visual polish.
|
|
44
|
+
|
|
45
|
+
## File mapping
|
|
46
|
+
|
|
47
|
+
| Slidev | Honeydeck |
|
|
48
|
+
| --- | --- |
|
|
49
|
+
| `slides.md` | `deck.mdx` |
|
|
50
|
+
| `pages/*.md` with `src:` includes | imported `.mdx` slide groups, rendered as `<ImportedSlides />` |
|
|
51
|
+
| `public/**` | `public/**` copied unchanged; root-relative `/assets/...` paths usually keep working |
|
|
52
|
+
| `components/*.vue` | `components/*.tsx` React components |
|
|
53
|
+
| `layouts/*.vue` | React layouts plus a layout map selected with deck frontmatter `layouts: "./layouts"` |
|
|
54
|
+
| Slidev theme package | Honeydeck kit/theme/layout map, or local React layouts + CSS |
|
|
55
|
+
| `styles/style.css` or `styles/index.*` | `styles.css` imported from `deck.mdx` |
|
|
56
|
+
| `slidev`, `slidev build`, `slidev export` scripts | `honeydeck dev`, `honeydeck build`, `honeydeck pdf` scripts |
|
|
57
|
+
|
|
58
|
+
## Syntax conversion checklist
|
|
59
|
+
|
|
60
|
+
### Deck/head frontmatter
|
|
61
|
+
|
|
62
|
+
- Keep useful shared metadata: `title`, `description`, `author`, `info` content if relevant.
|
|
63
|
+
- Remove or comment Slidev-only keys unless you map them: `theme`, `addons`, `highlighter`, `lineNumbers`, `drawings`, `download`, `record`, `monaco`, `routerMode`, `selectable`, etc.
|
|
64
|
+
- Add Honeydeck settings when useful: `defaultLayout`, `layouts`, `colorMode`, `pdfSteps`, `showSlideNumbers`.
|
|
65
|
+
- If the first Slidev headmatter also configures the first slide layout/background, preserve slide-specific values in the first slide's frontmatter where Honeydeck supports them.
|
|
66
|
+
|
|
67
|
+
### Slide separators and frontmatter
|
|
68
|
+
|
|
69
|
+
- Both frameworks use `---` slide separators. Preserve exact standalone separators.
|
|
70
|
+
- Convert Slidev layout names to Honeydeck names where possible.
|
|
71
|
+
|
|
72
|
+
### Notes
|
|
73
|
+
|
|
74
|
+
Slidev uses trailing HTML comments as presenter notes. Honeydeck uses `<Notes>`:
|
|
75
|
+
|
|
76
|
+
```mdx
|
|
77
|
+
import { Notes } from '@honeydeck/honeydeck'
|
|
78
|
+
|
|
79
|
+
<Notes>
|
|
80
|
+
This is a presenter note.
|
|
81
|
+
</Notes>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
Move only trailing note comments into `<Notes>`. Keep non-note comments as comments or remove if they are implementation noise.
|
|
85
|
+
|
|
86
|
+
### Clicks and reveals
|
|
87
|
+
|
|
88
|
+
- `<v-click>...</v-click>` -> `<Reveal>...</Reveal>`
|
|
89
|
+
- `<v-clicks>...</v-clicks>` -> `<RevealGroup>...</RevealGroup>`
|
|
90
|
+
- `v-click` directives on HTML elements -> wrap the element with `<Reveal>`
|
|
91
|
+
- Slidev click positioning (`at`, `v-after`, `.hide`, `v-switch`, `$clicks`) may need custom React state, `TimelineSteps`, or simplified sequential reveals. Do not pretend these are exact if they are not.
|
|
92
|
+
- Add imports as needed:
|
|
93
|
+
|
|
94
|
+
```mdx
|
|
95
|
+
import { Reveal, RevealGroup, TimelineSteps, Notes, BrowserFrame } from '@honeydeck/honeydeck'
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Code blocks
|
|
99
|
+
|
|
100
|
+
- Keep normal fenced code blocks.
|
|
101
|
+
- Convert common Slidev stepped highlights like `{1|2|3}` to Honeydeck-supported code step metadata when possible. If unsure, preserve the fence and leave a TODO comment near the block.
|
|
102
|
+
- Slidev Monaco/live-code features need manual React components or simplified static code.
|
|
103
|
+
|
|
104
|
+
### Vue to React conversion
|
|
105
|
+
|
|
106
|
+
- Convert `.vue` single-file components to `.tsx` only when they are actually used.
|
|
107
|
+
- Use React props and children instead of Vue props/slots.
|
|
108
|
+
- Use Tailwind v4 utilities or CSS variables instead of Slidev/UnoCSS-specific shortcuts where practical.
|
|
109
|
+
- Use `lucide-react` suffixed `...Icon` imports for icons; do not use inline SVG helpers or unsuffixed lucide aliases.
|
|
110
|
+
- If conversion is large, create a simple placeholder React component first and list it in the migration report.
|
|
111
|
+
|
|
112
|
+
### Layouts and themes
|
|
113
|
+
|
|
114
|
+
- Prefer built-in Honeydeck layouts for the first migration.
|
|
115
|
+
- If the Slidev deck depends heavily on a custom theme, create local Honeydeck layouts and a layout map instead of trying to emulate Slidev internals.
|
|
116
|
+
- Put global theme imports in `styles.css`, and import `./styles.css` at the top of `deck.mdx`.
|
|
117
|
+
- Avoid leaking broad CSS into runtime UI. Scope deck-specific CSS to slide content/classes where possible.
|
|
118
|
+
|
|
119
|
+
## Package migration
|
|
120
|
+
|
|
121
|
+
For migrated projects, package scripts should look like:
|
|
122
|
+
|
|
123
|
+
```json
|
|
124
|
+
{
|
|
125
|
+
"scripts": {
|
|
126
|
+
"dev": "honeydeck dev",
|
|
127
|
+
"build": "honeydeck build",
|
|
128
|
+
"pdf": "honeydeck pdf"
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Keep unrelated project scripts. Remove Slidev dependencies only after the Honeydeck migration builds or after asking the user.
|
|
134
|
+
|
|
135
|
+
## Quality bar
|
|
136
|
+
|
|
137
|
+
A good migration result:
|
|
138
|
+
|
|
139
|
+
- Starts with `npm run dev`.
|
|
140
|
+
- Has `deck.mdx` with valid MDX and explicit imports.
|
|
141
|
+
- Preserves slide order and visible text.
|
|
142
|
+
- Preserves assets and root-relative asset paths.
|
|
143
|
+
- Converts basic notes and reveals.
|
|
144
|
+
- Clearly marks advanced Slidev features that need manual React/Honeydeck follow-up.
|
|
145
|
+
|
|
146
|
+
## Final response
|
|
147
|
+
|
|
148
|
+
Summarize:
|
|
149
|
+
|
|
150
|
+
- Files created/changed.
|
|
151
|
+
- Commands run and whether they passed.
|
|
152
|
+
- Slidev features migrated exactly vs approximated.
|
|
153
|
+
- Manual follow-ups, especially Vue component/layout/theme ports.
|
package/src/SPEC.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# Honeydeck Public Source Surface Specification
|
|
2
|
+
|
|
3
|
+
> Observable behavior for public imports and exported types spanning source subpackages.
|
|
4
|
+
|
|
5
|
+
## Public Imports & Types
|
|
6
|
+
|
|
7
|
+
### Import Patterns
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
// Core components
|
|
11
|
+
import { Reveal, RevealGroup, TimelineSteps, ListStyle, Keyboard, BrowserFrame, Notes, ColorModeImage } from '@honeydeck/honeydeck'
|
|
12
|
+
|
|
13
|
+
// Types for kit authors
|
|
14
|
+
import type { LayoutProps, LayoutMap, LayoutDemo } from '@honeydeck/honeydeck/types'
|
|
15
|
+
|
|
16
|
+
// Theme CSS
|
|
17
|
+
import '@honeydeck/honeydeck/theme.css'
|
|
18
|
+
import '@honeydeck/honeydeck/themes/base.css' // alias for honeydeck/theme.css
|
|
19
|
+
import '@honeydeck/honeydeck/themes/clean.css'
|
|
20
|
+
import '@honeydeck/honeydeck/themes/bee.css'
|
|
21
|
+
|
|
22
|
+
// Individual layouts and layout-specific slot components
|
|
23
|
+
import BlankLayout from '@honeydeck/honeydeck/layouts/Blank'
|
|
24
|
+
import { Left, Right } from '@honeydeck/honeydeck/layouts/TwoCol'
|
|
25
|
+
import { ColorModeImage as LayoutColorModeImage } from '@honeydeck/honeydeck/layouts/ColorModeImage'
|
|
26
|
+
|
|
27
|
+
// Named clean layout map, layout imports, and slot components
|
|
28
|
+
import cleanLayouts from '@honeydeck/honeydeck/layouts/clean'
|
|
29
|
+
import CleanBlankLayout from '@honeydeck/honeydeck/layouts/clean/Blank'
|
|
30
|
+
import { Left as CleanLeft, Right as CleanRight } from '@honeydeck/honeydeck/layouts/clean/TwoCol'
|
|
31
|
+
|
|
32
|
+
// Bee layout map, layout imports, and slot components
|
|
33
|
+
import beeLayouts from '@honeydeck/honeydeck/layouts/bee'
|
|
34
|
+
import BeeBlankLayout from '@honeydeck/honeydeck/layouts/bee/Blank'
|
|
35
|
+
import { Left as BeeLeft, Right as BeeRight } from '@honeydeck/honeydeck/layouts/bee/TwoCol'
|
|
36
|
+
|
|
37
|
+
// Built-in placeholder image URLs for custom layouts
|
|
38
|
+
import {
|
|
39
|
+
imagePlaceholder,
|
|
40
|
+
imagePlaceholderDark,
|
|
41
|
+
verticalImagePlaceholder,
|
|
42
|
+
verticalImagePlaceholderDark,
|
|
43
|
+
} from '@honeydeck/honeydeck/layouts/placeholders'
|
|
44
|
+
|
|
45
|
+
// Public component barrel
|
|
46
|
+
import {
|
|
47
|
+
Reveal as BarrelReveal,
|
|
48
|
+
RevealGroup as BarrelRevealGroup,
|
|
49
|
+
TimelineSteps as BarrelTimelineSteps,
|
|
50
|
+
ListStyle as BarrelListStyle,
|
|
51
|
+
Keyboard as BarrelKeyboard,
|
|
52
|
+
BrowserFrame as BarrelBrowserFrame,
|
|
53
|
+
Notes as BarrelNotes,
|
|
54
|
+
ColorModeCycleButton,
|
|
55
|
+
} from '@honeydeck/honeydeck/components'
|
|
56
|
+
import type { ColorMode } from '@honeydeck/honeydeck/components'
|
|
57
|
+
|
|
58
|
+
// Reserved injected component (generated by Honeydeck remark plugins; not intended for manual slide author use)
|
|
59
|
+
import { HoneydeckCodeBlock } from '@honeydeck/honeydeck/components/code-block'
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Type Definitions
|
|
63
|
+
|
|
64
|
+
```ts
|
|
65
|
+
import type { ComponentType, ReactNode } from 'react'
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Props passed to layout components.
|
|
69
|
+
* Generic parameter F types the accepted frontmatter fields.
|
|
70
|
+
*/
|
|
71
|
+
type LayoutProps<F extends Record<string, unknown> = Record<string, unknown>> = {
|
|
72
|
+
title: ReactNode | null // currently a plain text string or null
|
|
73
|
+
children: ReactNode
|
|
74
|
+
rawChildren: ReactNode // currently same compiled content as children
|
|
75
|
+
frontmatter: F
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* A map of layout names to layout components.
|
|
80
|
+
*/
|
|
81
|
+
type LayoutMap = Record<string, ComponentType<LayoutProps<any>>>
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* Demo data for the docs reference page.
|
|
85
|
+
*/
|
|
86
|
+
type LayoutDemo<F extends Record<string, unknown> = Record<string, unknown>> = {
|
|
87
|
+
mdx: string
|
|
88
|
+
}
|
|
89
|
+
```
|
package/src/assets.d.ts
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// Type declarations for static image assets handled by Vite bundler
|
|
2
|
+
declare module "*.webp" {
|
|
3
|
+
const src: string;
|
|
4
|
+
export default src;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
declare module "*.png" {
|
|
8
|
+
const src: string;
|
|
9
|
+
export default src;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
declare module "*.jpg" {
|
|
13
|
+
const src: string;
|
|
14
|
+
export default src;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
declare module "*.jpeg" {
|
|
18
|
+
const src: string;
|
|
19
|
+
export default src;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
declare module "*.svg" {
|
|
23
|
+
const src: string;
|
|
24
|
+
export default src;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
declare module "*.gif" {
|
|
28
|
+
const src: string;
|
|
29
|
+
export default src;
|
|
30
|
+
}
|
package/src/cli/SPEC.md
ADDED
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
# Honeydeck CLI Specification
|
|
2
|
+
|
|
3
|
+
> Observable behavior for CLI commands, build command, and PDF export.
|
|
4
|
+
|
|
5
|
+
## CLI Commands
|
|
6
|
+
|
|
7
|
+
### `honeydeck`
|
|
8
|
+
|
|
9
|
+
Shows help text listing available commands and usage.
|
|
10
|
+
|
|
11
|
+
Subcommand help:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
honeydeck help init
|
|
15
|
+
honeydeck dev --help
|
|
16
|
+
honeydeck pdf -h
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Behavior:
|
|
20
|
+
|
|
21
|
+
- `honeydeck`, `honeydeck --help`, `honeydeck -h`, and `honeydeck help` show top-level help
|
|
22
|
+
- `honeydeck help <command>`, `honeydeck <command> --help`, and `honeydeck <command> -h` show a command-specific help page owned by that subcommand for `init`, `skill`, `dev`, `build`, or `pdf`
|
|
23
|
+
- Subcommand help exits successfully without starting the requested command
|
|
24
|
+
- Unknown help targets show top-level help and exit with an error
|
|
25
|
+
|
|
26
|
+
### `honeydeck init`
|
|
27
|
+
|
|
28
|
+
Creates a new Honeydeck project interactively.
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
honeydeck init # prompts for deck name and optional agent skill installer
|
|
32
|
+
honeydeck init --name awesome-talk # skip deck name prompt
|
|
33
|
+
honeydeck init --skip-install # write files without installing dependencies
|
|
34
|
+
honeydeck init --skip-skill # do not prompt/open the Honeydeck agent skills installer
|
|
35
|
+
honeydeck init --install-skill # open the Honeydeck agent skills installer without prompting first
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Behavior:
|
|
39
|
+
|
|
40
|
+
- Prompts for project name using clack (skippable with `--name` flag)
|
|
41
|
+
- Validates the project name and creates a directory with that name
|
|
42
|
+
- Prompts before continuing if the target directory already exists
|
|
43
|
+
- Generates starter files, including `deck.mdx`, `styles.css`, `.gitignore`, `package.json`, `public/`, and `components/SparkleButton.tsx`
|
|
44
|
+
- Renders `deck.mdx` and `styles.css` from real template files that can also run as a development demo
|
|
45
|
+
- Installs dependencies with npm unless `--skip-install` is used
|
|
46
|
+
- Asks whether to open the Honeydeck agent skills installer unless `--skip-skill` or `--install-skill` is used, and makes clear that accepting runs `npx skills add`
|
|
47
|
+
- Cancelling any `honeydeck init` prompt or interrupting the spawned skills installer aborts the init flow instead of continuing
|
|
48
|
+
- If cancellation or interruption happens after `honeydeck init` created a new project directory, Honeydeck cleans up that generated project directory before exiting; it never deletes a directory that existed before init started
|
|
49
|
+
- Opens the same interactive `npx skills add <honeydeck-package-source> --copy` flow as `honeydeck skill`, so the `skills` CLI owns skill selection, scope selection, and agent selection
|
|
50
|
+
- `--install-skill` opens the Honeydeck agent skills installer without the preceding Honeydeck confirmation prompt
|
|
51
|
+
- The success outro lists `cd <project>` and `npm run dev` as next steps; it does not include `npm install` because init already attempted dependency installation unless `--skip-install` was used
|
|
52
|
+
- Terminal output is clean, guided, and tasteful with emojis
|
|
53
|
+
|
|
54
|
+
### `honeydeck skill`
|
|
55
|
+
|
|
56
|
+
Installs Honeydeck agent skills into the current project.
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
honeydeck skill
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Behavior:
|
|
63
|
+
|
|
64
|
+
- Starts the normal interactive `npx skills add` flow from the local Honeydeck package source and tells users this before launching it
|
|
65
|
+
- Lets the `skills` CLI prompt for bundled skill selection, scope (project/global), and agent selection
|
|
66
|
+
- Uses copy mode so generated projects do not depend on a symlink to the installed Honeydeck package
|
|
67
|
+
- Prints a clear failure message and a manual `npx skills add <honeydeck-repo-url> --copy` fallback if installation fails
|
|
68
|
+
|
|
69
|
+
### `honeydeck dev`
|
|
70
|
+
|
|
71
|
+
Starts the development server.
|
|
72
|
+
|
|
73
|
+
```bash
|
|
74
|
+
honeydeck dev # default port 4200
|
|
75
|
+
honeydeck dev --port 8080 # custom port
|
|
76
|
+
honeydeck dev -p 8080 # custom port alias
|
|
77
|
+
honeydeck dev --open # auto-open browser
|
|
78
|
+
honeydeck dev -o # auto-open alias
|
|
79
|
+
honeydeck dev --deck talk.mdx # use a different deck entry file
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
Behavior:
|
|
83
|
+
- Starts internal Vite dev server
|
|
84
|
+
- Binds the dev server to all local network interfaces so other devices on the same LAN can open the printed Network URL
|
|
85
|
+
- HMR enabled for MDX/components/styles
|
|
86
|
+
- Does not auto-open browser unless `--open` flag is used
|
|
87
|
+
|
|
88
|
+
Terminal output:
|
|
89
|
+
|
|
90
|
+
```txt
|
|
91
|
+
|
|
92
|
+
โจ Honeydeck v0.1.0
|
|
93
|
+
|
|
94
|
+
๐ Local: http://localhost:4200/
|
|
95
|
+
๐ Network: http://192.168.1.42:4200/
|
|
96
|
+
๐จ Theme: http://localhost:4200/#/theme
|
|
97
|
+
|
|
98
|
+
๐ Watching for changes...
|
|
99
|
+
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### `honeydeck build`
|
|
103
|
+
|
|
104
|
+
Builds a static SPA.
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
honeydeck build
|
|
108
|
+
honeydeck build --deck talk.mdx
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Output structure (Vite default asset names):
|
|
112
|
+
|
|
113
|
+
```txt
|
|
114
|
+
dist/
|
|
115
|
+
index.html
|
|
116
|
+
assets/
|
|
117
|
+
index-[hash].js
|
|
118
|
+
index-[hash].css
|
|
119
|
+
(contents of project public/ copied to dist root)
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Deployable to any static host without server-side routing (hash-based URLs).
|
|
123
|
+
|
|
124
|
+
Terminal output:
|
|
125
|
+
|
|
126
|
+
```txt
|
|
127
|
+
|
|
128
|
+
โจ Honeydeck v0.1.0
|
|
129
|
+
|
|
130
|
+
๐ฆ Build complete!
|
|
131
|
+
๐ Output: dist/
|
|
132
|
+
๐ 12 slides
|
|
133
|
+
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### `honeydeck pdf`
|
|
137
|
+
|
|
138
|
+
Exports the deck to PDF.
|
|
139
|
+
|
|
140
|
+
```bash
|
|
141
|
+
honeydeck pdf # output: deck.pdf in current working directory
|
|
142
|
+
honeydeck pdf -o my-talk.pdf # custom filename
|
|
143
|
+
honeydeck pdf --output my-talk.pdf # custom filename alias
|
|
144
|
+
honeydeck pdf --steps final # one page per slide at final state (default)
|
|
145
|
+
honeydeck pdf --steps all # include all steps as pages
|
|
146
|
+
honeydeck pdf --mode dark # force dark mode
|
|
147
|
+
honeydeck pdf --mode light # force light mode
|
|
148
|
+
honeydeck pdf --parallel 6 # capture up to 6 pages at a time
|
|
149
|
+
honeydeck pdf --deck talk.mdx # use a different deck entry file
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
Behavior:
|
|
153
|
+
|
|
154
|
+
- Does not pollute `dist/`
|
|
155
|
+
- Builds an ordered capture plan from the deck and renders one rasterized page per captured state
|
|
156
|
+
- May capture planned pages with bounded parallelism, but final PDF page order must follow the capture plan regardless of screenshot completion order
|
|
157
|
+
- CLI flags override frontmatter (`--mode` over `pdfColorMode`, `--steps` over `pdfSteps`)
|
|
158
|
+
- Effective PDF color mode is `--mode` > `pdfColorMode` > pinned `colorMode` (`light`/`dark`) > `light`
|
|
159
|
+
- Default output: `deck.pdf` resolved relative to the current working directory
|
|
160
|
+
- Default capture parallelism: detected CPU count, capped at `16`; `--parallel` accepts integers from `1` to `16`
|
|
161
|
+
|
|
162
|
+
Terminal output:
|
|
163
|
+
|
|
164
|
+
```txt
|
|
165
|
+
|
|
166
|
+
โจ Honeydeck v0.1.0
|
|
167
|
+
|
|
168
|
+
๐จ๏ธ Exporting PDF...
|
|
169
|
+
๐งต Capturing 12 pages with N workers...
|
|
170
|
+
๐ Rendering page 1/12 (slide 1/12)...
|
|
171
|
+
๐ Rendering page 2/12 (slide 2/12)...
|
|
172
|
+
...
|
|
173
|
+
โ
Done! deck.pdf (12 pages)
|
|
174
|
+
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## PDF Export
|
|
182
|
+
|
|
183
|
+
### Output Format
|
|
184
|
+
|
|
185
|
+
PDF export preserves browser rendering fidelity by exporting rasterized slide pages. PDF text is not selectable/searchable.
|
|
186
|
+
|
|
187
|
+
### Behavior
|
|
188
|
+
|
|
189
|
+
- Does not require a pre-existing production build and does not write to the normal `dist/` output
|
|
190
|
+
- One rendered slide/state per PDF page
|
|
191
|
+
- PDF page dimensions follow deck-level `aspectRatio`: width is fixed at 1920 and height is derived from the ratio (`16:9` โ 1920ร1080, `4:3` โ 1920ร1440, etc.). Invalid or missing ratios fall back to 1920ร1080.
|
|
192
|
+
- Default output: `deck.pdf` in the current working directory
|
|
193
|
+
- Default steps: final state only
|
|
194
|
+
|
|
195
|
+
### Color Mode Resolution
|
|
196
|
+
|
|
197
|
+
PDF color mode resolves in this order:
|
|
198
|
+
|
|
199
|
+
1. CLI `--mode` (`light` or `dark`)
|
|
200
|
+
2. `pdfColorMode` frontmatter
|
|
201
|
+
3. Deck-level `colorMode` when pinned to `light` or `dark` (not `system`)
|
|
202
|
+
4. `light` (ultimate default)
|
|
203
|
+
|
|
204
|
+
### Settings
|
|
205
|
+
|
|
206
|
+
| Setting | CLI Flag | Frontmatter | Default |
|
|
207
|
+
|---------|----------|-------------|---------|
|
|
208
|
+
| Steps | `--steps final` / `--steps all` | `pdfSteps: final` / `pdfSteps: all` | `final` |
|
|
209
|
+
| Color mode | `--mode dark` / `--mode light` | `pdfColorMode: dark` / `pdfColorMode: light` | unset; falls back to pinned `colorMode`, then `light` |
|
|
210
|
+
| Output | `-o file.pdf` / `--output file.pdf` | โ | `deck.pdf` |
|
|
211
|
+
| Deck entry | `--deck file.mdx` | โ | `deck.mdx` in current directory |
|
|
212
|
+
| Capture parallelism | `--parallel 1` through `--parallel 16` | โ | CPU count, capped at `16` |
|
|
213
|
+
|
|
214
|
+
### Step Handling
|
|
215
|
+
|
|
216
|
+
- `pdfSteps: final` โ each slide appears once, all reveals visible, code at final highlight
|
|
217
|
+
- `pdfSteps: all` โ step `0` through final step state are separate PDF pages
|
|
218
|
+
- Capture order is slide order first; in `pdfSteps: all`, step states ascend within each slide. Parallel capture must not change this final PDF page order.
|
|
219
|
+
- During `pdfSteps: final`, `useTimeline()` and `useTimelineSteps()` expose
|
|
220
|
+
`isPdfFinalRender: true` so custom step-driven components can render an
|
|
221
|
+
all-open/all-visible PDF state. During `pdfSteps: all`, this flag remains
|
|
222
|
+
false because components are rendered at their normal step states.
|
|
223
|
+
|
|
224
|
+
### Interactive Components in PDF
|
|
225
|
+
|
|
226
|
+
Interactive components (like `SparkleButton`) render their current timeline-driven state. Component mount JavaScript still runs, but no user interactions are simulated during PDF capture.
|
|
227
|
+
|
|
228
|
+
### Notes in PDF
|
|
229
|
+
|
|
230
|
+
`<Notes>` content is excluded from normal PDF output.
|
package/src/cli/args.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import packageJson from "../../package.json" with { type: "json" };
|
|
2
|
+
|
|
3
|
+
export function formatTopLevelBanner(): string {
|
|
4
|
+
return ` โจ honeydeck v${packageJson.version} โ MDX presentation toolkit`;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export function formatCommandBanner(): string {
|
|
8
|
+
return ` โจ Honeydeck v${packageJson.version}`;
|
|
9
|
+
}
|