ayo/mcfly
ayo/mcfly
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: support 404.html; initial src/components

Browse source
This commit is contained in:
Ayo 2023-10-08 00:59:57 +02:00
parent 2a7cd6888e
commit 7b45dc3ae6
7 changed files with 64 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
nitro.config.ts
View file

@ -5,5 +5,9 @@ export default defineNitroConfig({
baseName: "pages", baseName: "pages",
dir: "./src/pages", dir: "./src/pages",
}, },
{
baseName: "components",
dir: "./src/components",
},
], ],
}); });

28
plugins/register-components.ts Normal file
View file

@ -0,0 +1,28 @@
/**
build registry of custom elements
*/
export default defineNitroPlugin(async () => {
console.log("Building registry of custom elements...");
useStorage()
.getKeys("/assets/components")
.then((keys) => {
keys.forEach((key) => {
const name = key
.replace("assets:components:", "")
.replace(".ts", "")
.replace(".js", "");
const constructor = name
.split("-")
.map((word) => capitalizeFirstLetter(word))
.join("");
useStorage().setItem(`registry:${name}`, constructor);
console.log(`> ${name}, ${constructor}`);
});
});
});
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}

0
public/registry.js → public/_registry.js
View file

25
routes/[...index].ts
View file

@ -1,21 +1,16 @@
import * as fs from "fs";
export default eventHandler(async (event) => { export default eventHandler(async (event) => {
const filename = event.path === "/" ? "/index.html" : `${event.path}.html`; const rawPath =
const fallback = getPath(event.path + "/index.html"); event.path[event.path.length - 1] === "/"
? event.path.slice(0, -1)
: event.path;
const filename = rawPath === "" ? "/index.html" : `${rawPath}.html`;
const fallback = getPath(rawPath + "/index.html");
const path = getPath(filename); const path = getPath(filename);
let html = ""; let html = await useStorage().getItem(path);
if (!html) html = await useStorage().getItem(fallback);
if (!html) html = await useStorage().getItem(getPath("/404.html"));
try { return html ?? new Response("Not found", { status: 404 });
html = await useStorage().getItem(path);
} catch (error) {
try {
html = await useStorage().getItem(fallback);
} catch {
html = `cannot find ${path} or ${fallback}`;
}
}
return html;
}); });
function getPath(filename: string) { function getPath(filename: string) {

21
src/components/hello-world.js Normal file
View file

@ -0,0 +1,21 @@
import WebComponent from "https://unpkg.com/web-component-base/index.js";
export default class HelloWorld extends WebComponent {
name = "";
static properties = ["name"];
onInit() {
console.log(`Greeting for ${this.name} initialized`);
let count = 0;
this.onclick = () => {
console.log("Clicked!");
this.name = `I was clicked ${++count} times`;
this.render();
};
this.setAttribute("title", "Click me please");
}
get template() {
return `<button style="cursor:pointer">Hello ${this.name}!</button>`;
}
}

11
src/pages/about.html
View file

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>top about</title>
</head>
<body>
<h1>Top Level About</h1>
</body>
</html>

2
src/pages/index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Nitro</title> <title>Hello Nitro</title>
<script type="module" src="registry.js"></script> <script type="module" src="_registry.js"></script>
</head> </head>
<body> <body>
<hello-world name="Ayo" /> <hello-world name="Ayo" />