Add "view as standalone webpage" link; improvements for external samples (#473)

Author: kainino0x

index.html

@@ -56,7 +56,8 @@ <h1>
         <div id="sample" style="display: none;">
           <div class="sampleInfo">
             <h1 id="title"></h1>
-            <a id="src" target="_blank" rel="noreferrer" href="">See it on Github!</a>
+            <a id="src" target="_blank" rel="noreferrer" href="">View source!</a>
+            &mdash; <a id="standalone" target="_blank" rel="noreferrer" href="">View as standalone webpage</a>
             <p id="description"></p>
           </div>
           <div class="sampleContainer"></div>

public/css/styles.css

@@ -21,9 +21,13 @@ body {
 
 a {
   text-decoration: none;
-  color: var(--link)
+  color: var(--link);
+}
+a:not([href]), a[href=""] {
+  /* link is missing href */
+  text-decoration: wavy underline;
+  color: #f00;
 }
-
 a:hover {
   text-decoration: underline;
 }
@@ -49,4 +53,4 @@ main {
 
 .cm-editor {
   max-height: 100vh;
-}
+}

sample/bundleCulling/meta.ts

@@ -1,10 +1,10 @@
 export default {
   name: 'Bundle Culling',
-  description: `A demonstration of using frustum culling with render bundles through indirect instanced draw calls.
-
-Source at <https://github.com/toji/webgpu-bundle-culling/>
-`,
+  description: `A demonstration of using frustum culling with render bundles through indirect instanced draw calls.`,
   filename: __DIRNAME__,
-  url: 'https://toji.github.io/webgpu-bundle-culling/',
+  external: {
+    url: 'https://toji.github.io/webgpu-bundle-culling/',
+    sourceURL: 'https://github.com/toji/webgpu-bundle-culling',
+  },
   sources: [],
 };

sample/clusteredShading/meta.ts

@@ -1,10 +1,10 @@
 export default {
   name: 'Clustered Shading',
-  description: `Shows a simple clustered forward shading renderer.
-
-Source at <https://github.com/toji/webgpu-clustered-shading/>
-`,
+  description: `Shows a simple clustered forward shading renderer.`,
   filename: __DIRNAME__,
-  url: 'https://toji.github.io/webgpu-clustered-shading/',
+  external: {
+    url: 'https://toji.github.io/webgpu-clustered-shading/',
+    sourceURL: 'https://github.com/toji/webgpu-clustered-shading',
+  },
   sources: [],
 };

sample/marchingCubes/meta.ts

@@ -1,10 +1,10 @@
 export default {
   name: 'Marching Cubes',
-  description: `This example demonstrates how to dynamically generate procedural meshes using a signed distance field and a multi-pass marching cubes algorithm on the GPU.
-
-Source at <https://github.com/tcoppex/webgpu-marchingcubes>
-`,
+  description: `This example demonstrates how to dynamically generate procedural meshes using a signed distance field and a multi-pass marching cubes algorithm on the GPU.`,
   filename: __DIRNAME__,
-  url: 'https://tcoppex.github.io/webgpu-marchingcubes/',
+  external: {
+    url: 'https://tcoppex.github.io/webgpu-marchingcubes/',
+    sourceURL: 'https://github.com/tcoppex/webgpu-marchingcubes',
+  },
   sources: [],
 };

sample/metaballs/meta.ts

@@ -1,10 +1,10 @@
 export default {
   name: 'Metaballs',
-  description: `This example shows an implementation of metaballs with WebGPU.
-
-Source at https://github.com/toji/webgpu-metaballs/
-`,
+  description: `This example shows an implementation of metaballs with WebGPU.`,
   filename: __DIRNAME__,
-  url: 'https://toji.github.io/webgpu-metaballs/',
+  external: {
+    url: 'https://toji.github.io/webgpu-metaballs/',
+    sourceURL: 'https://github.com/toji/webgpu-metaballs',
+  },
   sources: [],
 };

sample/pristineGrid/meta.ts

@@ -1,10 +1,10 @@
 export default {
   name: 'Pristine Grid',
-  description: `A simple WebGPU implementation of the "Pristine Grid" technique described in this wonderful little blog post: <https://bgolus.medium.com/the-best-darn-grid-shader-yet-727f9278b9d8>
-
-Source at <https://github.com/toji/pristine-grid-webgpu/>
-`,
+  description: `A simple WebGPU implementation of the "Pristine Grid" technique described in this wonderful little blog post: <https://bgolus.medium.com/the-best-darn-grid-shader-yet-727f9278b9d8>`,
   filename: __DIRNAME__,
-  url: 'https://toji.github.io/pristine-grid-webgpu/',
+  external: {
+    url: 'https://toji.github.io/pristine-grid-webgpu/',
+    sourceURL: 'https://github.com/toji/pristine-grid-webgpu',
+  },
   sources: [],
 };

sample/spookyball/meta.ts

@@ -1,10 +1,10 @@
 export default {
   name: 'Spookyball',
-  description: `This example shows a simple game made with WebGPU.
-
-Source at <https://github.com/toji/spookyball>
-`,
+  description: `This example shows a simple game made with WebGPU.`,
   filename: __DIRNAME__,
-  url: 'https://spookyball.com',
+  external: {
+    url: 'https://spookyball.com',
+    sourceURL: 'https://github.com/toji/spookyball',
+  },
   sources: [],
 };

src/main.ts

@@ -27,6 +27,7 @@ function getElem(
 const sampleListElem = getElem('#samplelist');
 const sampleElem = getElem('#sample');
 const githubElem = getElem('#src') as HTMLAnchorElement;
+const standaloneElem = getElem('#standalone') as HTMLAnchorElement;
 const introElem = getElem('#intro');
 const codeTabsElem = getElem('#codeTabs');
 const sourcesElem = getElem('#sources');
@@ -183,7 +184,7 @@ function setSampleIFrame(
   descriptionElem.innerHTML = '';
 
   currentSampleInfo = sampleInfo;
-  const { name, description, filename, url, sources } = sampleInfo || {
+  const { name, description, filename, external, sources } = sampleInfo || {
     name: '',
     description: '',
     filename: '',
@@ -197,17 +198,18 @@ function setSampleIFrame(
   // Replace the iframe because changing src adds to the user's history.
   sampleContainerElem.innerHTML = '';
   if (filename) {
-    const src = url || `${filename}${search}`;
+    const src = external ? external.url : `${filename}${search}`;
     sampleContainerElem.appendChild(el('iframe', { src }));
     sampleContainerElem.style.height = sources.length > 0 ? '600px' : '100%';
 
-    if (url) {
-      // If it's remote example, hide the github link and assume it's in the description.
-      githubElem.style.display = 'none';
+    if (external) {
+      // For remote samples, get the source URL from the metadata.
+      githubElem.href = external.sourceURL;
+      standaloneElem.href = external.url;
     } else {
-      // It's a local sample so show the github link.
-      githubElem.style.display = '';
+      // For local samples, generate a link to the source in this repo.
       githubElem.href = `https://github.com/webgpu/webgpu-samples/tree/main/${filename}`;
+      standaloneElem.href = filename;
     }
 
     // hide intro and show sample
@@ -294,7 +296,9 @@ for (const { title, description, samples } of pageCategories) {
         ...Object.entries(samples).map(([key, sampleInfo]) =>
           el('li', {}, [
             el('a', {
-              href: sampleInfo.filename,
+              href: sampleInfo.external
+                ? sampleInfo.external.url
+                : sampleInfo.filename,
               ...(!sampleInfo.openInNewTab && {
                 onClick: (e: PointerEvent) => {
                   setSampleIFrameURL(e, sampleInfo);

src/samples.ts

@@ -52,7 +52,7 @@ export type SampleInfo = {
   description: string;
   openInNewTab?: boolean;
   filename: string; // used if sample is local
-  url?: string; // used if sample is remote
+  external?: { url: string; sourceURL: string }; // used if sample is remote
   sources: SourceInfo[];
 };