@elmethis/qwik 0.0.12 → 0.0.13
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$
|
|
8
|
+
const styles$q = '.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$p = ".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$p);
|
|
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$o = ".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$o);
|
|
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$n = '.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$m = ".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$m);
|
|
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$n);
|
|
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$l = '.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$l);
|
|
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$q);
|
|
758
758
|
const timerId = qwik.useSignal(null);
|
|
759
759
|
const copyToClipboard = qwik.$(async () => {
|
|
760
760
|
if (timerId.value !== null) {
|
|
@@ -822,9 +822,9 @@ const ElmKatex = qwik.component$(({ expression, block = false }) => {
|
|
|
822
822
|
dangerouslySetInnerHTML: html.value
|
|
823
823
|
});
|
|
824
824
|
});
|
|
825
|
-
const styles$
|
|
825
|
+
const styles$k = ".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
826
|
const ElmParallax = qwik.component$(({ images }) => {
|
|
827
|
-
qwik.useStylesScoped$(styles$
|
|
827
|
+
qwik.useStylesScoped$(styles$k);
|
|
828
828
|
const y = qwik.useSignal(0);
|
|
829
829
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
830
830
|
children: [
|
|
@@ -845,9 +845,9 @@ const ElmParallax = qwik.component$(({ images }) => {
|
|
|
845
845
|
]
|
|
846
846
|
});
|
|
847
847
|
});
|
|
848
|
-
const styles$
|
|
848
|
+
const styles$j = ".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}";
|
|
849
849
|
const ElmToggle = qwik.component$(({ summary }) => {
|
|
850
|
-
qwik.useStylesScoped$(styles$
|
|
850
|
+
qwik.useStylesScoped$(styles$j);
|
|
851
851
|
const isOpen = qwik.useSignal(false);
|
|
852
852
|
const toggle = qwik.$(() => {
|
|
853
853
|
isOpen.value = !isOpen.value;
|
|
@@ -961,10 +961,10 @@ const ElmToggle = qwik.component$(({ summary }) => {
|
|
|
961
961
|
]
|
|
962
962
|
});
|
|
963
963
|
});
|
|
964
|
-
const styles$
|
|
965
|
-
const styles$
|
|
964
|
+
const styles$i = ".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$h = "@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}";
|
|
966
966
|
const ElmDotLoadingIcon = qwik.component$(({ size = "4em", color = "#606875" }) => {
|
|
967
|
-
qwik.useStylesScoped$(styles$
|
|
967
|
+
qwik.useStylesScoped$(styles$h);
|
|
968
968
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
969
969
|
class: "wrapper",
|
|
970
970
|
style: {
|
|
@@ -987,16 +987,16 @@ const ElmDotLoadingIcon = qwik.component$(({ size = "4em", color = "#606875" })
|
|
|
987
987
|
]
|
|
988
988
|
});
|
|
989
989
|
});
|
|
990
|
-
const styles$
|
|
990
|
+
const styles$g = "@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}";
|
|
991
991
|
const ElmRectangleWave = qwik.component$(() => {
|
|
992
|
-
qwik.useStylesScoped$(styles$
|
|
992
|
+
qwik.useStylesScoped$(styles$g);
|
|
993
993
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
994
994
|
"aria-hidden": "true",
|
|
995
995
|
class: "rectangle-wave"
|
|
996
996
|
});
|
|
997
997
|
});
|
|
998
998
|
const ElmBlockFallback = qwik.component$(({ height = "16rem" }) => {
|
|
999
|
-
qwik.useStylesScoped$(styles$
|
|
999
|
+
qwik.useStylesScoped$(styles$i);
|
|
1000
1000
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
1001
1001
|
class: "block-fallback",
|
|
1002
1002
|
style: {
|
|
@@ -1008,9 +1008,9 @@ const ElmBlockFallback = qwik.component$(({ height = "16rem" }) => {
|
|
|
1008
1008
|
]
|
|
1009
1009
|
});
|
|
1010
1010
|
});
|
|
1011
|
-
const styles$
|
|
1011
|
+
const styles$f = ".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}";
|
|
1012
1012
|
const ElmBlockImage = qwik.component$(({ src, alt, caption, width, height, enableModal = true }) => {
|
|
1013
|
-
qwik.useStylesScoped$(styles$
|
|
1013
|
+
qwik.useStylesScoped$(styles$f);
|
|
1014
1014
|
const isLoading = qwik.useSignal(true);
|
|
1015
1015
|
const isShowModal = qwik.useSignal(false);
|
|
1016
1016
|
const handleImageLoad = qwik.$(() => {
|
|
@@ -1087,14 +1087,14 @@ const ElmBlockImage = qwik.component$(({ src, alt, caption, width, height, enabl
|
|
|
1087
1087
|
]
|
|
1088
1088
|
});
|
|
1089
1089
|
});
|
|
1090
|
-
const styles$
|
|
1090
|
+
const styles$e = ".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}";
|
|
1091
1091
|
function getLastPathSegmentWithoutQueryOrHash(urlString) {
|
|
1092
1092
|
const cleanedUrl = urlString.split(/[?#]/)[0];
|
|
1093
1093
|
const pathSegments = cleanedUrl.split("/").filter(Boolean);
|
|
1094
1094
|
return pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : null;
|
|
1095
1095
|
}
|
|
1096
1096
|
const ElmFile = qwik.component$(({ name, src, filesize }) => {
|
|
1097
|
-
qwik.useStylesScoped$(styles$
|
|
1097
|
+
qwik.useStylesScoped$(styles$e);
|
|
1098
1098
|
const downloadFile = qwik.$(async () => {
|
|
1099
1099
|
let link;
|
|
1100
1100
|
try {
|
|
@@ -1142,9 +1142,9 @@ const ElmFile = qwik.component$(({ name, src, filesize }) => {
|
|
|
1142
1142
|
]
|
|
1143
1143
|
});
|
|
1144
1144
|
});
|
|
1145
|
-
const styles$
|
|
1145
|
+
const styles$d = ".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}";
|
|
1146
1146
|
const ElmBookmark = qwik.component$(({ url, image, title, description, favicon }) => {
|
|
1147
|
-
qwik.useStylesScoped$(styles$
|
|
1147
|
+
qwik.useStylesScoped$(styles$d);
|
|
1148
1148
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
1149
1149
|
class: "bookmark",
|
|
1150
1150
|
children: /* @__PURE__ */ jsxRuntime.jsxs("a", {
|
|
@@ -1196,9 +1196,9 @@ const ElmBookmark = qwik.component$(({ url, image, title, description, favicon }
|
|
|
1196
1196
|
})
|
|
1197
1197
|
});
|
|
1198
1198
|
});
|
|
1199
|
-
const styles$
|
|
1199
|
+
const styles$c = ".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
1200
|
const ElmBreadcrumb = qwik.component$(({ links }) => {
|
|
1201
|
-
qwik.useStylesScoped$(styles$
|
|
1201
|
+
qwik.useStylesScoped$(styles$c);
|
|
1202
1202
|
return /* @__PURE__ */ jsxRuntime.jsx("nav", {
|
|
1203
1203
|
class: "container",
|
|
1204
1204
|
children: links.map((link, index) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
@@ -1243,6 +1243,54 @@ const ElmBreadcrumb = qwik.component$(({ links }) => {
|
|
|
1243
1243
|
}))
|
|
1244
1244
|
});
|
|
1245
1245
|
});
|
|
1246
|
+
const styles$b = '.wrapper {\n --const-margin: 1rem;\n z-index: 50;\n -webkit-tap-highlight-color: transparent;\n display: block;\n position: fixed;\n bottom: 0;\n margin: var(--const-margin) 0.5rem;\n width: var(--size);\n height: var(--size);\n left: var(--left, auto);\n right: var(---right, auto);\n opacity: 1;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: transform 700ms, opacity 400ms;\n transform-origin: 50% 50%;\n transform: translateY(250%) rotate(180deg);\n}\n.wrapper--visible {\n transition: transform 700ms, opacity 200ms;\n transform: translateY(0%) rotate(0deg);\n}\n.wrapper:hover {\n opacity: 0.8;\n}\n.wrapper:active {\n opacity: 0.4;\n}\n@keyframes move {\n 0% {\n opacity: 0;\n transform: translateY(600%);\n }\n 25% {\n opacity: 1;\n transform: translateY(220%);\n }\n 42% {\n opacity: 1;\n transform: translateY(200%);\n }\n 67% {\n opacity: 1;\n transform: translateY(0%);\n }\n 100% {\n opacity: 0;\n transform: translateY(-50%) scale(0.5);\n }\n}\n.wrapper .partial {\n position: absolute;\n width: var(--size);\n height: 20px;\n opacity: 0;\n transform: scale3d(0.5, 0.5, 0.5);\n animation: move 3000ms ease-out infinite;\n}\n.wrapper .partial:nth-of-type(1) {\n animation: move 3000ms ease-out 1000ms infinite;\n}\n.wrapper .partial:nth-of-type(2) {\n animation: move 3000ms ease-out 2000ms infinite;\n}\n.wrapper .partial:before, .wrapper .partial:after {\n content: "";\n position: absolute;\n top: 0;\n height: 100%;\n width: 50%;\n background-color: #494f59;\n}\n[data-theme=dark] .wrapper .partial:before, [data-theme=dark] .wrapper .partial:after {\n background-color: #bec2ca;\n}\n.wrapper .partial:before {\n left: 0;\n transform: skew(0deg, -30deg);\n}\n.wrapper .partial:after {\n right: 0;\n transform: skew(0deg, 30deg);\n}\n.wrapper .text {\n transition: opacity 200ms ease 400ms;\n width: 100%;\n text-align: center;\n font-family: sans-serif;\n position: absolute;\n z-index: 50;\n bottom: calc(0px - var(--const-margin));\n font-size: 12px;\n white-space: nowrap;\n user-select: none;\n color: var(--color, #606875);\n}\n.wrapper .text::selection {\n color: #cccfd5;\n background-color: var(--color, #3e434b);\n}\n[data-theme=dark] .wrapper .text {\n color: var(--color, #b0b5be);\n}\n[data-theme=dark] .wrapper .text::selection {\n color: #3e434b;\n background-color: var(--color, #cccfd5);\n}';
|
|
1247
|
+
const ElmPageTop = qwik.component$(({ position = "right" }) => {
|
|
1248
|
+
qwik.useStylesScoped$(styles$b);
|
|
1249
|
+
const isVisible = qwik.useSignal(false);
|
|
1250
|
+
qwik.useVisibleTask$(({ cleanup }) => {
|
|
1251
|
+
const checkScroll = () => {
|
|
1252
|
+
isVisible.value = window.scrollY > 100;
|
|
1253
|
+
};
|
|
1254
|
+
window.addEventListener("scroll", checkScroll, {
|
|
1255
|
+
passive: true
|
|
1256
|
+
});
|
|
1257
|
+
checkScroll();
|
|
1258
|
+
cleanup(() => window.removeEventListener("scroll", checkScroll));
|
|
1259
|
+
});
|
|
1260
|
+
const toTop = qwik.$(() => {
|
|
1261
|
+
window.scrollTo({
|
|
1262
|
+
top: 0,
|
|
1263
|
+
behavior: "smooth"
|
|
1264
|
+
});
|
|
1265
|
+
});
|
|
1266
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("nav", {
|
|
1267
|
+
class: `wrapper ${isVisible.value ? "wrapper--visible" : ""}`,
|
|
1268
|
+
style: {
|
|
1269
|
+
"--size": `${64}px`,
|
|
1270
|
+
left: position === "left" ? "0" : "auto",
|
|
1271
|
+
right: position === "right" ? "0" : "auto"
|
|
1272
|
+
},
|
|
1273
|
+
onClick$: toTop,
|
|
1274
|
+
children: [
|
|
1275
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
1276
|
+
"aria-hidden": "true",
|
|
1277
|
+
class: "partial"
|
|
1278
|
+
}),
|
|
1279
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
1280
|
+
"aria-hidden": "true",
|
|
1281
|
+
class: "partial"
|
|
1282
|
+
}),
|
|
1283
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
1284
|
+
"aria-hidden": "true",
|
|
1285
|
+
class: "partial"
|
|
1286
|
+
}),
|
|
1287
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
1288
|
+
class: "text",
|
|
1289
|
+
children: "Back to Top"
|
|
1290
|
+
})
|
|
1291
|
+
]
|
|
1292
|
+
});
|
|
1293
|
+
});
|
|
1246
1294
|
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}';
|
|
1247
1295
|
const ElmBlockQuote = qwik.component$(({ cite }) => {
|
|
1248
1296
|
qwik.useStylesScoped$(styles$a);
|
|
@@ -1753,6 +1801,7 @@ exports.ElmKatex = ElmKatex;
|
|
|
1753
1801
|
exports.ElmLanguageIcon = ElmLanguageIcon;
|
|
1754
1802
|
exports.ElmList = ElmList;
|
|
1755
1803
|
exports.ElmMdiIcon = ElmMdiIcon;
|
|
1804
|
+
exports.ElmPageTop = ElmPageTop;
|
|
1756
1805
|
exports.ElmParagraph = ElmParagraph;
|
|
1757
1806
|
exports.ElmParallax = ElmParallax;
|
|
1758
1807
|
exports.ElmRectangleWave = ElmRectangleWave;
|
package/lib/index.qwik.mjs
CHANGED
|
@@ -3,7 +3,7 @@ import { component$, useStylesScoped$, Slot, useStyles$, useSignal, useTask$, $,
|
|
|
3
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$q = '.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$p = ".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$p);
|
|
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$o = ".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$o);
|
|
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$n = '.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$m = ".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$m);
|
|
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$n);
|
|
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$l = '.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$l);
|
|
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$q);
|
|
756
756
|
const timerId = useSignal(null);
|
|
757
757
|
const copyToClipboard = $(async () => {
|
|
758
758
|
if (timerId.value !== null) {
|
|
@@ -820,9 +820,9 @@ const ElmKatex = component$(({ expression, block = false }) => {
|
|
|
820
820
|
dangerouslySetInnerHTML: html.value
|
|
821
821
|
});
|
|
822
822
|
});
|
|
823
|
-
const styles$
|
|
823
|
+
const styles$k = ".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
824
|
const ElmParallax = component$(({ images }) => {
|
|
825
|
-
useStylesScoped$(styles$
|
|
825
|
+
useStylesScoped$(styles$k);
|
|
826
826
|
const y = useSignal(0);
|
|
827
827
|
return /* @__PURE__ */ jsxs(Fragment, {
|
|
828
828
|
children: [
|
|
@@ -843,9 +843,9 @@ const ElmParallax = component$(({ images }) => {
|
|
|
843
843
|
]
|
|
844
844
|
});
|
|
845
845
|
});
|
|
846
|
-
const styles$
|
|
846
|
+
const styles$j = ".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}";
|
|
847
847
|
const ElmToggle = component$(({ summary }) => {
|
|
848
|
-
useStylesScoped$(styles$
|
|
848
|
+
useStylesScoped$(styles$j);
|
|
849
849
|
const isOpen = useSignal(false);
|
|
850
850
|
const toggle = $(() => {
|
|
851
851
|
isOpen.value = !isOpen.value;
|
|
@@ -959,10 +959,10 @@ const ElmToggle = component$(({ summary }) => {
|
|
|
959
959
|
]
|
|
960
960
|
});
|
|
961
961
|
});
|
|
962
|
-
const styles$
|
|
963
|
-
const styles$
|
|
962
|
+
const styles$i = ".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$h = "@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}";
|
|
964
964
|
const ElmDotLoadingIcon = component$(({ size = "4em", color = "#606875" }) => {
|
|
965
|
-
useStylesScoped$(styles$
|
|
965
|
+
useStylesScoped$(styles$h);
|
|
966
966
|
return /* @__PURE__ */ jsxs("div", {
|
|
967
967
|
class: "wrapper",
|
|
968
968
|
style: {
|
|
@@ -985,16 +985,16 @@ const ElmDotLoadingIcon = component$(({ size = "4em", color = "#606875" }) => {
|
|
|
985
985
|
]
|
|
986
986
|
});
|
|
987
987
|
});
|
|
988
|
-
const styles$
|
|
988
|
+
const styles$g = "@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}";
|
|
989
989
|
const ElmRectangleWave = component$(() => {
|
|
990
|
-
useStylesScoped$(styles$
|
|
990
|
+
useStylesScoped$(styles$g);
|
|
991
991
|
return /* @__PURE__ */ jsx("div", {
|
|
992
992
|
"aria-hidden": "true",
|
|
993
993
|
class: "rectangle-wave"
|
|
994
994
|
});
|
|
995
995
|
});
|
|
996
996
|
const ElmBlockFallback = component$(({ height = "16rem" }) => {
|
|
997
|
-
useStylesScoped$(styles$
|
|
997
|
+
useStylesScoped$(styles$i);
|
|
998
998
|
return /* @__PURE__ */ jsxs("div", {
|
|
999
999
|
class: "block-fallback",
|
|
1000
1000
|
style: {
|
|
@@ -1006,9 +1006,9 @@ const ElmBlockFallback = component$(({ height = "16rem" }) => {
|
|
|
1006
1006
|
]
|
|
1007
1007
|
});
|
|
1008
1008
|
});
|
|
1009
|
-
const styles$
|
|
1009
|
+
const styles$f = ".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}";
|
|
1010
1010
|
const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModal = true }) => {
|
|
1011
|
-
useStylesScoped$(styles$
|
|
1011
|
+
useStylesScoped$(styles$f);
|
|
1012
1012
|
const isLoading = useSignal(true);
|
|
1013
1013
|
const isShowModal = useSignal(false);
|
|
1014
1014
|
const handleImageLoad = $(() => {
|
|
@@ -1085,14 +1085,14 @@ const ElmBlockImage = component$(({ src, alt, caption, width, height, enableModa
|
|
|
1085
1085
|
]
|
|
1086
1086
|
});
|
|
1087
1087
|
});
|
|
1088
|
-
const styles$
|
|
1088
|
+
const styles$e = ".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}";
|
|
1089
1089
|
function getLastPathSegmentWithoutQueryOrHash(urlString) {
|
|
1090
1090
|
const cleanedUrl = urlString.split(/[?#]/)[0];
|
|
1091
1091
|
const pathSegments = cleanedUrl.split("/").filter(Boolean);
|
|
1092
1092
|
return pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : null;
|
|
1093
1093
|
}
|
|
1094
1094
|
const ElmFile = component$(({ name, src, filesize }) => {
|
|
1095
|
-
useStylesScoped$(styles$
|
|
1095
|
+
useStylesScoped$(styles$e);
|
|
1096
1096
|
const downloadFile = $(async () => {
|
|
1097
1097
|
let link;
|
|
1098
1098
|
try {
|
|
@@ -1140,9 +1140,9 @@ const ElmFile = component$(({ name, src, filesize }) => {
|
|
|
1140
1140
|
]
|
|
1141
1141
|
});
|
|
1142
1142
|
});
|
|
1143
|
-
const styles$
|
|
1143
|
+
const styles$d = ".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}";
|
|
1144
1144
|
const ElmBookmark = component$(({ url, image, title, description, favicon }) => {
|
|
1145
|
-
useStylesScoped$(styles$
|
|
1145
|
+
useStylesScoped$(styles$d);
|
|
1146
1146
|
return /* @__PURE__ */ jsx("div", {
|
|
1147
1147
|
class: "bookmark",
|
|
1148
1148
|
children: /* @__PURE__ */ jsxs("a", {
|
|
@@ -1194,9 +1194,9 @@ const ElmBookmark = component$(({ url, image, title, description, favicon }) =>
|
|
|
1194
1194
|
})
|
|
1195
1195
|
});
|
|
1196
1196
|
});
|
|
1197
|
-
const styles$
|
|
1197
|
+
const styles$c = ".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
1198
|
const ElmBreadcrumb = component$(({ links }) => {
|
|
1199
|
-
useStylesScoped$(styles$
|
|
1199
|
+
useStylesScoped$(styles$c);
|
|
1200
1200
|
return /* @__PURE__ */ jsx("nav", {
|
|
1201
1201
|
class: "container",
|
|
1202
1202
|
children: links.map((link, index) => /* @__PURE__ */ jsxs(Fragment, {
|
|
@@ -1241,6 +1241,54 @@ const ElmBreadcrumb = component$(({ links }) => {
|
|
|
1241
1241
|
}))
|
|
1242
1242
|
});
|
|
1243
1243
|
});
|
|
1244
|
+
const styles$b = '.wrapper {\n --const-margin: 1rem;\n z-index: 50;\n -webkit-tap-highlight-color: transparent;\n display: block;\n position: fixed;\n bottom: 0;\n margin: var(--const-margin) 0.5rem;\n width: var(--size);\n height: var(--size);\n left: var(--left, auto);\n right: var(---right, auto);\n opacity: 1;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: transform 700ms, opacity 400ms;\n transform-origin: 50% 50%;\n transform: translateY(250%) rotate(180deg);\n}\n.wrapper--visible {\n transition: transform 700ms, opacity 200ms;\n transform: translateY(0%) rotate(0deg);\n}\n.wrapper:hover {\n opacity: 0.8;\n}\n.wrapper:active {\n opacity: 0.4;\n}\n@keyframes move {\n 0% {\n opacity: 0;\n transform: translateY(600%);\n }\n 25% {\n opacity: 1;\n transform: translateY(220%);\n }\n 42% {\n opacity: 1;\n transform: translateY(200%);\n }\n 67% {\n opacity: 1;\n transform: translateY(0%);\n }\n 100% {\n opacity: 0;\n transform: translateY(-50%) scale(0.5);\n }\n}\n.wrapper .partial {\n position: absolute;\n width: var(--size);\n height: 20px;\n opacity: 0;\n transform: scale3d(0.5, 0.5, 0.5);\n animation: move 3000ms ease-out infinite;\n}\n.wrapper .partial:nth-of-type(1) {\n animation: move 3000ms ease-out 1000ms infinite;\n}\n.wrapper .partial:nth-of-type(2) {\n animation: move 3000ms ease-out 2000ms infinite;\n}\n.wrapper .partial:before, .wrapper .partial:after {\n content: "";\n position: absolute;\n top: 0;\n height: 100%;\n width: 50%;\n background-color: #494f59;\n}\n[data-theme=dark] .wrapper .partial:before, [data-theme=dark] .wrapper .partial:after {\n background-color: #bec2ca;\n}\n.wrapper .partial:before {\n left: 0;\n transform: skew(0deg, -30deg);\n}\n.wrapper .partial:after {\n right: 0;\n transform: skew(0deg, 30deg);\n}\n.wrapper .text {\n transition: opacity 200ms ease 400ms;\n width: 100%;\n text-align: center;\n font-family: sans-serif;\n position: absolute;\n z-index: 50;\n bottom: calc(0px - var(--const-margin));\n font-size: 12px;\n white-space: nowrap;\n user-select: none;\n color: var(--color, #606875);\n}\n.wrapper .text::selection {\n color: #cccfd5;\n background-color: var(--color, #3e434b);\n}\n[data-theme=dark] .wrapper .text {\n color: var(--color, #b0b5be);\n}\n[data-theme=dark] .wrapper .text::selection {\n color: #3e434b;\n background-color: var(--color, #cccfd5);\n}';
|
|
1245
|
+
const ElmPageTop = component$(({ position = "right" }) => {
|
|
1246
|
+
useStylesScoped$(styles$b);
|
|
1247
|
+
const isVisible = useSignal(false);
|
|
1248
|
+
useVisibleTask$(({ cleanup }) => {
|
|
1249
|
+
const checkScroll = () => {
|
|
1250
|
+
isVisible.value = window.scrollY > 100;
|
|
1251
|
+
};
|
|
1252
|
+
window.addEventListener("scroll", checkScroll, {
|
|
1253
|
+
passive: true
|
|
1254
|
+
});
|
|
1255
|
+
checkScroll();
|
|
1256
|
+
cleanup(() => window.removeEventListener("scroll", checkScroll));
|
|
1257
|
+
});
|
|
1258
|
+
const toTop = $(() => {
|
|
1259
|
+
window.scrollTo({
|
|
1260
|
+
top: 0,
|
|
1261
|
+
behavior: "smooth"
|
|
1262
|
+
});
|
|
1263
|
+
});
|
|
1264
|
+
return /* @__PURE__ */ jsxs("nav", {
|
|
1265
|
+
class: `wrapper ${isVisible.value ? "wrapper--visible" : ""}`,
|
|
1266
|
+
style: {
|
|
1267
|
+
"--size": `${64}px`,
|
|
1268
|
+
left: position === "left" ? "0" : "auto",
|
|
1269
|
+
right: position === "right" ? "0" : "auto"
|
|
1270
|
+
},
|
|
1271
|
+
onClick$: toTop,
|
|
1272
|
+
children: [
|
|
1273
|
+
/* @__PURE__ */ jsx("div", {
|
|
1274
|
+
"aria-hidden": "true",
|
|
1275
|
+
class: "partial"
|
|
1276
|
+
}),
|
|
1277
|
+
/* @__PURE__ */ jsx("div", {
|
|
1278
|
+
"aria-hidden": "true",
|
|
1279
|
+
class: "partial"
|
|
1280
|
+
}),
|
|
1281
|
+
/* @__PURE__ */ jsx("div", {
|
|
1282
|
+
"aria-hidden": "true",
|
|
1283
|
+
class: "partial"
|
|
1284
|
+
}),
|
|
1285
|
+
/* @__PURE__ */ jsx("span", {
|
|
1286
|
+
class: "text",
|
|
1287
|
+
children: "Back to Top"
|
|
1288
|
+
})
|
|
1289
|
+
]
|
|
1290
|
+
});
|
|
1291
|
+
});
|
|
1244
1292
|
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}';
|
|
1245
1293
|
const ElmBlockQuote = component$(({ cite }) => {
|
|
1246
1294
|
useStylesScoped$(styles$a);
|
|
@@ -1752,6 +1800,7 @@ export {
|
|
|
1752
1800
|
ElmLanguageIcon,
|
|
1753
1801
|
ElmList,
|
|
1754
1802
|
ElmMdiIcon,
|
|
1803
|
+
ElmPageTop,
|
|
1755
1804
|
ElmParagraph,
|
|
1756
1805
|
ElmParallax,
|
|
1757
1806
|
ElmRectangleWave,
|
package/lib-types/index.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export { ElmBlockImage, type ElmBlockImageProps, } from "./components/media/elm-
|
|
|
13
13
|
export { ElmFile, type ElmFileProps } from "./components/media/elm-file";
|
|
14
14
|
export { ElmBookmark, type ElmBookmarkProps, } from "./components/navigation/elm-bookmark";
|
|
15
15
|
export { ElmBreadcrumb, type ElmBreadcrumbProps, } from "./components/navigation/elm-breadcrumb";
|
|
16
|
+
export { ElmPageTop, type ElmPageTopProps, } from "./components/navigation/elm-page-top";
|
|
16
17
|
export { ElmBlockQuote, type ElmBlockQuoteProps, } from "./components/typography/elm-block-quote";
|
|
17
18
|
export { ElmCallout, type ElmCalloutProps, } from "./components/typography/elm-callout";
|
|
18
19
|
export { ElmDivider, type ElmDividerProps, } from "./components/typography/elm-divider";
|