Initial commit
This commit is contained in:
170
public/demo.html
Normal file
170
public/demo.html
Normal file
@@ -0,0 +1,170 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>fluent-dom-esm Demo</title>
|
||||
<link rel="stylesheet" href="/styles/main.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="module">
|
||||
import $d from "/fluent-dom-esm.js";
|
||||
|
||||
const $article = $d
|
||||
.c("article")
|
||||
.id("fde-article")
|
||||
.cls("cool-article")
|
||||
.app($d.c("h1").cls("cool-heading").t("fluent-dom-esm"))
|
||||
.app(
|
||||
$d
|
||||
.c("p")
|
||||
.s("background-color", "#db7c17")
|
||||
.s("color", "var(--main-dark)")
|
||||
.t("Why is it so cool?"),
|
||||
);
|
||||
|
||||
const $ul = $d.c("ul").id("fluentDom-example-list");
|
||||
|
||||
[
|
||||
"Remarkably simple syntax",
|
||||
"Surprisingly powerful features",
|
||||
"Easy to use and remember",
|
||||
].forEach((reason, idx) => {
|
||||
$ul.app(
|
||||
$d
|
||||
.c("li")
|
||||
.id(`fluentDom-example-list-item${idx + 1}`)
|
||||
.t(reason),
|
||||
);
|
||||
});
|
||||
|
||||
$d(document.body).app(
|
||||
$article
|
||||
.app($ul)
|
||||
.app(
|
||||
$d.c("em").t("Try it today!").style("color", "#c43a19"),
|
||||
),
|
||||
);
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import $d from "/fluent-dom-esm.js";
|
||||
|
||||
const preDom = $d
|
||||
.c("pre")
|
||||
.t(
|
||||
`
|
||||
\<script type="module">
|
||||
import $d from "/src/fluent-dom-esm.ts";
|
||||
|
||||
const $article = $d
|
||||
.c("article")
|
||||
.id("fde-article")
|
||||
.cls("cool-article")
|
||||
.app($d.c("h1").cls("cool-heading").t("fluent-dom-esm"))
|
||||
.app(
|
||||
$d
|
||||
.c("p")
|
||||
.s("background-color", "#db7c17")
|
||||
.s("color", "var(--main-dark)")
|
||||
.t("Why is it so cool?"),
|
||||
);
|
||||
|
||||
const $ul = $d.c("ul").id("fluentDom-example-list");
|
||||
|
||||
[
|
||||
"Remarkably simple syntax",
|
||||
"Surprisingly powerful features",
|
||||
"Easy to use and remember",
|
||||
].forEach((reason, idx) => {
|
||||
$ul.app(
|
||||
$d
|
||||
.c("li")
|
||||
.id(\`fluentDom-example-list-item$\{idx + 1}\`)
|
||||
.t(reason),
|
||||
);
|
||||
});
|
||||
|
||||
$d(document.body).app(
|
||||
$article
|
||||
.app($ul)
|
||||
.app(
|
||||
$d.c("em").t("Try it today!").style("color", "#c43a19"),
|
||||
),
|
||||
);
|
||||
|
||||
<\/script>
|
||||
`
|
||||
.trim()
|
||||
.split("\n")
|
||||
.map((val) => {
|
||||
return val.replace(" ", "");
|
||||
})
|
||||
.join("\n"),
|
||||
)
|
||||
.toDom();
|
||||
|
||||
preDom.innerHTML = preDom.innerHTML
|
||||
// strRegEx must be applied first to prevent false positives
|
||||
.replace(/\"[^"]+\"/g, (val) =>
|
||||
val !== '"module"'
|
||||
? `<span class="code-str">${val}</span>`
|
||||
: val,
|
||||
)
|
||||
.replace(
|
||||
/\`[^`]+\`/g,
|
||||
(val) => `<span class="code-str">${val}</span>`,
|
||||
)
|
||||
.replace(/\.\w+/g, (val) =>
|
||||
val !== ".ts"
|
||||
? `<span class="code-func">${val}</span>`
|
||||
: val,
|
||||
)
|
||||
.replace(/(\$\w+)/g, '<span class="code-dom">$1</span>')
|
||||
.replace("document", '<span class="code-var">document</span>')
|
||||
.replaceAll("reason", '<span class="code-var">reason</span>')
|
||||
.replace("idx", '<span class="code-var">idx</span>')
|
||||
.replace(
|
||||
/<\/?script[^&]*>/g,
|
||||
(val) => `<span class="code-cmd">${val}</span>`,
|
||||
);
|
||||
|
||||
const themeToggleButton = $d
|
||||
.c("button")
|
||||
.cls("themeToggle-button")
|
||||
.id("themeToggle-button")
|
||||
// .t("☀︎ / ☾")
|
||||
.listen("click", () => {
|
||||
document.body.classList.toggle("invertedTheme");
|
||||
})
|
||||
.html(
|
||||
`
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
width="1em"
|
||||
height="1em"
|
||||
class="themeToggle-svgIndicator"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 32 32"
|
||||
>
|
||||
<path
|
||||
d="M16 .5C7.4.5.5 7.4.5 16S7.4 31.5 16 31.5 31.5 24.6 31.5 16 24.6.5
|
||||
16 .5zm0 28.1V3.4C23 3.4 28.6 9 28.6 16S23 28.6 16 28.6z"
|
||||
/>
|
||||
</svg>
|
||||
`.trim(),
|
||||
);
|
||||
|
||||
$d(document.body)
|
||||
.app(
|
||||
$d
|
||||
.c("figure")
|
||||
.app($d.c("figcaption").t("Source"))
|
||||
.app(preDom),
|
||||
)
|
||||
.app(themeToggleButton);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
140
public/styles/main.css
Normal file
140
public/styles/main.css
Normal file
@@ -0,0 +1,140 @@
|
||||
* {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-light: #4f9a97;
|
||||
--main-dark: #1a2737;
|
||||
|
||||
--gray-light: #eee;
|
||||
--gray-bg-60: rgba(10, 10, 10, .6);
|
||||
--gray-bg-80: rgba(10, 10, 10, .8);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-dark);
|
||||
color: var(--main-light);
|
||||
font-size: 18px;
|
||||
transition: color .5s;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
border-bottom: 1px dashed var(--main-light);
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
margin: -1rem -1rem 1rem -1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
figure {
|
||||
background-color: var(--gray-bg-60);
|
||||
border: 1px solid var(--main-light);
|
||||
color: #285559;
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.code-cmd {
|
||||
color: #347c7a;
|
||||
}
|
||||
|
||||
.code-dom {
|
||||
color: var(--main-light);
|
||||
}
|
||||
|
||||
.code-func {
|
||||
color: #db7c17;
|
||||
}
|
||||
|
||||
.code-str {
|
||||
color: #c43a19;
|
||||
}
|
||||
|
||||
.code-var {
|
||||
color: var(--main-light);
|
||||
}
|
||||
|
||||
.themeToggle-button {
|
||||
background-color: #5d27a1;
|
||||
border: 1px solid var(--gray-light);
|
||||
border-radius: 1rem;
|
||||
color: var(--gray-light);
|
||||
display: flex;
|
||||
font-size: 1.5rem;
|
||||
padding: .5rem;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.themeToggle-svgIndicator {
|
||||
rotate: 180deg;
|
||||
transition: rotate .5s;
|
||||
}
|
||||
|
||||
|
||||
body.invertedTheme {
|
||||
background-color: var(--main-light);
|
||||
color: var(--main-dark);
|
||||
}
|
||||
|
||||
body.invertedTheme figcaption {
|
||||
border-color: var(--main-dark);
|
||||
}
|
||||
|
||||
body.invertedTheme figure {
|
||||
background-color: var(--gray-bg-80);
|
||||
border-color: var(--main-dark);
|
||||
}
|
||||
|
||||
body.invertedTheme .themeToggle-svgIndicator {
|
||||
rotate: 0deg;
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
background-color: var(--main-light);
|
||||
color: var(--main-dark);
|
||||
}
|
||||
|
||||
figure {
|
||||
background-color: var(--gray-bg-80);
|
||||
border-color: var(--main-dark);
|
||||
color: var(--main-light);
|
||||
}
|
||||
|
||||
.themeToggle-svgIndicator {
|
||||
rotate: 0deg;
|
||||
}
|
||||
|
||||
body.invertedTheme {
|
||||
background-color: var(--main-dark);
|
||||
color: var(--main-light);
|
||||
}
|
||||
|
||||
body.invertedTheme figcaption {
|
||||
border-color: var(--main-light);
|
||||
}
|
||||
|
||||
body.invertedTheme figure {
|
||||
background-color: var(--gray-bg-60);
|
||||
border-color: var(--main-light);
|
||||
}
|
||||
|
||||
body.invertedTheme .themeToggle-svgIndicator {
|
||||
rotate: 180deg;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user