Fix initial posts to use the new painter API

blog/2024-11-15-playing-with-fire/1-introduction/Gasket.tsx

@@ -0,0 +1,16 @@
+import Canvas, {PainterContext} from "../src/Canvas";
+import {useContext} from "react";
+
+export function Render({f}) {
+    const {setPainter} = useContext(PainterContext);
+    setPainter(f);
+    return <></>;
+}
+
+export default function Gasket({f}) {
+    return (
+        <Canvas width={500} height={500}>
+            <Render f={f}/>
+        </Canvas>
+    )
+}

blog/2024-11-15-playing-with-fire/1-introduction/chaosGame.js

@@ -27,10 +27,4 @@ function* chaosGame() {
 }
 
 // Wiring so the code above displays properly
-function Gasket() {
+render(<Gasket f={chaosGame()}/>)
-    const {setPainter} = useContext(PainterContext);
-    setPainter(chaosGame());
-
-    return (<></>)
-}
-render(<Gasket/>)

blog/2024-11-15-playing-with-fire/1-introduction/index.mdx

@@ -177,9 +177,7 @@ import Scope from './scope'
 
 import chaosGameSource from '!!raw-loader!./chaosGame'
 
-<!--
 <Playground scope={Scope} noInline={true}>{chaosGameSource}</Playground>
--->
 
 <hr/>
 

blog/2024-11-15-playing-with-fire/1-introduction/scope.tsx

@@ -1,15 +1,12 @@
-import {useContext} from "react";
+import Gasket from "./Gasket";
 import { plot } from './plot';
 import { randomBiUnit } from '../src/randomBiUnit';
 import { randomInteger } from '../src/randomInteger';
-import Canvas, {PainterContext} from "../src/Canvas";
 
 const Scope = {
-    Canvas,
+    Gasket,
-    PainterContext,
     plot,
     randomBiUnit,
     randomInteger,
-    useContext,
 }
 export default Scope;