feat: upgrade template structure

build/esbuild-build.ts

@@ -1,15 +1,14 @@
 import esbuild, { BuildOptions } from "esbuild";
 
-const ENTRY_POINTS = {
-  typescript: ["static/main.ts"],
-  // css: ["static/style.css"],
-};
+const typescriptEntries = ["src/main.ts"];
+const cssEntries = ["static/style.css"];
+const entries = [...typescriptEntries, ...cssEntries];
 
 const DATA_URL_LOADERS = [".png", ".woff", ".woff2", ".eot", ".ttf", ".svg"];
 
 export const esbuildOptions: BuildOptions = {
   sourcemap: true,
-  entryPoints: [...ENTRY_POINTS.typescript /* ...ENTRY_POINTS.css */],
+  entryPoints: entries,
   bundle: true,
   minify: false,
   loader: Object.fromEntries(DATA_URL_LOADERS.map((ext) => [ext, "dataurl"])),

src/components/component1.ts

@@ -0,0 +1,3 @@
+export function createPage1Content(): string {
+  return `<div>This is the content of page 1</div>`;
+}

src/components/component2.ts

@@ -0,0 +1,3 @@
+export function createPage2Content(): string {
+  return `<div>This is the content of page 2</div>`;
+}

src/components/home.ts

@@ -0,0 +1,7 @@
+export function createHomePage(): string {
+  return `
+    <div>
+    <h1>Ubiquity TypeScript Template Home</h1>
+    </div>
+  `;
+}

src/controllers/404.ts

@@ -0,0 +1,11 @@
+export async function redirectTo404() {
+  const contentArea = document.getElementById("content-area");
+
+  if (contentArea) {
+    try {
+      window.location.href = "https://dao.ubq.fi/404";
+    } catch (error) {
+      console.error("Failed to load 404 page:", error);
+    }
+  }
+}

src/controllers/home.ts

@@ -0,0 +1,14 @@
+import { createHomePage } from "../components/home";
+
+export async function loadHomePage() {
+  const contentArea = document.getElementById("content-area");
+
+  if (contentArea) {
+    try {
+      const content = createHomePage();
+      contentArea.innerHTML = content;
+    } catch (error) {
+      console.error("Failed to load home page:", error);
+    }
+  }
+}

src/controllers/page1.ts

@@ -0,0 +1,14 @@
+import { createPage1Content } from "../components/component1";
+
+export async function loadPage1() {
+  const contentArea = document.getElementById("content-area");
+
+  if (contentArea) {
+    try {
+      const content = createPage1Content();
+      contentArea.innerHTML = content;
+    } catch (error) {
+      console.error("Failed to load page 1:", error);
+    }
+  }
+}

src/controllers/page2.ts

@@ -0,0 +1,14 @@
+import { createPage2Content } from "../components/component2";
+
+export async function loadPage2() {
+  const contentArea = document.getElementById("content-area");
+
+  if (contentArea) {
+    try {
+      const content = createPage2Content(); // Use a reusable component
+      contentArea.innerHTML = content;
+    } catch (error) {
+      console.error("Failed to load page 2:", error);
+    }
+  }
+}

src/main.ts

@@ -0,0 +1,23 @@
+import { handleRouting, setupRouter } from "./router";
+import { initializeState } from "./on-load";
+
+setupRouter();
+
+export async function mainModule() {
+  try {
+    await initializeState();
+    console.log("State initialized");
+
+    await handleRouting();
+  } catch (error) {
+    console.error("Error in main: ", error);
+  }
+}
+
+mainModule()
+  .then(() => {
+    console.log("mainModule loaded");
+  })
+  .catch((error) => {
+    console.error(error);
+  });

src/on-load.ts

@@ -0,0 +1,16 @@
+import { GlobalState } from "./shared/types";
+
+export const globalState: GlobalState = {
+  isLoading: false,
+  data: {},
+};
+
+export async function initializeState() {
+  globalState.isLoading = true;
+  try {
+    // Initial data loading goes here
+    globalState.data = {};
+  } finally {
+    globalState.isLoading = false;
+  }
+}

src/router.ts

@@ -0,0 +1,41 @@
+import { loadPage1 } from "./controllers/page1";
+import { loadPage2 } from "./controllers/page2";
+import { redirectTo404 } from "./controllers/404";
+import { loadHomePage } from "./controllers/home";
+
+// URL Path based routing
+export async function handleRouting() {
+  const contentArea = document.getElementById("content-area");
+
+  if (!contentArea) return;
+
+  // Normalize route to handle default case
+  const route = window.location.hash || "#/home";
+
+  switch (route) {
+    case "#/home":
+    case "#/index":
+      await loadHomePage();
+      break;
+    case "#/page1":
+      await loadPage1();
+      break;
+    case "#/page2":
+      await loadPage2();
+      break;
+    default:
+      // Redirect to 404 page if no route matches
+      await redirectTo404();
+      break;
+  }
+}
+
+export function setupRouter() {
+  if (typeof window !== "undefined") {
+    window.addEventListener("hashchange", () => {
+      handleRouting().catch(console.error);
+    });
+
+    handleRouting().catch(console.error);
+  }
+}

src/shared/types.ts

@@ -0,0 +1,4 @@
+export interface GlobalState {
+  isLoading: boolean;
+  data: Record<string, unknown>;
+}

static/index.html

@@ -7,7 +7,15 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <h1>Ubiquity TypeScript Template</h1>
-    <script type="module" src="dist/main.js"></script>
+    <nav id="nav-selector">
+      <a href="#">Home</a>
+      <a href="#/page1">Page 1</a>
+      <a href="#/page2">Page 2</a>
+    </nav>
+
+    <div id="content-area">
+      <!-- This is where the content from pages will be rendered -->
+    </div>
+    <script type="module" src="dist/src/main.js"></script>
   </body>
 </html>

static/page1.html

@@ -0,0 +1,3 @@
+<div class="content">
+  <h1>Ubiquity TypeScript Template Page 1</h1>
+</div>

static/page2.html

@@ -0,0 +1,3 @@
+<div class="content">
+  <h1>Ubiquity TypeScript Template Page 2</h1>
+</div>

static/style.css

@@ -14,3 +14,15 @@ body {
     url(./fonts/ubiquity-nova-standard.woff) format("woff"),
     url(./fonts/ubiquity-nova-standard.ttf) format("truetype");
 }
+
+#nav-selector {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+}
+
+#nav-selector a {
+  color: #fff;
+  text-decoration: none;
+  font-size: 1rem;
+}

tests/main.test.ts

@@ -1,4 +1,4 @@
-import { mainModule } from "../static/main";
+import { mainModule } from "../src/main";
 import { db } from "./__mocks__/db";
 import { server } from "./__mocks__/node";
 import usersGet from "./__mocks__/users-get.json";