Split MNIST example into code sections for more readability. (#542)

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

@@ -1,6 +1,12 @@
-import Editor, { type BeforeMount, type Monaco } from '@monaco-editor/react';
+import Editor, {
+  type BeforeMount,
+  type Monaco,
+  type OnMount,
+} from '@monaco-editor/react';
 import typegpuJitDts from '@typegpu/jit/dist/index.d.ts?raw';
 import webgpuTypes from '@webgpu/types/dist/index.d.ts?raw';
+// biome-ignore lint/correctness/noUnusedImports: <its a namespace, Biome>
+import type { editor } from 'monaco-editor';
 import { entries, map, pipe } from 'remeda';
 import typedBinary from 'typed-binary/dist/index.d.ts?raw';
 import toolkitTypes from '../types/example-toolkit.d.ts?raw';
@@ -70,14 +76,24 @@ function handleEditorWillMount(monaco: Monaco) {
   });
 }
 
+function handleEditorOnMount(editor: editor.IStandaloneCodeEditor) {
+  // Folding regions in code automatically. Useful for code not strictly
+  // related to TypeGPU, like UI code.
+  editor.trigger(null, 'editor.foldAllMarkerRegions', {});
+}
+
 type Props = {
   code: string;
   onCodeChange: (value: string) => unknown;
   shown: boolean;
 };
 
 const createCodeEditorComponent =
-  (language: 'typescript' | 'html', beforeMount?: BeforeMount) =>
+  (
+    language: 'typescript' | 'html',
+    beforeMount?: BeforeMount,
+    onMount?: OnMount,
+  ) =>
   (props: Props) => {
     const { code, onCodeChange, shown } = props;
 
@@ -92,6 +108,7 @@ const createCodeEditorComponent =
           value={code}
           onChange={handleChange}
           beforeMount={beforeMount}
+          onMount={onMount}
           options={{
             minimap: {
               enabled: false,
@@ -106,6 +123,7 @@ const createCodeEditorComponent =
 export const TsCodeEditor = createCodeEditorComponent(
   'typescript',
   handleEditorWillMount,
+  handleEditorOnMount,
 );
 
 export const HtmlCodeEditor = createCodeEditorComponent('html');

apps/typegpu-docs/src/content/examples/algorithms/mnist-inference/index.html

@@ -62,34 +62,27 @@
   }
 
   .bar::before {
-    height: 80%;
-    width: var(--bar-width, 0%);
+    height: 100%;
+    width: calc((100% - 2rem) * var(--bar-width, 0%));
     background-color: #dadaed;
     position: absolute;
-    inset: 10% 0 0 2rem;
+    left: 2rem;
     border-radius: 9999px;
     content: '';
-    transition: all 0.5s;
+    transition: all 0.2s ease-in-out;
   }
 
   .bar::after {
-    height: 80%;
-    width: var(--bar-width, 0%);
+    height: 100%;
+    width: calc((100% - 2rem) * var(--bar-width, 0%));
     opacity: var(--highlight-opacity, 0);
     background-image: linear-gradient(to right, #c464ff, #1d72f0);
     position: absolute;
-    inset: 10% 0 0 2rem;
+    left: 2rem;
     border-radius: 9999px;
-    transition: all 0.5s;
+    transition:
+      width 0.2s ease-in-out,
+      opacity 0.5s ease-in-out;
     content: '';
   }
-
-  .bar-fill {
-    height: 100%;
-    background-color: #d1d5db;
-    border-radius: 9999px;
-    overflow: hidden;
-    transition: all 0.5s;
-    position: relative;
-  }
 </style>