@elmethis/qwik 0.0.8 → 0.0.10
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 +39 -30
- package/lib/index.qwik.mjs +40 -31
- package/package.json +1 -1
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,12 +621,12 @@ 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$
|
|
605
|
-
return /* @__PURE__ */ jsxRuntime.jsx("
|
|
628
|
+
qwik.useStylesScoped$(styles$j);
|
|
629
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
606
630
|
class: "icon",
|
|
607
631
|
children: /* @__PURE__ */ jsxRuntime.jsx("img", {
|
|
608
632
|
src,
|
|
@@ -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);
|
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,12 +619,12 @@ 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$
|
|
603
|
-
return /* @__PURE__ */ jsx("
|
|
626
|
+
useStylesScoped$(styles$j);
|
|
627
|
+
return /* @__PURE__ */ jsx("span", {
|
|
604
628
|
class: "icon",
|
|
605
629
|
children: /* @__PURE__ */ jsx("img", {
|
|
606
630
|
src,
|
|
@@ -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);
|