@jaamd/astro 0.0.0-stage → 1.0.0-rc.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/LICENSE +21 -0
- package/README.md +63 -2
- package/dist/default.css +1 -0
- package/dist/shiki-dual.css +1 -0
- package/dist/styles.css +1 -0
- package/dist/themes/catppuccin/index.css +1 -0
- package/dist/themes/dracula/dark.css +1 -0
- package/dist/themes/dracula/index.css +1 -0
- package/dist/themes/gruvbox/index.css +1 -0
- package/dist/themes/nord/dark.css +1 -0
- package/dist/themes/nord/index.css +1 -0
- package/dist/themes/one-dark/dark.css +1 -0
- package/dist/themes/one-dark/index.css +1 -0
- package/dist/themes/rose-pine/index.css +1 -0
- package/dist/themes/rose-pine-moon/index.css +1 -0
- package/dist/themes/tokyo-night/dark.css +1 -0
- package/dist/themes/tokyo-night/index.css +1 -0
- package/docs/00-overview.md +33 -0
- package/docs/01-getting-started/01-installation.md +109 -0
- package/docs/01-getting-started/02-options.md +81 -0
- package/docs/02-markdown.md +156 -0
- package/docs/03-usage/01-markdown-content.md +45 -0
- package/docs/03-usage/02-client.md +70 -0
- package/docs/04-styling/01-variables.md +87 -0
- package/docs/04-styling/02-themes.md +90 -0
- package/docs/04-styling/03-markup.md +29 -0
- package/docs/05-advanced/01-manual-setup.md +72 -0
- package/docs/05-advanced/02-frontmatter.md +20 -0
- package/docs/05-advanced/03-other-frameworks.md +111 -0
- package/docs/06-upgrading.md +156 -0
- package/index.ts +6 -0
- package/package.json +73 -3
- package/src/astro-satteri.ts +10 -0
- package/src/client.ts +1 -0
- package/src/components/MarkdownContent.astro +21 -0
- package/src/components/MarkdownContent.astro.d.ts +12 -0
- package/src/frontmatter.ts +27 -0
- package/src/integration.ts +96 -0
- package/src/processors.ts +135 -0
- package/src/rehype-heading-ids.js +5 -0
- package/src/shiki.ts +29 -0
- package/src/themes.ts +1 -0
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: The --jaamd-* CSS custom properties that drive every JAAMD style.
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Variables
|
|
6
|
+
|
|
7
|
+
All styles are driven by CSS custom properties prefixed with `--jaamd-`. The
|
|
8
|
+
default set, `@jaamd/astro/default.css`, is injected automatically.
|
|
9
|
+
|
|
10
|
+
## Colours
|
|
11
|
+
|
|
12
|
+
Four seeds set most of the palette:
|
|
13
|
+
|
|
14
|
+
```css
|
|
15
|
+
:root {
|
|
16
|
+
--jaamd-bg: #ffffff;
|
|
17
|
+
--jaamd-color-fg: #3a3a3a;
|
|
18
|
+
--jaamd-color-fg-bright: #1a1a1a;
|
|
19
|
+
--jaamd-color-primary: #3b5bdb;
|
|
20
|
+
}
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Surfaces, borders and the table-of-contents card are derived from them with
|
|
24
|
+
`color-mix()`, supported in Chrome and Edge 111+, Safari 16.2+ and Firefox
|
|
25
|
+
113+. Override any variable on `:root` in your own stylesheet; for example:
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
:root {
|
|
29
|
+
--jaamd-color-primary-light: #818cf8;
|
|
30
|
+
--jaamd-font-mono: ui-monospace, monospace;
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Defaults live in `@layer jaamd.defaults`, so an unlayered `:root` block always
|
|
35
|
+
wins regardless of import order.
|
|
36
|
+
|
|
37
|
+
See [`variables.css`](https://github.com/jaamd/jaamd/blob/main/packages/core/src/styles/variables.css)
|
|
38
|
+
for all 60 variables and their default values.
|
|
39
|
+
|
|
40
|
+
## Font sizes
|
|
41
|
+
|
|
42
|
+
`--jaamd-font-size` is the one knob for the whole document. Every other size is
|
|
43
|
+
derived from it, so moving it moves the entire scale in proportion:
|
|
44
|
+
|
|
45
|
+
```css
|
|
46
|
+
:root {
|
|
47
|
+
--jaamd-font-size: 1rem; /* headings, code, tables… all follow */
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
To break a single element out of that scale, set its own token. Each is read
|
|
52
|
+
with the derived value as its fallback, so **an unset token changes nothing**;
|
|
53
|
+
they are opt-in, one at a time:
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
:root {
|
|
57
|
+
--jaamd-font-size: 1rem; /* the baseline */
|
|
58
|
+
--jaamd-font-size-h1: 2.5rem; /* but h1 is fixed, not proportional */
|
|
59
|
+
--jaamd-font-size-code-block: 0.8rem; /* and code blocks are tighter */
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
| Token | Applies to | Default when unset |
|
|
64
|
+
| ------------------------------- | ---------------------------------- | ---------------------------------------- |
|
|
65
|
+
| `--jaamd-font-size-h1` … `-h4` | `h1`–`h4` | `2.22` / `1.67` / `1.33` / `1.11` × base |
|
|
66
|
+
| `--jaamd-font-size-h5`, `-h6` | `h5`, `h6` | base |
|
|
67
|
+
| `--jaamd-font-size-p`, `-li` | paragraphs, list items | base |
|
|
68
|
+
| `--jaamd-font-size-blockquote` | `blockquote`, contents included | base |
|
|
69
|
+
| `--jaamd-font-size-code` | inline `` `code` `` | `0.78` × base |
|
|
70
|
+
| `--jaamd-font-size-code-block` | fenced code blocks | `0.85` × base |
|
|
71
|
+
| `--jaamd-font-size-table` | `th` and `td` together | `0.78` × base |
|
|
72
|
+
| `--jaamd-font-size-summary` | `<details>` summary | `0.89` × base |
|
|
73
|
+
| `--jaamd-font-size-alert-title` | alert titles | `0.83` × base |
|
|
74
|
+
| `--jaamd-font-size-toc` | `:::toc` block, contents included | `0.94` × base |
|
|
75
|
+
| `--jaamd-font-size-toc-title` | `:::toc` title | `0.83` × base |
|
|
76
|
+
| `--jaamd-font-size-footnotes` | footnotes block, contents included | `0.85` × base |
|
|
77
|
+
|
|
78
|
+
A block that owns a token governs what is inside it: paragraphs in a blockquote
|
|
79
|
+
follow `-blockquote`, not `-p`. Alert bodies have no token of their own and
|
|
80
|
+
follow `-p`; only their title is separate. The copy button, code-tab labels and
|
|
81
|
+
heading-link icons stay tied to `--jaamd-font-size`: they are JAAMD's chrome,
|
|
82
|
+
not your document's typography.
|
|
83
|
+
|
|
84
|
+
## Dark mode
|
|
85
|
+
|
|
86
|
+
The default set includes dark-mode overrides activated by the `dark` class on
|
|
87
|
+
`<html>`. Toggle the class and all JAAMD elements adapt.
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Eight theme presets for JAAMD, and dual light and dark code themes.
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Themes
|
|
6
|
+
|
|
7
|
+
A theme is a palette for the `--jaamd-*` variables, paired with a Shiki theme
|
|
8
|
+
for the code blocks.
|
|
9
|
+
|
|
10
|
+
## Theme presets
|
|
11
|
+
|
|
12
|
+
Eight presets restyle the `--jaamd-*` palette to match popular editor colour
|
|
13
|
+
schemes. A **dual** preset carries a light and a dark palette and follows
|
|
14
|
+
`html.dark`; the others are one palette that applies in both modes.
|
|
15
|
+
|
|
16
|
+
| Preset | Import | Kind | Recommended Shiki theme |
|
|
17
|
+
| -------------- | ---------------------------------------- | ---- | ---------------------------------------------- |
|
|
18
|
+
| Catppuccin | `@jaamd/astro/themes/catppuccin.css` | dual | `catppuccin-latte` / `catppuccin-mocha` |
|
|
19
|
+
| Dracula | `@jaamd/astro/themes/dracula.css` | dark | `dracula` |
|
|
20
|
+
| Gruvbox | `@jaamd/astro/themes/gruvbox.css` | dual | `gruvbox-light-medium` / `gruvbox-dark-medium` |
|
|
21
|
+
| Nord | `@jaamd/astro/themes/nord.css` | dark | `nord` |
|
|
22
|
+
| One Dark | `@jaamd/astro/themes/one-dark.css` | dark | `one-dark-pro` |
|
|
23
|
+
| Rosé Pine | `@jaamd/astro/themes/rose-pine.css` | dual | `rose-pine-dawn` / `rose-pine` |
|
|
24
|
+
| Rosé Pine Moon | `@jaamd/astro/themes/rose-pine-moon.css` | dual | `rose-pine-dawn` / `rose-pine-moon` |
|
|
25
|
+
| Tokyo Night | `@jaamd/astro/themes/tokyo-night.css` | dark | `tokyo-night` |
|
|
26
|
+
|
|
27
|
+
As a standalone theme, replacing the default light theme:
|
|
28
|
+
|
|
29
|
+
```ts
|
|
30
|
+
jaamd({ theme: 'dracula' })
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
```css
|
|
34
|
+
@import '@jaamd/astro/default.css';
|
|
35
|
+
@import '@jaamd/astro/themes/dracula.css';
|
|
36
|
+
@import '@jaamd/astro/styles.css';
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
A single-palette preset can also be scoped to `html.dark` via the `/dark`
|
|
40
|
+
variant, to use it as the dark half of your own light theme. Dual presets
|
|
41
|
+
already cover both modes and have no `/dark`:
|
|
42
|
+
|
|
43
|
+
```css
|
|
44
|
+
@import '@jaamd/astro/themes/dracula/dark.css';
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
```ts
|
|
48
|
+
import '@jaamd/astro/themes/dracula/dark.css'
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
> [!IMPORTANT]
|
|
52
|
+
> A preset declares a palette, not the whole variable set: surfaces, borders and
|
|
53
|
+
> the table-of-contents card are derived from it by `default.css`. Load the
|
|
54
|
+
> defaults alongside it. Do **not** pair a preset with `defaultVariables: false`: those
|
|
55
|
+
> derived tokens fall back to the light palette.
|
|
56
|
+
|
|
57
|
+
Each theme declares itself, so a picker can be built from data:
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
import { themes } from '@jaamd/astro/themes'
|
|
61
|
+
// [{ slug: "dracula", name: "Dracula", mode: "dark", shiki: "dracula" }, …]
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Each preset is generated from a `palette.js` of fourteen colours, so every theme
|
|
65
|
+
declares the same token set. The `.css` files are build output: to customise a
|
|
66
|
+
preset, copy its directory and edit the palette. To add one, see
|
|
67
|
+
[CONTRIBUTING.md](https://github.com/jaamd/jaamd/blob/main/CONTRIBUTING.md#themes).
|
|
68
|
+
|
|
69
|
+
## Dual-theme Shiki
|
|
70
|
+
|
|
71
|
+
Pass an object to `theme` to highlight code with two colour schemes, switched by
|
|
72
|
+
the `dark` class:
|
|
73
|
+
|
|
74
|
+
```ts
|
|
75
|
+
jaamd({
|
|
76
|
+
theme: { light: 'github-light', dark: 'github-dark' },
|
|
77
|
+
})
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Add an inline script in `<head>` to prevent a flash of the wrong theme:
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<script is:inline>
|
|
84
|
+
;(function () {
|
|
85
|
+
var t = localStorage.getItem('theme')
|
|
86
|
+
if (t === 'dark' || (!t && matchMedia('(prefers-color-scheme: dark)').matches))
|
|
87
|
+
document.documentElement.classList.add('dark')
|
|
88
|
+
})()
|
|
89
|
+
</script>
|
|
90
|
+
```
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: The HTML and classes JAAMD emits, for styling them or writing a wrapper of your own.
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Markup and classes
|
|
6
|
+
|
|
7
|
+
What JAAMD emits, for styling it or writing a custom wrapper. _Build_ markup is
|
|
8
|
+
in the HTML from the markdown processor; _client_ markup is added at runtime by
|
|
9
|
+
the [client script](../03-usage/02-client.md).
|
|
10
|
+
|
|
11
|
+
The markup and its classes are the public contract: the stylesheets, the themes
|
|
12
|
+
and the client script all rely on them. Every class starts with `jaamd-`,
|
|
13
|
+
except the alerts, which keep the names GitHub gives them.
|
|
14
|
+
|
|
15
|
+
| Feature | Elements | Attributes and states | From |
|
|
16
|
+
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------- |
|
|
17
|
+
| Wrapper | `.jaamd-content` | — | `<MarkdownContent>` or your own |
|
|
18
|
+
| Heading anchor | `a.jaamd-heading-link`, last child of `h1`–`h6` | `href="#<id>"`, `aria-label` | build; client where the build did not |
|
|
19
|
+
| Table wrapper | `div.jaamd-table-wrapper` around `table` | — | build; client where the build did not |
|
|
20
|
+
| Alert | `div.markdown-alert.markdown-alert-<type>`, type `note`, `tip`, `important`, `warning` or `caution` | `dir="auto"` | build |
|
|
21
|
+
| Alert title | `p.markdown-alert-title` with an `svg.octicon` | — | build |
|
|
22
|
+
| Code tabs | `div.jaamd-code-tabs#jaamd-tabs-<hash>` › `div.jaamd-code-tab-buttons[role=tablist]` › `button.jaamd-code-tab-btn[role=tab]` | `aria-selected`, roving `tabindex`, `data-tab-index`, `aria-controls` | build; `data-tabs-init` on the group from the client |
|
|
23
|
+
| Code tab panel | `div.jaamd-code-tab-panel[role=tabpanel]` wrapping the `pre` | `data-active` on the open one, `data-tab-index`, `aria-labelledby` | build |
|
|
24
|
+
| Table of contents | `nav.jaamd-toc` › optional `p.jaamd-toc-title`, then your list | `aria-label`; the current link gets `aria-current="location"` | build; current link from the client |
|
|
25
|
+
| Copy button | `button.jaamd-copy-btn`, last child of `pre`, with `svg.jaamd-copy-icon` and `svg.jaamd-copied-icon` | `data-copied="true"` after a copy, `"manual"` when the code was selected instead | client |
|
|
26
|
+
| Announcements | `div#jaamd-live.jaamd-live[role=status]` in `body` | — | client |
|
|
27
|
+
| Lightbox trigger | `button.jaamd-lightbox-trigger` around each `img` | `commandfor="jaamd-lightbox"`, `command="show-modal"` | client |
|
|
28
|
+
| Lightbox | `dialog#jaamd-lightbox.jaamd-lightbox` in `body`, with `img.jaamd-lightbox-img` and `button.jaamd-lightbox-close` | `closedby="any"`, `[open]` | client |
|
|
29
|
+
| Spoiler | `span.jaamd-spoiler` from `:spoiler[…]`, `div.jaamd-spoiler` from `:::spoiler` | `data-revealed`, `role="button"`, `tabindex`, `aria-expanded`, `data-spoiler-init` | build; states from the client |
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Register the JAAMD plugins on the Markdown processor yourself, without the integration.
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Manual setup
|
|
6
|
+
|
|
7
|
+
To bypass the integration, register the plugins yourself on the processor you
|
|
8
|
+
use. `@jaamd/astro` exports them as presets, in the order they have to run and
|
|
9
|
+
with Astro's own heading ids. On Sätteri, Astro's default:
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
// astro.config.mjs
|
|
13
|
+
import { satteri } from '@astrojs/markdown-satteri'
|
|
14
|
+
import { satteriPlugins } from '@jaamd/astro'
|
|
15
|
+
|
|
16
|
+
export default defineConfig({
|
|
17
|
+
markdown: {
|
|
18
|
+
processor: satteri(satteriPlugins()),
|
|
19
|
+
},
|
|
20
|
+
})
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
On unified:
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
// astro.config.mjs
|
|
27
|
+
import { unified } from '@astrojs/markdown-remark'
|
|
28
|
+
import { unifiedPlugins } from '@jaamd/astro'
|
|
29
|
+
|
|
30
|
+
export default defineConfig({
|
|
31
|
+
markdown: {
|
|
32
|
+
processor: unified(unifiedPlugins()),
|
|
33
|
+
},
|
|
34
|
+
})
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Both take the integration's [`features` and `labels`](../01-getting-started/02-options.md#features).
|
|
38
|
+
To add plugins of your own, spread the preset's lists: on Sätteri, keep
|
|
39
|
+
`jaamd-directive-fallback`, the last mdast plugin, after yours, since it keeps
|
|
40
|
+
directives no plugin claimed. The plugins one by one are in `@jaamd/core`, see
|
|
41
|
+
[Other frameworks](./03-other-frameworks.md).
|
|
42
|
+
|
|
43
|
+
Then load the styles and run the client script yourself, with the same
|
|
44
|
+
`features` and `labels` if you set them:
|
|
45
|
+
|
|
46
|
+
```astro
|
|
47
|
+
---
|
|
48
|
+
import '@jaamd/astro/default.css' // variable fallbacks; omit if you provide your own
|
|
49
|
+
import '@jaamd/astro/styles.css'
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
<div class="jaamd-content">
|
|
53
|
+
<slot />
|
|
54
|
+
</div>
|
|
55
|
+
<script>
|
|
56
|
+
import { enhance } from '@jaamd/astro/client'
|
|
57
|
+
let dispose
|
|
58
|
+
function run() {
|
|
59
|
+
dispose?.()
|
|
60
|
+
dispose = enhance('.jaamd-content')
|
|
61
|
+
}
|
|
62
|
+
run()
|
|
63
|
+
document.addEventListener('astro:page-load', run)
|
|
64
|
+
</script>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
The CSS files can also be imported from plain `.css`:
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
@import '@jaamd/astro/default.css';
|
|
71
|
+
@import '@jaamd/astro/styles.css';
|
|
72
|
+
```
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: frontmatterFields(), the frontmatter schema JAAMD sites share.
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Frontmatter fields
|
|
6
|
+
|
|
7
|
+
`frontmatterFields(z)` returns the fields JAAMD sites share, as a plain object
|
|
8
|
+
to spread into a content collection schema: `title`, `description`, `draft`,
|
|
9
|
+
`keywords`, `author`, `ogImage` and `lastUpdated`.
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
// src/content.config.ts
|
|
13
|
+
import { frontmatterFields } from '@jaamd/astro/frontmatter'
|
|
14
|
+
import { z } from 'astro/zod'
|
|
15
|
+
|
|
16
|
+
const schema = z.object({
|
|
17
|
+
...frontmatterFields(z),
|
|
18
|
+
order: z.number().int().optional(),
|
|
19
|
+
})
|
|
20
|
+
```
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Use @jaamd/core, the compiled framework-free part of JAAMD, with any framework.
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Other frameworks
|
|
6
|
+
|
|
7
|
+
`@jaamd/core` is the part of JAAMD with no framework around it: the markdown
|
|
8
|
+
plugins, the client script, the stylesheets and the themes. `@jaamd/astro`
|
|
9
|
+
registers all of it; install core directly to bring JAAMD to another framework.
|
|
10
|
+
|
|
11
|
+
:::code-tabs
|
|
12
|
+
|
|
13
|
+
```bash npm
|
|
14
|
+
npm install @jaamd/core
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
```bash pnpm
|
|
18
|
+
pnpm add @jaamd/core
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```bash yarn
|
|
22
|
+
yarn add @jaamd/core
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
```bash bun
|
|
26
|
+
bun add @jaamd/core
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
:::
|
|
30
|
+
|
|
31
|
+
The package ships compiled JavaScript with its types: it loads in Node and in any bundler.
|
|
32
|
+
|
|
33
|
+
## Entry points
|
|
34
|
+
|
|
35
|
+
| Import | What |
|
|
36
|
+
| --------------------------------------------------------------------- | -------------------------------------------------------------- |
|
|
37
|
+
| `@jaamd/core/unified` | remark and rehype plugins |
|
|
38
|
+
| `@jaamd/core/satteri` | Sätteri mdast and hast plugins |
|
|
39
|
+
| `@jaamd/core/client` | `enhance(root, options)` and `DEFAULT_SELECTOR` |
|
|
40
|
+
| `@jaamd/core/styles.css` | The stylesheet |
|
|
41
|
+
| `@jaamd/core/default.css` | Fallback values of the CSS variables |
|
|
42
|
+
| `@jaamd/core/shiki-dual.css` | Light and dark code colours for a dual Shiki theme |
|
|
43
|
+
| `@jaamd/core/themes` | The list of themes: slug, name, mode and matching Shiki theme |
|
|
44
|
+
| `@jaamd/core/themes/<slug>.css`, `@jaamd/core/themes/<slug>/dark.css` | A theme, and its `html.dark` variant for single-palette themes |
|
|
45
|
+
|
|
46
|
+
## Plugins
|
|
47
|
+
|
|
48
|
+
`unifiedPlugins()` returns the remark and rehype plugins in the order they have
|
|
49
|
+
to run:
|
|
50
|
+
|
|
51
|
+
```ts
|
|
52
|
+
import { unifiedPlugins } from '@jaamd/core/unified'
|
|
53
|
+
import rehypeSlug from 'rehype-slug'
|
|
54
|
+
import rehypeStringify from 'rehype-stringify'
|
|
55
|
+
import remarkParse from 'remark-parse'
|
|
56
|
+
import remarkRehype from 'remark-rehype'
|
|
57
|
+
import { unified } from 'unified'
|
|
58
|
+
|
|
59
|
+
const { remarkPlugins, rehypePlugins } = unifiedPlugins({ headingIds: rehypeSlug })
|
|
60
|
+
|
|
61
|
+
const html = await unified()
|
|
62
|
+
.use(remarkParse)
|
|
63
|
+
.use(remarkPlugins)
|
|
64
|
+
.use(remarkRehype, { allowDangerousHtml: true })
|
|
65
|
+
.use(rehypePlugins)
|
|
66
|
+
.use(rehypeStringify, { allowDangerousHtml: true })
|
|
67
|
+
.process(source)
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
`satteriPlugins()` does the same for Sätteri, parser features included:
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
import { satteriPlugins } from '@jaamd/core/satteri'
|
|
74
|
+
import { markdownToHtml } from 'satteri'
|
|
75
|
+
|
|
76
|
+
const html = await markdownToHtml(source, satteriPlugins({ headingIds }))
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Heading links are added to headings that have an `id`. Core assigns none:
|
|
80
|
+
`headingIds` is the plugin that does, placed before the links. Both entry
|
|
81
|
+
points also export each plugin on its own.
|
|
82
|
+
|
|
83
|
+
### Options
|
|
84
|
+
|
|
85
|
+
Both functions, and `enhance()` below, take the
|
|
86
|
+
[`features`](../01-getting-started/02-options.md#features) and
|
|
87
|
+
[`labels`](../01-getting-started/02-options.md#labels) options of the Astro
|
|
88
|
+
integration: `features` turns a feature off, `labels` replaces the English
|
|
89
|
+
strings JAAMD writes. Pass the same values to the build and to `enhance()`.
|
|
90
|
+
|
|
91
|
+
## Client and styles
|
|
92
|
+
|
|
93
|
+
Load `default.css` and `styles.css`, wrap the rendered HTML in an element with
|
|
94
|
+
the `jaamd-content` class, and call `enhance()` once the HTML is in the page:
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
import { enhance } from '@jaamd/core/client'
|
|
98
|
+
|
|
99
|
+
const dispose = enhance(element)
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
`enhance()` takes an element, or a selector for every wrapper on the page
|
|
103
|
+
(`.jaamd-content` by default). It returns a cleanup that releases the listeners
|
|
104
|
+
and observers it holds: call it before the markup is replaced. In React:
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
useEffect(() => enhance(ref.current), [html])
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
The markup the plugins emit is listed in
|
|
111
|
+
[Markup and classes](../04-styling/03-markup.md).
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: The changes that need action, by the JAAMD version you upgrade from.
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Upgrading
|
|
6
|
+
|
|
7
|
+
Upgrade the integration, then read below the changes since the version you
|
|
8
|
+
upgrade from:
|
|
9
|
+
|
|
10
|
+
:::code-tabs
|
|
11
|
+
|
|
12
|
+
```bash npm
|
|
13
|
+
npm install @jaamd/astro@latest
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
```bash pnpm
|
|
17
|
+
pnpm add @jaamd/astro@latest
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
```bash yarn
|
|
21
|
+
yarn add @jaamd/astro@latest
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```bash bun
|
|
25
|
+
bun add @jaamd/astro@latest
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
:::
|
|
29
|
+
|
|
30
|
+
## From 0.11
|
|
31
|
+
|
|
32
|
+
### The package is now @jaamd/astro
|
|
33
|
+
|
|
34
|
+
`@lancher-dev/jaamd` is now `@jaamd/astro`. Replace the dependency, then the
|
|
35
|
+
package name in every import. `@lancher-dev/jaamd` is deprecated and receives
|
|
36
|
+
no further releases.
|
|
37
|
+
|
|
38
|
+
:::code-tabs
|
|
39
|
+
|
|
40
|
+
```bash npm
|
|
41
|
+
npm uninstall @lancher-dev/jaamd
|
|
42
|
+
npm install @jaamd/astro
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
```bash pnpm
|
|
46
|
+
pnpm remove @lancher-dev/jaamd
|
|
47
|
+
pnpm add @jaamd/astro
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```bash yarn
|
|
51
|
+
yarn remove @lancher-dev/jaamd
|
|
52
|
+
yarn add @jaamd/astro
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
```bash bun
|
|
56
|
+
bun remove @lancher-dev/jaamd
|
|
57
|
+
bun add @jaamd/astro
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
:::
|
|
61
|
+
|
|
62
|
+
`@jaamd/jaamd` 0.12 was 0.11 under the new scope, and is deprecated too: from
|
|
63
|
+
it, replace `@jaamd/jaamd` the same way and follow the rest of this section.
|
|
64
|
+
|
|
65
|
+
### Stylesheets are imported with their extension
|
|
66
|
+
|
|
67
|
+
| Before | After |
|
|
68
|
+
| ---------------------- | ------------------------------------- |
|
|
69
|
+
| `…/default` | `@jaamd/astro/default.css` |
|
|
70
|
+
| `…/styles` | `@jaamd/astro/styles.css` |
|
|
71
|
+
| `…/shiki-dual` | `@jaamd/astro/shiki-dual.css` |
|
|
72
|
+
| `…/themes/<slug>` | `@jaamd/astro/themes/<slug>.css` |
|
|
73
|
+
| `…/themes/<slug>/dark` | `@jaamd/astro/themes/<slug>/dark.css` |
|
|
74
|
+
|
|
75
|
+
### Classes
|
|
76
|
+
|
|
77
|
+
Every class JAAMD emits now starts with `jaamd-`, and states are attributes.
|
|
78
|
+
Update CSS of your own that selects on the old names:
|
|
79
|
+
|
|
80
|
+
| Before | After |
|
|
81
|
+
| ------------------------------------------------ | ------------------------------------------------------------------ |
|
|
82
|
+
| `.code-tabs` | `.jaamd-code-tabs` |
|
|
83
|
+
| `.code-tab-buttons` | `.jaamd-code-tab-buttons` |
|
|
84
|
+
| `.code-tab-btn`, `.code-tab-btn.active` | `.jaamd-code-tab-btn`, `.jaamd-code-tab-btn[aria-selected='true']` |
|
|
85
|
+
| `.code-tab-panel`, `.code-tab-panel.active` | `.jaamd-code-tab-panel`, `.jaamd-code-tab-panel[data-active]` |
|
|
86
|
+
| `.spoiler`, `.spoiler.revealed` | `.jaamd-spoiler`, `.jaamd-spoiler[data-revealed]` |
|
|
87
|
+
| `.jaamd-lightbox__img`, `.jaamd-lightbox__close` | `.jaamd-lightbox-img`, `.jaamd-lightbox-close` |
|
|
88
|
+
|
|
89
|
+
The alert classes (`markdown-alert`, `markdown-alert-title`) are unchanged.
|
|
90
|
+
|
|
91
|
+
### Spoilers
|
|
92
|
+
|
|
93
|
+
`<span class="spoiler">` is no longer a spoiler. Write `:spoiler[text]`, or
|
|
94
|
+
change the class to `jaamd-spoiler`.
|
|
95
|
+
|
|
96
|
+
### Client script
|
|
97
|
+
|
|
98
|
+
`initMarkdownEnhancements(selector)` is now `enhance(root, options)`, which
|
|
99
|
+
returns a cleanup. See [Client script](./03-usage/02-client.md).
|
|
100
|
+
|
|
101
|
+
### Options
|
|
102
|
+
|
|
103
|
+
| Before | After |
|
|
104
|
+
| --------------------------- | ----------------------------- |
|
|
105
|
+
| `noDefault: true` | `defaultVariables: false` |
|
|
106
|
+
| `plugins: { … }` | `features: { … }` |
|
|
107
|
+
| `plugins: { directive: … }` | `features: { directives: … }` |
|
|
108
|
+
|
|
109
|
+
`features` also turns off what runs only in the browser: `copyButtons`,
|
|
110
|
+
`lightbox`, and the client part of the others. `labels` is new: see
|
|
111
|
+
[Options](./01-getting-started/02-options.md#labels).
|
|
112
|
+
|
|
113
|
+
The options type is exported as `JaamdOptions` only: the `Options` alias is
|
|
114
|
+
gone.
|
|
115
|
+
|
|
116
|
+
### Manual setup
|
|
117
|
+
|
|
118
|
+
`@jaamd/astro` no longer exports the plugins one by one. Use its presets,
|
|
119
|
+
`satteriPlugins()` and `unifiedPlugins()`, which also add Astro's heading ids:
|
|
120
|
+
see [Manual setup](./05-advanced/01-manual-setup.md). The single plugins are in
|
|
121
|
+
`@jaamd/core`.
|
|
122
|
+
|
|
123
|
+
## From 0.10
|
|
124
|
+
|
|
125
|
+
- `theme` no longer overrides `markdown.shikiConfig`. Unset, your Shiki
|
|
126
|
+
configuration stays; `"github-light"` replaces only Astro's own default.
|
|
127
|
+
- `@astrojs/markdown-remark` is an optional peer dependency. Install it when you
|
|
128
|
+
use `unified()`, which you import from it anyway.
|
|
129
|
+
- Code-tab ids are `jaamd-tabs-<hash>`, unique across every document on a page,
|
|
130
|
+
instead of `jaamd-tabs-<n>`.
|
|
131
|
+
- Lightbox images are wrapped in `<button class="jaamd-lightbox-trigger">`, so
|
|
132
|
+
they open from the keyboard. `img.jaamd-lightbox-enabled` is gone. See
|
|
133
|
+
[Image lightbox](./03-usage/02-client.md#image-lightbox) for browser
|
|
134
|
+
support.
|
|
135
|
+
- With a manual `unified()` setup, register Astro's `rehypeHeadingIds` before
|
|
136
|
+
`rehypeHeadingLinks`, which now reads the ids instead of computing them.
|
|
137
|
+
See [Manual setup](./05-advanced/01-manual-setup.md).
|
|
138
|
+
- Blockquote, alert, `h2` and `hr` borders are drawn without a CSS reset.
|
|
139
|
+
- Heading anchors are always visible below 600px, as intended.
|
|
140
|
+
|
|
141
|
+
## From 0.9
|
|
142
|
+
|
|
143
|
+
- jaamd no longer switches the markdown processor. With no configuration you
|
|
144
|
+
are on Sätteri.
|
|
145
|
+
- Set `markdown.processor: unified()` to stay on unified.
|
|
146
|
+
- `markdown.remarkPlugins` and `markdown.rehypePlugins` still work: Astro moves
|
|
147
|
+
to unified, jaamd adds its remark plugins.
|
|
148
|
+
- Astro `^7.3.0` is required.
|
|
149
|
+
- Heading anchors are plain links: a click navigates, nothing is copied.
|
|
150
|
+
- Table wrappers and heading anchors are in the built HTML. Turn them off with
|
|
151
|
+
`plugins: { tables: false, headingLinks: false }`.
|
|
152
|
+
- The lightbox is a `<dialog class="jaamd-lightbox">`. `.jaamd-lightbox__backdrop`,
|
|
153
|
+
`.jaamd-lightbox__content` and `.jaamd-lightbox--hidden` are gone: style
|
|
154
|
+
`::backdrop` and `[open]`.
|
|
155
|
+
- `<details>` animates in CSS. `.jaamd-details-wrapper` and
|
|
156
|
+
`.jaamd-details-inner` are gone.
|
package/index.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default } from './src/integration.ts'
|
|
2
|
+
export type { JaamdOptions } from './src/integration.ts'
|
|
3
|
+
export { satteriPlugins, unifiedPlugins } from './src/processors.ts'
|
|
4
|
+
export type { PluginOptions } from './src/processors.ts'
|
|
5
|
+
export type { ShikiTheme } from './src/shiki.ts'
|
|
6
|
+
export type { Feature, Features, Labels } from '@jaamd/core/client'
|
package/package.json
CHANGED
|
@@ -1,6 +1,76 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jaamd/astro",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "1.0.0-rc.1",
|
|
4
|
+
"description": "Add markdown plugins, client-side enhancements and styles as a single Astro integration for Markdown content.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"astro",
|
|
7
|
+
"astro-component",
|
|
8
|
+
"astro-integration",
|
|
9
|
+
"markdown",
|
|
10
|
+
"remark",
|
|
11
|
+
"withastro"
|
|
12
|
+
],
|
|
13
|
+
"homepage": "https://jaamd.org",
|
|
14
|
+
"bugs": {
|
|
15
|
+
"url": "https://github.com/jaamd/jaamd/issues"
|
|
16
|
+
},
|
|
17
|
+
"license": "MIT",
|
|
18
|
+
"author": "Kasui92 <info@lucapattocchio.dev>",
|
|
19
|
+
"repository": {
|
|
20
|
+
"type": "git",
|
|
21
|
+
"url": "git+https://github.com/jaamd/jaamd.git",
|
|
22
|
+
"directory": "packages/astro"
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"index.ts",
|
|
26
|
+
"src",
|
|
27
|
+
"dist",
|
|
28
|
+
"docs",
|
|
29
|
+
"README.md"
|
|
30
|
+
],
|
|
31
|
+
"type": "module",
|
|
32
|
+
"exports": {
|
|
33
|
+
".": "./index.ts",
|
|
34
|
+
"./components": "./src/components/MarkdownContent.astro",
|
|
35
|
+
"./client": "./src/client.ts",
|
|
36
|
+
"./frontmatter": "./src/frontmatter.ts",
|
|
37
|
+
"./themes": "./src/themes.ts",
|
|
38
|
+
"./default.css": "./dist/default.css",
|
|
39
|
+
"./styles.css": "./dist/styles.css",
|
|
40
|
+
"./shiki-dual.css": "./dist/shiki-dual.css",
|
|
41
|
+
"./themes/*/dark.css": "./dist/themes/*/dark.css",
|
|
42
|
+
"./themes/*.css": "./dist/themes/*/index.css"
|
|
43
|
+
},
|
|
44
|
+
"publishConfig": {
|
|
45
|
+
"access": "public"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@jaamd/core": "^1.0.0-rc.1"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@astrojs/markdown-remark": "^7.3.5",
|
|
52
|
+
"@astrojs/markdown-satteri": "^0.4.6",
|
|
53
|
+
"astro": "^7.4.4",
|
|
54
|
+
"satteri": "^0.10.5",
|
|
55
|
+
"typescript": "^6.0.0"
|
|
56
|
+
},
|
|
57
|
+
"peerDependencies": {
|
|
58
|
+
"@astrojs/markdown-remark": "^7.3.0",
|
|
59
|
+
"astro": "^7.3.0"
|
|
60
|
+
},
|
|
61
|
+
"peerDependenciesMeta": {
|
|
62
|
+
"@astrojs/markdown-remark": {
|
|
63
|
+
"optional": true
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"engines": {
|
|
67
|
+
"node": ">=22.12.0"
|
|
68
|
+
},
|
|
69
|
+
"scripts": {
|
|
70
|
+
"build": "node scripts/build.mjs",
|
|
71
|
+
"check": "tsc --noEmit && tsc --noEmit -p tests",
|
|
72
|
+
"test": "node --test \"tests/*.test.ts\"",
|
|
73
|
+
"test:consumer": "pnpm --filter \"@jaamd/astro...\" run build && node --test \"tests/consumer/**/*.test.mjs\"",
|
|
74
|
+
"test:build": "pnpm --filter jaamd-fixture build && node tests/build/smoke.mjs && JAAMD_PROCESSOR=unified pnpm --filter jaamd-fixture build && node tests/build/smoke.mjs"
|
|
75
|
+
}
|
|
6
76
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type * as AstroSatteri from '@astrojs/markdown-satteri'
|
|
2
|
+
import { createRequire } from 'node:module'
|
|
3
|
+
import { pathToFileURL } from 'node:url'
|
|
4
|
+
|
|
5
|
+
// Resolved from Astro's location: the copy its processor runs on.
|
|
6
|
+
const fromAstro = createRequire(createRequire(import.meta.url).resolve('astro/package.json'))
|
|
7
|
+
|
|
8
|
+
export const { satteriCollectHastText, satteriHeadingIdsPlugin }: typeof AstroSatteri = await import(
|
|
9
|
+
/* @vite-ignore */ pathToFileURL(fromAstro.resolve('@astrojs/markdown-satteri')).href
|
|
10
|
+
)
|
package/src/client.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@jaamd/core/client'
|