docs(examples): add an example of single pass post-processing

docs/src/components/ExamplePage.astro

@@ -50,10 +50,6 @@ const sidebar = [
     --sl-sidebar-width: 12.5rem;
   }
 
-  footer {
-    display: none !important;
-  }
-
   .content-panel {
     border: none !important;
 

docs/src/pages/examples/post-processing/single-pass/_main.ts

@@ -0,0 +1,43 @@
+import { useEffectPass, useWebGLCanvas, loadTexture } from "usegl";
+import "./styles.css";
+
+(async () => {
+  const sepiaEffect = useEffectPass({
+    fragment: /* glsl */ `
+      uniform sampler2D uTexture; // output of the render pass
+      in vec2 vUv;
+      out vec4 fragColor;
+
+      #define SEPIA_COLOR vec3(1.2, 1.0, 0.7)
+      #define STRENGTH .75
+
+      vec3 sepia(vec3 color) {
+        float grayScale = dot(color, vec3(0.299, 0.587, 0.114));
+        return grayScale * SEPIA_COLOR;
+      }
+
+      void main() {
+        vec3 color = texture(uTexture, vUv).rgb;
+        color = mix(color, sepia(color), STRENGTH);
+        fragColor = vec4(color, 1.);
+      }
+    `,
+  });
+
+  useWebGLCanvas({
+    canvas: "#glCanvas",
+    fragment: /* glsl */ `
+      in vec2 vUv;
+      uniform sampler2D uPicture;
+      out vec4 fragColor;
+
+      void main() {
+        fragColor = texture(uPicture, vUv);
+      }
+    `,
+    uniforms: {
+      uPicture: await loadTexture("https://picsum.photos/id/323/600/400"),
+    },
+    postEffects: [sepiaEffect],
+  });
+})();

docs/src/pages/examples/post-processing/single-pass/_styles.css

@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  height: 100svh;
+  display: grid;
+  place-items: center;
+  background: black;
+}
+
+canvas {
+  max-width: 100svw;
+  max-height: 100svh;
+  aspect-ratio: 600 / 400;
+  display: block;
+}

docs/src/pages/examples/post-processing/single-pass/index.mdx

@@ -0,0 +1,18 @@
+---
+title: "Single pass (sepia)"
+---
+
+import ExamplePage from "../../../../components/ExamplePage.astro";
+import ExampleEditor from "../../../../components/ExampleEditor/ExampleEditor.astro";
+import ts from "./_main.ts?raw";
+import styles from "./_styles.css?raw";
+
+<ExamplePage>
+  <ExampleEditor
+    exampleTitle={frontmatter.title}
+    files={{
+      "index.ts": { code: ts },
+      "styles.css": { code: styles },
+    }}
+  />
+</ExamplePage>

docs/src/styles/custom.scss

@@ -4,6 +4,10 @@
   }
 }
 
+footer {
+  display: none !important;
+}
+
 .page > header > .header {
   grid-template-columns: auto 1fr auto;
 }

eslint.config.mjs

@@ -6,5 +6,6 @@ export default unjs({
     "unicorn/no-null": "off",
     "@typescript-eslint/consistent-type-imports": "error",
     "@typescript-eslint/triple-slash-reference": "off",
+    "unicorn/prefer-top-level-await": "off",
   },
 });