halfcab
Version:
A simple universal JavaScript framework focused on making use of es2015 template strings to build components.
51 lines (48 loc) • 2.38 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>halfcab demo</title>
<base href="/example/">
<script type="importmap">
{
"imports": {
"shifty-router": "https://esm.sh/shifty-router@0.1.1",
"shifty-router/href.js": "https://esm.sh/shifty-router@0.1.1/href.js",
"shifty-router/history.js": "https://esm.sh/shifty-router@0.1.1/history.js",
"shifty-router/create-location.js": "https://esm.sh/shifty-router@0.1.1/create-location.js",
"lit": "https://esm.sh/lit@3.3.2",
"@lit-labs/ssr-client": "https://esm.sh/@lit-labs/ssr-client@1.1.8",
"@lit-labs/ssr": "/example/ssr-browser-stub.js",
"axios": "https://esm.sh/axios@0.26.1",
"csjs-inject": "https://esm.sh/csjs-inject@1.0.1",
"deepmerge": "https://esm.sh/deepmerge@4.0.0",
"marked": "https://esm.sh/marked@0.7.0",
"html-entities": "https://esm.sh/html-entities@2.3.2",
"qs": "https://esm.sh/qs@6.5.2",
"nanolru": "https://esm.sh/nanolru@1.0.0",
"nanocomponent": "https://esm.sh/nanocomponent@6.5.2",
"deep-object-diff": "https://esm.sh/deep-object-diff@1.1.0",
"fast-clone": "https://esm.sh/fast-clone@1.5.13",
"event-emitter": "https://esm.sh/event-emitter@0.3.5"
}
}
</script>
<style>
:root { color-scheme: light dark; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; margin: 0; padding: 0; }
header { padding: 12px 16px; border-bottom: 1px solid #ccc; display: flex; gap: 12px; align-items: center; }
header a { text-decoration: none; color: inherit; padding: 6px 10px; border-radius: 6px; }
header a.active { background: rgba(0,0,0,0.08); }
main { padding: 16px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
</style>
</head>
<body>
<!-- Optional initial state for router bootstrapping -->
<div data-initial="eyJyb3V0ZXIiOnsicGF0aG5hbWUiOiIvIn19"></div>
<div id="app"></div>
<script type="module" src="./app.js"></script>
</body>
</html>