Add edge function

.gitignore

@@ -5,3 +5,4 @@ public
 src/gatsby-types.d.ts
 .env.*
 !.env.example
+.netlify

netlify/edge-functions/experiment.ts

@@ -0,0 +1,29 @@
+import { Context } from "https://edge.netlify.com";
+import { HTMLRewriter } from "https://raw.githubusercontent.com/worker-tools/html-rewriter/master/index.ts";
+
+export default async (request: Request, context: Context) => {
+  const next = await context.next();
+  let config: Record<string, string> = {};
+  let buffer = "";
+  return new HTMLRewriter()
+    .on("#edge-config", {
+      text(scriptText) {
+        buffer += scriptText.text;
+        if (scriptText.lastInTextNode) {
+          config = JSON.parse(buffer);
+        }
+      },
+    })
+    .on("body", {
+      element(bodyEl) {
+        bodyEl.setAttribute(
+          "class",
+          ["experiment-grey-bkg-bucket-a", config.bodyClass].join(" ")
+        );
+        console.log({ config });
+      },
+    })
+    .transform(next);
+};
+
+export const config = { path: "/" };

src/templates/page.tsx

@@ -27,7 +27,15 @@ const IndexPage = ({ data }: PageProps<Queries.PageQuery>) => {
 
 export default IndexPage;
 
-export const Head: HeadFC = () => <title>Home Page</title>;
+export const Head: HeadFC<Queries.PageQuery> = ({ data }) => (
+  <>
+    <title>Home Page</title>
+    {/* @ts-ignore */}
+    <script id="edge-config" language="json">
+      {JSON.stringify({ bodyClass: "test-from-edge", data })}
+    </script>
+  </>
+);
 
 export const query = graphql`
   query Page($slug: String!) {