From bebbbb1d5ab14d32903fdfdce7edd6fb8fe3f0cd Mon Sep 17 00:00:00 2001
From: Ray C <rayc2045@gmail.com>
Date: Mon, 29 Apr 2024 13:10:02 +0800
Subject: [PATCH] Add dynamic router

---
 index.html | 14 +++++++-------
 src/app.js | 48 ++++++++++++++++++++++++++++++++++--------------
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index 37a7c9c..82afd81 100644
--- a/index.html
+++ b/index.html
@@ -79,13 +79,13 @@
                 x-cloak
                 x-show="open"
                 x-transition.origin.top.left
-                class="absolute p-2 w-48 rounded-lg bg-gray-100 border border-gray-200 shadow-md"
+                class="absolute p-2 min-w-48 whitespace-nowrap rounded-lg bg-gray-100 border border-gray-200 shadow-md"
                 role="menu"
               >
                 <template x-for="route in router.routes">
                   <a
-                    :href="`#${route.path}`"
-                    x-text="route.path === '/' ? 'Home' : route.path.split('/')[1].split('-').map(str => str[0].toUpperCase() + str.slice(1)).join(' ')"
+                    :href="`#${route.path.includes('/:') ? route.path.split('/:')[0] + '/test-string' : route.path}`"
+                    x-text="route.component.split('/').at(-1).split('.html')[0].split('-').map(str => str[0].toUpperCase() + str.slice(1)).join(' ')"
                     class="block px-4 py-2 text-sm rounded-lg hover:bg-gray-200"
                     role="menuitem"
                   ></a>
@@ -94,7 +94,7 @@
             </div>
           </li>
           <li>
-            <a :class="a.nav" href="#/blog"> Blog </a>
+            <a :class="a.nav" href="#/posts"> Blog </a>
           </li>
           <li>
             <a :class="a.nav" href="#/about"> About </a>
@@ -220,7 +220,7 @@
           <li>
             <a
               :class="router.currentPath === $el.href.split('#')[1] ? a.sideMenuActive : a.sideMenu"
-              href="#/blog"
+              href="#/posts"
             >
               Blog
             </a>
@@ -248,8 +248,8 @@
                 <template x-for="route in router.routes">
                   <li>
                     <a
-                      :href="`#${route.path}`"
-                      x-text="route.path === '/' ? 'Home' : route.path.split('/')[1].split('-').map(str => str[0].toUpperCase() + str.slice(1)).join(' ')"
+                      :href="`#${route.path.includes('/:') ? route.path.split('/:')[0] + '/test-string' : route.path}`"
+                      x-text="route.component.split('/').at(-1).split('.html')[0].split('-').map(str => str[0].toUpperCase() + str.slice(1)).join(' ')"
                       :class="a.sideMenu"
                       role="menuitem"
                     ></a>
diff --git a/src/app.js b/src/app.js
index 075bd70..38faa2b 100644
--- a/src/app.js
+++ b/src/app.js
@@ -154,41 +154,61 @@ const sideMenu = {
 const router = {
   routes: [
     { path: '/', component: '/home.html' },
-    { path: '/blog', component: '/blog/posts.html', title: 'Recent from blog' },
+    { path: '/posts', component: '/blog/blog.html', title: 'Recent from blog' },
+    { path: '/posts/:post', component: '/blog/post.html' },
     { path: '/about', component: '/about/about.html', title: 'About Us' },
     { path: '/contact', component: '/about/contact.html', title: 'Contact Us' },
     { path: '/faq', component: '/about/faq.html', title: 'Frequently asked questions' },
-    { path: '/shop', component: '/shop/products.html', title: 'Shop' },
-    { path: '/cart', component: '/shop/cart.html', title: 'Cart' },
+    { path: '/shop', component: '/shop/shop.html', title: 'Shop' },
+    { path: '/shop/:product', component: '/shop/product.html' },
+    { path: '/cart', component: '/shop/cart.html', title: 'My cart' },
+    { path: '/login', component: '/login.html', title: 'Log in' },
     { path: '/account', component: '/account.html', title: 'My account' },
     { path: '/order-tracking', component: '/account/order-tracking.html', title: 'Order Tracking' },
     { path: '/404', component: '/404.html' },
   ],
   currentPath: '',
   get currentRoute() {
-    return (
-      this.routes.find(route => route.path === this.currentPath) ||
-      this.routes.find(route => route.path === '/404')
-    );
+    const route =
+      this.routes.find(route => {
+        const routePath = route.path.replace(/:[^/]+/g, '[^/]+');
+        return new RegExp(`^${routePath}$`).test(this.currentPath);
+      }) || this.routes.find(route => route.path === '/404');
+
+    if (route.path.includes('/:'))
+      route.title = this.currentPath
+        .split(route.path.split('/:')[0])
+        .at(-1)
+        .slice(1)
+        .split('-')
+        .map(text => text[0].toUpperCase() + text.slice(1))
+        .join(' ');
+
+    return route;
   },
   async init() {
-    const setRouteHTML = async route => {
-      route.html = await utils.getData(`./src/pages${route.component}`, 'text');
+    const loadTemplate = async route => {
+      route.template = await utils.getData(`./src/pages${route.component}`, 'text');
     };
     this.updatePath();
-    await setRouteHTML(this.currentRoute);
+    await loadTemplate(this.currentRoute);
     this.renderPage();
-    for (const route of this.routes) !route.html && (await setRouteHTML(route));
+    for (const route of this.routes) !route.template && (await loadTemplate(route));
   },
   updatePath() {
-    const path = location.hash.slice(1).split('?')[0];
-    this.currentPath = path.startsWith('/') ? path : '/';
+    let path = location.hash.slice(1).split('?')[0];
+    if (!path.startsWith('/')) path = '/' + path;
+    if (path !== '/' && path.endsWith('/')) path = path.slice(0, -1);
+    this.currentPath = path;
   },
   renderPage() {
     document.title = this.currentRoute.title
       ? `${this.currentRoute.title} - ${BRAND_NAME}`
       : BRAND_NAME;
-    utils.select('#router-view').innerHTML = this.currentRoute.html;
+    utils
+      .select('meta[name="description"]')
+      .setAttribute('content', this.currentRoute.description);
+    utils.select('#router-view').innerHTML = this.currentRoute.template;
   },
 };