From 5501caa7c12c3b63f21a60fbbd07cd63afbf043f Mon Sep 17 00:00:00 2001
From: Tom-Erik Thorbeck <tom-erik.thorbeck@frende.no>
Date: Tue, 3 Feb 2026 15:15:32 +0100
Subject: [PATCH] feat: implement Embla router with SPA support and create page
 components

---
 404.html                                      | 23 ++++++++
 index.html                                    | 39 ++++++++-----
 src/components/page-about/page-about.tsx      | 35 ++++++++++++
 src/components/page-article/page-article.tsx  | 55 +++++++++++++++++++
 .../page-articles/page-articles.tsx           | 41 ++++++++++++++
 src/components/page-home/page-home.tsx        | 37 +++++++++++++
 .../page-notfound/page-notfound.tsx           | 33 +++++++++++
 src/index.ts                                  | 12 +++-
 8 files changed, 259 insertions(+), 16 deletions(-)
 create mode 100644 404.html
 create mode 100644 src/components/page-about/page-about.tsx
 create mode 100644 src/components/page-article/page-article.tsx
 create mode 100644 src/components/page-articles/page-articles.tsx
 create mode 100644 src/components/page-home/page-home.tsx
 create mode 100644 src/components/page-notfound/page-notfound.tsx
diff --git a/404.html b/404.html
new file mode 100644
index 0000000..c102bf3
--- /dev/null
+++ b/404.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <script>
+    // GitHub Pages SPA redirect script
+    // This script captures the current URL and redirects to index.html
+    // preserving the path for the router to handle
+    
+    const pathSegments = window.location.pathname.slice(1).split('/').filter(Boolean);
+    const redirectPath = pathSegments.length > 0 
+      ? '/?p=/' + pathSegments.join('/')
+      : '/';
+    
+    window.location.replace(
+      window.location.origin + redirectPath + window.location.search + window.location.hash
+    );
+  </script>
+</head>
+<body>
+  <!-- This page is used to redirect all routes to index.html for GitHub Pages -->
+</body>
+</html>
diff --git a/index.html b/index.html
index 6162617..3c89c44 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,16 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Abytegray - Personal Blog</title>
+  <script>
+    // GitHub Pages SPA support: restore path from query parameter
+    (function() {
+      const query = window.location.search;
+      if (query.startsWith('?p=')) {
+        const path = query.slice(3);
+        window.history.replaceState({}, '', path + window.location.hash);
+      }
+    })();
+  </script>
   <style>
     :root {
       --border-color: #e0e0e0;
@@ -42,21 +52,20 @@
 </head>
 <body>
   <main>
-    <h1>Welcome to Abytegray</h1>
-    
-    <app-card 
-      title="Web Components" 
-      content="This is a custom web component built with vanilla TypeScript and CSS modules.">
-    </app-card>
-
-    <app-card 
-      title="No Framework Required" 
-      content="Using native browser APIs with shadow DOM for encapsulation.">
-    </app-card>
-
-    <app-card title="Custom Content">
-      <p style="margin: 1rem 0 0 0; color: #999;">This content comes from a slot!</p>
-    </app-card>
+    <embla-router>
+      <!-- Base route (home page) -->
+      <embla-route path="/" component="page-home" title="Home - Abytegray" base></embla-route>
+      
+      <!-- Static routes -->
+      <embla-route path="/about" component="page-about" title="About - Abytegray"></embla-route>
+      <embla-route path="/articles" component="page-articles" title="Articles - Abytegray"></embla-route>
+      
+      <!-- Dynamic route with parameter -->
+      <embla-route path="/article/:id" component="page-article" title="Article - Abytegray"></embla-route>
+      
+      <!-- 404 Not Found route -->
+      <embla-route component="page-notfound" title="Page Not Found - Abytegray" notfound></embla-route>
+    </embla-router>
   </main>
 
   <script type="module" src="/src/index.ts"></script>
diff --git a/src/components/page-about/page-about.tsx b/src/components/page-about/page-about.tsx
new file mode 100644
index 0000000..6cc1602
--- /dev/null
+++ b/src/components/page-about/page-about.tsx
@@ -0,0 +1,35 @@
+import { h } from 'embla';
+
+class AboutPage extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = '';
+      
+      const content = (
+        <div>
+          <h1>About</h1>
+          <p>This is a demonstration of the Embla router with web components.</p>
+          
+          <nav style={{ margin: '2rem 0' }}>
+            <embla-link href="/">Home</embla-link>
+            {' | '}
+            <embla-link href="/articles">Articles</embla-link>
+          </nav>
+        </div>
+      );
+
+      this.shadowRoot.appendChild(content);
+    }
+  }
+}
+
+customElements.define('page-about', AboutPage);
diff --git a/src/components/page-article/page-article.tsx b/src/components/page-article/page-article.tsx
new file mode 100644
index 0000000..ef271d7
--- /dev/null
+++ b/src/components/page-article/page-article.tsx
@@ -0,0 +1,55 @@
+import { h } from 'embla';
+
+class ArticlePage extends HTMLElement {
+  static get observedAttributes() {
+    return ['id'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback(_name: string, oldValue: string, newValue: string) {
+    if (oldValue !== newValue) {
+      this.render();
+    }
+  }
+
+  render() {
+    const articleId = this.getAttribute('id') || 'unknown';
+    
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = '';
+      
+      const content = (
+        <div>
+          <h1>Article {articleId}</h1>
+          <p>This is article number {articleId}. The ID was extracted from the URL route parameter.</p>
+          
+          <div style={{ margin: '1rem 0', padding: '1rem', background: '#f0f0f0', borderRadius: '4px' }}>
+            <strong>Route Parameter Demo:</strong>
+            <p>URL pattern: <code>/article/:id</code></p>
+            <p>Current ID: <code>{articleId}</code></p>
+          </div>
+          
+          <nav style={{ margin: '2rem 0' }}>
+            <embla-link href="/">Home</embla-link>
+            {' | '}
+            <embla-link href="/articles">All Articles</embla-link>
+            {' | '}
+            <embla-link href="/about">About</embla-link>
+          </nav>
+        </div>
+      );
+
+      this.shadowRoot.appendChild(content);
+    }
+  }
+}
+
+customElements.define('page-article', ArticlePage);
diff --git a/src/components/page-articles/page-articles.tsx b/src/components/page-articles/page-articles.tsx
new file mode 100644
index 0000000..0d0fca7
--- /dev/null
+++ b/src/components/page-articles/page-articles.tsx
@@ -0,0 +1,41 @@
+import { h } from 'embla';
+
+class ArticlesPage extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = '';
+      
+      const content = (
+        <div>
+          <h1>Articles</h1>
+          <p>Browse all articles:</p>
+          
+          <ul style={{ margin: '1rem 0', padding: '0 0 0 1.5rem' }}>
+            <li><embla-link href="/article/1">Article 1: Getting Started</embla-link></li>
+            <li><embla-link href="/article/2">Article 2: Advanced Topics</embla-link></li>
+            <li><embla-link href="/article/123">Article 123: Router Demo</embla-link></li>
+          </ul>
+          
+          <nav style={{ margin: '2rem 0' }}>
+            <embla-link href="/">Home</embla-link>
+            {' | '}
+            <embla-link href="/about">About</embla-link>
+          </nav>
+        </div>
+      );
+
+      this.shadowRoot.appendChild(content);
+    }
+  }
+}
+
+customElements.define('page-articles', ArticlesPage);
diff --git a/src/components/page-home/page-home.tsx b/src/components/page-home/page-home.tsx
new file mode 100644
index 0000000..84a1932
--- /dev/null
+++ b/src/components/page-home/page-home.tsx
@@ -0,0 +1,37 @@
+import { h } from 'embla';
+
+class HomePage extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = '';
+      
+      const content = (
+        <div>
+          <h1>Home Page</h1>
+          <p>Welcome to Abytegray - A modern web component blog</p>
+          
+          <nav style={{ margin: '2rem 0' }}>
+            <embla-link href="/about">About</embla-link>
+            {' | '}
+            <embla-link href="/articles">Articles</embla-link>
+            {' | '}
+            <embla-link href="/article/123">Sample Article</embla-link>
+          </nav>
+        </div>
+      );
+
+      this.shadowRoot.appendChild(content);
+    }
+  }
+}
+
+customElements.define('page-home', HomePage);
diff --git a/src/components/page-notfound/page-notfound.tsx b/src/components/page-notfound/page-notfound.tsx
new file mode 100644
index 0000000..97c6c64
--- /dev/null
+++ b/src/components/page-notfound/page-notfound.tsx
@@ -0,0 +1,33 @@
+import { h } from 'embla';
+
+class NotFoundPage extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = '';
+      
+      const content = (
+        <div>
+          <h1>404 - Page Not Found</h1>
+          <p>The page you're looking for doesn't exist.</p>
+          
+          <nav style={{ margin: '2rem 0' }}>
+            <embla-link href="/">Go Home</embla-link>
+          </nav>
+        </div>
+      );
+
+      this.shadowRoot.appendChild(content);
+    }
+  }
+}
+
+customElements.define('page-notfound', NotFoundPage);
diff --git a/src/index.ts b/src/index.ts
index d354f0c..41e3859 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,18 @@
 // Import reset CSS from embla (optional)
 import 'embla/reset.css';
 
+// Import router components from embla
+import 'embla';
+
 // Import and register all components
 import './components/app-card/app-card.tsx';
 
+// Import page components
+import './components/page-home/page-home.tsx';
+import './components/page-about/page-about.tsx';
+import './components/page-articles/page-articles.tsx';
+import './components/page-article/page-article.tsx';
+import './components/page-notfound/page-notfound.tsx';
+
 // Initialize the application
-console.log('Application initialized');
+console.log('Application initialized with router');
