@elmethis/qwik 0.0.9 → 0.0.11
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/lib/index.qwik.cjs
CHANGED
|
@@ -5,7 +5,7 @@ const qwik = require("@builder.io/qwik");
|
|
|
5
5
|
const js = require("@mdi/js");
|
|
6
6
|
const katex = require("katex");
|
|
7
7
|
const lodashEs = require("lodash-es");
|
|
8
|
-
const styles$n = '.code-block {\n display: grid;\n grid-template-rows: 2.75rem 1px 1fr;\n grid-template-columns: 2rem 1fr 2.5rem;\n grid-template-areas: "language-icon caption copy-icon" "divider divider divider" "code code code";\n align-items: center;\n justify-content: center;\n gap: 0;\n box-sizing: border-box;\n width: 100%;\n margin: 0;\n padding: 0.25rem;\n border-radius: 0.25rem;\n background-color: rgba(255, 255, 255, 0.4);\n box-shadow: 0 0 0.125rem rgba(62, 67, 75, 0.3);\n}\n[data-theme=dark] .code-block {\n background-color: rgba(44, 48, 55, 0.9);\n box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.4);\n}\n\n.language-icon {\n grid-area: language-icon;\n padding-inline-start: 0.75rem;\n}\n\n.caption {\n grid-area: caption;\n padding: 1rem;\n font-family: monospace;\n}\n\n.copy-icon {\n grid-area: copy-icon;\n padding: 0.25rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 0.125rem;\n transition: background-color 100ms;\n cursor: pointer;\n}\n.copy-icon:hover {\n background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .copy-icon:hover {\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.divider {\n grid-area: divider;\n width: calc(100% - 1rem);\n border: none;\n border-bottom: solid 1px rgba(128, 128, 128, 0.5);\n}\n\n.code {\n grid-area: code;\n box-sizing: border-box;\n padding: 0 1rem;\n}';
|
|
8
|
+
const styles$n = '.code-block {\n display: grid;\n grid-template-rows: 2.75rem 1px 1fr;\n grid-template-columns: 2rem 1fr 2.5rem;\n grid-template-areas: "language-icon caption copy-icon" "divider divider divider" "code code code";\n align-items: center;\n justify-content: center;\n gap: 0;\n box-sizing: border-box;\n width: 100%;\n margin: 0;\n padding: 0.25rem;\n border-radius: 0.25rem;\n background-color: rgba(255, 255, 255, 0.4);\n box-shadow: 0 0 0.125rem rgba(62, 67, 75, 0.3);\n}\n[data-theme=dark] .code-block {\n background-color: rgba(44, 48, 55, 0.9);\n box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.4);\n}\n\n.language-icon {\n grid-area: language-icon;\n padding-inline-start: 0.75rem;\n}\n\n.caption {\n grid-area: caption;\n padding: 1rem;\n font-family: monospace;\n font-size: 1rem;\n}\n\n.copy-icon {\n grid-area: copy-icon;\n padding: 0.25rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 0.125rem;\n transition: background-color 100ms;\n cursor: pointer;\n}\n.copy-icon:hover {\n background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .copy-icon:hover {\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.divider {\n grid-area: divider;\n width: calc(100% - 1rem);\n border: none;\n border-bottom: solid 1px rgba(128, 128, 128, 0.5);\n}\n\n.code {\n grid-area: code;\n box-sizing: border-box;\n padding: 0 1rem;\n overflow-x: auto;\n scrollbar-width: thin;\n}';
|
|
9
9
|
const Rust = qwik.component$(({ size = 24, ...props }) => {
|
|
10
10
|
return /* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
11
11
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -512,6 +512,27 @@ const C = qwik.component$(({ size = 24, ...props }) => {
|
|
|
512
512
|
]
|
|
513
513
|
});
|
|
514
514
|
});
|
|
515
|
+
const styles$l = ".icon {\n fill: var(--color, #555b67);\n transition: fill 200ms;\n}\n[data-theme=dark] .icon {\n fill: var(--dark-color, #b0b5be);\n}";
|
|
516
|
+
const ElmMdiIcon = qwik.component$(({ d, size = "1em", color, lightColor, darkColor }) => {
|
|
517
|
+
qwik.useStylesScoped$(styles$l);
|
|
518
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
519
|
+
class: "icon",
|
|
520
|
+
style: {
|
|
521
|
+
"--color": lightColor ?? color,
|
|
522
|
+
"--dark-color": darkColor ?? color
|
|
523
|
+
},
|
|
524
|
+
width: size,
|
|
525
|
+
height: size,
|
|
526
|
+
viewBox: "0 0 24 24",
|
|
527
|
+
fill: color,
|
|
528
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
529
|
+
focusable: "false",
|
|
530
|
+
role: "img",
|
|
531
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", {
|
|
532
|
+
d
|
|
533
|
+
})
|
|
534
|
+
});
|
|
535
|
+
});
|
|
515
536
|
const normalizeLanguage = (language) => {
|
|
516
537
|
switch (language) {
|
|
517
538
|
case "rust":
|
|
@@ -589,7 +610,10 @@ const renderMap = {
|
|
|
589
610
|
csharp: Csharp,
|
|
590
611
|
cpp: Cplusplus,
|
|
591
612
|
c: C,
|
|
592
|
-
file: () =>
|
|
613
|
+
file: ({ size }) => /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
|
|
614
|
+
d: js.mdiCodeTags,
|
|
615
|
+
size: String(size)
|
|
616
|
+
})
|
|
593
617
|
};
|
|
594
618
|
const ElmLanguageIcon = qwik.component$(({ size = 24, language }) => {
|
|
595
619
|
const Component2 = renderMap[normalizeLanguage(language)];
|
|
@@ -597,11 +621,11 @@ const ElmLanguageIcon = qwik.component$(({ size = 24, language }) => {
|
|
|
597
621
|
size
|
|
598
622
|
});
|
|
599
623
|
});
|
|
600
|
-
const styles$
|
|
624
|
+
const styles$k = '.text {\n padding: 0;\n margin: 0;\n white-space: pre-line;\n font-size: var(--font-size, 1em);\n line-height: var(--font-size, 1em);\n background-color: var(--background-color);\n transition: color 200ms;\n text-decoration-color: var(--color);\n}\n\n.code {\n margin-inline: 0.25rem;\n padding: 2px 0.5em;\n font-size: calc(1em - 2px);\n border-radius: 0.125rem;\n background-color: rgba(0, 0, 0, 0.075);\n font-family: "Source Code Pro" monospace;\n}\n\n.kbd {\n padding: 0.125rem 0.25rem;\n position: relative;\n border-radius: 0.125rem;\n background-color: #e6e6e6;\n}\n[data-theme=dark] .kbd {\n background-color: #404040;\n}\n.kbd::before {\n z-index: -1;\n position: absolute;\n content: "";\n bottom: -0.25em;\n left: 0;\n height: 100%;\n width: 100%;\n background-color: #ccc;\n border-radius: 0 0 0.125rem 0.125rem;\n box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .kbd::before {\n background-color: #595959;\n box-shadow: 0 0 0.125em rgba(255, 255, 255, 0.5);\n}\n\n.link {\n all: unset;\n box-sizing: border-box;\n padding: 0 0.25rem;\n font-size: var(--font-size);\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n cursor: pointer;\n color: #6987b8;\n border-radius: 0.125rem;\n transition: background-color 200ms, color 200ms, opacity 200ms;\n}\n.link:hover {\n background-color: rgba(105, 135, 184, 0.2);\n}\n.link:active {\n opacity: 0.5;\n}\n.link:visited {\n color: #9771bd;\n border-bottom: dashed 1px #9771bd;\n}\n.link:visited:hover {\n background-color: rgba(151, 113, 189, 0.2);\n}\n\n.ogp {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n overflow: hidden;\n border-radius: 0.25rem;\n box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.3);\n background-color: rgba(255, 255, 255, 0.8);\n}\n[data-theme=dark] .ogp {\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.ogp-text {\n box-sizing: border-box;\n padding: 0.5rem;\n}\n\n.ogp-title {\n box-sizing: border-box;\n font-weight: bold;\n padding-block-end: 0.25rem;\n}\n\n.ogp-description {\n opacity: 0.7;\n padding: 0.25rem;\n}';
|
|
601
625
|
const textStyles = ".text {\n color: var(--color, #606875);\n}\n.text::selection {\n color: #cccfd5;\n background-color: var(--color, #3e434b);\n}\n[data-theme=dark] .text {\n color: var(--color, #b0b5be);\n}\n[data-theme=dark] .text::selection {\n color: #3e434b;\n background-color: var(--color, #cccfd5);\n}";
|
|
602
|
-
const styles$
|
|
626
|
+
const styles$j = ".icon {\n margin: 0;\n padding: 0;\n display: inline-block;\n vertical-align: middle;\n height: 1em;\n}\n.icon::selection {\n filter: brightness(1000%);\n background-color: var(--color, rgba(0, 0, 0, 0.25));\n}\n[data-theme=dark] .icon {\n color: var(--color, rgba(255, 255, 255, 0.7));\n}\n[data-theme=dark] .icon::selection {\n color: rgba(0, 0, 0, 0.7);\n background-color: var(--color, rgba(255, 255, 255, 0.25));\n}";
|
|
603
627
|
const ElmInlineIcon = qwik.component$(({ src, alt }) => {
|
|
604
|
-
qwik.useStylesScoped$(styles$
|
|
628
|
+
qwik.useStylesScoped$(styles$j);
|
|
605
629
|
return /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
606
630
|
class: "icon",
|
|
607
631
|
children: /* @__PURE__ */ jsxRuntime.jsx("img", {
|
|
@@ -612,7 +636,7 @@ const ElmInlineIcon = qwik.component$(({ src, alt }) => {
|
|
|
612
636
|
});
|
|
613
637
|
});
|
|
614
638
|
const ElmInlineText = qwik.component$((props) => {
|
|
615
|
-
qwik.useStylesScoped$(styles$
|
|
639
|
+
qwik.useStylesScoped$(styles$k);
|
|
616
640
|
qwik.useStylesScoped$(textStyles);
|
|
617
641
|
const { bold = false, italic = false, underline = false, strikethrough = false, code = false, size = "1em" } = props;
|
|
618
642
|
let vnode = props.text ? /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
@@ -694,9 +718,14 @@ const ElmInlineText = qwik.component$((props) => {
|
|
|
694
718
|
}
|
|
695
719
|
return wrappedVnode;
|
|
696
720
|
});
|
|
697
|
-
const styles$
|
|
721
|
+
const styles$i = '.shiki,\n.shiki span {\n font-family: "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace !important;\n}\n.shiki *::selection,\n.shiki span *::selection {\n background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .shiki *::selection,\n[data-theme=dark] .shiki span *::selection {\n background-color: rgba(255, 255, 255, 0.15);\n}\n[data-theme=dark] .shiki,\n[data-theme=dark] .shiki span {\n color: var(--shiki-dark) !important;\n background-color: var(--shiki-dark-bg) !important;\n}';
|
|
698
722
|
const ElmShikiHighlighter = qwik.component$(({ code, language = "txt" }) => {
|
|
699
|
-
qwik.useStyles$(styles$
|
|
723
|
+
qwik.useStyles$(styles$i);
|
|
724
|
+
qwik.useStylesScoped$(`
|
|
725
|
+
.code {
|
|
726
|
+
font-size: 1rem;
|
|
727
|
+
line-height: 1.5rem;
|
|
728
|
+
}`);
|
|
700
729
|
const rawHtml = qwik.useSignal("");
|
|
701
730
|
qwik.useTask$(async ({ track }) => {
|
|
702
731
|
const currentCode = track(() => code);
|
|
@@ -720,30 +749,10 @@ const ElmShikiHighlighter = qwik.component$(({ code, language = "txt" }) => {
|
|
|
720
749
|
}
|
|
721
750
|
});
|
|
722
751
|
return /* @__PURE__ */ jsxRuntime.jsx("pre", {
|
|
752
|
+
class: "code",
|
|
723
753
|
dangerouslySetInnerHTML: rawHtml.value
|
|
724
754
|
});
|
|
725
755
|
});
|
|
726
|
-
const styles$i = ".icon {\n fill: var(--color, #555b67);\n transition: fill 200ms;\n}\n[data-theme=dark] .icon {\n fill: var(--dark-color, #b0b5be);\n}";
|
|
727
|
-
const ElmMdiIcon = qwik.component$(({ d, size = "1em", color, lightColor, darkColor }) => {
|
|
728
|
-
qwik.useStylesScoped$(styles$i);
|
|
729
|
-
return /* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
730
|
-
class: "icon",
|
|
731
|
-
style: {
|
|
732
|
-
"--color": lightColor ?? color,
|
|
733
|
-
"--dark-color": darkColor ?? color
|
|
734
|
-
},
|
|
735
|
-
width: size,
|
|
736
|
-
height: size,
|
|
737
|
-
viewBox: "0 0 24 24",
|
|
738
|
-
fill: color,
|
|
739
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
740
|
-
focusable: "false",
|
|
741
|
-
role: "img",
|
|
742
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("path", {
|
|
743
|
-
d
|
|
744
|
-
})
|
|
745
|
-
});
|
|
746
|
-
});
|
|
747
756
|
const ElmCodeBlock = qwik.component$(({ code, language = "txt", caption, margin }) => {
|
|
748
757
|
qwik.useStylesScoped$(styles$n);
|
|
749
758
|
const timerId = qwik.useSignal(null);
|
|
@@ -1281,7 +1290,7 @@ const ElmFragmentIdentifier = qwik.component$(({ id }) => {
|
|
|
1281
1290
|
children: "#"
|
|
1282
1291
|
});
|
|
1283
1292
|
});
|
|
1284
|
-
const styles$6 = '.heading-common {\n margin: 0;\n position: relative;\n font-size: var(--font-size);\n line-height: var(--font-size);\n opacity: var(--opacity);\n transition: color 400ms, opacity 800ms;\n}\n\n.h1::after {\n position: absolute;\n content: "";\n bottom: -4px;\n left: 0;\n width: 100%;\n height: 0.25px;\n background-color: rgba(0, 0, 0, 0.5);\n transition: transform 800ms;\n transform: scaleX(var(--scale));\n}\n[data-theme=dark] .h1::after {\n background-color: rgba(255, 255, 255, 0.5);\n}\n.h1::before {\n position: absolute;\n content: "";\n bottom: -6px;\n left: 45%;\n width: 10%;\n height: 2px;\n background-color: rgba(0, 0, 0, 0.6);\n transition: transform 800ms;\n transform: scaleY(var(--scale));\n transform-origin: top;\n}\n[data-theme=dark] .h1::before {\n background-color: rgba(255, 255, 255, 0.6);\n}\n\n.h2 {\n
|
|
1293
|
+
const styles$6 = '.heading-common {\n margin: 0;\n position: relative;\n font-size: var(--font-size);\n line-height: var(--font-size);\n opacity: var(--opacity);\n transition: color 400ms, opacity 800ms;\n}\n\n.h1::after {\n position: absolute;\n content: "";\n bottom: -4px;\n left: 0;\n width: 100%;\n height: 0.25px;\n background-color: rgba(0, 0, 0, 0.5);\n transition: transform 800ms;\n transform: scaleX(var(--scale));\n}\n[data-theme=dark] .h1::after {\n background-color: rgba(255, 255, 255, 0.5);\n}\n.h1::before {\n position: absolute;\n content: "";\n bottom: -6px;\n left: 45%;\n width: 10%;\n height: 2px;\n background-color: rgba(0, 0, 0, 0.6);\n transition: transform 800ms;\n transform: scaleY(var(--scale));\n transform-origin: top;\n}\n[data-theme=dark] .h1::before {\n background-color: rgba(255, 255, 255, 0.6);\n}\n\n.h2::after {\n position: absolute;\n content: "";\n right: 2px;\n bottom: -4px;\n width: 6px;\n height: 8px;\n opacity: 0.8;\n transform: skewX(-25deg);\n background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::after {\n background-color: rgba(255, 255, 255, 0.8);\n}\n.h2::before {\n position: absolute;\n content: "";\n right: 10px;\n bottom: -4px;\n width: 6px;\n height: 8px;\n opacity: 0.8;\n transform: skewX(-25deg);\n background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::before {\n background-color: rgba(255, 255, 255, 0.8);\n}\n.h2__underline {\n overflow: hidden;\n position: absolute;\n content: "";\n bottom: -6px;\n left: 0;\n width: 100%;\n height: 0.25px;\n background-color: rgba(0, 0, 0, 0.5);\n transition: transform 800ms;\n transform: scaleX(var(--scale));\n transform-origin: left;\n}\n[data-theme=dark] .h2__underline {\n background-color: rgba(255, 255, 255, 0.5);\n}\n\n.h3 {\n box-sizing: border-box;\n padding-left: 0.75rem;\n}\n.h3::after {\n position: absolute;\n content: "";\n width: 3px;\n height: 12px;\n top: calc(50% - 8px);\n left: 0;\n background-color: rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .h3::after {\n background-color: rgba(255, 255, 255, 0.5);\n}\n\n.h4 {\n position: relative;\n}\n\n.h5 {\n position: relative;\n}\n\n.h6 {\n position: relative;\n}';
|
|
1285
1294
|
const SIZE_MAP = Object.freeze({
|
|
1286
1295
|
1: 1.5,
|
|
1287
1296
|
2: 1.4,
|
|
@@ -1304,7 +1313,9 @@ const ElmHeading = qwik.component$(({ level, text, id }) => {
|
|
|
1304
1313
|
"--font-size": `${SIZE_MAP[level]}em`
|
|
1305
1314
|
},
|
|
1306
1315
|
children: [
|
|
1307
|
-
|
|
1316
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
1317
|
+
children: text
|
|
1318
|
+
}),
|
|
1308
1319
|
/* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}),
|
|
1309
1320
|
id && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
1310
1321
|
style: {
|
|
@@ -1313,6 +1324,10 @@ const ElmHeading = qwik.component$(({ level, text, id }) => {
|
|
|
1313
1324
|
children: /* @__PURE__ */ jsxRuntime.jsx(ElmFragmentIdentifier, {
|
|
1314
1325
|
id
|
|
1315
1326
|
})
|
|
1327
|
+
}),
|
|
1328
|
+
level === 2 && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
1329
|
+
class: "h2__underline",
|
|
1330
|
+
"aria-hidden": "true"
|
|
1316
1331
|
})
|
|
1317
1332
|
]
|
|
1318
1333
|
});
|
package/lib/index.qwik.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from "@builder.io/qwik/jsx-runtime";
|
|
2
2
|
import { component$, useStylesScoped$, Slot, useStyles$, useSignal, useTask$, $, useComputed$, useVisibleTask$, useContextProvider, createContextId, useContext } from "@builder.io/qwik";
|
|
3
|
-
import { mdiClipboardCheckMultipleOutline, mdiClipboardMultipleOutline, mdiChevronRight, mdiPlus, mdiMessageImageOutline, mdiFile, mdiDownload, mdiLinkVariant, mdiFormatQuoteOpen, mdiFormatQuoteClose, mdiAlertOctagram, mdiAlert, mdiShieldAlert, mdiLightbulbOn, mdiInformation } from "@mdi/js";
|
|
3
|
+
import { mdiCodeTags, mdiClipboardCheckMultipleOutline, mdiClipboardMultipleOutline, mdiChevronRight, mdiPlus, mdiMessageImageOutline, mdiFile, mdiDownload, mdiLinkVariant, mdiFormatQuoteOpen, mdiFormatQuoteClose, mdiAlertOctagram, mdiAlert, mdiShieldAlert, mdiLightbulbOn, mdiInformation } from "@mdi/js";
|
|
4
4
|
import { renderToString } from "katex";
|
|
5
5
|
import { kebabCase } from "lodash-es";
|
|
6
|
-
const styles$n = '.code-block {\n display: grid;\n grid-template-rows: 2.75rem 1px 1fr;\n grid-template-columns: 2rem 1fr 2.5rem;\n grid-template-areas: "language-icon caption copy-icon" "divider divider divider" "code code code";\n align-items: center;\n justify-content: center;\n gap: 0;\n box-sizing: border-box;\n width: 100%;\n margin: 0;\n padding: 0.25rem;\n border-radius: 0.25rem;\n background-color: rgba(255, 255, 255, 0.4);\n box-shadow: 0 0 0.125rem rgba(62, 67, 75, 0.3);\n}\n[data-theme=dark] .code-block {\n background-color: rgba(44, 48, 55, 0.9);\n box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.4);\n}\n\n.language-icon {\n grid-area: language-icon;\n padding-inline-start: 0.75rem;\n}\n\n.caption {\n grid-area: caption;\n padding: 1rem;\n font-family: monospace;\n}\n\n.copy-icon {\n grid-area: copy-icon;\n padding: 0.25rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 0.125rem;\n transition: background-color 100ms;\n cursor: pointer;\n}\n.copy-icon:hover {\n background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .copy-icon:hover {\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.divider {\n grid-area: divider;\n width: calc(100% - 1rem);\n border: none;\n border-bottom: solid 1px rgba(128, 128, 128, 0.5);\n}\n\n.code {\n grid-area: code;\n box-sizing: border-box;\n padding: 0 1rem;\n}';
|
|
6
|
+
const styles$n = '.code-block {\n display: grid;\n grid-template-rows: 2.75rem 1px 1fr;\n grid-template-columns: 2rem 1fr 2.5rem;\n grid-template-areas: "language-icon caption copy-icon" "divider divider divider" "code code code";\n align-items: center;\n justify-content: center;\n gap: 0;\n box-sizing: border-box;\n width: 100%;\n margin: 0;\n padding: 0.25rem;\n border-radius: 0.25rem;\n background-color: rgba(255, 255, 255, 0.4);\n box-shadow: 0 0 0.125rem rgba(62, 67, 75, 0.3);\n}\n[data-theme=dark] .code-block {\n background-color: rgba(44, 48, 55, 0.9);\n box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.4);\n}\n\n.language-icon {\n grid-area: language-icon;\n padding-inline-start: 0.75rem;\n}\n\n.caption {\n grid-area: caption;\n padding: 1rem;\n font-family: monospace;\n font-size: 1rem;\n}\n\n.copy-icon {\n grid-area: copy-icon;\n padding: 0.25rem;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 0.125rem;\n transition: background-color 100ms;\n cursor: pointer;\n}\n.copy-icon:hover {\n background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .copy-icon:hover {\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.divider {\n grid-area: divider;\n width: calc(100% - 1rem);\n border: none;\n border-bottom: solid 1px rgba(128, 128, 128, 0.5);\n}\n\n.code {\n grid-area: code;\n box-sizing: border-box;\n padding: 0 1rem;\n overflow-x: auto;\n scrollbar-width: thin;\n}';
|
|
7
7
|
const Rust = component$(({ size = 24, ...props }) => {
|
|
8
8
|
return /* @__PURE__ */ jsx("svg", {
|
|
9
9
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -510,6 +510,27 @@ const C = component$(({ size = 24, ...props }) => {
|
|
|
510
510
|
]
|
|
511
511
|
});
|
|
512
512
|
});
|
|
513
|
+
const styles$l = ".icon {\n fill: var(--color, #555b67);\n transition: fill 200ms;\n}\n[data-theme=dark] .icon {\n fill: var(--dark-color, #b0b5be);\n}";
|
|
514
|
+
const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
|
|
515
|
+
useStylesScoped$(styles$l);
|
|
516
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
517
|
+
class: "icon",
|
|
518
|
+
style: {
|
|
519
|
+
"--color": lightColor ?? color,
|
|
520
|
+
"--dark-color": darkColor ?? color
|
|
521
|
+
},
|
|
522
|
+
width: size,
|
|
523
|
+
height: size,
|
|
524
|
+
viewBox: "0 0 24 24",
|
|
525
|
+
fill: color,
|
|
526
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
527
|
+
focusable: "false",
|
|
528
|
+
role: "img",
|
|
529
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
530
|
+
d
|
|
531
|
+
})
|
|
532
|
+
});
|
|
533
|
+
});
|
|
513
534
|
const normalizeLanguage = (language) => {
|
|
514
535
|
switch (language) {
|
|
515
536
|
case "rust":
|
|
@@ -587,7 +608,10 @@ const renderMap = {
|
|
|
587
608
|
csharp: Csharp,
|
|
588
609
|
cpp: Cplusplus,
|
|
589
610
|
c: C,
|
|
590
|
-
file: () =>
|
|
611
|
+
file: ({ size }) => /* @__PURE__ */ jsx(ElmMdiIcon, {
|
|
612
|
+
d: mdiCodeTags,
|
|
613
|
+
size: String(size)
|
|
614
|
+
})
|
|
591
615
|
};
|
|
592
616
|
const ElmLanguageIcon = component$(({ size = 24, language }) => {
|
|
593
617
|
const Component2 = renderMap[normalizeLanguage(language)];
|
|
@@ -595,11 +619,11 @@ const ElmLanguageIcon = component$(({ size = 24, language }) => {
|
|
|
595
619
|
size
|
|
596
620
|
});
|
|
597
621
|
});
|
|
598
|
-
const styles$
|
|
622
|
+
const styles$k = '.text {\n padding: 0;\n margin: 0;\n white-space: pre-line;\n font-size: var(--font-size, 1em);\n line-height: var(--font-size, 1em);\n background-color: var(--background-color);\n transition: color 200ms;\n text-decoration-color: var(--color);\n}\n\n.code {\n margin-inline: 0.25rem;\n padding: 2px 0.5em;\n font-size: calc(1em - 2px);\n border-radius: 0.125rem;\n background-color: rgba(0, 0, 0, 0.075);\n font-family: "Source Code Pro" monospace;\n}\n\n.kbd {\n padding: 0.125rem 0.25rem;\n position: relative;\n border-radius: 0.125rem;\n background-color: #e6e6e6;\n}\n[data-theme=dark] .kbd {\n background-color: #404040;\n}\n.kbd::before {\n z-index: -1;\n position: absolute;\n content: "";\n bottom: -0.25em;\n left: 0;\n height: 100%;\n width: 100%;\n background-color: #ccc;\n border-radius: 0 0 0.125rem 0.125rem;\n box-shadow: 0 0 0.125em rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .kbd::before {\n background-color: #595959;\n box-shadow: 0 0 0.125em rgba(255, 255, 255, 0.5);\n}\n\n.link {\n all: unset;\n box-sizing: border-box;\n padding: 0 0.25rem;\n font-size: var(--font-size);\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n cursor: pointer;\n color: #6987b8;\n border-radius: 0.125rem;\n transition: background-color 200ms, color 200ms, opacity 200ms;\n}\n.link:hover {\n background-color: rgba(105, 135, 184, 0.2);\n}\n.link:active {\n opacity: 0.5;\n}\n.link:visited {\n color: #9771bd;\n border-bottom: dashed 1px #9771bd;\n}\n.link:visited:hover {\n background-color: rgba(151, 113, 189, 0.2);\n}\n\n.ogp {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n overflow: hidden;\n border-radius: 0.25rem;\n box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.3);\n background-color: rgba(255, 255, 255, 0.8);\n}\n[data-theme=dark] .ogp {\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.ogp-text {\n box-sizing: border-box;\n padding: 0.5rem;\n}\n\n.ogp-title {\n box-sizing: border-box;\n font-weight: bold;\n padding-block-end: 0.25rem;\n}\n\n.ogp-description {\n opacity: 0.7;\n padding: 0.25rem;\n}';
|
|
599
623
|
const textStyles = ".text {\n color: var(--color, #606875);\n}\n.text::selection {\n color: #cccfd5;\n background-color: var(--color, #3e434b);\n}\n[data-theme=dark] .text {\n color: var(--color, #b0b5be);\n}\n[data-theme=dark] .text::selection {\n color: #3e434b;\n background-color: var(--color, #cccfd5);\n}";
|
|
600
|
-
const styles$
|
|
624
|
+
const styles$j = ".icon {\n margin: 0;\n padding: 0;\n display: inline-block;\n vertical-align: middle;\n height: 1em;\n}\n.icon::selection {\n filter: brightness(1000%);\n background-color: var(--color, rgba(0, 0, 0, 0.25));\n}\n[data-theme=dark] .icon {\n color: var(--color, rgba(255, 255, 255, 0.7));\n}\n[data-theme=dark] .icon::selection {\n color: rgba(0, 0, 0, 0.7);\n background-color: var(--color, rgba(255, 255, 255, 0.25));\n}";
|
|
601
625
|
const ElmInlineIcon = component$(({ src, alt }) => {
|
|
602
|
-
useStylesScoped$(styles$
|
|
626
|
+
useStylesScoped$(styles$j);
|
|
603
627
|
return /* @__PURE__ */ jsx("span", {
|
|
604
628
|
class: "icon",
|
|
605
629
|
children: /* @__PURE__ */ jsx("img", {
|
|
@@ -610,7 +634,7 @@ const ElmInlineIcon = component$(({ src, alt }) => {
|
|
|
610
634
|
});
|
|
611
635
|
});
|
|
612
636
|
const ElmInlineText = component$((props) => {
|
|
613
|
-
useStylesScoped$(styles$
|
|
637
|
+
useStylesScoped$(styles$k);
|
|
614
638
|
useStylesScoped$(textStyles);
|
|
615
639
|
const { bold = false, italic = false, underline = false, strikethrough = false, code = false, size = "1em" } = props;
|
|
616
640
|
let vnode = props.text ? /* @__PURE__ */ jsx("span", {
|
|
@@ -692,9 +716,14 @@ const ElmInlineText = component$((props) => {
|
|
|
692
716
|
}
|
|
693
717
|
return wrappedVnode;
|
|
694
718
|
});
|
|
695
|
-
const styles$
|
|
719
|
+
const styles$i = '.shiki,\n.shiki span {\n font-family: "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace !important;\n}\n.shiki *::selection,\n.shiki span *::selection {\n background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .shiki *::selection,\n[data-theme=dark] .shiki span *::selection {\n background-color: rgba(255, 255, 255, 0.15);\n}\n[data-theme=dark] .shiki,\n[data-theme=dark] .shiki span {\n color: var(--shiki-dark) !important;\n background-color: var(--shiki-dark-bg) !important;\n}';
|
|
696
720
|
const ElmShikiHighlighter = component$(({ code, language = "txt" }) => {
|
|
697
|
-
useStyles$(styles$
|
|
721
|
+
useStyles$(styles$i);
|
|
722
|
+
useStylesScoped$(`
|
|
723
|
+
.code {
|
|
724
|
+
font-size: 1rem;
|
|
725
|
+
line-height: 1.5rem;
|
|
726
|
+
}`);
|
|
698
727
|
const rawHtml = useSignal("");
|
|
699
728
|
useTask$(async ({ track }) => {
|
|
700
729
|
const currentCode = track(() => code);
|
|
@@ -718,30 +747,10 @@ const ElmShikiHighlighter = component$(({ code, language = "txt" }) => {
|
|
|
718
747
|
}
|
|
719
748
|
});
|
|
720
749
|
return /* @__PURE__ */ jsx("pre", {
|
|
750
|
+
class: "code",
|
|
721
751
|
dangerouslySetInnerHTML: rawHtml.value
|
|
722
752
|
});
|
|
723
753
|
});
|
|
724
|
-
const styles$i = ".icon {\n fill: var(--color, #555b67);\n transition: fill 200ms;\n}\n[data-theme=dark] .icon {\n fill: var(--dark-color, #b0b5be);\n}";
|
|
725
|
-
const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
|
|
726
|
-
useStylesScoped$(styles$i);
|
|
727
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
728
|
-
class: "icon",
|
|
729
|
-
style: {
|
|
730
|
-
"--color": lightColor ?? color,
|
|
731
|
-
"--dark-color": darkColor ?? color
|
|
732
|
-
},
|
|
733
|
-
width: size,
|
|
734
|
-
height: size,
|
|
735
|
-
viewBox: "0 0 24 24",
|
|
736
|
-
fill: color,
|
|
737
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
738
|
-
focusable: "false",
|
|
739
|
-
role: "img",
|
|
740
|
-
children: /* @__PURE__ */ jsx("path", {
|
|
741
|
-
d
|
|
742
|
-
})
|
|
743
|
-
});
|
|
744
|
-
});
|
|
745
754
|
const ElmCodeBlock = component$(({ code, language = "txt", caption, margin }) => {
|
|
746
755
|
useStylesScoped$(styles$n);
|
|
747
756
|
const timerId = useSignal(null);
|
|
@@ -1279,7 +1288,7 @@ const ElmFragmentIdentifier = component$(({ id }) => {
|
|
|
1279
1288
|
children: "#"
|
|
1280
1289
|
});
|
|
1281
1290
|
});
|
|
1282
|
-
const styles$6 = '.heading-common {\n margin: 0;\n position: relative;\n font-size: var(--font-size);\n line-height: var(--font-size);\n opacity: var(--opacity);\n transition: color 400ms, opacity 800ms;\n}\n\n.h1::after {\n position: absolute;\n content: "";\n bottom: -4px;\n left: 0;\n width: 100%;\n height: 0.25px;\n background-color: rgba(0, 0, 0, 0.5);\n transition: transform 800ms;\n transform: scaleX(var(--scale));\n}\n[data-theme=dark] .h1::after {\n background-color: rgba(255, 255, 255, 0.5);\n}\n.h1::before {\n position: absolute;\n content: "";\n bottom: -6px;\n left: 45%;\n width: 10%;\n height: 2px;\n background-color: rgba(0, 0, 0, 0.6);\n transition: transform 800ms;\n transform: scaleY(var(--scale));\n transform-origin: top;\n}\n[data-theme=dark] .h1::before {\n background-color: rgba(255, 255, 255, 0.6);\n}\n\n.h2 {\n
|
|
1291
|
+
const styles$6 = '.heading-common {\n margin: 0;\n position: relative;\n font-size: var(--font-size);\n line-height: var(--font-size);\n opacity: var(--opacity);\n transition: color 400ms, opacity 800ms;\n}\n\n.h1::after {\n position: absolute;\n content: "";\n bottom: -4px;\n left: 0;\n width: 100%;\n height: 0.25px;\n background-color: rgba(0, 0, 0, 0.5);\n transition: transform 800ms;\n transform: scaleX(var(--scale));\n}\n[data-theme=dark] .h1::after {\n background-color: rgba(255, 255, 255, 0.5);\n}\n.h1::before {\n position: absolute;\n content: "";\n bottom: -6px;\n left: 45%;\n width: 10%;\n height: 2px;\n background-color: rgba(0, 0, 0, 0.6);\n transition: transform 800ms;\n transform: scaleY(var(--scale));\n transform-origin: top;\n}\n[data-theme=dark] .h1::before {\n background-color: rgba(255, 255, 255, 0.6);\n}\n\n.h2::after {\n position: absolute;\n content: "";\n right: 2px;\n bottom: -4px;\n width: 6px;\n height: 8px;\n opacity: 0.8;\n transform: skewX(-25deg);\n background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::after {\n background-color: rgba(255, 255, 255, 0.8);\n}\n.h2::before {\n position: absolute;\n content: "";\n right: 10px;\n bottom: -4px;\n width: 6px;\n height: 8px;\n opacity: 0.8;\n transform: skewX(-25deg);\n background-color: rgba(0, 0, 0, 0.8);\n}\n[data-theme=dark] .h2::before {\n background-color: rgba(255, 255, 255, 0.8);\n}\n.h2__underline {\n overflow: hidden;\n position: absolute;\n content: "";\n bottom: -6px;\n left: 0;\n width: 100%;\n height: 0.25px;\n background-color: rgba(0, 0, 0, 0.5);\n transition: transform 800ms;\n transform: scaleX(var(--scale));\n transform-origin: left;\n}\n[data-theme=dark] .h2__underline {\n background-color: rgba(255, 255, 255, 0.5);\n}\n\n.h3 {\n box-sizing: border-box;\n padding-left: 0.75rem;\n}\n.h3::after {\n position: absolute;\n content: "";\n width: 3px;\n height: 12px;\n top: calc(50% - 8px);\n left: 0;\n background-color: rgba(0, 0, 0, 0.5);\n}\n[data-theme=dark] .h3::after {\n background-color: rgba(255, 255, 255, 0.5);\n}\n\n.h4 {\n position: relative;\n}\n\n.h5 {\n position: relative;\n}\n\n.h6 {\n position: relative;\n}';
|
|
1283
1292
|
const SIZE_MAP = Object.freeze({
|
|
1284
1293
|
1: 1.5,
|
|
1285
1294
|
2: 1.4,
|
|
@@ -1302,7 +1311,9 @@ const ElmHeading = component$(({ level, text, id }) => {
|
|
|
1302
1311
|
"--font-size": `${SIZE_MAP[level]}em`
|
|
1303
1312
|
},
|
|
1304
1313
|
children: [
|
|
1305
|
-
|
|
1314
|
+
/* @__PURE__ */ jsx("span", {
|
|
1315
|
+
children: text
|
|
1316
|
+
}),
|
|
1306
1317
|
/* @__PURE__ */ jsx(Slot, {}),
|
|
1307
1318
|
id && /* @__PURE__ */ jsx("span", {
|
|
1308
1319
|
style: {
|
|
@@ -1311,6 +1322,10 @@ const ElmHeading = component$(({ level, text, id }) => {
|
|
|
1311
1322
|
children: /* @__PURE__ */ jsx(ElmFragmentIdentifier, {
|
|
1312
1323
|
id
|
|
1313
1324
|
})
|
|
1325
|
+
}),
|
|
1326
|
+
level === 2 && /* @__PURE__ */ jsx("span", {
|
|
1327
|
+
class: "h2__underline",
|
|
1328
|
+
"aria-hidden": "true"
|
|
1314
1329
|
})
|
|
1315
1330
|
]
|
|
1316
1331
|
});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type QRLEventHandlerMulti } from "@builder.io/qwik";
|
|
2
|
+
export interface ElmBreadcrumbProps {
|
|
3
|
+
links: Array<{
|
|
4
|
+
/**
|
|
5
|
+
* The text to display.
|
|
6
|
+
*/
|
|
7
|
+
text: string;
|
|
8
|
+
/**
|
|
9
|
+
* The action to perform when the link is clicked.
|
|
10
|
+
*/
|
|
11
|
+
onClick$?: QRLEventHandlerMulti<PointerEvent, HTMLElement>;
|
|
12
|
+
}>;
|
|
13
|
+
}
|
|
14
|
+
export declare const ElmBreadcrumb: import("@builder.io/qwik").Component<ElmBreadcrumbProps>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "storybook-framework-qwik";
|
|
2
|
+
import { ElmBreadcrumb } from "./elm-breadcrumb";
|
|
3
|
+
declare const meta: Meta<typeof ElmBreadcrumb>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Primary: Story;
|
|
7
|
+
export declare const Long: Story;
|