Skip to content

Commit

Permalink
Merge pull request #93 from wellneverknow/upgrade
Browse files Browse the repository at this point in the history
feat: upgrade template structure
  • Loading branch information
rndquu authored Dec 19, 2024
2 parents b07723d + 448cf4c commit ca42c18
Show file tree
Hide file tree
Showing 18 changed files with 183 additions and 19 deletions.
9 changes: 4 additions & 5 deletions build/esbuild-build.ts
Original file line number Diff line number Diff line change
@@ -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"])),
Expand Down
3 changes: 3 additions & 0 deletions src/components/component1.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function createPage1Content(): string {
return `<div>This is the content of page 1</div>`;
}
3 changes: 3 additions & 0 deletions src/components/component2.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function createPage2Content(): string {
return `<div>This is the content of page 2</div>`;
}
7 changes: 7 additions & 0 deletions src/components/home.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export function createHomePage(): string {
return `
<div>
<h1>Ubiquity TypeScript Template Home</h1>
</div>
`;
}
11 changes: 11 additions & 0 deletions src/controllers/404.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
14 changes: 14 additions & 0 deletions src/controllers/home.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
14 changes: 14 additions & 0 deletions src/controllers/page1.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
14 changes: 14 additions & 0 deletions src/controllers/page2.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
23 changes: 23 additions & 0 deletions src/main.ts
Original file line number Diff line number Diff line change
@@ -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);
});
16 changes: 16 additions & 0 deletions src/on-load.ts
Original file line number Diff line number Diff line change
@@ -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;
}
}
41 changes: 41 additions & 0 deletions src/router.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
4 changes: 4 additions & 0 deletions src/shared/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export interface GlobalState {
isLoading: boolean;
data: Record<string, unknown>;
}
12 changes: 10 additions & 2 deletions static/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
11 changes: 0 additions & 11 deletions static/main.ts

This file was deleted.

3 changes: 3 additions & 0 deletions static/page1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div class="content">
<h1>Ubiquity TypeScript Template Page 1</h1>
</div>
3 changes: 3 additions & 0 deletions static/page2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div class="content">
<h1>Ubiquity TypeScript Template Page 2</h1>
</div>
12 changes: 12 additions & 0 deletions static/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion tests/main.test.ts
Original file line number Diff line number Diff line change
@@ -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";
Expand Down

0 comments on commit ca42c18

Please sign in to comment.