vt3e.cat
1import "./css/main.css";
2
3import { Footer } from "./components/Footer";
4import { NavigationBar } from "./components/NavigationBar";
5import { html } from "./html";
6import { Router } from "./router";
7
8let app = document.querySelector("#app");
9if (!app) {
10 document.body.innerHTML = html`<div id="app"></div>`;
11 app = document.querySelector("#app") as HTMLElement;
12}
13
14app.innerHTML = html`
15 <div class="layout">
16 ${NavigationBar()}
17 <main class="main-content" id="page-content"></main>
18 </div>
19`;
20
21const pageContent = document.querySelector("#page-content") as HTMLElement;
22const createLazyPage = (importFn: () => Promise<{ default: () => string }>) => {
23 return async () => {
24 const { default: PageComponent } = await importFn();
25 return PageComponent();
26 };
27};
28
29export const router = new Router(pageContent)
30 .addRoute({
31 path: "/",
32 component: createLazyPage(() => import("./pages/HomePage")),
33 title: "home",
34 showInNavigation: true,
35 })
36 .addRoute({
37 path: "/uses",
38 component: createLazyPage(() => import("./pages/UsesPage")),
39 title: "uses",
40 showInNavigation: true,
41 })
42 .addRoute({
43 path: "/projects",
44 component: createLazyPage(() => import("./pages/ProjectsPage")),
45 title: "projects",
46 showInNavigation: true,
47 })
48 .addRoute({
49 path: "/gallery",
50 component: createLazyPage(() => import("./pages/GalleryPage")),
51 title: "gallery",
52 showInNavigation: true,
53 })
54 .addRoute({
55 path: "*",
56 component: createLazyPage(() => import("./pages/NotFoundPage")),
57 title: "not found",
58 showInNavigation: false,
59 });
60router.start();
61
62const params = new URLSearchParams(window.location.search);
63const path = params.get("path");
64if (path) {
65 router.navigate(path);
66 params.delete("path");
67 window.history.replaceState({}, "", window.location.pathname);
68}
69
70export const aboutString = `stupid demifem cat and/or rat that does ui/ux design and web development.`;
71
72const footer = Footer();
73pageContent.insertAdjacentHTML("afterend", footer);