@elmethis/qwik 0.0.10 → 0.0.12
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 +106 -28
- package/lib/index.qwik.mjs +107 -29
- package/lib-types/components/containments/elm-parallax.d.ts +4 -0
- package/lib-types/components/containments/elm-parallax.stories.d.ts +6 -0
- package/lib-types/components/navigation/elm-breadcrumb.d.ts +14 -0
- package/lib-types/components/navigation/elm-breadcrumb.stories.d.ts +7 -0
- package/lib-types/index.d.ts +2 -0
- 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$
|
|
8
|
+
const styles$p = '.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",
|
|
@@ -57,9 +57,9 @@ const Typescript = qwik.component$(({ size = 24, ...props }) => {
|
|
|
57
57
|
]
|
|
58
58
|
});
|
|
59
59
|
});
|
|
60
|
-
const styles$
|
|
60
|
+
const styles$o = ".path {\n fill: #293138;\n}\n[data-theme=dark] .path {\n fill: #d2dbe3;\n}";
|
|
61
61
|
const Bash = qwik.component$(({ size = 24, ...props }) => {
|
|
62
|
-
qwik.useStylesScoped$(styles$
|
|
62
|
+
qwik.useStylesScoped$(styles$o);
|
|
63
63
|
return /* @__PURE__ */ jsxRuntime.jsxs("svg", {
|
|
64
64
|
xmlns: "http://www.w3.org/2000/svg",
|
|
65
65
|
viewBox: "0 0 128 128",
|
|
@@ -512,9 +512,9 @@ const C = qwik.component$(({ size = 24, ...props }) => {
|
|
|
512
512
|
]
|
|
513
513
|
});
|
|
514
514
|
});
|
|
515
|
-
const styles$
|
|
515
|
+
const styles$n = ".icon {\n fill: var(--color, #555b67);\n transition: fill 200ms;\n}\n[data-theme=dark] .icon {\n fill: var(--dark-color, #b0b5be);\n}";
|
|
516
516
|
const ElmMdiIcon = qwik.component$(({ d, size = "1em", color, lightColor, darkColor }) => {
|
|
517
|
-
qwik.useStylesScoped$(styles$
|
|
517
|
+
qwik.useStylesScoped$(styles$n);
|
|
518
518
|
return /* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
519
519
|
class: "icon",
|
|
520
520
|
style: {
|
|
@@ -621,11 +621,11 @@ const ElmLanguageIcon = qwik.component$(({ size = 24, language }) => {
|
|
|
621
621
|
size
|
|
622
622
|
});
|
|
623
623
|
});
|
|
624
|
-
const styles$
|
|
624
|
+
const styles$m = '.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}';
|
|
625
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}";
|
|
626
|
-
const styles$
|
|
626
|
+
const styles$l = ".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}";
|
|
627
627
|
const ElmInlineIcon = qwik.component$(({ src, alt }) => {
|
|
628
|
-
qwik.useStylesScoped$(styles$
|
|
628
|
+
qwik.useStylesScoped$(styles$l);
|
|
629
629
|
return /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
630
630
|
class: "icon",
|
|
631
631
|
children: /* @__PURE__ */ jsxRuntime.jsx("img", {
|
|
@@ -636,7 +636,7 @@ const ElmInlineIcon = qwik.component$(({ src, alt }) => {
|
|
|
636
636
|
});
|
|
637
637
|
});
|
|
638
638
|
const ElmInlineText = qwik.component$((props) => {
|
|
639
|
-
qwik.useStylesScoped$(styles$
|
|
639
|
+
qwik.useStylesScoped$(styles$m);
|
|
640
640
|
qwik.useStylesScoped$(textStyles);
|
|
641
641
|
const { bold = false, italic = false, underline = false, strikethrough = false, code = false, size = "1em" } = props;
|
|
642
642
|
let vnode = props.text ? /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
@@ -718,9 +718,9 @@ const ElmInlineText = qwik.component$((props) => {
|
|
|
718
718
|
}
|
|
719
719
|
return wrappedVnode;
|
|
720
720
|
});
|
|
721
|
-
const styles$
|
|
721
|
+
const styles$k = '.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}';
|
|
722
722
|
const ElmShikiHighlighter = qwik.component$(({ code, language = "txt" }) => {
|
|
723
|
-
qwik.useStyles$(styles$
|
|
723
|
+
qwik.useStyles$(styles$k);
|
|
724
724
|
qwik.useStylesScoped$(`
|
|
725
725
|
.code {
|
|
726
726
|
font-size: 1rem;
|
|
@@ -754,7 +754,7 @@ const ElmShikiHighlighter = qwik.component$(({ code, language = "txt" }) => {
|
|
|
754
754
|
});
|
|
755
755
|
});
|
|
756
756
|
const ElmCodeBlock = qwik.component$(({ code, language = "txt", caption, margin }) => {
|
|
757
|
-
qwik.useStylesScoped$(styles$
|
|
757
|
+
qwik.useStylesScoped$(styles$p);
|
|
758
758
|
const timerId = qwik.useSignal(null);
|
|
759
759
|
const copyToClipboard = qwik.$(async () => {
|
|
760
760
|
if (timerId.value !== null) {
|
|
@@ -822,9 +822,32 @@ const ElmKatex = qwik.component$(({ expression, block = false }) => {
|
|
|
822
822
|
dangerouslySetInnerHTML: html.value
|
|
823
823
|
});
|
|
824
824
|
});
|
|
825
|
-
const styles$
|
|
825
|
+
const styles$j = ".parallax-watcher {\n display: none;\n z-index: -1;\n position: fixed;\n}\n\n.parallax {\n position: fixed;\n height: 2000vh;\n width: 100%;\n top: 0;\n left: 0;\n z-index: -1;\n background-repeat: repeat;\n background-size: auto;\n opacity: 0.2;\n}\n[data-theme=dark] .parallax {\n opacity: 0.1;\n}";
|
|
826
|
+
const ElmParallax = qwik.component$(({ images }) => {
|
|
827
|
+
qwik.useStylesScoped$(styles$j);
|
|
828
|
+
const y = qwik.useSignal(0);
|
|
829
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
830
|
+
children: [
|
|
831
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
832
|
+
class: "parallax-watcher",
|
|
833
|
+
"window:onScroll$": () => {
|
|
834
|
+
y.value = window.scrollY;
|
|
835
|
+
}
|
|
836
|
+
}),
|
|
837
|
+
images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
838
|
+
class: "parallax",
|
|
839
|
+
style: {
|
|
840
|
+
backgroundImage: `url(${image})`,
|
|
841
|
+
transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
|
|
842
|
+
transformOrigin: "bottom"
|
|
843
|
+
}
|
|
844
|
+
}, index))
|
|
845
|
+
]
|
|
846
|
+
});
|
|
847
|
+
});
|
|
848
|
+
const styles$i = ".toggle {\n margin: 0;\n display: grid;\n transition: grid 200ms;\n overflow: hidden;\n}\n.toggle.toggle-closed {\n grid-template-rows: 3.5rem 0fr 0rem;\n}\n.toggle.toggle-open {\n grid-template-rows: 3.5rem 1fr 3rem;\n}\n\n.summary {\n box-sizing: border-box;\n padding-inline: 1rem;\n display: grid;\n grid-template-columns: min-content 1fr min-content;\n gap: 1rem;\n align-items: center;\n cursor: pointer;\n border: 1px solid rgba(0, 0, 0, 0.125);\n background-color: rgba(62, 67, 75, 0.05);\n}\n[data-theme=dark] .summary {\n border: 1px solid rgba(255, 255, 255, 0.125);\n background-color: rgba(190, 194, 202, 0.1);\n}\n.summary.summary-open {\n border-radius: 0.25rem 0.25rem 0 0;\n border-bottom-color: transparent;\n}\n.summary.summary-closed {\n border-radius: 0.25rem;\n}\n\n.chevron-icon {\n transition: transform 200ms;\n}\n.chevron-icon.chevron-icon-open {\n transform: rotate(90deg);\n}\n.chevron-icon.chevron-icon-closed {\n transform: rotate(0deg);\n}\n\n.plus-icon {\n height: 1rem;\n width: 1rem;\n transform-origin: center;\n transition: transform 200ms;\n}\n.plus-icon.plus-icon-open {\n transform: rotate(135deg);\n}\n.plus-icon.plus-icon-closed {\n transform: rotate(0deg);\n}\n\n.content {\n box-sizing: border-box;\n padding: 1rem;\n overflow: hidden;\n transition: opacity 200ms;\n border: 1px solid rgba(0, 0, 0, 0.125);\n border-radius: 0 0 0.25rem 0.25rem;\n background-color: rgba(62, 67, 75, 0.0125);\n}\n[data-theme=dark] .content {\n border-color: rgba(255, 255, 255, 0.125);\n background-color: rgba(190, 194, 202, 0.025);\n}\n.content.content-open {\n opacity: 1;\n}\n.content.content-closed {\n opacity: 0;\n}\n\n.footer {\n box-sizing: border-box;\n margin: 0.25rem 0rem;\n padding: 0.5rem;\n color: #c56565;\n font-family: monospace;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n user-select: none;\n cursor: pointer;\n border-radius: 0.25rem;\n transition: opacity 200ms, background-color 200ms;\n}\n.footer:hover {\n opacity: 0.5;\n background-color: rgba(96, 104, 117, 0.1);\n}\n.footer.footer-line {\n box-sizing: border-box;\n margin: 0 0.25rem;\n flex-grow: 1;\n border: none;\n border-bottom: solid 1px rgba(128, 128, 128, 0.3);\n}\n.footer.footer-cross-icon {\n transform: rotate(45deg);\n}\n.footer.footer-chevron-icon {\n transform: rotate(-90deg);\n}";
|
|
826
849
|
const ElmToggle = qwik.component$(({ summary }) => {
|
|
827
|
-
qwik.useStylesScoped$(styles$
|
|
850
|
+
qwik.useStylesScoped$(styles$i);
|
|
828
851
|
const isOpen = qwik.useSignal(false);
|
|
829
852
|
const toggle = qwik.$(() => {
|
|
830
853
|
isOpen.value = !isOpen.value;
|
|
@@ -938,10 +961,10 @@ const ElmToggle = qwik.component$(({ summary }) => {
|
|
|
938
961
|
]
|
|
939
962
|
});
|
|
940
963
|
});
|
|
941
|
-
const styles$
|
|
942
|
-
const styles$
|
|
964
|
+
const styles$h = ".block-fallback {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: var(--height);\n}";
|
|
965
|
+
const styles$g = "@keyframes bounce {\n 0% {\n transform: translateY(0%) scaleY(0.3) scaleX(1.5);\n }\n 10% {\n transform: scaleY(0.8) scaleX(1.2);\n }\n 100% {\n transform: translateY(-400%) scaleY(1.1);\n }\n}\n.wrapper {\n width: var(--size);\n height: var(--size);\n user-select: none;\n position: relative;\n display: flex;\n justify-content: space-around;\n align-items: flex-end;\n}\n\n.dot {\n width: 20%;\n height: 20%;\n border-radius: 50%;\n animation-name: bounce;\n animation-duration: 0.4s;\n animation-iteration-count: infinite;\n animation-direction: alternate;\n animation-timing-function: ease-out;\n transition: background-color 400ms;\n background-color: var(--color, #606875);\n}\n[data-theme=dark] .dot {\n background-color: #b0b5be;\n}\n.dot:nth-last-of-type(1) {\n animation-delay: -100ms;\n}\n.dot:nth-last-of-type(2) {\n animation-delay: 0ms;\n}\n.dot:nth-last-of-type(3) {\n animation-delay: 100ms;\n}";
|
|
943
966
|
const ElmDotLoadingIcon = qwik.component$(({ size = "4em", color = "#606875" }) => {
|
|
944
|
-
qwik.useStylesScoped$(styles$
|
|
967
|
+
qwik.useStylesScoped$(styles$g);
|
|
945
968
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
946
969
|
class: "wrapper",
|
|
947
970
|
style: {
|
|
@@ -964,16 +987,16 @@ const ElmDotLoadingIcon = qwik.component$(({ size = "4em", color = "#606875" })
|
|
|
964
987
|
]
|
|
965
988
|
});
|
|
966
989
|
});
|
|
967
|
-
const styles$
|
|
990
|
+
const styles$f = "@keyframes elm-rectangle-wave {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 30% {\n opacity: 0;\n }\n 40% {\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n opacity: 0;\n }\n}\n.rectangle-wave {\n box-sizing: border-box;\n position: absolute;\n overflow: hidden;\n margin: 0;\n width: 100%;\n height: 100%;\n animation-name: elm-rectangle-wave;\n animation-duration: 1200ms;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n border-style: solid;\n border-width: 1px;\n border-color: rgba(0, 0, 0, 0.7);\n}\n[data-theme=dark] .rectangle-wave {\n border-color: rgba(255, 255, 255, 0.7);\n}";
|
|
968
991
|
const ElmRectangleWave = qwik.component$(() => {
|
|
969
|
-
qwik.useStylesScoped$(styles$
|
|
992
|
+
qwik.useStylesScoped$(styles$f);
|
|
970
993
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
971
994
|
"aria-hidden": "true",
|
|
972
995
|
class: "rectangle-wave"
|
|
973
996
|
});
|
|
974
997
|
});
|
|
975
998
|
const ElmBlockFallback = qwik.component$(({ height = "16rem" }) => {
|
|
976
|
-
qwik.useStylesScoped$(styles$
|
|
999
|
+
qwik.useStylesScoped$(styles$h);
|
|
977
1000
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
978
1001
|
class: "block-fallback",
|
|
979
1002
|
style: {
|
|
@@ -985,9 +1008,9 @@ const ElmBlockFallback = qwik.component$(({ height = "16rem" }) => {
|
|
|
985
1008
|
]
|
|
986
1009
|
});
|
|
987
1010
|
});
|
|
988
|
-
const styles$
|
|
1011
|
+
const styles$e = ".block-image {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 0.5rem;\n width: 100%;\n}\n\n.image-container {\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.image {\n max-width: 100%;\n max-height: 100%;\n border-radius: 0.25rem;\n box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);\n transition: opacity 400ms;\n opacity: var(--opacity, 1);\n user-select: none;\n cursor: var(--cursor);\n}\n\n.fallback {\n width: 100%;\n height: 100%;\n inset: 0 0 auto auto;\n position: absolute;\n transition: opacity 400ms;\n opacity: var(--opacity, 1);\n pointer-events: none;\n}\n\n.caption-box {\n box-sizing: border-box;\n padding: 0rem 1rem;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n opacity: 0.75;\n opacity: var(--opacity, 1);\n transition: opacity 400ms;\n}\n\n.modal-container {\n width: 100vw;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n inset: 0 0 auto auto;\n z-index: 100;\n background-color: rgba(35, 38, 42, 0.8);\n cursor: zoom-out;\n opacity: var(--opacity, 1);\n transition: opacity 200ms;\n}";
|
|
989
1012
|
const ElmBlockImage = qwik.component$(({ src, alt, caption, width, height, enableModal = true }) => {
|
|
990
|
-
qwik.useStylesScoped$(styles$
|
|
1013
|
+
qwik.useStylesScoped$(styles$e);
|
|
991
1014
|
const isLoading = qwik.useSignal(true);
|
|
992
1015
|
const isShowModal = qwik.useSignal(false);
|
|
993
1016
|
const handleImageLoad = qwik.$(() => {
|
|
@@ -1064,14 +1087,14 @@ const ElmBlockImage = qwik.component$(({ src, alt, caption, width, height, enabl
|
|
|
1064
1087
|
]
|
|
1065
1088
|
});
|
|
1066
1089
|
});
|
|
1067
|
-
const styles$
|
|
1090
|
+
const styles$d = ".file {\n margin: 0;\n padding: 1rem;\n display: grid;\n grid-template-columns: 1.5rem 1fr 1fr 1.5rem;\n gap: 1rem;\n align-items: center;\n box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.2);\n border-radius: 0.25rem;\n background-color: rgba(255, 255, 255, 0.2);\n}\n[data-theme=dark] .file {\n background-color: rgba(0, 0, 0, 0.2);\n}\n\n.file-size {\n text-align: right;\n opacity: 0.5;\n}\n\n.download-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 1.5rem;\n width: 1.5rem;\n padding: 0.125rem;\n border-radius: 0.125rem;\n cursor: pointer;\n transition: color 200ms, background-color 200ms;\n}\n.download-icon:hover {\n background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .download-icon:hover {\n background-color: rgba(255, 255, 255, 0.1);\n}";
|
|
1068
1091
|
function getLastPathSegmentWithoutQueryOrHash(urlString) {
|
|
1069
1092
|
const cleanedUrl = urlString.split(/[?#]/)[0];
|
|
1070
1093
|
const pathSegments = cleanedUrl.split("/").filter(Boolean);
|
|
1071
1094
|
return pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : null;
|
|
1072
1095
|
}
|
|
1073
1096
|
const ElmFile = qwik.component$(({ name, src, filesize }) => {
|
|
1074
|
-
qwik.useStylesScoped$(styles$
|
|
1097
|
+
qwik.useStylesScoped$(styles$d);
|
|
1075
1098
|
const downloadFile = qwik.$(async () => {
|
|
1076
1099
|
let link;
|
|
1077
1100
|
try {
|
|
@@ -1119,9 +1142,9 @@ const ElmFile = qwik.component$(({ name, src, filesize }) => {
|
|
|
1119
1142
|
]
|
|
1120
1143
|
});
|
|
1121
1144
|
});
|
|
1122
|
-
const styles$
|
|
1145
|
+
const styles$c = ".bookmark {\n all: unset;\n display: block;\n container-type: inline-size;\n border-radius: 0.25rem;\n box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);\n overflow: hidden;\n transition: background-color 200ms, transform 200ms;\n}\n.bookmark:hover {\n background-color: rgba(105, 135, 184, 0.1);\n transform: translateX(-0.125rem) translateY(-0.125rem);\n}\n.bookmark:active {\n background-color: rgba(89, 181, 124, 0.1);\n transform: translateX(0) translateY(0);\n}\n\n.container {\n all: unset;\n cursor: pointer;\n width: 100%;\n display: flex;\n flex-direction: row;\n}\n@container (max-width: 700px) {\n .container {\n flex-direction: column;\n }\n}\n\n.image {\n overflow: hidden;\n height: 100%;\n opacity: 0.9;\n display: flex;\n justify-content: center;\n align-items: center;\n object-fit: cover;\n object-position: center;\n aspect-ratio: 2/1;\n width: min-content;\n max-width: 35%;\n}\n@container (max-width: 700px) {\n .image {\n min-width: unset;\n max-width: unset;\n width: 100%;\n }\n}\n\n.content {\n flex: 1;\n width: 75%;\n box-sizing: border-box;\n padding: 0.5rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n justify-content: space-between;\n transition: background-color 200ms;\n background-color: rgba(255, 255, 255, 0.4);\n}\n@container (max-width: 700px) {\n .content {\n width: 100%;\n }\n}\n[data-theme=dark] .content {\n background-color: rgba(0, 0, 0, 0.2);\n}\n.content .title {\n box-sizing: border-box;\n}\n.content .description {\n box-sizing: border-box;\n opacity: 0.7;\n}\n.content .link {\n line-height: 0.75rem;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 0.25rem;\n opacity: 0.7;\n}";
|
|
1123
1146
|
const ElmBookmark = qwik.component$(({ url, image, title, description, favicon }) => {
|
|
1124
|
-
qwik.useStylesScoped$(styles$
|
|
1147
|
+
qwik.useStylesScoped$(styles$c);
|
|
1125
1148
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
1126
1149
|
class: "bookmark",
|
|
1127
1150
|
children: /* @__PURE__ */ jsxRuntime.jsxs("a", {
|
|
@@ -1173,6 +1196,53 @@ const ElmBookmark = qwik.component$(({ url, image, title, description, favicon }
|
|
|
1173
1196
|
})
|
|
1174
1197
|
});
|
|
1175
1198
|
});
|
|
1199
|
+
const styles$b = ".container {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: 0;\n user-select: none;\n}\n\n.link-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 0;\n box-sizing: border-box;\n padding: 0.25rem;\n border-radius: 0.25rem;\n cursor: pointer;\n transition: background-color 100ms, opacity 100ms, transform 100ms;\n}\n.link-container:hover {\n background-color: rgba(134, 142, 156, 0.2);\n transform: translateX(-1px) translateY(-1px);\n}\n.link-container:active {\n opacity: 0.5;\n transform: translateX(1px) translateY(1px);\n}\n\n.text {\n opacity: var(--opacity);\n transition: opacity 200ms;\n transition-delay: var(--delay);\n padding: 0 0.25rem;\n}";
|
|
1200
|
+
const ElmBreadcrumb = qwik.component$(({ links }) => {
|
|
1201
|
+
qwik.useStylesScoped$(styles$b);
|
|
1202
|
+
return /* @__PURE__ */ jsxRuntime.jsx("nav", {
|
|
1203
|
+
class: "container",
|
|
1204
|
+
children: links.map((link, index) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
1205
|
+
children: [
|
|
1206
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", {
|
|
1207
|
+
class: "link-container",
|
|
1208
|
+
onClick$: link.onClick$,
|
|
1209
|
+
children: [
|
|
1210
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
1211
|
+
class: "icon",
|
|
1212
|
+
style: {
|
|
1213
|
+
"--delay": `${index * 100}ms`
|
|
1214
|
+
},
|
|
1215
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
|
|
1216
|
+
d: index === 0 ? js.mdiHome : index === links.length - 1 ? js.mdiApplicationOutline : js.mdiFolderOpen,
|
|
1217
|
+
size: "1.25em"
|
|
1218
|
+
})
|
|
1219
|
+
}),
|
|
1220
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
1221
|
+
class: "text",
|
|
1222
|
+
style: {
|
|
1223
|
+
"--delay": `${index * 100 + 50}ms`
|
|
1224
|
+
},
|
|
1225
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
|
|
1226
|
+
children: link.text
|
|
1227
|
+
})
|
|
1228
|
+
})
|
|
1229
|
+
]
|
|
1230
|
+
}),
|
|
1231
|
+
links.length !== index + 1 && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
1232
|
+
class: "text",
|
|
1233
|
+
style: {
|
|
1234
|
+
"--delay": `${index * 100 + 100}ms`
|
|
1235
|
+
},
|
|
1236
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
|
|
1237
|
+
d: js.mdiChevronRight,
|
|
1238
|
+
size: "1em",
|
|
1239
|
+
color: "#b69545"
|
|
1240
|
+
})
|
|
1241
|
+
})
|
|
1242
|
+
]
|
|
1243
|
+
}))
|
|
1244
|
+
});
|
|
1245
|
+
});
|
|
1176
1246
|
const styles$a = '.blockquote {\n box-sizing: border-box;\n width: 100%;\n margin: 0;\n background-color: rgba(134, 142, 156, 0.1);\n position: relative;\n}\n.blockquote::after {\n position: absolute;\n content: "";\n top: 0;\n left: 0;\n width: 4px;\n height: 100%;\n background-color: #868e9c;\n}\n\n.body {\n box-sizing: border-box;\n padding: 2rem 1.5rem;\n}\n\n.icon {\n position: absolute;\n content: "";\n inset: var(--inset);\n opacity: 0.5;\n}';
|
|
1177
1247
|
const ElmBlockQuote = qwik.component$(({ cite }) => {
|
|
1178
1248
|
qwik.useStylesScoped$(styles$a);
|
|
@@ -1290,7 +1360,7 @@ const ElmFragmentIdentifier = qwik.component$(({ id }) => {
|
|
|
1290
1360
|
children: "#"
|
|
1291
1361
|
});
|
|
1292
1362
|
});
|
|
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 {\n
|
|
1363
|
+
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}';
|
|
1294
1364
|
const SIZE_MAP = Object.freeze({
|
|
1295
1365
|
1: 1.5,
|
|
1296
1366
|
2: 1.4,
|
|
@@ -1313,7 +1383,9 @@ const ElmHeading = qwik.component$(({ level, text, id }) => {
|
|
|
1313
1383
|
"--font-size": `${SIZE_MAP[level]}em`
|
|
1314
1384
|
},
|
|
1315
1385
|
children: [
|
|
1316
|
-
|
|
1386
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
1387
|
+
children: text
|
|
1388
|
+
}),
|
|
1317
1389
|
/* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}),
|
|
1318
1390
|
id && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
1319
1391
|
style: {
|
|
@@ -1322,6 +1394,10 @@ const ElmHeading = qwik.component$(({ level, text, id }) => {
|
|
|
1322
1394
|
children: /* @__PURE__ */ jsxRuntime.jsx(ElmFragmentIdentifier, {
|
|
1323
1395
|
id
|
|
1324
1396
|
})
|
|
1397
|
+
}),
|
|
1398
|
+
level === 2 && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
1399
|
+
class: "h2__underline",
|
|
1400
|
+
"aria-hidden": "true"
|
|
1325
1401
|
})
|
|
1326
1402
|
]
|
|
1327
1403
|
});
|
|
@@ -1662,6 +1738,7 @@ exports.ElmBlockFallback = ElmBlockFallback;
|
|
|
1662
1738
|
exports.ElmBlockImage = ElmBlockImage;
|
|
1663
1739
|
exports.ElmBlockQuote = ElmBlockQuote;
|
|
1664
1740
|
exports.ElmBookmark = ElmBookmark;
|
|
1741
|
+
exports.ElmBreadcrumb = ElmBreadcrumb;
|
|
1665
1742
|
exports.ElmCallout = ElmCallout;
|
|
1666
1743
|
exports.ElmCodeBlock = ElmCodeBlock;
|
|
1667
1744
|
exports.ElmDivider = ElmDivider;
|
|
@@ -1677,6 +1754,7 @@ exports.ElmLanguageIcon = ElmLanguageIcon;
|
|
|
1677
1754
|
exports.ElmList = ElmList;
|
|
1678
1755
|
exports.ElmMdiIcon = ElmMdiIcon;
|
|
1679
1756
|
exports.ElmParagraph = ElmParagraph;
|
|
1757
|
+
exports.ElmParallax = ElmParallax;
|
|
1680
1758
|
exports.ElmRectangleWave = ElmRectangleWave;
|
|
1681
1759
|
exports.ElmShikiHighlighter = ElmShikiHighlighter;
|
|
1682
1760
|
exports.ElmTable = ElmTable;
|
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 { mdiCodeTags, 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, mdiHome, mdiApplicationOutline, mdiFolderOpen, 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$
|
|
6
|
+
const styles$p = '.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",
|
|
@@ -55,9 +55,9 @@ const Typescript = component$(({ size = 24, ...props }) => {
|
|
|
55
55
|
]
|
|
56
56
|
});
|
|
57
57
|
});
|
|
58
|
-
const styles$
|
|
58
|
+
const styles$o = ".path {\n fill: #293138;\n}\n[data-theme=dark] .path {\n fill: #d2dbe3;\n}";
|
|
59
59
|
const Bash = component$(({ size = 24, ...props }) => {
|
|
60
|
-
useStylesScoped$(styles$
|
|
60
|
+
useStylesScoped$(styles$o);
|
|
61
61
|
return /* @__PURE__ */ jsxs("svg", {
|
|
62
62
|
xmlns: "http://www.w3.org/2000/svg",
|
|
63
63
|
viewBox: "0 0 128 128",
|
|
@@ -510,9 +510,9 @@ const C = component$(({ size = 24, ...props }) => {
|
|
|
510
510
|
]
|
|
511
511
|
});
|
|
512
512
|
});
|
|
513
|
-
const styles$
|
|
513
|
+
const styles$n = ".icon {\n fill: var(--color, #555b67);\n transition: fill 200ms;\n}\n[data-theme=dark] .icon {\n fill: var(--dark-color, #b0b5be);\n}";
|
|
514
514
|
const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
|
|
515
|
-
useStylesScoped$(styles$
|
|
515
|
+
useStylesScoped$(styles$n);
|
|
516
516
|
return /* @__PURE__ */ jsx("svg", {
|
|
517
517
|
class: "icon",
|
|
518
518
|
style: {
|
|
@@ -619,11 +619,11 @@ const ElmLanguageIcon = component$(({ size = 24, language }) => {
|
|
|
619
619
|
size
|
|
620
620
|
});
|
|
621
621
|
});
|
|
622
|
-
const styles$
|
|
622
|
+
const styles$m = '.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}';
|
|
623
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}";
|
|
624
|
-
const styles$
|
|
624
|
+
const styles$l = ".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}";
|
|
625
625
|
const ElmInlineIcon = component$(({ src, alt }) => {
|
|
626
|
-
useStylesScoped$(styles$
|
|
626
|
+
useStylesScoped$(styles$l);
|
|
627
627
|
return /* @__PURE__ */ jsx("span", {
|
|
628
628
|
class: "icon",
|
|
629
629
|
children: /* @__PURE__ */ jsx("img", {
|
|
@@ -634,7 +634,7 @@ const ElmInlineIcon = component$(({ src, alt }) => {
|
|
|
634
634
|
});
|
|
635
635
|
});
|
|
636
636
|
const ElmInlineText = component$((props) => {
|
|
637
|
-
useStylesScoped$(styles$
|
|
637
|
+
useStylesScoped$(styles$m);
|
|
638
638
|
useStylesScoped$(textStyles);
|
|
639
639
|
const { bold = false, italic = false, underline = false, strikethrough = false, code = false, size = "1em" } = props;
|
|
640
640
|
let vnode = props.text ? /* @__PURE__ */ jsx("span", {
|
|
@@ -716,9 +716,9 @@ const ElmInlineText = component$((props) => {
|
|
|
716
716
|
}
|
|
717
717
|
return wrappedVnode;
|
|
718
718
|
});
|
|
719
|
-
const styles$
|
|
719
|
+
const styles$k = '.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}';
|
|
720
720
|
const ElmShikiHighlighter = component$(({ code, language = "txt" }) => {
|
|
721
|
-
useStyles$(styles$
|
|
721
|
+
useStyles$(styles$k);
|
|
722
722
|
useStylesScoped$(`
|
|
723
723
|
.code {
|
|
724
724
|
font-size: 1rem;
|
|
@@ -752,7 +752,7 @@ const ElmShikiHighlighter = component$(({ code, language = "txt" }) => {
|
|
|
752
752
|
});
|
|
753
753
|
});
|
|
754
754
|
const ElmCodeBlock = component$(({ code, language = "txt", caption, margin }) => {
|
|
755
|
-
useStylesScoped$(styles$
|
|
755
|
+
useStylesScoped$(styles$p);
|
|
756
756
|
const timerId = useSignal(null);
|
|
757
757
|
const copyToClipboard = $(async () => {
|
|
758
758
|
if (timerId.value !== null) {
|
|
@@ -820,9 +820,32 @@ const ElmKatex = component$(({ expression, block = false }) => {
|
|
|
820
820
|
dangerouslySetInnerHTML: html.value
|
|
821
821
|
});
|
|
822
822
|
});
|
|
823
|
-
const styles$
|
|
823
|
+
const styles$j = ".parallax-watcher {\n display: none;\n z-index: -1;\n position: fixed;\n}\n\n.parallax {\n position: fixed;\n height: 2000vh;\n width: 100%;\n top: 0;\n left: 0;\n z-index: -1;\n background-repeat: repeat;\n background-size: auto;\n opacity: 0.2;\n}\n[data-theme=dark] .parallax {\n opacity: 0.1;\n}";
|
|
824
|
+
const ElmParallax = component$(({ images }) => {
|
|
825
|
+
useStylesScoped$(styles$j);
|
|
826
|
+
const y = useSignal(0);
|
|
827
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
828
|
+
children: [
|
|
829
|
+
/* @__PURE__ */ jsx("div", {
|
|
830
|
+
class: "parallax-watcher",
|
|
831
|
+
"window:onScroll$": () => {
|
|
832
|
+
y.value = window.scrollY;
|
|
833
|
+
}
|
|
834
|
+
}),
|
|
835
|
+
images.map((image, index) => /* @__PURE__ */ jsx("div", {
|
|
836
|
+
class: "parallax",
|
|
837
|
+
style: {
|
|
838
|
+
backgroundImage: `url(${image})`,
|
|
839
|
+
transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
|
|
840
|
+
transformOrigin: "bottom"
|
|
841
|
+
}
|
|
842
|
+
}, index))
|
|
843
|
+
]
|
|
844
|
+
});
|
|
845
|
+
});
|
|
846
|
+
const styles$i = ".toggle {\n margin: 0;\n display: grid;\n transition: grid 200ms;\n overflow: hidden;\n}\n.toggle.toggle-closed {\n grid-template-rows: 3.5rem 0fr 0rem;\n}\n.toggle.toggle-open {\n grid-template-rows: 3.5rem 1fr 3rem;\n}\n\n.summary {\n box-sizing: border-box;\n padding-inline: 1rem;\n display: grid;\n grid-template-columns: min-content 1fr min-content;\n gap: 1rem;\n align-items: center;\n cursor: pointer;\n border: 1px solid rgba(0, 0, 0, 0.125);\n background-color: rgba(62, 67, 75, 0.05);\n}\n[data-theme=dark] .summary {\n border: 1px solid rgba(255, 255, 255, 0.125);\n background-color: rgba(190, 194, 202, 0.1);\n}\n.summary.summary-open {\n border-radius: 0.25rem 0.25rem 0 0;\n border-bottom-color: transparent;\n}\n.summary.summary-closed {\n border-radius: 0.25rem;\n}\n\n.chevron-icon {\n transition: transform 200ms;\n}\n.chevron-icon.chevron-icon-open {\n transform: rotate(90deg);\n}\n.chevron-icon.chevron-icon-closed {\n transform: rotate(0deg);\n}\n\n.plus-icon {\n height: 1rem;\n width: 1rem;\n transform-origin: center;\n transition: transform 200ms;\n}\n.plus-icon.plus-icon-open {\n transform: rotate(135deg);\n}\n.plus-icon.plus-icon-closed {\n transform: rotate(0deg);\n}\n\n.content {\n box-sizing: border-box;\n padding: 1rem;\n overflow: hidden;\n transition: opacity 200ms;\n border: 1px solid rgba(0, 0, 0, 0.125);\n border-radius: 0 0 0.25rem 0.25rem;\n background-color: rgba(62, 67, 75, 0.0125);\n}\n[data-theme=dark] .content {\n border-color: rgba(255, 255, 255, 0.125);\n background-color: rgba(190, 194, 202, 0.025);\n}\n.content.content-open {\n opacity: 1;\n}\n.content.content-closed {\n opacity: 0;\n}\n\n.footer {\n box-sizing: border-box;\n margin: 0.25rem 0rem;\n padding: 0.5rem;\n color: #c56565;\n font-family: monospace;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n user-select: none;\n cursor: pointer;\n border-radius: 0.25rem;\n transition: opacity 200ms, background-color 200ms;\n}\n.footer:hover {\n opacity: 0.5;\n background-color: rgba(96, 104, 117, 0.1);\n}\n.footer.footer-line {\n box-sizing: border-box;\n margin: 0 0.25rem;\n flex-grow: 1;\n border: none;\n border-bottom: solid 1px rgba(128, 128, 128, 0.3);\n}\n.footer.footer-cross-icon {\n transform: rotate(45deg);\n}\n.footer.footer-chevron-icon {\n transform: rotate(-90deg);\n}";
|
|
824
847
|
const ElmToggle = component$(({ summary }) => {
|
|
825
|
-
useStylesScoped$(styles$
|
|
848
|
+
useStylesScoped$(styles$i);
|
|
826
849
|
const isOpen = useSignal(false);
|
|
827
850
|
const toggle = $(() => {
|
|
828
851
|
isOpen.value = !isOpen.value;
|
|
@@ -936,10 +959,10 @@ const ElmToggle = component$(({ summary }) => {
|
|
|
936
959
|
]
|
|
937
960
|
});
|
|
938
961
|
});
|
|
939
|
-
const styles$
|
|
940
|
-
const styles$
|
|
962
|
+
const styles$h = ".block-fallback {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: var(--height);\n}";
|
|
963
|
+
const styles$g = "@keyframes bounce {\n 0% {\n transform: translateY(0%) scaleY(0.3) scaleX(1.5);\n }\n 10% {\n transform: scaleY(0.8) scaleX(1.2);\n }\n 100% {\n transform: translateY(-400%) scaleY(1.1);\n }\n}\n.wrapper {\n width: var(--size);\n height: var(--size);\n user-select: none;\n position: relative;\n display: flex;\n justify-content: space-around;\n align-items: flex-end;\n}\n\n.dot {\n width: 20%;\n height: 20%;\n border-radius: 50%;\n animation-name: bounce;\n animation-duration: 0.4s;\n animation-iteration-count: infinite;\n animation-direction: alternate;\n animation-timing-function: ease-out;\n transition: background-color 400ms;\n background-color: var(--color, #606875);\n}\n[data-theme=dark] .dot {\n background-color: #b0b5be;\n}\n.dot:nth-last-of-type(1) {\n animation-delay: -100ms;\n}\n.dot:nth-last-of-type(2) {\n animation-delay: 0ms;\n}\n.dot:nth-last-of-type(3) {\n animation-delay: 100ms;\n}";
|
|
941
964
|
const ElmDotLoadingIcon = component$(({ size = "4em", color = "#606875" }) => {
|
|
942
|
-
useStylesScoped$(styles$
|
|
965
|
+
useStylesScoped$(styles$g);
|
|
943
966
|
return /* @__PURE__ */ jsxs("div", {
|
|
944
967
|
class: "wrapper",
|
|
945
968
|
style: {
|
|
@@ -962,16 +985,16 @@ const ElmDotLoadingIcon = component$(({ size = "4em", color = "#606875" }) => {
|
|
|
962
985
|
]
|
|
963
986
|
});
|
|
964
987
|
});
|
|
965
|
-
const styles$
|
|
988
|
+
const styles$f = "@keyframes elm-rectangle-wave {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 30% {\n opacity: 0;\n }\n 40% {\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n opacity: 0;\n }\n}\n.rectangle-wave {\n box-sizing: border-box;\n position: absolute;\n overflow: hidden;\n margin: 0;\n width: 100%;\n height: 100%;\n animation-name: elm-rectangle-wave;\n animation-duration: 1200ms;\n animation-iteration-count: infinite;\n animation-fill-mode: both;\n border-style: solid;\n border-width: 1px;\n border-color: rgba(0, 0, 0, 0.7);\n}\n[data-theme=dark] .rectangle-wave {\n border-color: rgba(255, 255, 255, 0.7);\n}";
|
|
966
989
|
const ElmRectangleWave = component$(() => {
|
|
967
|
-
useStylesScoped$(styles$
|
|
990
|
+
useStylesScoped$(styles$f);
|
|
968
991
|
return /* @__PURE__ */ jsx("div", {
|
|
969
992
|
"aria-hidden": "true",
|
|
970
993
|
class: "rectangle-wave"
|
|
971
994
|
});
|
|
972
995
|
});
|
|
973
996
|
const ElmBlockFallback = component$(({ height = "16rem" }) => {
|
|
974
|
-
useStylesScoped$(styles$
|
|
997
|
+
useStylesScoped$(styles$h);
|
|
975
998
|
return /* @__PURE__ */ jsxs("div", {
|
|
976
999
|
class: "block-fallback",
|
|
977
1000
|
style: {
|
|
@@ -983,9 +1006,9 @@ const ElmBlockFallback = component$(({ height = "16rem" }) => {
|
|
|
983
1006
|
]
|
|
984
1007
|
});
|
|
985
1008
|
});
|
|
986
|
-
const styles$
|
|
1009
|
+
const styles$e = ".block-image {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 0.5rem;\n width: 100%;\n}\n\n.image-container {\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.image {\n max-width: 100%;\n max-height: 100%;\n border-radius: 0.25rem;\n box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);\n transition: opacity 400ms;\n opacity: var(--opacity, 1);\n user-select: none;\n cursor: var(--cursor);\n}\n\n.fallback {\n width: 100%;\n height: 100%;\n inset: 0 0 auto auto;\n position: absolute;\n transition: opacity 400ms;\n opacity: var(--opacity, 1);\n pointer-events: none;\n}\n\n.caption-box {\n box-sizing: border-box;\n padding: 0rem 1rem;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n opacity: 0.75;\n opacity: var(--opacity, 1);\n transition: opacity 400ms;\n}\n\n.modal-container {\n width: 100vw;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n inset: 0 0 auto auto;\n z-index: 100;\n background-color: rgba(35, 38, 42, 0.8);\n cursor: zoom-out;\n opacity: var(--opacity, 1);\n transition: opacity 200ms;\n}";
|
|
987
1010
|
const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModal = true }) => {
|
|
988
|
-
useStylesScoped$(styles$
|
|
1011
|
+
useStylesScoped$(styles$e);
|
|
989
1012
|
const isLoading = useSignal(true);
|
|
990
1013
|
const isShowModal = useSignal(false);
|
|
991
1014
|
const handleImageLoad = $(() => {
|
|
@@ -1062,14 +1085,14 @@ const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModa
|
|
|
1062
1085
|
]
|
|
1063
1086
|
});
|
|
1064
1087
|
});
|
|
1065
|
-
const styles$
|
|
1088
|
+
const styles$d = ".file {\n margin: 0;\n padding: 1rem;\n display: grid;\n grid-template-columns: 1.5rem 1fr 1fr 1.5rem;\n gap: 1rem;\n align-items: center;\n box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.2);\n border-radius: 0.25rem;\n background-color: rgba(255, 255, 255, 0.2);\n}\n[data-theme=dark] .file {\n background-color: rgba(0, 0, 0, 0.2);\n}\n\n.file-size {\n text-align: right;\n opacity: 0.5;\n}\n\n.download-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 1.5rem;\n width: 1.5rem;\n padding: 0.125rem;\n border-radius: 0.125rem;\n cursor: pointer;\n transition: color 200ms, background-color 200ms;\n}\n.download-icon:hover {\n background-color: rgba(0, 0, 0, 0.1);\n}\n[data-theme=dark] .download-icon:hover {\n background-color: rgba(255, 255, 255, 0.1);\n}";
|
|
1066
1089
|
function getLastPathSegmentWithoutQueryOrHash(urlString) {
|
|
1067
1090
|
const cleanedUrl = urlString.split(/[?#]/)[0];
|
|
1068
1091
|
const pathSegments = cleanedUrl.split("/").filter(Boolean);
|
|
1069
1092
|
return pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : null;
|
|
1070
1093
|
}
|
|
1071
1094
|
const ElmFile = component$(({ name, src, filesize }) => {
|
|
1072
|
-
useStylesScoped$(styles$
|
|
1095
|
+
useStylesScoped$(styles$d);
|
|
1073
1096
|
const downloadFile = $(async () => {
|
|
1074
1097
|
let link;
|
|
1075
1098
|
try {
|
|
@@ -1117,9 +1140,9 @@ const ElmFile = component$(({ name, src, filesize }) => {
|
|
|
1117
1140
|
]
|
|
1118
1141
|
});
|
|
1119
1142
|
});
|
|
1120
|
-
const styles$
|
|
1143
|
+
const styles$c = ".bookmark {\n all: unset;\n display: block;\n container-type: inline-size;\n border-radius: 0.25rem;\n box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);\n overflow: hidden;\n transition: background-color 200ms, transform 200ms;\n}\n.bookmark:hover {\n background-color: rgba(105, 135, 184, 0.1);\n transform: translateX(-0.125rem) translateY(-0.125rem);\n}\n.bookmark:active {\n background-color: rgba(89, 181, 124, 0.1);\n transform: translateX(0) translateY(0);\n}\n\n.container {\n all: unset;\n cursor: pointer;\n width: 100%;\n display: flex;\n flex-direction: row;\n}\n@container (max-width: 700px) {\n .container {\n flex-direction: column;\n }\n}\n\n.image {\n overflow: hidden;\n height: 100%;\n opacity: 0.9;\n display: flex;\n justify-content: center;\n align-items: center;\n object-fit: cover;\n object-position: center;\n aspect-ratio: 2/1;\n width: min-content;\n max-width: 35%;\n}\n@container (max-width: 700px) {\n .image {\n min-width: unset;\n max-width: unset;\n width: 100%;\n }\n}\n\n.content {\n flex: 1;\n width: 75%;\n box-sizing: border-box;\n padding: 0.5rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n justify-content: space-between;\n transition: background-color 200ms;\n background-color: rgba(255, 255, 255, 0.4);\n}\n@container (max-width: 700px) {\n .content {\n width: 100%;\n }\n}\n[data-theme=dark] .content {\n background-color: rgba(0, 0, 0, 0.2);\n}\n.content .title {\n box-sizing: border-box;\n}\n.content .description {\n box-sizing: border-box;\n opacity: 0.7;\n}\n.content .link {\n line-height: 0.75rem;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 0.25rem;\n opacity: 0.7;\n}";
|
|
1121
1144
|
const ElmBookmark = component$(({ url, image, title, description, favicon }) => {
|
|
1122
|
-
useStylesScoped$(styles$
|
|
1145
|
+
useStylesScoped$(styles$c);
|
|
1123
1146
|
return /* @__PURE__ */ jsx("div", {
|
|
1124
1147
|
class: "bookmark",
|
|
1125
1148
|
children: /* @__PURE__ */ jsxs("a", {
|
|
@@ -1171,6 +1194,53 @@ const ElmBookmark = component$(({ url, image, title, description, favicon }) =>
|
|
|
1171
1194
|
})
|
|
1172
1195
|
});
|
|
1173
1196
|
});
|
|
1197
|
+
const styles$b = ".container {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: 0;\n user-select: none;\n}\n\n.link-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 0;\n box-sizing: border-box;\n padding: 0.25rem;\n border-radius: 0.25rem;\n cursor: pointer;\n transition: background-color 100ms, opacity 100ms, transform 100ms;\n}\n.link-container:hover {\n background-color: rgba(134, 142, 156, 0.2);\n transform: translateX(-1px) translateY(-1px);\n}\n.link-container:active {\n opacity: 0.5;\n transform: translateX(1px) translateY(1px);\n}\n\n.text {\n opacity: var(--opacity);\n transition: opacity 200ms;\n transition-delay: var(--delay);\n padding: 0 0.25rem;\n}";
|
|
1198
|
+
const ElmBreadcrumb = component$(({ links }) => {
|
|
1199
|
+
useStylesScoped$(styles$b);
|
|
1200
|
+
return /* @__PURE__ */ jsx("nav", {
|
|
1201
|
+
class: "container",
|
|
1202
|
+
children: links.map((link, index) => /* @__PURE__ */ jsxs(Fragment, {
|
|
1203
|
+
children: [
|
|
1204
|
+
/* @__PURE__ */ jsxs("span", {
|
|
1205
|
+
class: "link-container",
|
|
1206
|
+
onClick$: link.onClick$,
|
|
1207
|
+
children: [
|
|
1208
|
+
/* @__PURE__ */ jsx("span", {
|
|
1209
|
+
class: "icon",
|
|
1210
|
+
style: {
|
|
1211
|
+
"--delay": `${index * 100}ms`
|
|
1212
|
+
},
|
|
1213
|
+
children: /* @__PURE__ */ jsx(ElmMdiIcon, {
|
|
1214
|
+
d: index === 0 ? mdiHome : index === links.length - 1 ? mdiApplicationOutline : mdiFolderOpen,
|
|
1215
|
+
size: "1.25em"
|
|
1216
|
+
})
|
|
1217
|
+
}),
|
|
1218
|
+
/* @__PURE__ */ jsx("span", {
|
|
1219
|
+
class: "text",
|
|
1220
|
+
style: {
|
|
1221
|
+
"--delay": `${index * 100 + 50}ms`
|
|
1222
|
+
},
|
|
1223
|
+
children: /* @__PURE__ */ jsx(ElmInlineText, {
|
|
1224
|
+
children: link.text
|
|
1225
|
+
})
|
|
1226
|
+
})
|
|
1227
|
+
]
|
|
1228
|
+
}),
|
|
1229
|
+
links.length !== index + 1 && /* @__PURE__ */ jsx("span", {
|
|
1230
|
+
class: "text",
|
|
1231
|
+
style: {
|
|
1232
|
+
"--delay": `${index * 100 + 100}ms`
|
|
1233
|
+
},
|
|
1234
|
+
children: /* @__PURE__ */ jsx(ElmMdiIcon, {
|
|
1235
|
+
d: mdiChevronRight,
|
|
1236
|
+
size: "1em",
|
|
1237
|
+
color: "#b69545"
|
|
1238
|
+
})
|
|
1239
|
+
})
|
|
1240
|
+
]
|
|
1241
|
+
}))
|
|
1242
|
+
});
|
|
1243
|
+
});
|
|
1174
1244
|
const styles$a = '.blockquote {\n box-sizing: border-box;\n width: 100%;\n margin: 0;\n background-color: rgba(134, 142, 156, 0.1);\n position: relative;\n}\n.blockquote::after {\n position: absolute;\n content: "";\n top: 0;\n left: 0;\n width: 4px;\n height: 100%;\n background-color: #868e9c;\n}\n\n.body {\n box-sizing: border-box;\n padding: 2rem 1.5rem;\n}\n\n.icon {\n position: absolute;\n content: "";\n inset: var(--inset);\n opacity: 0.5;\n}';
|
|
1175
1245
|
const ElmBlockQuote = component$(({ cite }) => {
|
|
1176
1246
|
useStylesScoped$(styles$a);
|
|
@@ -1288,7 +1358,7 @@ const ElmFragmentIdentifier = component$(({ id }) => {
|
|
|
1288
1358
|
children: "#"
|
|
1289
1359
|
});
|
|
1290
1360
|
});
|
|
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 {\n
|
|
1361
|
+
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}';
|
|
1292
1362
|
const SIZE_MAP = Object.freeze({
|
|
1293
1363
|
1: 1.5,
|
|
1294
1364
|
2: 1.4,
|
|
@@ -1311,7 +1381,9 @@ const ElmHeading = component$(({ level, text, id }) => {
|
|
|
1311
1381
|
"--font-size": `${SIZE_MAP[level]}em`
|
|
1312
1382
|
},
|
|
1313
1383
|
children: [
|
|
1314
|
-
|
|
1384
|
+
/* @__PURE__ */ jsx("span", {
|
|
1385
|
+
children: text
|
|
1386
|
+
}),
|
|
1315
1387
|
/* @__PURE__ */ jsx(Slot, {}),
|
|
1316
1388
|
id && /* @__PURE__ */ jsx("span", {
|
|
1317
1389
|
style: {
|
|
@@ -1320,6 +1392,10 @@ const ElmHeading = component$(({ level, text, id }) => {
|
|
|
1320
1392
|
children: /* @__PURE__ */ jsx(ElmFragmentIdentifier, {
|
|
1321
1393
|
id
|
|
1322
1394
|
})
|
|
1395
|
+
}),
|
|
1396
|
+
level === 2 && /* @__PURE__ */ jsx("span", {
|
|
1397
|
+
class: "h2__underline",
|
|
1398
|
+
"aria-hidden": "true"
|
|
1323
1399
|
})
|
|
1324
1400
|
]
|
|
1325
1401
|
});
|
|
@@ -1661,6 +1737,7 @@ export {
|
|
|
1661
1737
|
ElmBlockImage,
|
|
1662
1738
|
ElmBlockQuote,
|
|
1663
1739
|
ElmBookmark,
|
|
1740
|
+
ElmBreadcrumb,
|
|
1664
1741
|
ElmCallout,
|
|
1665
1742
|
ElmCodeBlock,
|
|
1666
1743
|
ElmDivider,
|
|
@@ -1676,6 +1753,7 @@ export {
|
|
|
1676
1753
|
ElmList,
|
|
1677
1754
|
ElmMdiIcon,
|
|
1678
1755
|
ElmParagraph,
|
|
1756
|
+
ElmParallax,
|
|
1679
1757
|
ElmRectangleWave,
|
|
1680
1758
|
ElmShikiHighlighter,
|
|
1681
1759
|
ElmTable,
|
|
@@ -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;
|
package/lib-types/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { ElmCodeBlock, type ElmCodeBlockProps, } from "./components/code/elm-code-block";
|
|
2
2
|
export { ElmKatex, type ElmKatexProps } from "./components/code/elm-katex";
|
|
3
3
|
export { ElmShikiHighlighter, type ElmShikiHighlighterProps, } from "./components/code/elm-shiki-highlighter";
|
|
4
|
+
export { ElmParallax, type ElmParallaxProps, } from "./components/containments/elm-parallax";
|
|
4
5
|
export { ElmToggle, type ElmToggleProps, } from "./components/containments/elm-toggle";
|
|
5
6
|
export { ElmBlockFallback, type ElmBlockFallbackProps, } from "./components/fallback/elm-block-fallback";
|
|
6
7
|
export { ElmRectangleWave, type ElmRectangleWaveProps, } from "./components/fallback/elm-rectangle-wave";
|
|
@@ -11,6 +12,7 @@ export { ElmMdiIcon, type ElmMdiIconProps, } from "./components/icon/elm-mdi-ico
|
|
|
11
12
|
export { ElmBlockImage, type ElmBlockImageProps, } from "./components/media/elm-block-image";
|
|
12
13
|
export { ElmFile, type ElmFileProps } from "./components/media/elm-file";
|
|
13
14
|
export { ElmBookmark, type ElmBookmarkProps, } from "./components/navigation/elm-bookmark";
|
|
15
|
+
export { ElmBreadcrumb, type ElmBreadcrumbProps, } from "./components/navigation/elm-breadcrumb";
|
|
14
16
|
export { ElmBlockQuote, type ElmBlockQuoteProps, } from "./components/typography/elm-block-quote";
|
|
15
17
|
export { ElmCallout, type ElmCalloutProps, } from "./components/typography/elm-callout";
|
|
16
18
|
export { ElmDivider, type ElmDividerProps, } from "./components/typography/elm-divider";
|