From e48a3739a5289c9598ddabe9131ebb9fb15539f7 Mon Sep 17 00:00:00 2001 From: yashrajbharticybtekk Date: Mon, 14 Jul 2025 04:21:28 +0530 Subject: [PATCH 1/6] Feat: Searchbar --- index.html | 139 ++++++++++++++++++++------------------ public/css/MainLayout.css | 49 ++++++++++++-- src/main.ts | 117 ++++++++++++++++++++++---------- 3 files changed, 200 insertions(+), 105 deletions(-) diff --git a/index.html b/index.html index 3e696c45..3ad7d652 100644 --- a/index.html +++ b/index.html @@ -1,76 +1,81 @@ - - - - WebGPU Samples - - - - + + + + WebGPU Samples + + - + + - - - -
- -
-
-

- The WebGPU Samples are a set of samples and demos demonstrating the use - of the WebGPU API. Please see the current - implementation status and how to run WebGPU in your browser at - webgpu.io. -

+
+
+

+ The WebGPU Samples are a set of samples and demos demonstrating the use + of the WebGPU API. Please see the current + implementation status and how to run WebGPU in your browser at + webgpu.io. +

+
+
-
- - +
>
+ +
+
+
+ + + \ No newline at end of file diff --git a/public/css/MainLayout.css b/public/css/MainLayout.css index d49f1922..81988da2 100644 --- a/public/css/MainLayout.css +++ b/public/css/MainLayout.css @@ -64,6 +64,48 @@ main { overflow: auto; } +search { + inline-size: 100%; + margin-block-end: 20px; + + &>hr { + border-color: var(--tooltip-border); + margin-block: 0; + } + + &>label { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 10px; + inline-size: 100%; + block-size: 50px; + + &:has(input:focus)>svg { + display: none; + } + + &>svg { + margin-inline-start: 10px; + } + + &>input { + opacity: 0; + border: none; + block-size: 100%; + flex: 1; + padding-inline: 20px; + background-color: var(--panel-background); + font-size: 1rem; + + &:is(:focus) { + opacity: 1; + } + } + } + +} + @media only screen and (max-width: 768px) { .wrapper { flex-direction: column; @@ -73,12 +115,12 @@ main { overflow: visible; } - #menuToggle ~ .panelContents { + #menuToggle~.panelContents { max-height: 0; overflow: hidden; } - #menuToggle:checked ~ .panelContents { + #menuToggle:checked~.panelContents { max-height: 2000px; } @@ -98,5 +140,4 @@ main { display: inline-block; } -} - +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 6791c882..14e592c3 100644 --- a/src/main.ts +++ b/src/main.ts @@ -273,47 +273,96 @@ function setSampleIFrameURL(e: PointerEvent, sampleInfo: SampleInfo) { setSampleIFrame(sampleInfo); } +const searchInput = document.querySelector( + 'input[type="search"]' +) as HTMLInputElement; + +let debounceTimer: number | undefined; + +searchInput.addEventListener('input', () => { + clearTimeout(debounceTimer); + debounceTimer = window.setTimeout(() => { + const q = searchInput.value.trim(); + const url = new URL(window.location.href); + + if (q) { + url.searchParams.set('q', q); + } else { + url.searchParams.delete('q'); + } + + // Do NOT touch 'sample' param — we preserve it + history.replaceState(null, '', url.toString()); + + // Re-render the list + sampleListElem.innerHTML = ''; + samplesByKey.clear(); + renderSampleList(); + }, 200); // debounce delay +}); + // Samples are looked up by `?sample=key` so this is a map // from those keys to each sample. const samplesByKey = new Map(); +renderSampleList(); + // Generate the list of samples -for (const { title, description, samples } of pageCategories) { - for (const [key, sampleInfo] of Object.entries(samples)) { - samplesByKey.set(key, sampleInfo); - } +function renderSampleList() { + const url = new URL(window.location.href); + const q = url.searchParams.get('q')?.toLowerCase().trim() || ''; + + sampleListElem.innerHTML = ''; + samplesByKey.clear(); + + for (const { title, description, samples } of pageCategories) { + const filteredSamples = Object.entries(samples).filter(([, sample]) => { + if (!q) return true; + const name = sample.name?.toLowerCase() || ''; + const tocName = sample.tocName?.toLowerCase() || ''; + const titleMatch = title.toLowerCase().includes(q); + return name.includes(q) || tocName.includes(q) || titleMatch; + }); - sampleListElem.appendChild( - el('ul', { className: 'exampleList' }, [ - el('div', {}, [ - el('div', { className: 'sampleCategory' }, [ - el('h3', { - style: { 'margin-top': '5px' }, - textContent: title, - dataset: { tooltip: description }, - }), - ]), - ...Object.entries(samples).map(([key, sampleInfo]) => - el('li', {}, [ - el('a', { - href: sampleInfo.external - ? sampleInfo.external.url - : sampleInfo.filename, - ...(!sampleInfo.openInNewTab && { - onClick: (e: PointerEvent) => { - setSampleIFrameURL(e, sampleInfo); - }, - }), - textContent: `${sampleInfo.tocName || key}${ - sampleInfo.openInNewTab ? ' ↗️' : '' - }`, - ...(sampleInfo.openInNewTab && { target: '_blank' }), + // Skip categories with no matches + if (filteredSamples.length === 0) continue; + + for (const [key, sampleInfo] of filteredSamples) { + samplesByKey.set(key, sampleInfo); + } + + sampleListElem.appendChild( + el('ul', { className: 'exampleList' }, [ + el('div', {}, [ + el('div', { className: 'sampleCategory' }, [ + el('h3', { + style: { 'margin-top': '5px' }, + textContent: title, + dataset: { tooltip: description }, }), - ]) - ), - ]), - ]) - ); + ]), + ...filteredSamples.map(([key, sampleInfo]) => + el('li', {}, [ + el('a', { + href: sampleInfo.external + ? sampleInfo.external.url + : sampleInfo.filename, + ...(!sampleInfo.openInNewTab && { + onClick: (e: PointerEvent) => { + setSampleIFrameURL(e, sampleInfo); + }, + }), + textContent: `${sampleInfo.tocName || key}${ + sampleInfo.openInNewTab ? ' ↗️' : '' + }`, + ...(sampleInfo.openInNewTab && { target: '_blank' }), + }), + ]) + ), + ]), + ]) + ); + } } sourceLElem.addEventListener('click', () => switchToRelativeTab(-1).click()); From 71e0fa49bae85fc82acf38df09c766a39164240d Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Mon, 14 Jul 2025 10:17:59 +0530 Subject: [PATCH 2/6] CSS formatting --- public/css/MainLayout.css | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/public/css/MainLayout.css b/public/css/MainLayout.css index 81988da2..c3a1e0d2 100644 --- a/public/css/MainLayout.css +++ b/public/css/MainLayout.css @@ -68,12 +68,12 @@ search { inline-size: 100%; margin-block-end: 20px; - &>hr { + & > hr { border-color: var(--tooltip-border); margin-block: 0; } - &>label { + & > label { display: flex; justify-content: flex-start; align-items: center; @@ -81,15 +81,15 @@ search { inline-size: 100%; block-size: 50px; - &:has(input:focus)>svg { + &:has(input:focus) > svg { display: none; } - &>svg { + & > svg { margin-inline-start: 10px; } - &>input { + & > input { opacity: 0; border: none; block-size: 100%; @@ -103,7 +103,6 @@ search { } } } - } @media only screen and (max-width: 768px) { @@ -115,12 +114,12 @@ search { overflow: visible; } - #menuToggle~.panelContents { + #menuToggle ~ .panelContents { max-height: 0; overflow: hidden; } - #menuToggle:checked~.panelContents { + #menuToggle:checked ~ .panelContents { max-height: 2000px; } @@ -139,5 +138,4 @@ search { .expand { display: inline-block; } - -} \ No newline at end of file +} From f79430e9343ca2a3c00a91fbbc9f985f132fd8e2 Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Mon, 14 Jul 2025 10:27:17 +0530 Subject: [PATCH 3/6] Format HTML --- index.html | 127 ++++++++++++++++++++++++++++------------------------- 1 file changed, 68 insertions(+), 59 deletions(-) diff --git a/index.html b/index.html index 3ad7d652..b7b327db 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,38 @@ + + + + WebGPU Samples + + - - - - WebGPU Samples - - + + - - + - - - - - - -
- - -
-
-

- The WebGPU Samples are a set of samples and demos demonstrating the use - of the WebGPU API. Please see the current - implementation status and how to run WebGPU in your browser at - webgpu.io. -

-
- - -
-
-
- - \ No newline at end of file +
+
+

+ The WebGPU Samples are a set of samples and demos demonstrating the use + of the WebGPU API. Please see the current + implementation status and how to run WebGPU in your browser at + webgpu.io. +

+
+ + +
+
+ + + From 37ac9ada2576a16ae09e390d73bd55480afe2ad4 Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Mon, 14 Jul 2025 10:31:37 +0530 Subject: [PATCH 4/6] format CSS --- public/css/MainLayout.css | 1 + 1 file changed, 1 insertion(+) diff --git a/public/css/MainLayout.css b/public/css/MainLayout.css index c3a1e0d2..66f023db 100644 --- a/public/css/MainLayout.css +++ b/public/css/MainLayout.css @@ -138,4 +138,5 @@ search { .expand { display: inline-block; } + } From 124a2dc50a6ee24adbc2f3c86bf8ee228b10fd4e Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Mon, 14 Jul 2025 10:32:45 +0530 Subject: [PATCH 5/6] Prettier --- index.html | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index b7b327db..a0bcf82c 100644 --- a/index.html +++ b/index.html @@ -34,18 +34,25 @@

WebGPU Samples

-
+
-
+
From 5b8a60ef5952b77ed89121b61d23db09d349c9aa Mon Sep 17 00:00:00 2001 From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com> Date: Mon, 14 Jul 2025 10:33:41 +0530 Subject: [PATCH 6/6] space --- public/css/MainLayout.css | 1 + 1 file changed, 1 insertion(+) diff --git a/public/css/MainLayout.css b/public/css/MainLayout.css index 66f023db..b8906414 100644 --- a/public/css/MainLayout.css +++ b/public/css/MainLayout.css @@ -140,3 +140,4 @@ search { } } +