Merge branch 'release' into docs/wgsl-resolve-example

Author: mhawryluk

apps/typegpu-docs/public/assets/image-tuning/tiger.png

@@ -3,9 +3,7 @@ import { useAtom, useAtomValue } from 'jotai';
 import { useSetAtom } from 'jotai';
 import { useId, useState } from 'react';
 import { codeEditorShownAtom } from '../utils/examples/codeEditorShownAtom.ts';
-import { currentExampleAtom } from '../utils/examples/currentExampleAtom.ts';
 import { runWithCatchAtom } from '../utils/examples/currentSnackbarAtom.ts';
-import { examples } from '../utils/examples/exampleContent.ts';
 import {
   type ExampleControlParam,
   exampleControlsAtom,
@@ -19,7 +17,6 @@ import { Slider } from './design/Slider.tsx';
 import { TextArea } from './design/TextArea.tsx';
 import { Toggle } from './design/Toggle.tsx';
 import { VectorSlider } from './design/VectorSlider.tsx';
-import { openInStackBlitz } from './stackblitz/openInStackBlitz.ts';
 
 function ToggleRow({
   label,
@@ -306,7 +303,6 @@ export function ControlPanel() {
   const [codeEditorShowing, setCodeEditorShowing] = useAtom(
     codeEditorShownAtom,
   );
-  const currentExample = useAtomValue(currentExampleAtom);
   const exampleControlParams = useAtomValue(exampleControlsAtom);
 
   const showLeftMenuId = useId();
@@ -345,14 +341,6 @@ export function ControlPanel() {
           />
         </label>
 
-        {currentExample && currentExample in examples
-          ? (
-            <Button onClick={() => openInStackBlitz(examples[currentExample])}>
-              Edit on StackBlitz
-            </Button>
-          )
-          : null}
-
         <hr className='my-0 box-border w-full border-tameplum-100 border-t' />
       </div>
 

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

@@ -1,17 +1,17 @@
 import cs from 'classnames';
 import { useAtom, useAtomValue } from 'jotai';
 import { useId, useRef, useState } from 'react';
+import CrossSvg from '../assets/cross.svg';
 import DiscordIconSvg from '../assets/discord-icon.svg';
 import GithubIconSvg from '../assets/github-icon.svg';
 import HamburgerSvg from '../assets/hamburger.svg';
-import CrossSvg from '../assets/cross.svg';
 import { codeEditorShownMobileAtom } from '../utils/examples/codeEditorShownAtom.ts';
 import {
   menuShownAtom,
   menuShownMobileAtom,
 } from '../utils/examples/menuShownAtom.ts';
-import { SearchableExampleList } from './SearchableExampleList.tsx';
 import ExamplePage from './ExamplePage.tsx';
+import { SearchableExampleList } from './SearchableExampleList.tsx';
 import { Button } from './design/Button.tsx';
 import { Toggle } from './design/Toggle.tsx';
 
@@ -24,12 +24,12 @@ export function ExampleLayout() {
 
   return (
     <>
-      <div className='absolute top-4 left-4 z-50 flex gap-4 text-sm md:hidden'>
+      <div className='absolute top-4 left-4 z-50 flex gap-2 text-sm md:hidden'>
         {menuShownMobile
           ? null
           : (
             <Button onClick={() => setMenuShownMobile(true)}>
-              <img src={HamburgerSvg.src} alt='menu' className='h-6 w-6' />
+              <img src={HamburgerSvg.src} alt='menu' className='-m-2 h-6 w-6' />
             </Button>
           )}
 

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

@@ -1,26 +1,24 @@
 import { useSetAtom } from 'jotai';
-import type { MouseEvent } from 'react';
 import { currentExampleAtom } from '../utils/examples/currentExampleAtom.ts';
 import useEvent from '../utils/useEvent.ts';
+import { Button } from './design/Button.tsx';
 
 export function ExampleNotFound() {
   const setCurrentExample = useSetAtom(currentExampleAtom);
 
-  const handleGoHome = useEvent((e: MouseEvent) => {
-    e.preventDefault();
-    setCurrentExample(undefined);
-  });
-
   return (
-    <div className='flex flex-1 flex-col items-center justify-center'>
-      <h1 className='font-bold text-4xl'>404 Example Not Found</h1>
-      <button
-        type='button'
-        className='mt-4 text-lg text-slate-600 underline'
-        onClick={handleGoHome}
+    <div className='flex h-full flex-1 flex-col items-center justify-center gap-4'>
+      <h1 className='font-bold text-3xl'>
+        Example Not Found
+      </h1>
+      <Button
+        accent
+        onClick={useEvent(() => {
+          setCurrentExample(undefined);
+        })}
       >
-        Go back home
-      </button>
+        Show default example
+      </Button>
     </div>
   );
 }

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

@@ -14,7 +14,9 @@ import type { Example } from '../utils/examples/types.ts';
 import { isGPUSupported } from '../utils/isGPUSupported.ts';
 import { HtmlCodeEditor, TsCodeEditor } from './CodeEditor.tsx';
 import { ControlPanel } from './ControlPanel.tsx';
+import { Button } from './design/Button.tsx';
 import { Snackbar } from './design/Snackbar.tsx';
+import { openInStackBlitz } from './stackblitz/openInStackBlitz.ts';
 
 type Props = {
   example: Example;
@@ -98,7 +100,7 @@ export function ExampleView({ example }: Props) {
       <div className='flex h-full flex-col gap-4 md:grid md:grid-cols-[1fr_18.75rem]'>
         <div
           className={cs(
-            'grid flex-1 gap-4',
+            'grid flex-1 gap-4 overflow-auto',
             codeEditorShowing ? 'md:grid-rows-[2fr_3fr]' : '',
           )}
         >
@@ -109,13 +111,13 @@ export function ExampleView({ example }: Props) {
                   scrollbarGutter: 'stable both-edges',
                 }}
                 className={cs(
-                  'relative box-border flex h-full flex-col flex-wrap items-center justify-evenly md:flex-row md:gap-4',
+                  'relative box-border flex h-full flex-col flex-wrap items-center justify-evenly gap-4 overflow-auto md:flex-row',
                   codeEditorShowing
                     ? 'md:max-h-[calc(40vh-1.25rem)] md:overflow-auto'
                     : '',
                 )}
               >
-                <div ref={exampleHtmlRef} className='contents h-full w-full' />
+                <div ref={exampleHtmlRef} className='contents' />
               </div>
             )
             : <GPUUnsupportedPanel />}
@@ -167,6 +169,19 @@ export function ExampleView({ example }: Props) {
                     />
                   ))}
                 </div>
+
+                <div className='absolute right-0 z-5 md:top-15 md:right-8'>
+                  <Button
+                    onClick={() => openInStackBlitz(example)}
+                  >
+                    <span className='font-bold'>Edit on</span>
+                    <img
+                      src='https://developer.stackblitz.com/img/logo/stackblitz-logo-black_blue.svg'
+                      alt='stackblitz logo'
+                      className='h-4'
+                    />
+                  </Button>
+                </div>
               </div>
             )
             : null}

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

@@ -13,7 +13,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
   return (
     <button
       className={cs(
-        'box-border inline-flex items-center justify-center rounded-[6.25rem] px-5 py-2.5 text-sm focus:ring-2 focus:ring-gradient-blue',
+        'box-border inline-flex items-center justify-center gap-2 rounded-[6.25rem] px-5 py-2.5 text-sm focus:ring-2 focus:ring-gradient-blue',
         accent
           ? 'bg-gradient-to-br from-gradient-purple to-gradient-blue text-white hover:from-gradient-purple-dark hover:to-gradient-blue-dark'
           : 'border-2 border-tameplum-100 bg-white hover:bg-tameplum-20',

apps/typegpu-docs/src/components/design/Button.tsx

@@ -295,7 +295,7 @@ function render() {
   device.queue.submit([encoder.finish()]);
 }
 
-render();
+setTimeout(() => render(), 100);
 
 // #region Example controls & Cleanup
 

apps/typegpu-docs/src/content/examples/image-processing/blur/index.ts

@@ -0,0 +1 @@
+<canvas></canvas>