fix: convert 404 and home to components

build/esbuild-build.ts

@@ -4,7 +4,7 @@ const typescriptEntries = ["src/main.ts"];
 const cssEntries = ["static/style.css"];
 const entries = [...typescriptEntries, ...cssEntries];
 
-const DATA_URL_LOADERS = [".png", ".woff", ".woff2", ".eot", ".ttf", ".svg", ".html"];
+const DATA_URL_LOADERS = [".png", ".woff", ".woff2", ".eot", ".ttf", ".svg"];
 
 export const esbuildOptions: BuildOptions = {
   sourcemap: true,

src/components/404.ts

@@ -0,0 +1,34 @@
+export function create404Page(): string {
+  return `
+    <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>
+`;
+}

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

@@ -1,12 +1,11 @@
-import _html from "../../static/404.html";
-
+import { create404Page } from "../components/404";
 export async function load404Page() {
   const contentArea = document.getElementById("content-area");
 
   if (contentArea) {
     try {
-      const errContent = decodeURIComponent(_html).replace(/^data:text\/html;charset=utf-8,/, "<!-- Prefix Removed -->");
-      contentArea.innerHTML = errContent;
+      const content = create404Page();
+      contentArea.innerHTML = content;
     } catch (error) {
       console.error("Failed to load 404 page:", error);
     }

src/controllers/home.ts

@@ -1,12 +1,12 @@
-import _html from "../../static/home.html";
+import { createHomePage } from "../components/home";
 
 export async function loadHomePage() {
   const contentArea = document.getElementById("content-area");
 
   if (contentArea) {
     try {
-      const homeContent = decodeURIComponent(_html).replace(/^data:text\/html;charset=utf-8,/, "<!-- Prefix Removed -->");
-      contentArea.innerHTML = homeContent;
+      const content = createHomePage();
+      contentArea.innerHTML = content;
     } catch (error) {
       console.error("Failed to load home page:", error);
     }