@dr-ishaan/remake-blocks 1.0.0 → 1.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/LICENSE +1 -1
- package/README.md +167 -16
- package/dist/accordion.js +28 -0
- package/dist/astro.d.ts +57 -0
- package/dist/astro.d.ts.map +1 -0
- package/dist/astro.js +87 -0
- package/dist/astro.js.map +1 -0
- package/dist/index.d.ts +8 -52
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +9 -86
- package/dist/index.js.map +1 -1
- package/dist/remark-remake-blocks.d.ts +24 -0
- package/dist/remark-remake-blocks.d.ts.map +1 -0
- package/dist/remark-remake-blocks.js +724 -0
- package/dist/remark-remake-blocks.js.map +1 -0
- package/dist/styles.css +225 -4
- package/dist/types.d.ts +76 -13
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +6 -5
- package/dist/types.js.map +1 -1
- package/package.json +36 -16
- package/dist/remark-callout-blocks.d.ts +0 -16
- package/dist/remark-callout-blocks.d.ts.map +0 -1
- package/dist/remark-callout-blocks.js +0 -628
- package/dist/remark-callout-blocks.js.map +0 -1
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,39 +1,43 @@
|
|
|
1
|
-
#
|
|
1
|
+
# remake-blocks
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Remark plugin for rendering GitHub-style callouts (admonitions), enhanced blockquotes, and disclosure widgets in Markdown content. Framework-agnostic with an optional Astro integration.
|
|
4
4
|
|
|
5
|
-
**
|
|
5
|
+
**27 first-class callout types** + plain disclosure widgets — each directive maps 1:1 to its own unique visual identity, SVG icon, color palette, and CSS class. No alias resolution.
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
9
9
|
## Features
|
|
10
10
|
|
|
11
|
-
- **
|
|
11
|
+
- **27 built-in callout types** — GFM standard (5) + Obsidian core (10) + promoted aliases (12), each with unique styling
|
|
12
12
|
- **GitHub admonition syntax** — `> [!NOTE]`, `> [!TIP]`, `> [!WARNING]`, etc.
|
|
13
13
|
- **Custom titles** — `> [!WARNING] Deprecated API` renders with your title
|
|
14
14
|
- **Collapsible callouts** — `> [!FAQ]-` (collapsed) and `> [!TIP]+` (expanded)
|
|
15
|
+
- **Disclosure widgets** — `> [!] Title` creates a plain collapsible block (no color/icon)
|
|
16
|
+
- **Accordion grouping** — consecutive `[!]` blocks auto-group into an accordion
|
|
17
|
+
- **Tree view** — nested `[!]` blocks get depth indicators
|
|
15
18
|
- **Custom callout types** — define your own with icon, color, and CSS class
|
|
16
19
|
- **Enhanced blockquotes** — regular blockquotes get improved styling automatically
|
|
17
20
|
- **Dark mode** — automatic via `prefers-color-scheme` and manual via `data-theme` attribute
|
|
18
21
|
- **Auto CSS injection** — styles injected into every page by default
|
|
19
|
-
- **Zero JavaScript** — pure CSS + HTML (collapsibles use native `<details>`/`<summary>`)
|
|
22
|
+
- **Zero JavaScript** for callouts — pure CSS + HTML (collapsibles use native `<details>`/`<summary>`)
|
|
20
23
|
- **Accessible** — proper ARIA roles, semantic HTML
|
|
21
24
|
- **Print-optimized** — clean print styles
|
|
25
|
+
- **Safe-by-default** — raw HTML in markdown is HTML-escaped by default to prevent XSS (set `allowDangerousHtml: true` to opt out)
|
|
22
26
|
|
|
23
27
|
---
|
|
24
28
|
|
|
25
29
|
## Install
|
|
26
30
|
|
|
27
31
|
```bash
|
|
28
|
-
npm install
|
|
32
|
+
npm install remake-blocks
|
|
29
33
|
```
|
|
30
34
|
|
|
31
|
-
## Quick Start
|
|
35
|
+
## Quick Start (Astro)
|
|
32
36
|
|
|
33
37
|
```js
|
|
34
38
|
// astro.config.mjs
|
|
35
39
|
import { defineConfig } from "astro/config";
|
|
36
|
-
import remakeBlocks from "
|
|
40
|
+
import remakeBlocks from "remake-blocks/astro";
|
|
37
41
|
|
|
38
42
|
export default defineConfig({
|
|
39
43
|
integrations: [remakeBlocks()],
|
|
@@ -53,9 +57,25 @@ Then use callouts in any Markdown or MDX file:
|
|
|
53
57
|
> This collapsible warning starts collapsed.
|
|
54
58
|
```
|
|
55
59
|
|
|
60
|
+
## Quick Start (Remark only)
|
|
61
|
+
|
|
62
|
+
```js
|
|
63
|
+
import { unified } from "unified";
|
|
64
|
+
import remarkParse from "remark-parse";
|
|
65
|
+
import { remarkRemakeBlocks } from "remake-blocks";
|
|
66
|
+
import remarkRehype from "remark-rehype";
|
|
67
|
+
import rehypeStringify from "rehype-stringify";
|
|
68
|
+
|
|
69
|
+
const processor = unified()
|
|
70
|
+
.use(remarkParse)
|
|
71
|
+
.use(remarkRemakeBlocks)
|
|
72
|
+
.use(remarkRehype, { allowDangerousHtml: true }) // pass through callout HTML
|
|
73
|
+
.use(rehypeStringify, { allowDangerousHtml: true });
|
|
74
|
+
```
|
|
75
|
+
|
|
56
76
|
---
|
|
57
77
|
|
|
58
|
-
## All
|
|
78
|
+
## All 27 Callout Types
|
|
59
79
|
|
|
60
80
|
### GFM Standard (5)
|
|
61
81
|
|
|
@@ -82,7 +102,7 @@ Then use callouts in any Markdown or MDX file:
|
|
|
82
102
|
| `[!EXAMPLE]` | Example | `callout-example` |
|
|
83
103
|
| `[!TODO]` | Todo | `callout-todo` |
|
|
84
104
|
|
|
85
|
-
### Promoted Aliases — First-Class Types (
|
|
105
|
+
### Promoted Aliases — First-Class Types (12)
|
|
86
106
|
|
|
87
107
|
Each of these is its **own distinct type** with unique colors, not an alias:
|
|
88
108
|
|
|
@@ -101,6 +121,14 @@ Each of these is its **own distinct type** with unique colors, not an alias:
|
|
|
101
121
|
| `[!ERROR]` | Error | `callout-error` |
|
|
102
122
|
| `[!CITE]` | Cite | `callout-cite` |
|
|
103
123
|
|
|
124
|
+
### Disclosure Widgets
|
|
125
|
+
|
|
126
|
+
| Directive | Description |
|
|
127
|
+
|-----------|-------------|
|
|
128
|
+
| `[!]` | Plain collapsible block (no color, no icon) — uses native `<details>`/`<summary>` |
|
|
129
|
+
|
|
130
|
+
Consecutive `[!]` blocks are automatically grouped into an accordion. Nested `[!]` blocks get tree-view styling.
|
|
131
|
+
|
|
104
132
|
---
|
|
105
133
|
|
|
106
134
|
## Syntax
|
|
@@ -145,6 +173,19 @@ Each of these is its **own distinct type** with unique colors, not an alias:
|
|
|
145
173
|
> - List item 2
|
|
146
174
|
```
|
|
147
175
|
|
|
176
|
+
### Disclosure Widget
|
|
177
|
+
|
|
178
|
+
```markdown
|
|
179
|
+
> [!] Section Title
|
|
180
|
+
> Content hidden by default.
|
|
181
|
+
|
|
182
|
+
> [!] Another Section
|
|
183
|
+
> Content hidden by default.
|
|
184
|
+
|
|
185
|
+
> [!]+ Expanded Section
|
|
186
|
+
> Content visible by default.
|
|
187
|
+
```
|
|
188
|
+
|
|
148
189
|
---
|
|
149
190
|
|
|
150
191
|
## Configuration
|
|
@@ -152,7 +193,7 @@ Each of these is its **own distinct type** with unique colors, not an alias:
|
|
|
152
193
|
```js
|
|
153
194
|
// astro.config.mjs
|
|
154
195
|
import { defineConfig } from "astro/config";
|
|
155
|
-
import remakeBlocks from "
|
|
196
|
+
import remakeBlocks from "remake-blocks/astro";
|
|
156
197
|
|
|
157
198
|
export default defineConfig({
|
|
158
199
|
integrations: [
|
|
@@ -175,6 +216,25 @@ export default defineConfig({
|
|
|
175
216
|
// Add data-callout-type attribute (default: true)
|
|
176
217
|
dataCalloutType: true,
|
|
177
218
|
|
|
219
|
+
// ⚠️ SECURITY: Allow raw HTML in markdown to pass through (default: false)
|
|
220
|
+
// Set to true ONLY if you trust your markdown source AND have sanitized it.
|
|
221
|
+
// When false (default), raw HTML is HTML-escaped before being placed
|
|
222
|
+
// in callout bodies to prevent XSS attacks.
|
|
223
|
+
allowDangerousHtml: false,
|
|
224
|
+
|
|
225
|
+
// Disclosure widget options (all default: true)
|
|
226
|
+
enableDisclosures: true,
|
|
227
|
+
disclosureClass: "disclosure",
|
|
228
|
+
disclosureTitleClass: "disclosure-title",
|
|
229
|
+
disclosureBodyClass: "disclosure-body",
|
|
230
|
+
|
|
231
|
+
// Accordion grouping (default: true)
|
|
232
|
+
enableAccordion: true,
|
|
233
|
+
accordionClass: "disclosure-accordion",
|
|
234
|
+
|
|
235
|
+
// Tree view for nested disclosures (default: true)
|
|
236
|
+
enableTreeView: true,
|
|
237
|
+
|
|
178
238
|
// Custom callout types
|
|
179
239
|
customCallouts: [
|
|
180
240
|
{
|
|
@@ -193,6 +253,50 @@ export default defineConfig({
|
|
|
193
253
|
|
|
194
254
|
---
|
|
195
255
|
|
|
256
|
+
## Security: Safe-by-Default
|
|
257
|
+
|
|
258
|
+
By default, **raw HTML in markdown is HTML-escaped** before being placed in callout bodies. This prevents XSS attacks from untrusted markdown content.
|
|
259
|
+
|
|
260
|
+
```markdown
|
|
261
|
+
> [!NOTE]
|
|
262
|
+
> <img src=x onerror=alert(1)>
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
**Default behavior** (`allowDangerousHtml: false`):
|
|
266
|
+
```html
|
|
267
|
+
<aside class="callout callout-note" ...>
|
|
268
|
+
...
|
|
269
|
+
<div class="callout-body">
|
|
270
|
+
<p><img src=x onerror=alert(1)></p>
|
|
271
|
+
</div>
|
|
272
|
+
</aside>
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
**Opt-in to raw HTML** (`allowDangerousHtml: true`):
|
|
276
|
+
```html
|
|
277
|
+
<aside class="callout callout-note" ...>
|
|
278
|
+
...
|
|
279
|
+
<div class="callout-body">
|
|
280
|
+
<p><img src=x onerror=alert(1)></p> <!-- ⚠️ XSS risk! -->
|
|
281
|
+
</div>
|
|
282
|
+
</aside>
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
Only set `allowDangerousHtml: true` if:
|
|
286
|
+
1. You fully trust your markdown source, **AND**
|
|
287
|
+
2. You have sanitized the markdown with a tool like `rehype-sanitize`
|
|
288
|
+
|
|
289
|
+
### Custom Callout Config Validation
|
|
290
|
+
|
|
291
|
+
Custom callout configurations are validated and normalized:
|
|
292
|
+
- Missing fields are filled with safe defaults (no crash)
|
|
293
|
+
- `null` or non-object entries are skipped
|
|
294
|
+
- Entries with missing/empty `type` are skipped
|
|
295
|
+
- `className` is HTML-escaped before being placed in the class attribute (prevents attribute breakout)
|
|
296
|
+
- `color` is validated against a safe CSS color pattern (hex, rgb, hsl, var(), named, etc.); invalid values fall back to a default gray
|
|
297
|
+
|
|
298
|
+
---
|
|
299
|
+
|
|
196
300
|
## Custom Callout Types
|
|
197
301
|
|
|
198
302
|
Define your own callout types with full control over appearance:
|
|
@@ -223,7 +327,7 @@ If you set `injectStyles: false`, import the stylesheet manually:
|
|
|
223
327
|
|
|
224
328
|
```js
|
|
225
329
|
// In a layout component or global CSS file
|
|
226
|
-
import "
|
|
330
|
+
import "remake-blocks/styles.css";
|
|
227
331
|
```
|
|
228
332
|
|
|
229
333
|
---
|
|
@@ -269,7 +373,7 @@ See `styles.css` for the complete list of CSS custom properties.
|
|
|
269
373
|
Each callout renders as:
|
|
270
374
|
|
|
271
375
|
```html
|
|
272
|
-
<
|
|
376
|
+
<aside class="callout callout-note" data-callout-type="note" role="note">
|
|
273
377
|
<div class="callout-title" style="color:#0969da">
|
|
274
378
|
<span class="callout-icon" style="color:#0969da">
|
|
275
379
|
<!-- SVG icon -->
|
|
@@ -279,7 +383,7 @@ Each callout renders as:
|
|
|
279
383
|
<div class="callout-body">
|
|
280
384
|
<p>Content goes here.</p>
|
|
281
385
|
</div>
|
|
282
|
-
</
|
|
386
|
+
</aside>
|
|
283
387
|
```
|
|
284
388
|
|
|
285
389
|
Collapsible callouts use `<details>`/`<summary>`:
|
|
@@ -298,6 +402,47 @@ Collapsible callouts use `<details>`/`<summary>`:
|
|
|
298
402
|
|
|
299
403
|
---
|
|
300
404
|
|
|
405
|
+
## Caveats
|
|
406
|
+
|
|
407
|
+
### Strikethrough (`~~text~~`) requires `remark-gfm`
|
|
408
|
+
|
|
409
|
+
The plugin's body serializer handles `<del>` nodes correctly, but `remark-parse` alone does **not** enable GFM strikethrough. To use `~~strikethrough~~` syntax in callout bodies, add `remark-gfm` to your Astro config:
|
|
410
|
+
|
|
411
|
+
```js
|
|
412
|
+
import remarkGfm from "remark-gfm";
|
|
413
|
+
|
|
414
|
+
export default defineConfig({
|
|
415
|
+
markdown: { remarkPlugins: [remarkGfm] },
|
|
416
|
+
integrations: [remakeBlocks()],
|
|
417
|
+
});
|
|
418
|
+
```
|
|
419
|
+
|
|
420
|
+
### Horizontal rule after directive becomes a setext H2
|
|
421
|
+
|
|
422
|
+
In CommonMark, this markdown:
|
|
423
|
+
|
|
424
|
+
```markdown
|
|
425
|
+
> [!NOTE]
|
|
426
|
+
> ---
|
|
427
|
+
```
|
|
428
|
+
|
|
429
|
+
is interpreted as a setext H2 heading ("[!NOTE]" with `---` underline), **not** as a callout with a thematic break body. To get a thematic break in the body, add a blank line before `---`:
|
|
430
|
+
|
|
431
|
+
```markdown
|
|
432
|
+
> [!NOTE]
|
|
433
|
+
> Above
|
|
434
|
+
>
|
|
435
|
+
> ---
|
|
436
|
+
>
|
|
437
|
+
> Below
|
|
438
|
+
```
|
|
439
|
+
|
|
440
|
+
### Tables and other GFM features require `remark-gfm`
|
|
441
|
+
|
|
442
|
+
GFM-only features like tables, autolinks, and task list items require the `remark-gfm` plugin. The plugin's body serializer handles them when `remark-gfm` produces the appropriate mdast nodes.
|
|
443
|
+
|
|
444
|
+
---
|
|
445
|
+
|
|
301
446
|
## Advanced: Using the Remark Plugin Directly
|
|
302
447
|
|
|
303
448
|
The remark plugin can be used independently of the Astro integration:
|
|
@@ -305,11 +450,17 @@ The remark plugin can be used independently of the Astro integration:
|
|
|
305
450
|
```js
|
|
306
451
|
import { unified } from "unified";
|
|
307
452
|
import remarkParse from "remark-parse";
|
|
308
|
-
import {
|
|
453
|
+
import { remarkRemakeBlocks } from "remake-blocks";
|
|
309
454
|
|
|
310
455
|
const processor = unified()
|
|
311
456
|
.use(remarkParse)
|
|
312
|
-
.use(
|
|
457
|
+
.use(remarkRemakeBlocks, { enhanceBlockquotes: true });
|
|
458
|
+
```
|
|
459
|
+
|
|
460
|
+
A backward-compatible alias `remarkCalloutBlocks` is also exported:
|
|
461
|
+
|
|
462
|
+
```js
|
|
463
|
+
import { remarkCalloutBlocks } from "remake-blocks";
|
|
313
464
|
```
|
|
314
465
|
|
|
315
466
|
---
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* remake-blocks – Accordion progressive enhancement
|
|
3
|
+
*
|
|
4
|
+
* When 2+ disclosure widgets appear consecutively, they are wrapped
|
|
5
|
+
* in a <div class="disclosure-accordion" data-accordion> container.
|
|
6
|
+
* This script adds accordion behavior: opening one closes the others.
|
|
7
|
+
*
|
|
8
|
+
* Without this script, each disclosure still toggles independently (graceful degradation).
|
|
9
|
+
*
|
|
10
|
+
* ~220 bytes minified.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
14
|
+
document.querySelectorAll('[data-accordion]').forEach(accordion => {
|
|
15
|
+
const details = accordion.querySelectorAll(':scope > details');
|
|
16
|
+
details.forEach(detail => {
|
|
17
|
+
detail.addEventListener('toggle', () => {
|
|
18
|
+
if (detail.open) {
|
|
19
|
+
details.forEach(other => {
|
|
20
|
+
if (other !== detail && other.open) {
|
|
21
|
+
other.removeAttribute('open');
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
});
|
package/dist/astro.d.ts
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* remake-blocks
|
|
3
|
+
*
|
|
4
|
+
* Astro 6 integration for rendering GitHub-style callouts, enhanced
|
|
5
|
+
* blockquotes, and disclosure widgets in Markdown content.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```ts
|
|
9
|
+
* // astro.config.mjs
|
|
10
|
+
* import { defineConfig } from "astro/config";
|
|
11
|
+
* import remakeBlocks from "remake-blocks/astro";
|
|
12
|
+
*
|
|
13
|
+
* export default defineConfig({
|
|
14
|
+
* integrations: [remakeBlocks()],
|
|
15
|
+
* });
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* @example With custom callout types:
|
|
19
|
+
* ```ts
|
|
20
|
+
* export default defineConfig({
|
|
21
|
+
* integrations: [
|
|
22
|
+
* remakeBlocks({
|
|
23
|
+
* customCallouts: [
|
|
24
|
+
* {
|
|
25
|
+
* type: "example",
|
|
26
|
+
* icon: "💡",
|
|
27
|
+
* className: "callout-example",
|
|
28
|
+
* defaultTitle: "Example",
|
|
29
|
+
* color: "#8b5cf6",
|
|
30
|
+
* backgroundColor: "#f5f3ff",
|
|
31
|
+
* },
|
|
32
|
+
* ],
|
|
33
|
+
* }),
|
|
34
|
+
* ],
|
|
35
|
+
* });
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
import type { AstroIntegration } from "astro";
|
|
39
|
+
import type { AstroRemakeBlocksOptions } from "./types.js";
|
|
40
|
+
export type { AstroRemakeBlocksOptions, RemakeBlocksOptions, CalloutConfig, CalloutType, BuiltinCalloutType, ParsedCallout } from "./types.js";
|
|
41
|
+
export { remarkRemakeBlocks, remarkCalloutBlocks } from "./remark-remake-blocks.js";
|
|
42
|
+
/**
|
|
43
|
+
* Create the `remake-blocks` Astro integration.
|
|
44
|
+
*
|
|
45
|
+
* This integration:
|
|
46
|
+
* 1. Registers the `remarkRemakeBlocks` remark plugin so that GitHub-style
|
|
47
|
+
* admonition directives (`> [!NOTE]`, `> [!TIP]`, etc.) inside blockquotes
|
|
48
|
+
* are transformed into styled callout HTML elements.
|
|
49
|
+
* 2. Supports disclosure widgets via `> [!] Title` syntax.
|
|
50
|
+
* 3. Optionally injects the default CSS styles into every page.
|
|
51
|
+
* 4. Optionally enhances regular blockquotes with improved styling.
|
|
52
|
+
*
|
|
53
|
+
* @param options - Plugin configuration options.
|
|
54
|
+
* @returns An Astro integration object.
|
|
55
|
+
*/
|
|
56
|
+
export default function remakeBlocks(options?: AstroRemakeBlocksOptions | null | undefined): AstroIntegration;
|
|
57
|
+
//# sourceMappingURL=astro.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"astro.d.ts","sourceRoot":"","sources":["../src/astro.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAIH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAE,wBAAwB,EAAuB,MAAM,YAAY,CAAC;AAIhF,YAAY,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG/I,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEpF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,OAAO,GAAE,wBAAwB,GAAG,IAAI,GAAG,SAAc,GACxD,gBAAgB,CAmClB"}
|
package/dist/astro.js
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* remake-blocks
|
|
3
|
+
*
|
|
4
|
+
* Astro 6 integration for rendering GitHub-style callouts, enhanced
|
|
5
|
+
* blockquotes, and disclosure widgets in Markdown content.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```ts
|
|
9
|
+
* // astro.config.mjs
|
|
10
|
+
* import { defineConfig } from "astro/config";
|
|
11
|
+
* import remakeBlocks from "remake-blocks/astro";
|
|
12
|
+
*
|
|
13
|
+
* export default defineConfig({
|
|
14
|
+
* integrations: [remakeBlocks()],
|
|
15
|
+
* });
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* @example With custom callout types:
|
|
19
|
+
* ```ts
|
|
20
|
+
* export default defineConfig({
|
|
21
|
+
* integrations: [
|
|
22
|
+
* remakeBlocks({
|
|
23
|
+
* customCallouts: [
|
|
24
|
+
* {
|
|
25
|
+
* type: "example",
|
|
26
|
+
* icon: "💡",
|
|
27
|
+
* className: "callout-example",
|
|
28
|
+
* defaultTitle: "Example",
|
|
29
|
+
* color: "#8b5cf6",
|
|
30
|
+
* backgroundColor: "#f5f3ff",
|
|
31
|
+
* },
|
|
32
|
+
* ],
|
|
33
|
+
* }),
|
|
34
|
+
* ],
|
|
35
|
+
* });
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
import { fileURLToPath } from "url";
|
|
39
|
+
import path from "path";
|
|
40
|
+
import { remarkRemakeBlocks } from "./remark-remake-blocks.js";
|
|
41
|
+
// Re-export the remark plugin for advanced usage
|
|
42
|
+
export { remarkRemakeBlocks, remarkCalloutBlocks } from "./remark-remake-blocks.js";
|
|
43
|
+
/**
|
|
44
|
+
* Create the `remake-blocks` Astro integration.
|
|
45
|
+
*
|
|
46
|
+
* This integration:
|
|
47
|
+
* 1. Registers the `remarkRemakeBlocks` remark plugin so that GitHub-style
|
|
48
|
+
* admonition directives (`> [!NOTE]`, `> [!TIP]`, etc.) inside blockquotes
|
|
49
|
+
* are transformed into styled callout HTML elements.
|
|
50
|
+
* 2. Supports disclosure widgets via `> [!] Title` syntax.
|
|
51
|
+
* 3. Optionally injects the default CSS styles into every page.
|
|
52
|
+
* 4. Optionally enhances regular blockquotes with improved styling.
|
|
53
|
+
*
|
|
54
|
+
* @param options - Plugin configuration options.
|
|
55
|
+
* @returns An Astro integration object.
|
|
56
|
+
*/
|
|
57
|
+
export default function remakeBlocks(options = {}) {
|
|
58
|
+
// Defensive: accept null (the default parameter only kicks in for `undefined`,
|
|
59
|
+
// so an explicit `null` would otherwise crash the destructuring below).
|
|
60
|
+
const opts = options ?? {};
|
|
61
|
+
const { injectStyles = true, ...remarkOptions } = opts;
|
|
62
|
+
return {
|
|
63
|
+
name: "remake-blocks",
|
|
64
|
+
hooks: {
|
|
65
|
+
"astro:config:setup": ({ config, updateConfig, injectScript }) => {
|
|
66
|
+
// Inject the remark plugin
|
|
67
|
+
updateConfig({
|
|
68
|
+
markdown: {
|
|
69
|
+
remarkPlugins: [
|
|
70
|
+
...(config.markdown?.remarkPlugins ?? []),
|
|
71
|
+
[remarkRemakeBlocks, remarkOptions],
|
|
72
|
+
],
|
|
73
|
+
},
|
|
74
|
+
});
|
|
75
|
+
// If auto-injecting styles, add the stylesheet
|
|
76
|
+
if (injectStyles) {
|
|
77
|
+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
78
|
+
const stylesPath = path.resolve(__dirname, "styles.css");
|
|
79
|
+
const accordionPath = path.resolve(__dirname, "accordion.js");
|
|
80
|
+
injectScript("page-ssr", `import "${stylesPath}";`);
|
|
81
|
+
injectScript("page", `import "${accordionPath}";`);
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
//# sourceMappingURL=astro.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"astro.js","sourceRoot":"","sources":["../src/astro.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAK/D,iDAAiD;AACjD,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEpF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,UAAuD,EAAE;IAEzD,+EAA+E;IAC/E,wEAAwE;IACxE,MAAM,IAAI,GAAG,OAAO,IAAI,EAAE,CAAC;IAC3B,MAAM,EACJ,YAAY,GAAG,IAAI,EACnB,GAAG,aAAa,EACjB,GAAG,IAAI,CAAC;IAET,OAAO;QACL,IAAI,EAAE,eAAe;QAErB,KAAK,EAAE;YACL,oBAAoB,EAAE,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,EAAE;gBAC/D,2BAA2B;gBAC3B,YAAY,CAAC;oBACX,QAAQ,EAAE;wBACR,aAAa,EAAE;4BACb,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,aAAa,IAAI,EAAE,CAAC;4BACzC,CAAC,kBAAkB,EAAE,aAAa,CAAC;yBACpC;qBACF;iBACF,CAAC,CAAC;gBAEH,+CAA+C;gBAC/C,IAAI,YAAY,EAAE,CAAC;oBACjB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;oBAC/D,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;oBACzD,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;oBAC9D,YAAY,CAAC,UAAU,EAAE,WAAW,UAAU,IAAI,CAAC,CAAC;oBACpD,YAAY,CAAC,MAAM,EAAE,WAAW,aAAa,IAAI,CAAC,CAAC;gBACrD,CAAC;YACH,CAAC;SACF;KACF,CAAC;AACJ,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,56 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* remake-blocks — main entry point
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* ```ts
|
|
9
|
-
* // astro.config.mjs
|
|
10
|
-
* import { defineConfig } from "astro/config";
|
|
11
|
-
* import remakeBlocks from "@dr-ishaan/remake-blocks";
|
|
12
|
-
*
|
|
13
|
-
* export default defineConfig({
|
|
14
|
-
* integrations: [remakeBlocks()],
|
|
15
|
-
* });
|
|
16
|
-
* ```
|
|
17
|
-
*
|
|
18
|
-
* @example With custom callout types:
|
|
19
|
-
* ```ts
|
|
20
|
-
* export default defineConfig({
|
|
21
|
-
* integrations: [
|
|
22
|
-
* remakeBlocks({
|
|
23
|
-
* customCallouts: [
|
|
24
|
-
* {
|
|
25
|
-
* type: "example",
|
|
26
|
-
* icon: "💡",
|
|
27
|
-
* className: "callout-example",
|
|
28
|
-
* defaultTitle: "Example",
|
|
29
|
-
* color: "#8b5cf6",
|
|
30
|
-
* backgroundColor: "#f5f3ff",
|
|
31
|
-
* },
|
|
32
|
-
* ],
|
|
33
|
-
* }),
|
|
34
|
-
* ],
|
|
35
|
-
* });
|
|
36
|
-
* ```
|
|
37
|
-
*/
|
|
38
|
-
import type { AstroIntegration } from "astro";
|
|
39
|
-
import type { AstroCalloutBlocksOptions } from "./types.js";
|
|
40
|
-
export type { AstroCalloutBlocksOptions, RemarkCalloutBlocksOptions, CalloutConfig, CalloutType, BuiltinCalloutType, ParsedCallout } from "./types.js";
|
|
41
|
-
export { remarkCalloutBlocks } from "./remark-callout-blocks.js";
|
|
42
|
-
/**
|
|
43
|
-
* Create the `@dr-ishaan/remake-blocks` Astro integration.
|
|
44
|
-
*
|
|
45
|
-
* This integration:
|
|
46
|
-
* 1. Registers the `remarkCalloutBlocks` remark plugin so that GitHub-style
|
|
47
|
-
* admonition directives (`> [!NOTE]`, `> [!TIP]`, etc.) inside blockquotes
|
|
48
|
-
* are transformed into styled callout HTML elements.
|
|
49
|
-
* 2. Optionally injects the default CSS styles into every page.
|
|
50
|
-
* 3. Optionally enhances regular blockquotes with improved styling.
|
|
51
|
-
*
|
|
52
|
-
* @param options - Plugin configuration options.
|
|
53
|
-
* @returns An Astro integration object.
|
|
4
|
+
* Re-exports the remark plugin, types, and Astro integration.
|
|
5
|
+
* The Astro integration is also available from the `/astro` subpath
|
|
6
|
+
* (`import remakeBlocks from "remake-blocks/astro"`), but is re-exported
|
|
7
|
+
* here for backward compatibility with `import remakeBlocks from "remake-blocks"`.
|
|
54
8
|
*/
|
|
55
|
-
export
|
|
9
|
+
export { remarkRemakeBlocks, remarkCalloutBlocks, BUILTIN_CALLOUTS } from "./remark-remake-blocks.js";
|
|
10
|
+
export { default } from "./astro.js";
|
|
11
|
+
export type { RemakeBlocksOptions, AstroRemakeBlocksOptions, CalloutConfig, CalloutType, BuiltinCalloutType, ParsedCallout, CustomCalloutType, CalloutConfigMap, } from "./types.js";
|
|
56
12
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAGtG,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAGrC,YAAY,EACV,mBAAmB,EACnB,wBAAwB,EACxB,aAAa,EACb,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,YAAY,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,90 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* remake-blocks — main entry point
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* ```ts
|
|
9
|
-
* // astro.config.mjs
|
|
10
|
-
* import { defineConfig } from "astro/config";
|
|
11
|
-
* import remakeBlocks from "@dr-ishaan/remake-blocks";
|
|
12
|
-
*
|
|
13
|
-
* export default defineConfig({
|
|
14
|
-
* integrations: [remakeBlocks()],
|
|
15
|
-
* });
|
|
16
|
-
* ```
|
|
17
|
-
*
|
|
18
|
-
* @example With custom callout types:
|
|
19
|
-
* ```ts
|
|
20
|
-
* export default defineConfig({
|
|
21
|
-
* integrations: [
|
|
22
|
-
* remakeBlocks({
|
|
23
|
-
* customCallouts: [
|
|
24
|
-
* {
|
|
25
|
-
* type: "example",
|
|
26
|
-
* icon: "💡",
|
|
27
|
-
* className: "callout-example",
|
|
28
|
-
* defaultTitle: "Example",
|
|
29
|
-
* color: "#8b5cf6",
|
|
30
|
-
* backgroundColor: "#f5f3ff",
|
|
31
|
-
* },
|
|
32
|
-
* ],
|
|
33
|
-
* }),
|
|
34
|
-
* ],
|
|
35
|
-
* });
|
|
36
|
-
* ```
|
|
37
|
-
*/
|
|
38
|
-
import { fileURLToPath } from "url";
|
|
39
|
-
import path from "path";
|
|
40
|
-
import { remarkCalloutBlocks } from "./remark-callout-blocks.js";
|
|
41
|
-
// Re-export the remark plugin for advanced usage
|
|
42
|
-
export { remarkCalloutBlocks } from "./remark-callout-blocks.js";
|
|
43
|
-
/**
|
|
44
|
-
* Create the `@dr-ishaan/remake-blocks` Astro integration.
|
|
45
|
-
*
|
|
46
|
-
* This integration:
|
|
47
|
-
* 1. Registers the `remarkCalloutBlocks` remark plugin so that GitHub-style
|
|
48
|
-
* admonition directives (`> [!NOTE]`, `> [!TIP]`, etc.) inside blockquotes
|
|
49
|
-
* are transformed into styled callout HTML elements.
|
|
50
|
-
* 2. Optionally injects the default CSS styles into every page.
|
|
51
|
-
* 3. Optionally enhances regular blockquotes with improved styling.
|
|
52
|
-
*
|
|
53
|
-
* @param options - Plugin configuration options.
|
|
54
|
-
* @returns An Astro integration object.
|
|
4
|
+
* Re-exports the remark plugin, types, and Astro integration.
|
|
5
|
+
* The Astro integration is also available from the `/astro` subpath
|
|
6
|
+
* (`import remakeBlocks from "remake-blocks/astro"`), but is re-exported
|
|
7
|
+
* here for backward compatibility with `import remakeBlocks from "remake-blocks"`.
|
|
55
8
|
*/
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
hooks: {
|
|
61
|
-
/**
|
|
62
|
-
* During the Astro config setup, inject the remark plugin into the
|
|
63
|
-
* markdown.remarkPlugins array and optionally inject the stylesheet.
|
|
64
|
-
*/
|
|
65
|
-
"astro:config:setup": ({ config, updateConfig, injectScript }) => {
|
|
66
|
-
// Inject the remark plugin
|
|
67
|
-
updateConfig({
|
|
68
|
-
markdown: {
|
|
69
|
-
remarkPlugins: [
|
|
70
|
-
...(config.markdown?.remarkPlugins ?? []),
|
|
71
|
-
[remarkCalloutBlocks, remarkOptions],
|
|
72
|
-
],
|
|
73
|
-
},
|
|
74
|
-
});
|
|
75
|
-
// If auto-injecting styles, add the stylesheet via Astro's
|
|
76
|
-
// built-in injectScript mechanism.
|
|
77
|
-
if (injectStyles) {
|
|
78
|
-
// Resolve the path to the bundled stylesheet
|
|
79
|
-
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
80
|
-
const stylesPath = path.resolve(__dirname, "styles.css");
|
|
81
|
-
// Inject an import so the styles are included in every page.
|
|
82
|
-
// Users who need more control can set injectStyles: false
|
|
83
|
-
// and import "@dr-ishaan/remake-blocks/styles.css" manually.
|
|
84
|
-
injectScript("page-ssr", `import "${stylesPath}";`);
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
},
|
|
88
|
-
};
|
|
89
|
-
}
|
|
9
|
+
// Core remark plugin
|
|
10
|
+
export { remarkRemakeBlocks, remarkCalloutBlocks, BUILTIN_CALLOUTS } from "./remark-remake-blocks.js";
|
|
11
|
+
// Astro integration (default export, re-exported for backward compatibility)
|
|
12
|
+
export { default } from "./astro.js";
|
|
90
13
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,qBAAqB;AACrB,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAEtG,6EAA6E;AAC7E,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
|