docs: Add toggle to show experimental examples (#822)

Author: mhawryluk

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

@@ -1,5 +1,6 @@
 import cs from 'classnames';
 import { useAtom, useAtomValue } from 'jotai';
+import { useState } from 'react';
 import DiscordIconSvg from '../assets/discord-icon.svg';
 import GithubIconSvg from '../assets/github-icon.svg';
 import HamburgerSvg from '../assets/hamburger.svg';
@@ -11,8 +12,7 @@ import {
 import ExampleList from './ExampleList';
 import ExamplePage from './ExamplePage';
 import { Button } from './design/Button';
-
-const isDev = import.meta.env.DEV;
+import { Toggle } from './design/Toggle';
 
 export function ExampleLayout() {
   const menuShown = useAtomValue(menuShownAtom);
@@ -47,9 +47,14 @@ export function ExampleLayout() {
   );
 }
 
+const experimentalShowingLSKey = 'experimental-showing';
+
 function SideMenu() {
   const menuShown = useAtomValue(menuShownAtom);
   const menuShownMobile = useAtomValue(menuShownMobileAtom);
+  const [experimentalShowing, setExperimentalShowing] = useState(
+    localStorage.getItem(experimentalShowingLSKey) === 'true',
+  );
 
   return (
     <aside
@@ -93,11 +98,28 @@ function SideMenu() {
 
       <ExampleList
         excludeTags={[
-          isDev ? [] : ['experimental'],
+          experimentalShowing ? [] : ['experimental'],
           typeof MediaStreamTrackProcessor === 'undefined' ? ['camera'] : [],
         ].flat()}
       />
 
+      <hr className="my-0 box-border w-full border-t border-tameplum-100" />
+
+      <label className="flex items-center justify-between gap-3 text-sm cursor-pointer">
+        <span>Experimental examples</span>
+        <Toggle
+          checked={experimentalShowing}
+          onChange={(e) => {
+            const checked = e.target.checked;
+            localStorage.setItem(
+              experimentalShowingLSKey,
+              checked ? 'true' : 'false',
+            );
+            setExperimentalShowing(checked);
+          }}
+        />
+      </label>
+
       <div className="flex justify-between text-tameplum-800 text-xs">
         <div>&copy; {new Date().getFullYear()} Software Mansion S.A.</div>
         <div className="flex gap-3 items-center">

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

@@ -11,10 +11,11 @@ import useEvent from '../utils/useEvent';
 type Props = {
   exampleKey: string | undefined;
   children?: string;
+  isExperimental: boolean;
 };
 
 export function ExampleLink(props: Props) {
-  const { exampleKey, children } = props;
+  const { exampleKey, children, isExperimental } = props;
 
   const [currentExample, setCurrentExample] = useAtom(currentExampleAtom);
   const setMenuShownMobile = useSetAtom(menuShownMobileAtom);
@@ -40,7 +41,9 @@ export function ExampleLink(props: Props) {
         'flex justify-between items-center cursor-pointer no-underline',
         active
           ? 'bg-clip-text bg-gradient-to-r from-gradient-purple-dark to-gradient-blue-dark text-transparent'
-          : 'text-black',
+          : isExperimental
+            ? 'text-gray-400'
+            : 'text-black',
       )}
     >
       {children}

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

@@ -19,7 +19,13 @@ function ExampleList({ excludeTags = [] }: { excludeTags?: string[] }) {
             }
 
             return (
-              <ExampleLink key={example.key} exampleKey={example.key}>
+              <ExampleLink
+                key={example.key}
+                exampleKey={example.key}
+                isExperimental={
+                  example.metadata.tags?.includes('experimental') ?? false
+                }
+              >
                 {example.metadata.title}
               </ExampleLink>
             );