From 7314b9b6b21f2b801d8b5d88222a0843a6c0e9ca Mon Sep 17 00:00:00 2001
From: gigamaster <1905497+gigamaster@users.noreply.github.com>
Date: Sun, 21 Jul 2024 11:41:37 +0200
Subject: [PATCH] Search command palette json

---
 app/asset/app.js              |   2 +-
 app/asset/lib/alpinejs.min.js |   1 +
 app/asset/sourceData.json     | 148 ++++++++++++++++++++++++++++++++++
 src/template/head.html        |  66 +++++++--------
 4 files changed, 183 insertions(+), 34 deletions(-)
 create mode 100644 app/asset/sourceData.json

diff --git a/app/asset/app.js b/app/asset/app.js
index 1dd296a4..709e82b9 100644
--- a/app/asset/app.js
+++ b/app/asset/app.js
@@ -94,7 +94,7 @@ document.addEventListener('alpine:init', () => {
     currentIndex: -1,
     init() {
       // Initialize data
-      fetch('sourceData.json')
+      fetch('./sourceData.json')
           .then(res => res.json())
           .then(data => this.data = data.data);
     },
diff --git a/app/asset/lib/alpinejs.min.js b/app/asset/lib/alpinejs.min.js
index 2ca48278..b1ace295 100644
--- a/app/asset/lib/alpinejs.min.js
+++ b/app/asset/lib/alpinejs.min.js
@@ -1,3 +1,4 @@
+/* Alpine.js v3.14.1 */
 (()=>{var rt=!1,nt=!1,U=[],it=-1;function qt(e){Cn(e)}function Cn(e){U.includes(e)||U.push(e),Tn()}function Ee(e){let t=U.indexOf(e);t!==-1&&t>it&&U.splice(t,1)}function Tn(){!nt&&!rt&&(rt=!0,queueMicrotask(Rn))}function Rn(){rt=!1,nt=!0;for(let e=0;e<U.length;e++)U[e](),it=e;U.length=0,it=-1,nt=!1}var R,D,L,st,ot=!0;function Ut(e){ot=!1,e(),ot=!0}function Wt(e){R=e.reactive,L=e.release,D=t=>e.effect(t,{scheduler:r=>{ot?qt(r):r()}}),st=e.raw}function at(e){D=e}function Gt(e){let t=()=>{};return[n=>{let i=D(n);return e._x_effects||(e._x_effects=new Set,e._x_runEffects=()=>{e._x_effects.forEach(o=>o())}),e._x_effects.add(i),t=()=>{i!==void 0&&(e._x_effects.delete(i),L(i))},i},()=>{t()}]}function ve(e,t){let r=!0,n,i=D(()=>{let o=e();JSON.stringify(o),r?n=o:queueMicrotask(()=>{t(o,n),n=o}),r=!1});return()=>L(i)}var Jt=[],Yt=[],Xt=[];function Zt(e){Xt.push(e)}function ee(e,t){typeof t=="function"?(e._x_cleanups||(e._x_cleanups=[]),e._x_cleanups.push(t)):(t=e,Yt.push(t))}function Ae(e){Jt.push(e)}function Oe(e,t,r){e._x_attributeCleanups||(e._x_attributeCleanups={}),e._x_attributeCleanups[t]||(e._x_attributeCleanups[t]=[]),e._x_attributeCleanups[t].push(r)}function ct(e,t){e._x_attributeCleanups&&Object.entries(e._x_attributeCleanups).forEach(([r,n])=>{(t===void 0||t.includes(r))&&(n.forEach(i=>i()),delete e._x_attributeCleanups[r])})}function Qt(e){if(e._x_cleanups)for(;e._x_cleanups.length;)e._x_cleanups.pop()()}var lt=new MutationObserver(pt),ut=!1;function le(){lt.observe(document,{subtree:!0,childList:!0,attributes:!0,attributeOldValue:!0}),ut=!0}function ft(){Mn(),lt.disconnect(),ut=!1}var ce=[];function Mn(){let e=lt.takeRecords();ce.push(()=>e.length>0&&pt(e));let t=ce.length;queueMicrotask(()=>{if(ce.length===t)for(;ce.length>0;)ce.shift()()})}function _(e){if(!ut)return e();ft();let t=e();return le(),t}var dt=!1,Se=[];function er(){dt=!0}function tr(){dt=!1,pt(Se),Se=[]}function pt(e){if(dt){Se=Se.concat(e);return}let t=new Set,r=new Set,n=new Map,i=new Map;for(let o=0;o<e.length;o++)if(!e[o].target._x_ignoreMutationObserver&&(e[o].type==="childList"&&(e[o].addedNodes.forEach(s=>s.nodeType===1&&t.add(s)),e[o].removedNodes.forEach(s=>s.nodeType===1&&r.add(s))),e[o].type==="attributes")){let s=e[o].target,a=e[o].attributeName,c=e[o].oldValue,l=()=>{n.has(s)||n.set(s,[]),n.get(s).push({name:a,value:s.getAttribute(a)})},u=()=>{i.has(s)||i.set(s,[]),i.get(s).push(a)};s.hasAttribute(a)&&c===null?l():s.hasAttribute(a)?(u(),l()):u()}i.forEach((o,s)=>{ct(s,o)}),n.forEach((o,s)=>{Jt.forEach(a=>a(s,o))});for(let o of r)t.has(o)||Yt.forEach(s=>s(o));t.forEach(o=>{o._x_ignoreSelf=!0,o._x_ignore=!0});for(let o of t)r.has(o)||o.isConnected&&(delete o._x_ignoreSelf,delete o._x_ignore,Xt.forEach(s=>s(o)),o._x_ignore=!0,o._x_ignoreSelf=!0);t.forEach(o=>{delete o._x_ignoreSelf,delete o._x_ignore}),t=null,r=null,n=null,i=null}function Ce(e){return F(j(e))}function P(e,t,r){return e._x_dataStack=[t,...j(r||e)],()=>{e._x_dataStack=e._x_dataStack.filter(n=>n!==t)}}function j(e){return e._x_dataStack?e._x_dataStack:typeof ShadowRoot=="function"&&e instanceof ShadowRoot?j(e.host):e.parentNode?j(e.parentNode):[]}function F(e){return new Proxy({objects:e},Nn)}var Nn={ownKeys({objects:e}){return Array.from(new Set(e.flatMap(t=>Object.keys(t))))},has({objects:e},t){return t==Symbol.unscopables?!1:e.some(r=>Object.prototype.hasOwnProperty.call(r,t)||Reflect.has(r,t))},get({objects:e},t,r){return t=="toJSON"?Dn:Reflect.get(e.find(n=>Reflect.has(n,t))||{},t,r)},set({objects:e},t,r,n){let i=e.find(s=>Object.prototype.hasOwnProperty.call(s,t))||e[e.length-1],o=Object.getOwnPropertyDescriptor(i,t);return o?.set&&o?.get?o.set.call(n,r)||!0:Reflect.set(i,t,r)}};function Dn(){return Reflect.ownKeys(this).reduce((t,r)=>(t[r]=Reflect.get(this,r),t),{})}function Te(e){let t=n=>typeof n=="object"&&!Array.isArray(n)&&n!==null,r=(n,i="")=>{Object.entries(Object.getOwnPropertyDescriptors(n)).forEach(([o,{value:s,enumerable:a}])=>{if(a===!1||s===void 0||typeof s=="object"&&s!==null&&s.__v_skip)return;let c=i===""?o:`${i}.${o}`;typeof s=="object"&&s!==null&&s._x_interceptor?n[o]=s.initialize(e,c,o):t(s)&&s!==n&&!(s instanceof Element)&&r(s,c)})};return r(e)}function Re(e,t=()=>{}){let r={initialValue:void 0,_x_interceptor:!0,initialize(n,i,o){return e(this.initialValue,()=>Pn(n,i),s=>mt(n,i,s),i,o)}};return t(r),n=>{if(typeof n=="object"&&n!==null&&n._x_interceptor){let i=r.initialize.bind(r);r.initialize=(o,s,a)=>{let c=n.initialize(o,s,a);return r.initialValue=c,i(o,s,a)}}else r.initialValue=n;return r}}function Pn(e,t){return t.split(".").reduce((r,n)=>r[n],e)}function mt(e,t,r){if(typeof t=="string"&&(t=t.split(".")),t.length===1)e[t[0]]=r;else{if(t.length===0)throw error;return e[t[0]]||(e[t[0]]={}),mt(e[t[0]],t.slice(1),r)}}var rr={};function y(e,t){rr[e]=t}function ue(e,t){return Object.entries(rr).forEach(([r,n])=>{let i=null;function o(){if(i)return i;{let[s,a]=_t(t);return i={interceptor:Re,...s},ee(t,a),i}}Object.defineProperty(e,`$${r}`,{get(){return n(t,o())},enumerable:!1})}),e}function nr(e,t,r,...n){try{return r(...n)}catch(i){te(i,e,t)}}function te(e,t,r=void 0){e=Object.assign(e??{message:"No error message given."},{el:t,expression:r}),console.warn(`Alpine Expression Error: ${e.message}
 
 ${r?'Expression: "'+r+`"
diff --git a/app/asset/sourceData.json b/app/asset/sourceData.json
new file mode 100644
index 00000000..b30516bf
--- /dev/null
+++ b/app/asset/sourceData.json
@@ -0,0 +1,148 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "page_url": "https://gigamaster.github.io/codemo/components/",
+      "page_title": "Components CSS and JavaScript",
+      "page_desc": "UI components include buttons, forms, menus, navigation bars, and modals",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 2,
+      "page_url": "https://gigamaster.github.io/codemo/components/alert/",
+      "page_title": "Alert component",
+      "page_desc": "Messages to users such as success or error messages",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 3,
+      "page_url": "https://gigamaster.github.io/codemo/components/animation/",
+      "page_title": "Animation component",
+      "page_desc": "Animate elements position and transform using keyframes",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 4,
+      "page_url": "https://gigamaster.github.io/codemo/components/button/",
+      "page_title": "Button Component",
+      "page_desc": "Style actions with animated buttons, micro-interactions",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 5,
+      "page_url": "https://gigamaster.github.io/codemo/components/card/",
+      "page_title": "Card Component",
+      "page_desc": "Visually rich alternative to enhance design layouts",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 6,
+      "page_url": "https://gigamaster.github.io/codemo/components/codeblock/",
+      "page_title": "Code blocks",
+      "page_desc": "Display formatted code snippets with syntax highlighting",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 7,
+      "page_url": "https://gigamaster.github.io/codemo/components/color/",
+      "page_title": "Components Color Schemes",
+      "page_desc": "Color palette generator to help design a user interface",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 8,
+      "page_url": "https://gigamaster.github.io/codemo/components/design-system/",
+      "page_title": "Design system",
+      "page_desc": "Collection of repeatable, reusable components and guidelines",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 9,
+      "page_url": "https://gigamaster.github.io/codemo/components/dropdown/",
+      "page_title": "Dropdown Component",
+      "page_desc": "Menu navigation element to display a list of choices",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 10,
+      "page_url": "https://gigamaster.github.io/codemo/components/form/",
+      "page_title": "Form elements",
+      "page_desc": "Optimize forms to gather information efficiently",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 11,
+      "page_url": "https://gigamaster.github.io/codemo/components/list/",
+      "page_title": "List Component",
+      "page_desc": "Examples of structured and organized items",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 12,
+      "page_url": "https://gigamaster.github.io/codemo/components/menu/",
+      "page_title": "Menu ",
+      "page_desc": "Interactive UI element such as an icon, button or text",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 13,
+      "page_url": "https://gigamaster.github.io/codemo/components/modal/",
+      "page_title": "Modal",
+      "page_desc": "Dialog UI pattern that pops up above the parent page",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 14,
+      "page_url": "https://gigamaster.github.io/codemo/components/navigation/",
+      "page_title": "Navigation",
+      "page_desc": "Patterns to help orient users, breadcrumbs, pagination, tags",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 15,
+      "page_url": "https://gigamaster.github.io/codemo/components/notification/",
+      "page_title": "Notification",
+      "page_desc": "Toast, inline, actionable, non-intrusive messages and updates",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 16,
+      "page_url": "https://gigamaster.github.io/codemo/components/panel/",
+      "page_title": "Panel",
+      "page_desc": "Side panel UI overlays that provide contextual app information",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 17,
+      "page_url": "https://gigamaster.github.io/codemo/components/report/",
+      "page_title": "Charts, Records, Reports",
+      "page_desc": "Feature-rich, interactive charts for exploring data over time",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    },
+    {
+      "id": 18,
+      "page_url": "https://gigamaster.github.io/codemo/components/typography/",
+      "page_title": "Typography",
+      "page_desc": "Legible, readable, and scalable fonts",
+      "page_cat": "components",
+      "page_icon": "icon-download"
+    }
+  ]
+}
diff --git a/src/template/head.html b/src/template/head.html
index 0882f0b9..28e554e8 100644
--- a/src/template/head.html
+++ b/src/template/head.html
@@ -187,7 +187,7 @@ <h1 class="text-2xl uppercase">CODEMO</h1>
               <a
                 href="https://gigamaster.github.io/codemo/components/animation/"
                 role="menuitem"
-                class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"><path d="M4 10c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2m0 12c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2"/><rect width="8" height="8" x="14" y="14" rx="2"/></g></svg> 
                 <span class="ml-2"> Animation </span>
@@ -195,7 +195,7 @@ <h1 class="text-2xl uppercase">CODEMO</h1>
               <a
                 href="https://gigamaster.github.io/codemo/components/color/"
                 role="menuitem"
-                class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
+                class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"><path d="M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"></path><path d="M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7m0-4h.01"></path><path d="m11 8l2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"></path></g></svg>
                 <span class="ml-2"> Color scheme </span>
@@ -203,7 +203,7 @@ <h1 class="text-2xl uppercase">CODEMO</h1>
               <a
                 href="https://gigamaster.github.io/codemo/components/css/"
                 role="menuitem"
-                class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
               >
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"><path d="m20 4l-2 14.5l-6 2l-6-2L4 4z"/><path d="M8.5 8h7L11 12h4l-.5 3.5l-2.5.75l-2.5-.75l-.1-.5"/></g></svg>
               <span class="ml-2"> CSS librairies </span>
@@ -211,7 +211,7 @@ <h1 class="text-2xl uppercase">CODEMO</h1>
               <a
                 href="https://gigamaster.github.io/codemo/components/javascript/"
                 role="menuitem"
-                class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
+                class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
               >
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"><path d="m20 4l-2 14.5l-6 2l-6-2L4 4z"/><path d="M7.5 8h3v8l-2-1m8-7H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5"/></g></svg>
               <span class="ml-2"> JS librairies </span>
@@ -219,7 +219,7 @@ <h1 class="text-2xl uppercase">CODEMO</h1>
               <a
                 href="https://gigamaster.github.io/codemo/components/native/"
                 role="menuitem"
-                class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
+                class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"><path d="m20 4l-2 14.5l-6 2l-6-2L4 4z"/><path d="M15.5 8h-7l.5 4h6l-.5 3.5l-2.5.75l-2.5-.75l-.1-.5"/></g></svg>
                 <span class="ml-2"> Web Components </span>
@@ -227,7 +227,7 @@ <h1 class="text-2xl uppercase">CODEMO</h1>
               <a
                 href="https://gigamaster.github.io/codemo/components/typography/"
                 role="menuitem"
-                class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
+                class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
               >
                 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 7V4h16v3M9 20h6M12 4v16"/></svg>
                 <span class="ml-2"> Typography </span>
@@ -418,7 +418,7 @@ <h1 class="text-2xl uppercase">CODEMO</h1>
             "
           >
             <span aria-hidden="true">
-              <img src="./img/livecodes-logo.svg" class="h-7 px-3" width="auto" height="24px" alt="Live code editor" loading="lazy">
+              <img src="https://gigamaster.github.io/codemo/asset//img/livecodes-logo.svg" class="h-7 px-3" width="auto" height="24px" alt="Live code editor" loading="lazy">
             </span>
             <span class="text-sm">Live Code Editor</span>
           </a>
@@ -856,35 +856,35 @@ <h1 class="text-light" x-text="item.page_title"></h1>
               <a
               href="https://gigamaster.github.io/codemo/dataviz/"
               role="menuitem"
-              class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+              class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
               >
               Data Visualization
               </a>
               <a
               href="https://gigamaster.github.io/codemo/development/"
               role="menuitem"
-              class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+              class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
               >
               Development Tools
               </a>
               <a
                 href="https://gigamaster.github.io/codemo/education/"
                 role="menuitem"
-                class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
               >
               Education 
               </a>
               <a
                 href="https://gigamaster.github.io/codemo/rd/"
                 role="menuitem"
-                class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
               >
               R&D — RTD
               </a>
               <a
                 href="https://gigamaster.github.io/codemo/project/"
                 role="menuitem"
-                class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
               >
               Project Mangement
               </a>
@@ -936,42 +936,42 @@ <h1 class="text-light" x-text="item.page_title"></h1>
                 <a
                   href="https://gigamaster.github.io/codemo/components/animation/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                 Animation 
                 </a>
                 <a
                   href="https://gigamaster.github.io/codemo/components/color/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                 Color scheme 
                 </a>
                 <a
                   href="https://gigamaster.github.io/codemo/components/css/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                 CSS librairies 
                 </a>
                 <a
-                href="https://gigamaster.github.io/codemo/components/javascript/"
-                role="menuitem"
-                class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
-              >
-              JS librairies 
-              </a>
+                  href="https://gigamaster.github.io/codemo/components/javascript/"
+                  role="menuitem"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                >
+                JS librairies 
+                </a>
                 <a
                   href="https://gigamaster.github.io/codemo/components/native/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                 Web Components
                 </a>
                 <a
                   href="https://gigamaster.github.io/codemo/components/typography/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                 Typography 
                 </a>
@@ -1023,21 +1023,21 @@ <h1 class="text-light" x-text="item.page_title"></h1>
                 <a
                   href="https://gigamaster.github.io/codemo/game/web/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                 Web Games
                 </a>
                 <a
                   href="https://gigamaster.github.io/codemo/game/tools/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                 Game Dev Tools 
                 </a>
                 <a
                   href="https://gigamaster.github.io/codemo/game/engine/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                 Game Engine 
                 </a>
@@ -1089,28 +1089,28 @@ <h1 class="text-light" x-text="item.page_title"></h1>
                 <a
                   href="https://gigamaster.github.io/codemo/multimedia/audio/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                   Audio
                 </a>
                 <a
                   href="https://gigamaster.github.io/codemo/multimedia/graphic/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                   Graphic
                 </a>
                 <a
                 href="https://gigamaster.github.io/codemo/multimedia/photography/"
                 role="menuitem"
-                class="flex items-center p-2 text-sm text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
+                class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                   Photography 
                 </a>
                 <a
                   href="https://gigamaster.github.io/codemo/multimedia/video/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                   Video 
                 </a>
@@ -1162,21 +1162,21 @@ <h1 class="text-light" x-text="item.page_title"></h1>
                 <a
                   href="https://gigamaster.github.io/codemo/template/adaptive/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                 Adaptive design 
                 </a>
                 <a
                   href="https://gigamaster.github.io/codemo/template/responsive/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                 Responsive Layout 
                 </a>
                 <a
                   href="https://gigamaster.github.io/codemo/template/design-tools/"
                   role="menuitem"
-                  class="flex items-center p-2 ml-2text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
+                  class="flex items-center p-2 ml-2 text-gray-400 transition-colors duration-200 rounded-md dark:text-gray-400 dark:hover:text-light hover:text-gray-700"
                 >
                 Web Design Tools 
                 </a>