docs: DEV-only examples (for drafts & tests) (#1685)

Author: iwoplaza

apps/typegpu-docs/src/components/ExampleCard.tsx

@@ -35,6 +35,11 @@ export function ExampleCard({ example }: { example: Example }) {
         </h3>
         {example.metadata.tags && example.metadata.tags.length > 0 && (
           <div className='flex flex-wrap gap-1'>
+            {example.metadata.dev && (
+              <span className='rounded-full bg-rose-700 px-2 py-1 text-white text-xs'>
+                DEV
+              </span>
+            )}
             {example.metadata.tags.map((tag: string) => (
               <span
                 key={tag}

apps/typegpu-docs/src/components/ExamplePage.tsx

@@ -1,7 +1,7 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import { Suspense, useEffect, useRef } from 'react';
 import { currentExampleAtom } from '../utils/examples/currentExampleAtom.ts';
-import { examples } from '../utils/examples/exampleContent.ts';
+import { examples } from '../examples/exampleContent.ts';
 import { ExampleNotFound } from './ExampleNotFound.tsx';
 import { ExampleView } from './ExampleView.tsx';
 

apps/typegpu-docs/src/components/SearchableExampleList.tsx

@@ -1,6 +1,6 @@
 import Fuse from 'fuse.js';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { examples } from '../utils/examples/exampleContent.ts';
+import { examples } from '../examples/exampleContent.ts';
 import { type Example, exampleCategories } from '../utils/examples/types.ts';
 import { ExampleCard } from './ExampleCard.tsx';
 
@@ -12,6 +12,9 @@ function ExamplesGrid({ examples }: { examples: Example[] }) {
   );
 }
 
+const DEV = globalThis.process.env.NODE_ENV === 'development';
+const TEST = globalThis.process.env.NODE_ENV === 'test';
+
 export function SearchableExampleList(
   { excludeTags = [], scrollContainerRef }: {
     excludeTags?: string[];
@@ -23,7 +26,8 @@ export function SearchableExampleList(
   const allExamples = useMemo(
     () =>
       Object.values(examples).filter((ex) =>
-        !ex.metadata.tags?.some((tag) => excludeTags.includes(tag))
+        !ex.metadata.tags?.some((tag) => excludeTags.includes(tag)) &&
+        (DEV || TEST || !ex.metadata.dev)
       ),
     [excludeTags],
   );