From 04145475a1c9e6924b32350c9efb54e414c946ef Mon Sep 17 00:00:00 2001 From: Diego Marcos Segura Date: Fri, 30 May 2025 16:05:29 -0700 Subject: [PATCH] Polish examples site: indentation consistency, replace ID selector with classes, hide mobile menu on desktop, embed svg logo --- examples.html | 674 ++++++++++++++++++++++++++------------------------ index.html | 158 ++++++------ 2 files changed, 429 insertions(+), 403 deletions(-) diff --git a/examples.html b/examples.html index c3d3737..7aec8b2 100644 --- a/examples.html +++ b/examples.html @@ -1,359 +1,385 @@ - Forge • Examples - - - - - -
-
-
- - - - EXAMPLES -
-
- - - - - -
-
-
- - Hello World - Environment Map - Interactivity - Multiple Splats - Multiple Viewpoints - Procedural Splats - Raycasting - VFX - Dynamic Lighting - VFX - Particle Simulation - Viewer -
-
- -
- + }); + } + + function setupMobileMenu() { + const hamburger = document.querySelector('.hamburger'); + const panel = document.querySelector('.panel'); + const overlay = document.querySelector('.overlay'); + const iframe = document.querySelector('.example-frame'); + const codeButton = document.querySelector('.code-button'); + + const mobilePanel = document.createElement('div'); + mobilePanel.classList.add('mobile-panel'); + + const copyLinks = () => { + mobilePanel.innerHTML = ''; + const links = panel.querySelectorAll('.example-link'); + links.forEach(link => { + const newLink = link.cloneNode(true); + if (link.classList.contains('active')) { + newLink.classList.add('active'); + } + mobilePanel.appendChild(newLink); + }); + }; + + copyLinks(); + + const observer = new MutationObserver(copyLinks); + observer.observe(panel, { childList: true }); + + document.body.appendChild(mobilePanel); + + function closeMenu() { + mobilePanel.classList.remove('active'); + overlay.classList.remove('active'); + } + + function openMenu() { + mobilePanel.classList.add('active'); + overlay.classList.add('active'); + } + + hamburger.addEventListener('click', (e) => { + e.stopPropagation(); + if (mobilePanel.classList.contains('active')) { + closeMenu(); + } else { + openMenu(); + } + }); + + overlay.addEventListener('click', closeMenu); + + mobilePanel.querySelectorAll('.example-link').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const path = link.getAttribute('href').substring(1); + + iframe.src = path; + + document.querySelectorAll('.example-link').forEach(l => l.classList.remove('active')); + link.classList.add('active'); + + const example = link.getAttribute('data-source'); + if (example) { + codeButton.href = example; + } + + closeMenu(); + }); + }); + + mobilePanel.addEventListener('click', (e) => { + const link = e.target.closest('.example-link'); + + if (link) { + e.preventDefault(); + const path = link.getAttribute('href'); + iframe.src = path; + + document.querySelectorAll('.example-link').forEach(l => l.classList.remove('active')); + link.classList.add('active'); + panel.querySelector(`[href="${path}"]`)?.classList.add('active'); + + codeButton.href = `https://github.com/forge-gfx/forge/blob/main${path}`; + closeMenu(); + } + }); + } + + document.addEventListener('DOMContentLoaded', () => { + loadExamples(); + setupMobileMenu(); + }); + + + +
+
+
+ + EXAMPLES +
+
+ + + + + +
+
+
+
+ + EXAMPLES +
+ Hello World + Environment Map + Interactivity + Multiple Splats + Multiple Viewpoints + Procedural Splats + Raycasting + VFX - Dynamic Lighting + VFX - Particle Simulation + Viewer +
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 34158cf..7d4aadd 100644 --- a/index.html +++ b/index.html @@ -1,137 +1,137 @@ - Forge Examples - - - - + -
+

Forge Examples

-
+
-
+
-

Examples

+

Examples

-