feat: [#33] single page navigation

src/components/thumbnail/index.ts

@@ -1,10 +1,6 @@
 import './styles.css';
-import {EventBus} from "../../event-bus";
-import {Events} from "../../consts/events";
-import {handlers} from "../../consts/handlers";
+import {EVENT_BUS} from "../../core";
 
-const EVENT_BUS = new EventBus<Events>();
-EVENT_BUS.subscribe('page_navigation', handlers.page_navigation);
 
 export type thumbnailContent = {
     readonly thumbnail: string;
@@ -45,7 +41,9 @@ export function createThumbnail(content: thumbnailContent, showcase: boolean) {
     itemTexts.appendChild(itemCategory);
     itemBox.appendChild(clearFix);
 
-    itemThumbnail.addEventListener('click', () => EVENT_BUS.dispatch('page_navigation', {path: "Button A", pageReference: content.path}));
+    itemThumbnail.addEventListener('click', () => {
+        EVENT_BUS.dispatch('page_navigation', { pageReference: 'interactive/' + content.path });
+    });
 
     return itemBox;
 }

src/content/projects/index.ts

@@ -1,16 +1,18 @@
-import {projectView} from "../../views/project-view";
+import {projectView, renderView} from "../../views";
 import {projectInfo} from "../../components/vertical-nav/info-project.ts";
-import {renderView} from "../../views/utils";
 import {renderBreadcrumbs, renderNavInfo} from "../../components/vertical-nav";
 import {createThumbnail} from "../../components/thumbnail";
 import {BreadcrumbCategory, breadcrumbs, BreadcrumbsLink} from "../../components/breadcrumbs";
 
 import * as spaceCompass from "./space-compass";
+import * as nextUx from "./next-ux";
+import {interactiveView} from "../../views/interactive.ts";
 
 
 
 const pageReferences: { [key: string]: any } = {
     "space-compass": spaceCompass,
+    "next-ux": nextUx,
 };
 
 
@@ -32,6 +34,13 @@ export function buildProjectPage(pageReference: string) {
     renderView(viewContent);
 }
 
+export function buildInteractivePage() {
+    const viewContent = interactiveView();
+
+    renderView(viewContent);
+
+}
+
 export function buildThumbnailList() {
     const list = document.createElement('ul');
 

src/content/projects/next-ux/index.ts

@@ -0,0 +1,56 @@
+import {ProjectContent} from "../../../views/project-view/";
+import {ButtonLink} from "../../../components/vertical-nav/info-project.ts";
+import {thumbnailContent} from "../../../components/thumbnail";
+
+import WEBM_VIDEO from "./assets/next-ux-showcase.webm";
+import MP4_VIDEO from "./assets/next-ux-showcase.mp4";
+
+import SCREENSHOT_1 from "./assets/next-ux-screenshot-1.jpg"
+import SCREENSHOT_2 from "./assets/next-ux-screenshot-2.jpg"
+import SCREENSHOT_3 from "./assets/next-ux-screenshot-3.jpg"
+import SCREENSHOT_4 from "./assets/next-ux-screenshot-4.jpg"
+
+import THUMBNAIL from "./assets/next-ux-thumbnail.jpg";
+
+export const content: ProjectContent = {
+    title: "Next UX",
+    subtitle: "web app ux / ui - 2021",
+
+    tagline: "Clear Workflows ",
+    paragraphs: [
+        "Complete overhaul of Voxco's product line, including a redesigned user flow and interface."
+    ],
+
+    heroVideo: [
+        WEBM_VIDEO,
+        MP4_VIDEO
+    ],
+
+    imageGallery: [
+        SCREENSHOT_1,
+        SCREENSHOT_2,
+        SCREENSHOT_3,
+        SCREENSHOT_4
+    ]
+}
+
+export const buttons: ButtonLink[] = [
+    [
+        "INSERT", 
+        "INSERT URL",
+        true
+    ],
+    [
+        "INSERT", 
+        "INSERT URL",
+        false
+    ],
+]
+
+export const thumbnail: thumbnailContent = {
+    thumbnail: THUMBNAIL,
+    title: content.title,
+    description: "INSERT",
+    tags: ["INSERT", "INSERT"],
+    path: "next-ux"
+}

src/content/projects/space-compass/index.ts

@@ -1,4 +1,4 @@
-import {ProjectContent} from "../../../views/project-view";
+import {ProjectContent} from "../../../views/project.ts";
 import {ButtonLink} from "../../../components/vertical-nav/info-project.ts";
 import {thumbnailContent} from "../../../components/thumbnail";
 

src/event-bus/index.ts → src/core/event-bus.ts

@@ -3,31 +3,32 @@ type EventKey<T extends EventMap> = keyof T;
 type EventHandler<T> = (value: T) => void;
 
 export class EventBus<T extends EventMap> {
-    private subscribers: Partial<Record<keyof T, EventHandler<any>[]>> = {};
+    private subscribers: Map<EventKey<T>, EventHandler<any>[]> = new Map();
 
     subscribe<E extends EventKey<T>>(event: E, handler: EventHandler<T[E]>): void {
-        if (!this.subscribers[event]) {
-            this.subscribers[event] = [];
+        if (!this.subscribers.has(event)) {
+            this.subscribers.set(event, []);
         }
-
-        this.subscribers[event].push(handler);
+        this.subscribers.get(event)!.push(handler);
     }
 
     unsubscribe<E extends EventKey<T>>(event: E, handler: EventHandler<T[E]>): void {
-        if (!this.subscribers[event]) {
+        const handlers = this.subscribers.get(event);
+        if (!handlers) {
             return;
         }
-
-        this.subscribers[event] = this.subscribers[event]!.filter(
-            (listener) => listener !== handler
-        );
+        const index = handlers.indexOf(handler);
+        if (index !== -1) {
+            handlers.splice(index, 1);
+        }
     }
 
     dispatch<E extends EventKey<T>>(event: E, value: T[E]): void {
-        if (!this.subscribers[event]) {
+        const handlers = this.subscribers.get(event);
+        if (!handlers) {
             return;
         }
-        this.subscribers[event]!.forEach((listener) => {
+        handlers.forEach((listener) => {
             listener(value);
         });
     }

src/consts/events/events.ts → src/core/events.ts

@@ -1,6 +1,5 @@
 export type Events = {
     readonly page_navigation: {
-        readonly path: string;
         readonly pageReference: string;
     }
 };

src/core/handlers.ts

@@ -0,0 +1,9 @@
+import {Events} from "./events";
+import {router} from "./router.ts";
+
+
+export const handlers = {
+    page_navigation: (value: Events['page_navigation']): void => {
+        router.handleRoute(value.pageReference);
+    },
+};

src/core/index.ts

@@ -0,0 +1,9 @@
+import {EventBus} from "./event-bus";
+import {Events} from "./events";
+import {handlers} from "./handlers";
+
+const EVENT_BUS = new EventBus<Events>();
+
+EVENT_BUS.subscribe('page_navigation', handlers.page_navigation);
+
+export {EVENT_BUS};

src/core/router.ts

@@ -0,0 +1,58 @@
+import { EVENT_BUS } from "./";
+
+type RouteHandler = (params?: Record<string, string>) => void;
+
+class Router {
+    private routes: Map<string, RouteHandler> = new Map();
+
+    constructor() {
+        window.addEventListener('popstate', () => this.handleRoute(window.location.pathname));
+        EVENT_BUS.subscribe('page_navigation', (data: { pageReference: string }) => this.navigate(data.pageReference));
+    }
+
+    public registerRoute(path: string, handler: RouteHandler) {
+        this.routes.set(path, handler);
+    }
+
+    public navigate(path: string) {
+        window.history.pushState({}, '', path);
+        this.handleRoute(path);
+    }
+
+    public handleRoute(path: string) {
+        for (const [route, handler] of this.routes.entries()) {
+            const match = this.matchRoute(route, path);
+            if (match) {
+                handler(match.params);
+                return;
+            }
+        }
+        console.error(`No handler found for path: ${path}`);
+    }
+
+    private matchRoute(route: string, path: string) {
+        const routeParts = route.split('/').filter(Boolean);
+        const pathParts = path.split('/').filter(Boolean);
+
+        if (routeParts.length !== pathParts.length) {
+            return null;
+        }
+
+        const params: Record<string, string> = {};
+        for (let i = 0; i < routeParts.length; i++) {
+            const routePart = routeParts[i];
+            const pathPart = pathParts[i];
+
+            if (routePart.startsWith(':')) {
+                const paramName = routePart.slice(1);
+                params[paramName] = pathPart;
+            } else if (routePart !== pathPart) {
+                return null;
+            }
+        }
+
+        return { params };
+    }
+}
+
+export const router = new Router();

src/index.ts

@@ -1,7 +1,17 @@
-import './views/home-view/styles.css';
+import { router } from "./core/router";
 import {buildVerticalNav} from "./components/vertical-nav";
-import {buildViewBase} from "./views/utils";
-import {buildProjectPage} from "./content/projects";
+import {buildInteractivePage, buildProjectPage} from "./content/projects";
+import {homeView} from "./views/home.ts";
+import {buildViewBase} from "./views";
+
+
+const routes = [
+    { path: '/', handler: homeView },
+    { path: '/interactive', handler: buildInteractivePage },
+    { path: '/interactive/:id', handler: (params) => buildProjectPage(params?.id) }
+];
+
+routes.forEach(route => router.registerRoute(route.path, route.handler));
 
 
 function init() {
@@ -12,7 +22,9 @@ function init() {
     body.appendChild(contentPage);
     contentPage.appendChild(verticalNav);
 
-    buildProjectPage("space-compass");
+    router.handleRoute(window.location.pathname);
 }
 
-init();
+init();
+
+

src/views/error404.ts

@@ -0,0 +1,4 @@
+
+export function buildErrorPage() {
+
+}