mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-22 07:49:38 +01:00
52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
import { el } from "deka-dom-el";
|
||
import { head as headCommon } from "./layout/head.html.js";
|
||
export function head(pkg, path_target){
|
||
return headCommon({
|
||
id: "index",
|
||
title: pageName(pkg),
|
||
description: "Introducing basic concepts.",
|
||
pkg, path_target
|
||
});
|
||
}
|
||
|
||
import { styles, common } from "./index.css.js";
|
||
import { example, css as example_css } from "./components/example.html.js";
|
||
export const css= styles()
|
||
.include(common)
|
||
.css`
|
||
.note{
|
||
font-size: .9rem;
|
||
font-style: italic;
|
||
}
|
||
`
|
||
.include(example_css);
|
||
export function body(pkg){
|
||
return el("<>").append(
|
||
el("h1", pageName(pkg)),
|
||
el("p").append(
|
||
"The library tries to provide pure JavaScript tool(s) to create reactive interfaces.",
|
||
"The main goals are:"
|
||
),
|
||
el("ul").append(
|
||
el("li", "provide a small wrapper around the native JavaScript DOM"),
|
||
el("li", "keep library size under 10kB"),
|
||
el("li", "zero dependencies (if possible)"),
|
||
el("li", "prefer a declarative/functional approach"),
|
||
el("li", "unopinionated (allow alternative methods)"),
|
||
),
|
||
el("p", { className: "note" }).append(
|
||
"It is, in fact, an reimplementation of ",
|
||
el("a", {
|
||
href: "https://github.com/jaandrle/dollar_dom_component",
|
||
title: "GitHub repository of library. Motto: Functional DOM components without JSX and virtual DOM.",
|
||
textContent: "jaandrle/dollar_dom_component"
|
||
}),
|
||
".",
|
||
),
|
||
el(example, { src: "./components/examples/helloWorld.js" })
|
||
);
|
||
}
|
||
function pageName(pkg){
|
||
return `\`${pkg.name}\` — Introduction/Guide`;
|
||
}
|