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/controllers/404.ts

@@ -0,0 +1,13 @@
+export async function load404Page() {
+  const contentArea = document.getElementById("content-area");
+
+  if (contentArea) {
+    try {
+      const response = await fetch("./404.html");
+      const html = await response.text();
+      contentArea.innerHTML = html;
+    } catch (error) {
+      console.error("Failed to load 404 page:", error);
+    }
+  }
+}

src/controllers/home.ts

@@ -0,0 +1,13 @@
+export async function loadHomePage() {
+  const contentArea = document.getElementById("content-area");
+
+  if (contentArea) {
+    try {
+      const response = await fetch("./home.html");
+      const html = await response.text();
+      contentArea.innerHTML = html;
+    } 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 "./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 { load404Page } 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;
+
+  const route = window.location.hash;
+
+  switch (route) {
+    case "":
+    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 load404Page();
+      break;
+  }
+}
+
+export function setupRouter() {
+  if (typeof window !== "undefined") {
+    window.addEventListener("hashchange", () => {
+      handleRouting().catch(console.error);
+    });
+
+    handleRouting().catch(console.error);
+  }
+}

src/types.ts

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

static/404.html

@@ -0,0 +1,30 @@
+<div id="Page404">
+  <div>
+    <p>Oops!</p>
+    <p>We can't seem to find the page you're looking for</p>
+    <p>
+      <b>Here are some helpful links instead:</b>
+    </p>
+    <ul>
+      <li>
+        <a href="//github.com/ubiquity/ubiquity-dollar/wiki" target="_blank">Docs</a>
+      </li>
+      <li>
+        <a href="//dao.ubq.fi/faq" target="_blank">FAQ</a>
+      </li>
+      <li>
+        <a href="//github.com/ubiquity/ubiquity-dollar" target="_blank">Github</a>
+      </li>
+      <li>
+        <a href="//discord.gg/SjymJ5maJ4" target="_blank">Discord</a>
+      </li>
+      <li>
+        <a href="//t.me/ubiquitydao" target="_blank">Telegram</a>
+      </li>
+      <li>
+        <a href="//x.com/UbiquityDAO" target="_blank">X</a>
+      </li>
+    </ul>
+  </div>
+  <div> 404 </div>
+</div>

static/home.html

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

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,49 @@ 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;
+}
+
+/* Page 404 styles */
+#Page404 {
+  display: flex;
+  height: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2rem;
+}
+#Page404 a {
+  text-decoration: underline;
+}
+#Page404 ul {
+  padding: 0;
+  margin: 0;
+}
+#Page404 li {
+  width: 100%;
+}
+#Page404 > div:nth-child(1) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 16px;
+}
+#Page404 > div:nth-child(1) > p:nth-child(1) {
+  font-size: 2rem;
+}
+#Page404 > div:nth-child(2) {
+  align-items: center;
+  display: flex;
+  font-size: 4rem;
+  padding: 16px;
+}

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";