Add homepage links to demo directory tree entries

assets/js/main.js

@@ -173,6 +173,16 @@ const demoDecks = [
     type: 'demo',
     external: true,
     url: 'public/demo/branch-prediction/index.html',
+    links: [
+      {
+        url: 'public/demo/index.html?search=branch-prediction',
+        external: false,
+        translations: {
+          en: 'View in directory tree',
+          zh: '在目录树中查看'
+        }
+      }
+    ],
     translations: {
       en: {
         title: 'Branch Prediction Lab',
@@ -197,6 +207,16 @@ const demoDecks = [
     type: 'demo',
     external: true,
     url: 'public/demo/compute-god-standard-model-validator/index.html',
+    links: [
+      {
+        url: 'public/demo/index.html?search=compute-god-standard-model-validator',
+        external: false,
+        translations: {
+          en: 'View in directory tree',
+          zh: '在目录树中查看'
+        }
+      }
+    ],
     translations: {
       en: {
         title: 'Compute-God Validator',
@@ -221,6 +241,16 @@ const demoDecks = [
     type: 'demo',
     external: true,
     url: 'public/demo/agi-asi-reaction-chamber/index.html',
+    links: [
+      {
+        url: 'public/demo/index.html?search=agi-asi-reaction-chamber',
+        external: false,
+        translations: {
+          en: 'View in directory tree',
+          zh: '在目录树中查看'
+        }
+      }
+    ],
     translations: {
       en: {
         title: 'AGI / ASI Reaction Chamber',
@@ -245,6 +275,16 @@ const demoDecks = [
     type: 'demo',
     external: true,
     url: 'public/demo/ambient-sketch/index.html',
+    links: [
+      {
+        url: 'public/demo/index.html?search=ambient-sketch',
+        external: false,
+        translations: {
+          en: 'View in directory tree',
+          zh: '在目录树中查看'
+        }
+      }
+    ],
     translations: {
       en: {
         title: 'Ambient Music Sketch',

public/demo/index.js

@@ -6,6 +6,25 @@ const metaEl = document.getElementById('demoMeta');
 let treeData = [];
 let totalDemoCount = 0;
 
+function getInitialQuery() {
+  const params = new URLSearchParams(window.location.search);
+  return params.get('search') || params.get('q') || '';
+}
+
+function updateUrlQuery(query) {
+  const params = new URLSearchParams(window.location.search);
+  if (query) {
+    params.set('search', query);
+  } else {
+    params.delete('search');
+    params.delete('q');
+  }
+
+  const newQuery = params.toString();
+  const newUrl = `${window.location.pathname}${newQuery ? `?${newQuery}` : ''}${window.location.hash}`;
+  window.history.replaceState(null, '', newUrl);
+}
+
 async function fetchDemoTree() {
   const response = await fetch('demo-tree.json', { cache: 'no-store' });
   if (!response.ok) {
@@ -194,6 +213,13 @@ function updateStatus(query, visibleNodes) {
   }
 }
 
+function applyQuery(query) {
+  const filtered = filterTree(treeData, query);
+  renderTree(filtered, query);
+  updateStatus(query, filtered);
+  updateUrlQuery(query);
+}
+
 function updateMeta(nodes) {
   const directoryCount = nodes.length;
   metaEl.innerHTML = '';
@@ -216,8 +242,11 @@ async function initialise() {
     treeData = data;
     totalDemoCount = treeData.reduce((total, node) => total + countDemos(node), 0);
     updateMeta(treeData);
-    renderTree(treeData, '');
-    updateStatus('', treeData);
+    const initialQuery = getInitialQuery();
+    if (initialQuery) {
+      searchInput.value = initialQuery;
+    }
+    applyQuery(initialQuery);
     treeContainer.hidden = false;
   } catch (error) {
     console.error(error);
@@ -227,9 +256,7 @@ async function initialise() {
 
   searchInput.addEventListener('input', (event) => {
     const query = event.target.value.trim();
-    const filtered = filterTree(treeData, query);
-    renderTree(filtered, query);
-    updateStatus(query, filtered);
+    applyQuery(query);
   });
 }