comark-ui 0.7.6 → 0.8.1

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.
Files changed (50) hide show
  1. package/README.md +3 -3
  2. package/dist/{client-Bjd6VcGQ.mjs → client-kUEiRbtp.mjs} +25 -8
  3. package/dist/client.mjs +2 -2
  4. package/dist/{editor-DmxNPK7K.mjs → editor-9IcfELjG.mjs} +108 -16
  5. package/dist/editor-vue.d.mts +21 -5
  6. package/dist/editor-vue.mjs +40 -9
  7. package/dist/{editor-KD97dL_1.d.mts → editor-yoVL7Ajq.d.mts} +27 -3
  8. package/dist/editor.d.mts +2 -2
  9. package/dist/editor.mjs +1 -1
  10. package/dist/html.d.mts +1 -1
  11. package/dist/html.mjs +7 -3
  12. package/dist/{index-Dbqxt4Qg.d.mts → index-DVGSDzBS.d.mts} +1 -1
  13. package/dist/index.d.mts +1 -1
  14. package/dist/index.mjs +1 -1
  15. package/dist/react.d.mts +1 -1
  16. package/dist/react.mjs +2 -2
  17. package/dist/skills/before-after-evidence/SKILL.md +11 -13
  18. package/dist/skills/before-after-evidence/references/blocks.md +1 -1
  19. package/dist/skills/comark-ui/SKILL.md +13 -9
  20. package/dist/skills/comark-ui/references/annotate.md +1 -1
  21. package/dist/skills/comark-ui/references/badge.md +1 -1
  22. package/dist/skills/comark-ui/references/cards.md +2 -1
  23. package/dist/skills/comark-ui/references/code-notes.md +1 -1
  24. package/dist/skills/comark-ui/references/code.md +3 -3
  25. package/dist/skills/comark-ui/references/comments.md +3 -3
  26. package/dist/skills/comark-ui/references/embed.md +3 -2
  27. package/dist/skills/comark-ui/references/keys.md +1 -1
  28. package/dist/skills/comark-ui/references/links.md +1 -1
  29. package/dist/skills/comark-ui/references/lint.md +21 -12
  30. package/dist/skills/comark-ui/references/magic-move.md +1 -1
  31. package/dist/skills/comark-ui/references/media.md +2 -2
  32. package/dist/skills/comark-ui/references/metrics.md +1 -0
  33. package/dist/skills/comark-ui/references/outline.md +2 -2
  34. package/dist/skills/comark-ui/references/properties.md +1 -1
  35. package/dist/skills/comark-ui/references/quiz.md +15 -3
  36. package/dist/skills/comark-ui/references/reading-time.md +1 -1
  37. package/dist/skills/comark-ui/references/remark-to-comark.md +29 -0
  38. package/dist/skills/comark-ui/references/steps.md +1 -1
  39. package/dist/skills/comark-ui/references/table.md +1 -0
  40. package/dist/skills/comark-ui/references/tabs.md +2 -2
  41. package/dist/skills/comark-ui/references/tests.md +1 -1
  42. package/dist/skills/comark-ui/references/ui.md +7 -6
  43. package/dist/skills/teach-lesson/SKILL.md +4 -4
  44. package/dist/skills/teach-lesson/references/blocks.md +6 -6
  45. package/dist/skills.mjs +34 -30
  46. package/dist/text-D8j9clg3.mjs +19 -0
  47. package/dist/{typeset-css-5aJ7cSmh.mjs → typeset-css-blSNpFNK.mjs} +2 -2
  48. package/dist/vue.d.mts +1 -1
  49. package/dist/vue.mjs +3 -3
  50. package/package.json +45 -45
@@ -1,10 +1,10 @@
1
1
  # Every plugin in one install
2
2
 
3
- comark-ui registers every comark-ui package for one renderer, in the order they need, with one icon resolver shared by `:icon`, cards, details, file trees, tabs, and code actions. Install in SKILL.md shows its basic use. This page covers its options, what it turns on, its other renderers, and how the linter uses it.
3
+ comark-ui registers every comark-ui package for one renderer, in the order they need, with one icon resolver shared by `:icon`, cards, details, file trees, tabs, and code actions. SKILL.md's Install section shows the basic use. This page covers the options, what the preset turns on, the other renderers, and how the linter uses it.
4
4
 
5
5
  ## Options
6
6
 
7
- `comarkUi(options)` returns `{ plugins, components }`. Each key is a package's name without `comark-`, in camelCase, such as `fileTree`, `codeNotes`, or `readingTime`. `false` turns a plugin off along with its components, and an object turns it on with those options. `true` turns on `include` and leaves the others as they are:
7
+ `comarkUi(options)` returns `{ plugins, components }`. Each key is a package's name without `comark-`, in camelCase, such as `fileTree`, `codeNotes`, or `readingTime`. The exceptions are `math` for comark-mathml, `outline` for comark-outline, and `mermaid` and `typeset`, which are not packages. `false` turns a plugin off along with its components, and an object turns it on with those options. `true` turns on `include` and leaves the others as they are:
8
8
 
9
9
  ```ts
10
10
  comarkUi({
@@ -16,17 +16,18 @@ comarkUi({
16
16
  });
17
17
  ```
18
18
 
19
- `github` takes its three plugins by name, `callouts`, `references`, and `html`, and `links` takes `external` and `anchors`. Each package's reference lists its own options. The order stays fixed whatever you pass. `include` runs first, so the others read what it pastes, and `code` and `codeNotes` run last, after every plugin that writes code blocks.
19
+ `github` takes its three plugins by name, `callouts`, `references`, and `html`, and `links` takes `external` and `anchors`. Each package's reference lists its own options. The order stays fixed whatever you pass: `include` runs first, so the others read what it pastes, and `code` and `codeNotes` run late, after every plugin that writes code blocks.
20
20
 
21
21
  ## What it turns on
22
22
 
23
23
  - Every plugin except `include`, which reads files from disk. `include: { root, base }` turns it on, or `{ read }` in a browser or an edge runtime. `include: true` reads under the working directory.
24
24
  - `cast`, `table`, and `tests` get a reader that finds no file. Inline casts, CSV fences, and pasted JUnit reports render, and a `src` file doesn't load until you pass `{ root }` or `{ read }`. Any other options object replaces that reader too, so the plugin reads under the working directory.
25
- - By default, three plugins use the network while parsing: `chips` downloads favicons and avatars, `icon` fetches icon sets from the Iconify API, and `diagrams` sends each diagram's source to `https://kroki.io`. In a browser, pass `chips: { download: false }`, since a browser may not download another site's images. To parse offline, also pass `icon: { fetch: false }` with your icon sets in `collections`, and `diagrams: { draw: false }`. To keep diagram sources private, pass your own Kroki `server`.
26
- - Media sizing reads only data URIs by default. `zoom: { size: true }` and `media: { size: true }` also fetch remote files while parsing; `annotate: { size: true }` does so at HTML render time. Enable these only for trusted documents, since requests follow redirects and can reach private networks. `{ size: false }` disables measurement for each plugin; authored dimensions and screenshot viewports still work.
25
+ - Three plugins use the network while parsing by default: `chips` downloads favicons and avatars, `icon` fetches icon sets from the Iconify API, and `diagrams` sends each diagram's source to `https://kroki.io`. In a browser, pass `chips: { download: false }`, because a browser may not download another site's images. To parse offline, also pass `icon: { fetch: false }` with your icon sets in `collections`, and `diagrams: { draw: false }`. To keep diagram sources private, pass your own Kroki `server`.
26
+ - Media sizing reads only data URIs by default. `zoom: { size: true }` and `media: { size: true }` also fetch remote files while parsing, and `annotate: { size: true }` does so at HTML render time. Enable these only for trusted documents, because the requests follow redirects and can reach private networks. `{ size: false }` turns measurement off for that plugin; authored dimensions and screenshot viewports still work.
27
27
  - `icon`'s options apply to every icon the preset draws, in cards, details, file trees, tabs, and code actions too.
28
+ - `mermaid` draws `mermaid` fences with comark-pele, on the server and offline. In the HTML entry the diagram zooms with comark-zoom unless `zoom` is `false`. `mermaid: false` turns it off.
28
29
  - comark-critic has no component to add its styles, so put `criticCss`, which every entry exports, in the page.
29
- - The text around the blocks is styled by default, scoped to the element the document renders into, on the same `--comark-*` tokens. Pass `typeset: false` when the site already styles Markdown, such as with Tailwind Typography's `prose`.
30
+ - The preset styles the text around the blocks, scoped to the element the document renders into, on the same `--comark-*` tokens. Pass `typeset: false` when the site already styles Markdown, such as with Tailwind Typography's `prose`.
30
31
 
31
32
  ## Renderers
32
33
 
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: teach-lesson
3
- description: Write a short lesson on one concept, with simplified English, a worked example, and an application question. Use for a lesson, a self-check, or onboarding on one idea.
3
+ description: Writes a short lesson on one concept in simplified English, with a worked example and a question the reader answers. Use when someone asks to learn or understand one concept, wants a tutorial or self-check they can test themselves on, or needs onboarding on one idea.
4
4
  license: MIT
5
5
  ---
6
6
 
@@ -58,7 +58,7 @@ Use [`::question`](references/blocks.md#the-check-question) to test the outcome.
58
58
 
59
59
  - Make each wrong option a real misconception, and give it a `>` rationale that says why it's tempting and why it's wrong.
60
60
  - Keep the options parallel, one idea each and close in length, so their shape gives no clue to the answer.
61
- - Add `#explain` for the one thing the reader should take away whatever they picked.
61
+ - Add `#explain` for the one thing the reader should take away. It opens after the right answer or Show answer, so it must resolve every misconception the wrong options carry.
62
62
  - For a fact worth remembering a week later, optionally add a [`::recall` card](references/blocks.md#the-fact-to-keep-recall).
63
63
 
64
64
  Done when the question tests the stated outcome with one changed input, every option has a rationale, and the shared explanation resolves each misconception.
@@ -73,6 +73,6 @@ Done when the question tests the stated outcome with one changed input, every op
73
73
 
74
74
  These commands use the [global Vite+ CLI](https://viteplus.dev/guide/global-cli). Without it, `pnpm dlx` takes the same arguments.
75
75
 
76
- 2. Open the rendered page where it will be read. Select each option and check its rationale and the shared explanation.
76
+ 2. Open the rendered page where it will be read. Select each option and check its rationale. Pick the right option, or press Show answer, and check the shared explanation.
77
77
 
78
- Done when lint reports no problems, every worked step and diagram is visible, and each option reveals the expected result and rationale. Confirm that the correct answer follows from the example and that the lesson fits a five-minute read.
78
+ Done when lint reports no problems, every worked step and diagram is visible, and each option reveals its rationale. Confirm that the correct answer follows from the example and that the lesson fits a five-minute read.
@@ -19,11 +19,11 @@ If-Match: "v7"
19
19
  ::
20
20
  ````
21
21
 
22
- Each `###` heading starts a step that holds everything up to the next one, code blocks included. Put any introduction above the block, since a paragraph before the first heading is reported. For steps of one line each, a numbered list inside `::steps` works too.
22
+ Each `###` heading starts a step that holds everything up to the next one, code blocks included. Put any introduction above the block; content before the first heading renders above the steps and is reported. For steps of one line each, a numbered list inside `::steps` works too.
23
23
 
24
24
  ## Build a diagram across steps
25
25
 
26
- Use a `mermaid` fence when a diagram helps explain interacting parts. Redraw the previous diagram and add one part or relationship at each move. Keep existing labels and participant order consistent.
26
+ Use a `mermaid` fence when a diagram helps explain interacting parts. At each move, redraw the previous diagram with one more part or relationship, and keep its labels and participant order.
27
27
 
28
28
  Use numbered Markdown headings for the worked example. Mermaid fences currently disappear inside `::steps`, so place them directly under these headings:
29
29
 
@@ -48,7 +48,7 @@ sequenceDiagram
48
48
  ```
49
49
  ````
50
50
 
51
- These paths and version labels are illustrative. Use `sequenceDiagram` for messages or `flowchart LR` for a flow. comark-ui renders Mermaid as SVG, so the reader needs no diagram script.
51
+ These paths and version labels are illustrative. Use `sequenceDiagram` for messages or `flowchart LR` for a flow.
52
52
 
53
53
  ## The check: `::question`
54
54
 
@@ -69,10 +69,10 @@ What does the server compare the label against?
69
69
  ::
70
70
  ```
71
71
 
72
- - Mark the right option `[x]`. One `[x]` makes radio buttons; add `multiple` to the block for checkboxes with several right options.
72
+ - Mark each right option `[x]`. One `[x]` makes radio buttons and several make checkboxes. Add `multiple` to show checkboxes even with one right option.
73
73
  - The `>` quote under an option is its rationale, shown once the reader answers.
74
- - `#hint` is optional, shown on request; `#explain` shows after any answer.
75
- - Options are shuffled the same way on every render; write `shuffle="false"` only when their order means something, such as numbers in order.
74
+ - `#hint` is optional and opens on request. `#explain` opens after the right answer or Show answer, not after a wrong pick.
75
+ - Options are shuffled the same way on every render. Write `shuffle="false"` only when their order means something, such as numbers in order.
76
76
  - Give the block an `#id` so a host can store the answer. Without one, the id comes from the question's text and changes when you edit it.
77
77
 
78
78
  Without its script, the question and an answer disclosure still render as plain HTML.