@nakobase/nakobase-md-html 2.2.0 → 2.3.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 +36 -7
- package/dist/cjs/constants.d.ts +1 -1
- package/dist/cjs/constants.js +1 -1
- package/dist/cjs/sanitizer.js +2 -2
- package/dist/cjs/utils/md-container.d.ts.map +1 -1
- package/dist/cjs/utils/md-container.js +13 -3
- package/dist/styles/base.css +1 -1
- package/dist/styles/rich.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,14 +30,15 @@ This is a test of the markdown to html converter.
|
|
|
30
30
|
`,
|
|
31
31
|
{
|
|
32
32
|
codeHighlight: true, // Enable code highlighting (optional, default is false)
|
|
33
|
-
rich: true // Enable rich features like containers and custom blocks (optional, default is false)
|
|
33
|
+
rich: true, // Enable rich features like containers and custom blocks (optional, default is false)
|
|
34
|
+
anchor: true, // Enable anchor links (optional, default is false)
|
|
34
35
|
}
|
|
35
36
|
);
|
|
36
37
|
|
|
37
38
|
console.log(html);
|
|
38
39
|
```
|
|
39
40
|
|
|
40
|
-
Add `.
|
|
41
|
+
Add `.nbcontent` to the container of the markdown.
|
|
41
42
|
|
|
42
43
|
```html
|
|
43
44
|
<div class="nbcontent">
|
|
@@ -47,23 +48,51 @@ Add `.nbcontents` to the container of the markdown.
|
|
|
47
48
|
|
|
48
49
|
### Styles
|
|
49
50
|
|
|
50
|
-
We have some default styles that are applied to the HTML.
|
|
51
|
+
We have some default styles that are applied to the HTML. All CSS variables use the `--nb-` prefix so they do not conflict with your app's design tokens (e.g. `--background`, `--primary`).
|
|
51
52
|
|
|
52
|
-
####
|
|
53
|
-
|
|
53
|
+
#### Import
|
|
54
|
+
|
|
55
|
+
**Basic** (markdown only):
|
|
54
56
|
|
|
55
57
|
```ts
|
|
56
58
|
import '@nakobase/nakobase-md-html/styles/base.css';
|
|
57
59
|
```
|
|
58
60
|
|
|
59
|
-
|
|
60
|
-
For content with custom blocks, containers, and rich features:
|
|
61
|
+
**Rich** (custom blocks, containers, etc.):
|
|
61
62
|
|
|
62
63
|
```ts
|
|
63
64
|
import '@nakobase/nakobase-md-html/styles/base.css';
|
|
64
65
|
import '@nakobase/nakobase-md-html/styles/rich.css';
|
|
65
66
|
```
|
|
66
67
|
|
|
68
|
+
#### Changing colors
|
|
69
|
+
|
|
70
|
+
You can customize colors in two ways:
|
|
71
|
+
|
|
72
|
+
1. **Content area (the `.nbcontent` block itself)**
|
|
73
|
+
The library does not set `background-color` or `color` on `.nbcontent`, so it inherits from its parent (e.g. your page background and text color). To give it its own look, set them directly:
|
|
74
|
+
|
|
75
|
+
```css
|
|
76
|
+
.nbcontent {
|
|
77
|
+
background-color: #f8f8f8;
|
|
78
|
+
color: #333;
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
2. **Inner elements (code blocks, containers, links, etc.)**
|
|
83
|
+
Override CSS variables on `.nbcontent`. Variables are prefixed with `--nb-` (e.g. `--nb-primary`, `--nb-link`, `--nb-background` for inner boxes). See [base styles](src/styles/base.scss) for the full list.
|
|
84
|
+
|
|
85
|
+
```css
|
|
86
|
+
.nbcontent {
|
|
87
|
+
--nb-primary: #2563eb;
|
|
88
|
+
--nb-link: #0ea5e9;
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
If your overrides (e.g. in `globals.css`) don't take effect because the library CSS loads later, either **load your override CSS after the library** (e.g. import it after `base.css` / `rich.css` in the page that renders the content), or use **`!important`** (e.g. `--nb-link: #000 !important;`).
|
|
93
|
+
|
|
94
|
+
You can use both: e.g. set `.nbcontent { background-color; color; }` for the content area and `--nb-*` for code blocks and containers.
|
|
95
|
+
|
|
67
96
|
### Code Highlighting
|
|
68
97
|
If you want code highlighting, also import a Prism theme:
|
|
69
98
|
|
package/dist/cjs/constants.d.ts
CHANGED
package/dist/cjs/constants.js
CHANGED
package/dist/cjs/sanitizer.js
CHANGED
|
@@ -10,7 +10,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
10
10
|
|
|
11
11
|
const extendedTags = ['iframe', 'code', 'details', 'summary', 'circle', 'img', 'input', 'pre', 'span', 'picture', 'source'];
|
|
12
12
|
const extendedAttributes = {
|
|
13
|
-
a: [...(_sanitizeHtml.defaults.allowedAttributes.a || []), 'id', 'class', 'data-line'],
|
|
13
|
+
a: [...(_sanitizeHtml.defaults.allowedAttributes.a || []), 'id', 'class', 'data-line', 'rel'],
|
|
14
14
|
iframe: ['src', 'width', 'height', 'allow', 'sandbox', 'frameborder'],
|
|
15
15
|
input: ['type', 'checked', 'disabled', 'readonly', 'value', 'class'],
|
|
16
16
|
source: ['srcset', 'type'],
|
|
@@ -20,7 +20,7 @@ const extendedAttributes = {
|
|
|
20
20
|
li: ['class'],
|
|
21
21
|
div: ['class'],
|
|
22
22
|
pre: ['class'],
|
|
23
|
-
code: [...(_sanitizeHtml.defaults.allowedAttributes.code || []), 'class'],
|
|
23
|
+
code: [...(_sanitizeHtml.defaults.allowedAttributes.code || []), 'class', 'data-line'],
|
|
24
24
|
span: ['class'],
|
|
25
25
|
h1: ['id'],
|
|
26
26
|
h2: ['id'],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-container.d.ts","sourceRoot":"","sources":["../../../src/utils/md-container.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,uBAAuB,CAAC;AAK/C,eAAO,MAAM,cAAc;uBACG,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC;AAMF,eAAO,MAAM,aAAa;uBACI,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CA2C/C,CAAC;AAMF,eAAO,MAAM,kBAAkB;uBACD,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;
|
|
1
|
+
{"version":3,"file":"md-container.d.ts","sourceRoot":"","sources":["../../../src/utils/md-container.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,uBAAuB,CAAC;AAK/C,eAAO,MAAM,cAAc;uBACG,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC;AAMF,eAAO,MAAM,aAAa;uBACI,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CA2C/C,CAAC;AAMF,eAAO,MAAM,kBAAkB;uBACD,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAwD/C,CAAC;AAOF,eAAO,MAAM,UAAU;uBACO,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC;AA0BF,eAAO,MAAM,cAAc;uBACG,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAa/C,CAAC"}
|
|
@@ -65,7 +65,7 @@ const bubbleOptions = exports.bubbleOptions = {
|
|
|
65
65
|
};
|
|
66
66
|
|
|
67
67
|
// BubbleImage
|
|
68
|
-
// ::: bubble-image alt="alt" src="src" webp="src.webp" width="640" height="360"
|
|
68
|
+
// ::: bubble-image alt="alt" src="src" webp="src.webp" width="640" height="360" imgStyle="browser"
|
|
69
69
|
// markdown
|
|
70
70
|
// :::
|
|
71
71
|
const bubbleImageOptions = exports.bubbleImageOptions = {
|
|
@@ -87,7 +87,8 @@ const bubbleImageOptions = exports.bubbleImageOptions = {
|
|
|
87
87
|
alt = '',
|
|
88
88
|
width = '640',
|
|
89
89
|
height = '360',
|
|
90
|
-
webp = ''
|
|
90
|
+
webp = '',
|
|
91
|
+
imgStyle = 'default'
|
|
91
92
|
} = attrs;
|
|
92
93
|
const imgHtml = `<img src="${(0, _utils.escapeHtml)(src)}" alt="${(0, _utils.escapeHtml)(alt)}" ` + `width="${(0, _utils.escapeHtml)(width)}" height="${(0, _utils.escapeHtml)(height)}">`;
|
|
93
94
|
let imageElement;
|
|
@@ -96,7 +97,16 @@ const bubbleImageOptions = exports.bubbleImageOptions = {
|
|
|
96
97
|
} else {
|
|
97
98
|
imageElement = imgHtml;
|
|
98
99
|
}
|
|
99
|
-
|
|
100
|
+
const browserElement = `
|
|
101
|
+
<div class="browser-header">
|
|
102
|
+
<div class="controls">
|
|
103
|
+
<div class="control-btn close"></div>
|
|
104
|
+
<div class="control-btn minimize"></div>
|
|
105
|
+
<div class="control-btn maximize"></div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
`;
|
|
109
|
+
return `<div class="bubble-image">` + `<div class="bubble-image-wrapper">` + `${imgStyle === 'browser' ? browserElement : ''}` + imageElement + `</div>` + `<div class="bubble-image-content">`;
|
|
100
110
|
} else {
|
|
101
111
|
return `</div></div>\n`;
|
|
102
112
|
}
|
package/dist/styles/base.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@media screen and (max-width: 576px){pre>code{padding:1rem .8rem;font-size:.85em}}.nbcontent{--background: oklch(100% 0 0deg);--foreground: oklch(14.1% 0.005 285.823deg);--primary: oklch(21% 0.006 285.885deg);--primary-foreground: oklch(98.5% 0 0deg);--secondary: oklch(96.7% 0.001 286.375deg);--secondary-foreground: oklch(21% 0.006 285.885deg);--muted: oklch(96.7% 0.001 286.375deg);--muted-foreground: oklch(55.2% 0.016 285.938deg);--accent: oklch(96.7% 0.001 286.375deg);--accent-foreground: oklch(21% 0.006 285.885deg);--destructive: oklch(57.7% 0.245 27.325deg);--border: oklch(92% 0.004 286.32deg);--input: oklch(92% 0.004 286.32deg);--ring: oklch(70.5% 0.015 286.067deg);--link: oklch(62.3% 0.214 259.815deg);--warning: oklch(97.54% 0.025552 84.593deg);--warning-foreground: oklch(83.04% 0.1459 74.36deg);--danger: oklch(96.56% 0.0177 4.51deg);--danger-foreground: oklch(72.71% 0.1684 24.66deg);--rounded-xs: 4px;--rounded-sm: 7px;--rounded-md: 10px;--rounded-lg: 14px;--rounded-full: 99rem
|
|
1
|
+
@media screen and (max-width: 576px){pre>code{padding:1rem .8rem;font-size:.85em}}.nbcontent{--nb-background: oklch(100% 0 0deg);--nb-foreground: oklch(14.1% 0.005 285.823deg);--nb-primary: oklch(21% 0.006 285.885deg);--nb-primary-foreground: oklch(98.5% 0 0deg);--nb-secondary: oklch(96.7% 0.001 286.375deg);--nb-secondary-foreground: oklch(21% 0.006 285.885deg);--nb-muted: oklch(96.7% 0.001 286.375deg);--nb-muted-foreground: oklch(55.2% 0.016 285.938deg);--nb-accent: oklch(96.7% 0.001 286.375deg);--nb-accent-foreground: oklch(21% 0.006 285.885deg);--nb-destructive: oklch(57.7% 0.245 27.325deg);--nb-border: oklch(92% 0.004 286.32deg);--nb-input: oklch(92% 0.004 286.32deg);--nb-ring: oklch(70.5% 0.015 286.067deg);--nb-link: oklch(62.3% 0.214 259.815deg);--nb-warning: oklch(97.54% 0.025552 84.593deg);--nb-warning-foreground: oklch(83.04% 0.1459 74.36deg);--nb-danger: oklch(96.56% 0.0177 4.51deg);--nb-danger-foreground: oklch(72.71% 0.1684 24.66deg);--nb-rounded-xs: 4px;--nb-rounded-sm: 7px;--nb-rounded-md: 10px;--nb-rounded-lg: 14px;--nb-rounded-full: 99rem}.nbcontent>*:first-child{margin-top:0}.nbcontent{line-height:1.8}.nbcontent i,.nbcontent cite,.nbcontent em,.nbcontent var{font-style:italic}.nbcontent strong{font-weight:bold}.nbcontent a{color:var(--nb-link)}.nbcontent a:hover{text-decoration:underline}.nbcontent p+p{margin-top:1.2em}.nbcontent h1,.nbcontent h2,.nbcontent h3,.nbcontent h4,.nbcontent h5,.nbcontent h6{font-weight:bold}.nbcontent h1+p,.nbcontent h2+p,.nbcontent h3+p,.nbcontent h4+p,.nbcontent h5+p,.nbcontent h6+p{margin-top:.2em}.nbcontent h1,.nbcontent h2{margin-top:1.9em;margin-bottom:1.5rem;padding-bottom:.1em;border-bottom:solid 1px var(--nb-border)}.nbcontent h3,.nbcontent h4,.nbcontent h5,.nbcontent h6{margin-top:1.8em;margin-bottom:.4em}.nbcontent h1{font-size:1.7em}.nbcontent h2{font-size:1.5em}.nbcontent h3{font-size:1.3em}.nbcontent h4{font-size:1.1em}.nbcontent h5{font-size:1em}.nbcontent h6{font-size:.9em}@media screen and (max-width: 576px){.nbcontent h1{font-size:1.6em}.nbcontent h2{font-size:1.4em}.nbcontent h3{font-size:1.2em}.nbcontent h4{font-size:1.1em}.nbcontent h5{font-size:1em}.nbcontent h6{font-size:.85em}}.nbcontent ul,.nbcontent ol{margin:1.4rem 0;line-height:1.6}.nbcontent ul>li,.nbcontent ol>li{margin:.4rem 0}.nbcontent ul ul,.nbcontent ul ol,.nbcontent ol ul,.nbcontent ol ol{margin:.2em 0}.nbcontent ul p,.nbcontent ol p{margin:0}.nbcontent ul{padding-left:1.8em}.nbcontent ul>li{list-style:disc}.nbcontent ul>li::marker{font-size:1.1em}.nbcontent ol{padding-left:1.7em}.nbcontent ol>li{list-style:decimal;padding-left:.2em}.nbcontent ol>li::marker{font-weight:600;letter-spacing:-0.05em}.nbcontent .contains-task-list .task-list-item{list-style:none}.nbcontent .task-list-item-checkbox{margin-left:-1.5em;font-size:1em;pointer-events:none}.nbcontent code{padding:.2em .4em;background:var(--nb-secondary);font-size:.85em;border-radius:var(--nb-rounded-xs);vertical-align:.08em;color:var(--nb-foreground)}.nbcontent code,.nbcontent .code-filename{font-family:"JetBrains Mono","Fira Code","SFMono-Regular",Consolas,"Liberation Mono",Menlo,"Cascadia Code","Source Code Pro",monospace,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-font-smoothing:antialiased}.nbcontent .code-container{position:relative;margin:1.3rem 0}.nbcontent .code-filename{display:table;max-width:100%;background:var(--nb-primary);color:var(--nb-primary-foreground);font-size:12px;line-height:1.3;border-radius:var(--nb-rounded-xs) var(--nb-rounded-xs) 0 0;padding:6px 12px 20px;margin-bottom:-24px}.nbcontent .code-filename-container+pre{border-top-left-radius:0}.nbcontent pre{margin:1.3rem 0;background:var(--nb-primary);overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--nb-rounded-md);word-break:normal;word-wrap:normal;display:flex}.nbcontent pre:after{content:"";width:8px;flex-shrink:0}.nbcontent pre code{margin:0;padding:0;background:rgba(0,0,0,0);font-size:.9em}.nbcontent pre>code{display:block;padding:1.1rem}.nbcontent table{margin:1.2rem auto;width:auto;border-collapse:collapse;font-size:.95em;line-height:1.5;word-break:normal;display:block;overflow:auto;-webkit-overflow-scrolling:touch}.nbcontent th,.nbcontent td{padding:.6rem;border:solid 1px var(--nb-border);background:var(--nb-background)}.nbcontent th{font-weight:700;background:var(--nb-secondary)}.nbcontent img:not(.emoji){margin:1.5rem auto;display:table;max-width:100%;height:auto}.nbcontent img+br{display:none}.nbcontent img~em{display:block;margin:-1rem auto 0;line-height:1.3;text-align:center;color:var(--nb-muted-foreground);font-size:.92em}.nbcontent a:has(img){display:table;margin:0 auto}.nbcontent hr{border-top:2px solid var(--nb-border);margin:2.5rem 0}.nbcontent blockquote{font-size:.97em;margin:1.4rem 0;border-left:solid 3px var(--nb-border);padding:2px 0 2px .7em;color:var(--nb-muted-foreground)}.nbcontent blockquote p{margin:1rem 0}.nbcontent blockquote>:first-child{margin-top:0}.nbcontent blockquote>:last-child{margin-bottom:0}.nbcontent blockquote.twitter-tweet{display:none}.dark .nbcontent{--nb-background: oklch(14.1% 0.005 285.823deg);--nb-foreground: oklch(98.5% 0 0deg);--nb-primary: oklch(92% 0.004 286.32deg);--nb-primary-foreground: oklch(21% 0.006 285.885deg);--nb-secondary: oklch(27.4% 0.006 286.033deg);--nb-secondary-foreground: oklch(98.5% 0 0deg);--nb-muted: oklch(27.4% 0.006 286.033deg);--nb-muted-foreground: oklch(70.5% 0.015 286.067deg);--nb-accent: oklch(27.4% 0.006 286.033deg);--nb-accent-foreground: oklch(98.5% 0 0deg);--nb-destructive: oklch(70.4% 0.191 22.216deg);--nb-border: oklch(100% 0 0deg / 0.1);--nb-input: oklch(100% 0 0deg / 0.15);--nb-ring: oklch(55.2% 0.016 285.938deg);--nb-link: oklch(62.3% 0.214 259.815deg);--nb-warning: oklch(97.54% 0.025552 84.593deg);--nb-warning-foreground: oklch(83.04% 0.1459 74.36deg);--nb-danger: oklch(96.56% 0.0177 4.51deg);--nb-danger-foreground: oklch(72.71% 0.1684 24.66deg);--nb-rounded-xs: 4px;--nb-rounded-sm: 7px;--nb-rounded-md: 10px;--nb-rounded-lg: 14px;--nb-rounded-full: 99rem}
|
package/dist/styles/rich.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.nbcontent details{font-size:.95em;margin:1rem 0;line-height:1.7}.nbcontent summary{cursor:pointer;outline:0;padding:.7em .7em .7em .9em;border:solid 1px var(--border);color:var(--primary);font-size:.9em;border-radius:var(--rounded-sm);background:var(--background)}.nbcontent summary::-webkit-details-marker{color:var(--muted-foreground)}.nbcontent details[open]>summary{border-radius:var(--rounded-sm) var(--rounded-sm) 0 0;box-shadow:none;background:var(--background);border-bottom:none}.nbcontent .details-content{padding:.5em .9em;border:solid 1px var(--border);border-radius:0 0 var(--rounded-lg) var(--rounded-lg);background:var(--background)}.nbcontent .details-content>*{margin:.5em 0}.nbcontent .bubble{display:flex;align-items:center;gap:1rem;margin:1rem 0}.nbcontent .bubble img{width:80px;height:80px;border-radius:50%;border:2px solid var(--border);padding:.2rem}.nbcontent .bubble .bubble-content{position:relative;width:100%;padding:.5rem .8rem;color:var(--foreground);background-color:var(--secondary);border-radius:5px}.nbcontent .bubble .bubble-content::before,.nbcontent .bubble .bubble-content::after{position:absolute;top:50%;left:-12px;width:12px;height:15px;clip-path:polygon(0 50%, 100% 0, 100% 100%);content:"";transform:translateY(-50%)}.nbcontent .bubble .bubble-content::before{background-color:var(--secondary)}.nbcontent .bubble .bubble-content::after{left:-9px;background-color:var(--secondary)}.nbcontent .bubble.right{flex-direction:row-reverse}.nbcontent .bubble.right .bubble-content::before,.nbcontent .bubble.right .bubble-content::after{left:auto;right:-12px;clip-path:polygon(0 0, 100% 50%, 0 100%)}.nbcontent .bubble.right .bubble-content::after{left:auto;right:-9px}.nbcontent .bubble-image{display:flex;align-items:center;gap:1rem;margin:1.5rem 0}.nbcontent .bubble-image .bubble-image-wrapper{flex-basis:40%;display:flex;align-items:center;justify-content:center;max-width:100%;border:2px solid var(--border);border-radius:5px}.nbcontent .bubble-image .bubble-image-wrapper img{width:100%;height:auto;margin:0}.nbcontent .bubble-image .bubble-image-content{flex-basis:60%;position:relative;width:100%;padding:.5rem .8rem;color:var(--foreground);background-color:var(--secondary);border-radius:5px}.nbcontent .bubble-image .bubble-image-content::before,.nbcontent .bubble-image .bubble-image-content::after{position:absolute;top:50%;left:-12px;width:12px;height:15px;clip-path:polygon(0 50%, 100% 0, 100% 100%);content:"";transform:translateY(-50%);background-color:var(--secondary)}.nbcontent .bubble-image .bubble-image-content::after{left:-9px}@media screen and (max-width: 768px){.nbcontent .bubble-image{flex-direction:column}.nbcontent .bubble-image .bubble-image-content::before,.nbcontent .bubble-image .bubble-image-content::after{top:-12px;left:50%;width:28px;height:12px;clip-path:polygon(50% 0, 0 100%, 100% 100%);transform:translateX(-50%)}.nbcontent .bubble-image .bubble-image-content::after{top:-9px}}.nbcontent .box{margin:1.5rem 0}.nbcontent .box.box1{position:relative;border:1px solid var(--border);border-radius:var(--rounded-sm);padding:1rem}.nbcontent .box.box1 span{position:absolute;top:0;left:1rem;font-size:1.2em;color:var(--foreground);background-color:var(--background);padding:0 .5em;transform:translateY(-50%)}.nbcontent .box.box2{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--secondary)}.nbcontent .box.box3{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--background);border:2px solid var(--warning-foreground)}.nbcontent .box.box3 .msg-container{position:absolute;top:0;left:1rem;background-color:var(--background);padding:0 .5rem;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--warning-foreground);font-weight:bold}.nbcontent .box.box3 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--warning-foreground);background-color:var(--warning-foreground);border-radius:50%}.nbcontent .box.box3 .icon::before,.nbcontent .box.box3 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box3 .icon::before{top:2px;height:2px}.nbcontent .box.box3 .icon::after{height:8px;bottom:2px}.nbcontent .box.box4{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--background);border:2px solid var(--danger-foreground)}.nbcontent .box.box4 .msg-container{position:absolute;top:0;left:1rem;background-color:var(--background);padding:0 .5rem;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--danger-foreground);font-weight:bold}.nbcontent .box.box4 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--danger-foreground);background-color:var(--danger-foreground);border-radius:50%}.nbcontent .box.box4 .icon::before,.nbcontent .box.box4 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box4 .icon::before{top:2px;height:2px}.nbcontent .box.box4 .icon::after{height:8px;bottom:2px}.nbcontent .box.box5{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--warning)}.dark .nbcontent .box.box5{color:var(--background)}.nbcontent .box.box5 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--warning-foreground);font-weight:bold}.nbcontent .box.box5 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--warning-foreground);background-color:var(--warning-foreground);border-radius:50%}.nbcontent .box.box5 .icon::before,.nbcontent .box.box5 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box5 .icon::before{top:2px;height:2px}.nbcontent .box.box5 .icon::after{height:8px;bottom:2px}.nbcontent .box.box6{position:relative;border-radius:var(--rounded-sm);padding:1rem;background-color:var(--danger)}.dark .nbcontent .box.box6{color:var(--background)}.nbcontent .box.box6 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--danger-foreground);font-weight:bold}.nbcontent .box.box6 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--danger-foreground);background-color:var(--danger-foreground);border-radius:50%}.nbcontent .box.box6 .icon::before,.nbcontent .box.box6 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box6 .icon::before{top:2px;height:2px}.nbcontent .box.box6 .icon::after{height:8px;bottom:2px}.nbcontent .heading{margin:1.5rem 0}.nbcontent .heading h1,.nbcontent .heading h2,.nbcontent .heading h3,.nbcontent .heading h4,.nbcontent .heading h5,.nbcontent .heading h6{margin:0}.nbcontent .heading.heading1{display:inline-block;position:relative;padding-left:1.5rem;font-weight:bold}.nbcontent .heading.heading1::before{position:absolute;top:0;left:0;width:17px;height:28px;color:var(--primary);background-image:url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221.25em%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cstyle%3Esvg%7Bfill%3A%235ab9ff%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M438.6%20105.4c12.5%2012.5%2012.5%2032.8%200%2045.3l-256%20256c-12.5%2012.5-32.8%2012.5-45.3%200l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200L160%20338.7%20393.4%20105.4c12.5-12.5%2032.8-12.5%2045.3%200z%22%2F%3E%3C%2Fsvg%3E);background-position:50%;background-repeat:no-repeat;content:""}.nbcontent .external-link{display:inline-flex;align-items:center;gap:.3em;color:var(--link)}.nbcontent .external-link::after{content:"";display:inline-block;width:.9em;height:.9em;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center/contain;background-color:var(--link);vertical-align:-0.125em;position:relative;top:-0.05em}.nbcontent .highlight{background:linear-gradient(transparent 60%, #fef08a 40%);padding:0 2px;border-radius:2px}.dark .nbcontent .highlight{background:linear-gradient(transparent 60%, #ca8a04 40%)}.nbcontent .highlight.highlight-red{background:linear-gradient(transparent 60%, #fecaca 40%)}.dark .nbcontent .highlight.highlight-red{background:linear-gradient(transparent 60%, #dc2626 40%)}.nbcontent .highlight.highlight-green{background:linear-gradient(transparent 60%, #bbf7d0 40%)}.dark .nbcontent .highlight.highlight-green{background:linear-gradient(transparent 60%, #16a34a 40%)}.nbcontent .highlight.highlight-blue{background:linear-gradient(transparent 60%, #bfdbfe 40%)}.dark .nbcontent .highlight.highlight-blue{background:linear-gradient(transparent 60%, #2563eb 40%)}
|
|
1
|
+
.nbcontent details{font-size:.95em;margin:1rem 0;line-height:1.7}.nbcontent summary{cursor:pointer;outline:0;padding:.7em .7em .7em .9em;border:solid 1px var(--nb-border);color:var(--nb-primary);font-size:.9em;border-radius:var(--nb-rounded-sm);background:var(--nb-background)}.nbcontent summary::-webkit-details-marker{color:var(--nb-muted-foreground)}.nbcontent details[open]>summary{border-radius:var(--nb-rounded-sm) var(--nb-rounded-sm) 0 0;box-shadow:none;background:var(--nb-background);border-bottom:none}.nbcontent .details-content{padding:.5em .9em;border:solid 1px var(--nb-border);border-radius:0 0 var(--nb-rounded-lg) var(--nb-rounded-lg);background:var(--nb-background)}.nbcontent .details-content>*{margin:.5em 0}.nbcontent .bubble{display:flex;align-items:center;gap:1rem;margin:1rem 0}.nbcontent .bubble img{width:80px;height:80px;border-radius:50%;border:2px solid var(--nb-border);padding:.2rem}.nbcontent .bubble .bubble-content{position:relative;width:100%;padding:.5rem .8rem;color:var(--nb-foreground);background-color:var(--nb-secondary);border-radius:5px}.nbcontent .bubble .bubble-content p+p{margin-top:.4em}.nbcontent .bubble .bubble-content::before,.nbcontent .bubble .bubble-content::after{position:absolute;top:50%;left:-12px;width:12px;height:15px;clip-path:polygon(0 50%, 100% 0, 100% 100%);content:"";transform:translateY(-50%)}.nbcontent .bubble .bubble-content::before{background-color:var(--nb-secondary)}.nbcontent .bubble .bubble-content::after{left:-9px;background-color:var(--nb-secondary)}.nbcontent .bubble.right{flex-direction:row-reverse}.nbcontent .bubble.right .bubble-content::before,.nbcontent .bubble.right .bubble-content::after{left:auto;right:-12px;clip-path:polygon(0 0, 100% 50%, 0 100%)}.nbcontent .bubble.right .bubble-content::after{left:auto;right:-9px}.nbcontent .bubble-image{display:flex;align-items:center;gap:1rem;margin:1.5rem 0}.nbcontent .bubble-image .bubble-image-wrapper{overflow:hidden;flex-basis:40%;display:flex;align-items:center;justify-content:center;flex-direction:column;max-width:100%;border:2px solid var(--nb-border);border-radius:5px}.nbcontent .bubble-image .bubble-image-wrapper .browser-header{display:flex;align-items:center;padding:.6rem 1rem;background-color:var(--nb-secondary);width:100%}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls{display:flex;gap:.5rem}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls .control-btn{width:8px;height:8px;border-radius:50%}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls .control-btn.close{background-color:#ef4444}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls .control-btn.minimize{background-color:#eab308}.nbcontent .bubble-image .bubble-image-wrapper .browser-header .controls .control-btn.maximize{background-color:#22c55e}.nbcontent .bubble-image .bubble-image-wrapper img{width:100%;height:auto;margin:0}.nbcontent .bubble-image .bubble-image-content{flex-basis:60%;position:relative;width:100%;padding:.5rem .8rem;color:var(--nb-foreground);background-color:var(--nb-secondary);border-radius:5px}.nbcontent .bubble-image .bubble-image-content p+p{margin-top:.4em}.nbcontent .bubble-image .bubble-image-content::before,.nbcontent .bubble-image .bubble-image-content::after{position:absolute;top:50%;left:-12px;width:12px;height:15px;clip-path:polygon(0 50%, 100% 0, 100% 100%);content:"";transform:translateY(-50%);background-color:var(--nb-secondary)}.nbcontent .bubble-image .bubble-image-content::after{left:-9px}@media screen and (max-width: 768px){.nbcontent .bubble-image{flex-direction:column}.nbcontent .bubble-image .bubble-image-content::before,.nbcontent .bubble-image .bubble-image-content::after{top:-12px;left:50%;width:28px;height:12px;clip-path:polygon(50% 0, 0 100%, 100% 100%);transform:translateX(-50%)}.nbcontent .bubble-image .bubble-image-content::after{top:-9px}}.nbcontent .box{margin:1.5rem 0}.nbcontent .box p+p{margin-top:.4em}.nbcontent .box.box1{position:relative;border:1px solid var(--nb-border);border-radius:var(--nb-rounded-sm);padding:1rem}.nbcontent .box.box1 span{position:absolute;top:0;left:1rem;font-size:1.2em;color:var(--nb-foreground);background-color:var(--nb-background);padding:0 .5em;transform:translateY(-50%)}.nbcontent .box.box2{position:relative;border-radius:var(--nb-rounded-sm);padding:1rem;background-color:var(--nb-secondary)}.nbcontent .box.box3{position:relative;border-radius:var(--nb-rounded-sm);padding:1rem;background-color:var(--nb-background);border:2px solid var(--nb-warning-foreground)}.nbcontent .box.box3 .msg-container{position:absolute;top:0;left:1rem;background-color:var(--nb-background);padding:0 .5rem;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--nb-warning-foreground);font-weight:bold}.nbcontent .box.box3 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--nb-warning-foreground);background-color:var(--nb-warning-foreground);border-radius:50%}.nbcontent .box.box3 .icon::before,.nbcontent .box.box3 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box3 .icon::before{top:2px;height:2px}.nbcontent .box.box3 .icon::after{height:8px;bottom:2px}.nbcontent .box.box4{position:relative;border-radius:var(--nb-rounded-sm);padding:1rem;background-color:var(--nb-background);border:2px solid var(--nb-danger-foreground)}.nbcontent .box.box4 .msg-container{position:absolute;top:0;left:1rem;background-color:var(--nb-background);padding:0 .5rem;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--nb-danger-foreground);font-weight:bold}.nbcontent .box.box4 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--nb-danger-foreground);background-color:var(--nb-danger-foreground);border-radius:50%}.nbcontent .box.box4 .icon::before,.nbcontent .box.box4 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box4 .icon::before{top:2px;height:2px}.nbcontent .box.box4 .icon::after{height:8px;bottom:2px}.nbcontent .box.box5{position:relative;border-radius:var(--nb-rounded-sm);padding:1rem;background-color:var(--nb-warning)}.dark .nbcontent .box.box5{color:var(--nb-background)}.nbcontent .box.box5 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--nb-warning-foreground);font-weight:bold;margin-bottom:.5rem}.nbcontent .box.box5 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--nb-warning-foreground);background-color:var(--nb-warning-foreground);border-radius:50%}.nbcontent .box.box5 .icon::before,.nbcontent .box.box5 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box5 .icon::before{top:2px;height:2px}.nbcontent .box.box5 .icon::after{height:8px;bottom:2px}.nbcontent .box.box6{position:relative;border-radius:var(--nb-rounded-sm);padding:1rem;background-color:var(--nb-danger)}.dark .nbcontent .box.box6{color:var(--nb-background)}.nbcontent .box.box6 .msg-container{display:flex;flex-direction:row;align-items:center;gap:.3rem;color:var(--nb-danger-foreground);font-weight:bold;margin-bottom:.5rem}.nbcontent .box.box6 .icon{box-sizing:border-box;position:relative;width:20px;height:20px;border:2px solid var(--nb-danger-foreground);background-color:var(--nb-danger-foreground);border-radius:50%}.nbcontent .box.box6 .icon::before,.nbcontent .box.box6 .icon::after{content:"";position:absolute;border-radius:3px;width:2px;background:#fff;left:7px}.nbcontent .box.box6 .icon::before{top:2px;height:2px}.nbcontent .box.box6 .icon::after{height:8px;bottom:2px}.nbcontent .heading{margin:1.5rem 0}.nbcontent .heading h1,.nbcontent .heading h2,.nbcontent .heading h3,.nbcontent .heading h4,.nbcontent .heading h5,.nbcontent .heading h6{margin:0;font-size:1em}.nbcontent .heading.heading1{display:inline-block;position:relative;padding-left:1.5rem;font-weight:bold}.nbcontent .heading.heading1::before{position:absolute;top:0;left:0;width:17px;height:28px;color:var(--nb-primary);background-image:url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221.25em%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cstyle%3Esvg%7Bfill%3A%235ab9ff%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M438.6%20105.4c12.5%2012.5%2012.5%2032.8%200%2045.3l-256%20256c-12.5%2012.5-32.8%2012.5-45.3%200l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200L160%20338.7%20393.4%20105.4c12.5-12.5%2032.8-12.5%2045.3%200z%22%2F%3E%3C%2Fsvg%3E);background-position:50%;background-repeat:no-repeat;content:""}.nbcontent .external-link{display:inline-flex;align-items:center;gap:.3em;color:var(--nb-link)}.nbcontent .external-link::after{content:"";display:inline-block;width:.9em;height:.9em;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center/contain;background-color:var(--nb-link);vertical-align:-0.125em;position:relative;top:-0.05em}.nbcontent .highlight{background:linear-gradient(transparent 60%, #fef08a 40%);padding:0 2px;border-radius:2px}.dark .nbcontent .highlight{background:linear-gradient(transparent 60%, #ca8a04 40%)}.nbcontent .highlight.highlight-red{background:linear-gradient(transparent 60%, #fecaca 40%)}.dark .nbcontent .highlight.highlight-red{background:linear-gradient(transparent 60%, #dc2626 40%)}.nbcontent .highlight.highlight-green{background:linear-gradient(transparent 60%, #bbf7d0 40%)}.dark .nbcontent .highlight.highlight-green{background:linear-gradient(transparent 60%, #16a34a 40%)}.nbcontent .highlight.highlight-blue{background:linear-gradient(transparent 60%, #bfdbfe 40%)}.dark .nbcontent .highlight.highlight-blue{background:linear-gradient(transparent 60%, #2563eb 40%)}
|
package/package.json
CHANGED