Add a sketch

Reference for the display: flex workaround
P5-wrapper/react#267

pages/ai-religion/components.tsx

@@ -1,9 +1,11 @@
 import { WideColumn } from "components/Column";
 import { Link } from "gatsby";
+import ReactP5Wrapper from "p5/ReactP5Wrapper";
 import * as React from "react";
 import styled from "styled-components";
 import { BuildTimePageContext } from "templates/page";
 import { ensure } from "utils/ensure";
+import { sketch } from "./sketch";
 
 export const Container: React.FC<React.PropsWithChildren> = ({ children }) => {
     return (
@@ -45,6 +47,33 @@ const ContentContainer = styled.div`
     }
 `;
 
+export const Sketch: React.FC = () => {
+    return (
+        <Sketch_>
+            <ReactP5Wrapper sketch={sketch} />
+        </Sketch_>
+    );
+};
+
+const Sketch_ = styled.div`
+    /**
+     * For an unknown reason, the react-p5-wrapper div has an extra 4 pixels of
+     * height. Setting the display to flex fixes that discrepancy (I don't know
+     * why either).
+     */
+    display: flex;
+    /**
+     * Center the sketch within the container.
+     */
+    justify-content: center;
+    /**
+     * Provide a minimum height to prevent a layout shift on load
+     *
+     * This is the same value is that in sketch.tsx.
+     */
+    height: 300px;
+`;
+
 export const Footer: React.FC = () => {
     const page = ensure(React.useContext(BuildTimePageContext));
     const { formattedDateMY } = page;

pages/ai-religion/index.mdx

@@ -16,6 +16,8 @@ the premise. Even if you don’t agree with my conclusions (even future me might
 not), you might find the premise interesting enough to ponder over to your own
 conclusions.
 
+<C.Sketch />
+
 Now, to begin with, we must be clear about self-aware. Some people are certain,
 one way or the other, about AIs being conscious or not. I’m not one of them - I
 believe that all possibilities are possible. We can’t even define consciousness

pages/ai-religion/sketch.tsx

@@ -0,0 +1,16 @@
+import type { Sketch } from "@p5-wrapper/react";
+
+export const sketch: Sketch = (p5) => {
+    p5.setup = () => p5.createCanvas(300, 300, p5.WEBGL);
+
+    p5.draw = () => {
+        p5.background(250);
+        p5.normalMaterial();
+        p5.push();
+        p5.rotateZ(p5.frameCount * 0.01);
+        p5.rotateX(p5.frameCount * 0.01);
+        p5.rotateY(p5.frameCount * 0.01);
+        p5.plane(100);
+        p5.pop();
+    };
+};