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.
- package/README.md +3 -3
- package/dist/{client-Bjd6VcGQ.mjs → client-kUEiRbtp.mjs} +25 -8
- package/dist/client.mjs +2 -2
- package/dist/{editor-DmxNPK7K.mjs → editor-9IcfELjG.mjs} +108 -16
- package/dist/editor-vue.d.mts +21 -5
- package/dist/editor-vue.mjs +40 -9
- package/dist/{editor-KD97dL_1.d.mts → editor-yoVL7Ajq.d.mts} +27 -3
- package/dist/editor.d.mts +2 -2
- package/dist/editor.mjs +1 -1
- package/dist/html.d.mts +1 -1
- package/dist/html.mjs +7 -3
- package/dist/{index-Dbqxt4Qg.d.mts → index-DVGSDzBS.d.mts} +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.mjs +1 -1
- package/dist/react.d.mts +1 -1
- package/dist/react.mjs +2 -2
- package/dist/skills/before-after-evidence/SKILL.md +11 -13
- package/dist/skills/before-after-evidence/references/blocks.md +1 -1
- package/dist/skills/comark-ui/SKILL.md +13 -9
- package/dist/skills/comark-ui/references/annotate.md +1 -1
- package/dist/skills/comark-ui/references/badge.md +1 -1
- package/dist/skills/comark-ui/references/cards.md +2 -1
- package/dist/skills/comark-ui/references/code-notes.md +1 -1
- package/dist/skills/comark-ui/references/code.md +3 -3
- package/dist/skills/comark-ui/references/comments.md +3 -3
- package/dist/skills/comark-ui/references/embed.md +3 -2
- package/dist/skills/comark-ui/references/keys.md +1 -1
- package/dist/skills/comark-ui/references/links.md +1 -1
- package/dist/skills/comark-ui/references/lint.md +21 -12
- package/dist/skills/comark-ui/references/magic-move.md +1 -1
- package/dist/skills/comark-ui/references/media.md +2 -2
- package/dist/skills/comark-ui/references/metrics.md +1 -0
- package/dist/skills/comark-ui/references/outline.md +2 -2
- package/dist/skills/comark-ui/references/properties.md +1 -1
- package/dist/skills/comark-ui/references/quiz.md +15 -3
- package/dist/skills/comark-ui/references/reading-time.md +1 -1
- package/dist/skills/comark-ui/references/remark-to-comark.md +29 -0
- package/dist/skills/comark-ui/references/steps.md +1 -1
- package/dist/skills/comark-ui/references/table.md +1 -0
- package/dist/skills/comark-ui/references/tabs.md +2 -2
- package/dist/skills/comark-ui/references/tests.md +1 -1
- package/dist/skills/comark-ui/references/ui.md +7 -6
- package/dist/skills/teach-lesson/SKILL.md +4 -4
- package/dist/skills/teach-lesson/references/blocks.md +6 -6
- package/dist/skills.mjs +34 -30
- package/dist/text-D8j9clg3.mjs +19 -0
- package/dist/{typeset-css-5aJ7cSmh.mjs → typeset-css-blSNpFNK.mjs} +2 -2
- package/dist/vue.d.mts +1 -1
- package/dist/vue.mjs +3 -3
- 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.
|
|
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
|
|
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
|
-
-
|
|
26
|
-
- Media sizing reads only data URIs by default. `zoom: { size: true }` and `media: { size: true }` also fetch remote files while parsing
|
|
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
|
|
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:
|
|
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
|
|
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
|
|
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
|
|
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.
|
|
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.
|
|
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
|
|
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
|
|
75
|
-
- Options are shuffled the same way on every render
|
|
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.
|