Add edge function

.gitignore

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

.vscode/settings.json

@@ -4,5 +4,6 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.organizeImports.rome": true
-  }
+  },
+  "deno.enablePaths": ["netlify/edge-functions"]
 }

netlify.toml

@@ -0,0 +1,2 @@
+[build]
+publish="public"

netlify/edge-functions/experiment.ts

@@ -0,0 +1,80 @@
+import { Context } from "https://edge.netlify.com";
+import { HTMLRewriter } from "https://raw.githubusercontent.com/worker-tools/html-rewriter/master/index.ts";
+
+type Experiment = {
+  slug: string;
+};
+
+type CampaignsConfig = {
+  campaigns: { id: string; trafficAmount: number; experiments: Experiment[] }[];
+};
+export default async (request: Request, context: Context) => {
+  const next = await context.next();
+  let config: CampaignsConfig = { campaigns: [] };
+  let buffer = "";
+
+  Array(10)
+    .fill()
+    .map((_, index) => {
+      const name = `edge-campaign-${index}`;
+      console.log({ name });
+      const isSet = context.cookies.get(name);
+
+      console.log({ index, isSet });
+
+      if (!isSet) {
+        context.cookies.set({
+          name,
+          value: Math.random(),
+        });
+      }
+    });
+
+  return new HTMLRewriter()
+    .on("#edge-config", {
+      text(scriptText) {
+        buffer += scriptText.text;
+        if (scriptText.lastInTextNode) {
+          config = JSON.parse(buffer);
+        }
+      },
+    })
+    .on("body", {
+      element(bodyEl) {
+        try {
+          const experimentSlugs = config?.campaigns
+            ?.filter(({ id, trafficAmount }, index) => {
+              const name = `edge-campaign-${index}`;
+              const probability = parseFloat(context.cookies.get(name));
+
+              console.log({ probability });
+
+              const isOn = probability > trafficAmount / 100;
+
+              console.log("BUCKET", isOn);
+
+              return isOn;
+            })
+            .map((campaign) => {
+              return campaign.experiments.map(
+                ({ slug }) => `edge-experiment-${slug}`
+              );
+            })
+            .flat()
+            .join(" ");
+
+          console.log({ experimentSlugs });
+
+          bodyEl.setAttribute("class", experimentSlugs);
+
+          console.log("EDGE CONFIG", JSON.stringify(config, null, 2));
+        } catch (error) {
+          console.log("ERROR");
+          console.log(error);
+        }
+      },
+    })
+    .transform(next);
+};
+
+export const config = { path: "/" };

package.json

@@ -20,6 +20,7 @@
     "@commercelayer/js-auth": "4.0.0",
     "@commercelayer/react-components": "^4.4.4",
     "@frontegg/react": "^5.0.44",
+    "classnames": "^2.3.2",
     "gatsby": "^5.9.0",
     "gatsby-plugin-image": "^3.11.0",
     "gatsby-plugin-manifest": "^5.9.0",

src/components/Card/src/Card.module.scss

@@ -30,3 +30,15 @@
 .footer {
   padding: 20px;
 }
+
+:global(.edge-experiment-list-no-cards .product-section) {
+  .card {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .image,
+  .imageWrapper {
+    display: none;
+  }
+}

src/components/Card/src/Card.tsx

@@ -1,17 +1,19 @@
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image";
 import { cloneElement, isValidElement, useMemo } from "react";
+import classnames from "classnames";
 import * as styles from "./Card.module.scss";
 
 export type CardProps = {
   title: React.ReactNode;
   children: React.ReactNode;
   imageData?: IGatsbyImageData;
   footer?: React.ReactNode;
+  className?: string;
 };
 
-const Card = ({ title, children, imageData, footer }: CardProps) => {
+const Card = ({ title, children, imageData, footer, className }: CardProps) => {
   return (
-    <div className={styles.card}>
+    <div className={classnames(styles.card, className)}>
       {imageData && (
         <div className={styles.imageWrapper}>
           <GatsbyImage

src/components/Hero/src/Hero.module.scss

@@ -31,3 +31,9 @@
   transform: translateY(-50%);
   z-index: 1;
 }
+
+:global(.edge-experiment-grey-bkg) {
+  .hero {
+    background: grey;
+  }
+}

src/components/ProductSection/src/ProductSection.module.scss

@@ -0,0 +1,21 @@
+.cardContent {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cardWrapper {
+  display: flex;
+  gap: 10px;
+  margin-top: 50px;
+}
+
+:global(.edge-experiment-list-no-cards) {
+  .cardWrapper {
+    flex-direction: column;
+  }
+
+  .cardContent {
+    flex-direction: row;
+  }
+}

src/components/ProductSection/src/ProductSection.tsx

@@ -1,6 +1,8 @@
 import { Price, PricesContainer } from "@commercelayer/react-components";
 import { graphql, Link } from "gatsby";
 import ReactMarkdown from "react-markdown";
+import classnames from "classnames";
+import * as styles from "./ProductSection.module.scss";
 import Card from "../../Card";
 
 const ProductSection = ({ data }: { data: Queries.ProductSectionFragment }) => {
@@ -9,14 +11,14 @@ const ProductSection = ({ data }: { data: Queries.ProductSectionFragment }) => {
   }
 
   return (
-    <div>
+    <div className={classnames(styles.productSection, "product-section")}>
       <h2>{data.title}</h2>
       {data.description?.description && (
         <div>
           <ReactMarkdown>{data.description.description}</ReactMarkdown>
         </div>
       )}
-      <div style={{ display: "flex", gap: 10, marginTop: 50 }}>
+      <div className={styles.cardWrapper}>
         {data.products.map((product) => {
           if (!product) {
             return null;
@@ -35,13 +37,7 @@ const ProductSection = ({ data }: { data: Queries.ProductSectionFragment }) => {
                 imageData={image?.gatsbyImageData || undefined}
                 footer={<Link to={slug}>Catch it!</Link>}
               >
-                <div
-                  style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                  }}
-                >
+                <div className={styles.cardContent}>
                   {shortDescription?.shortDescription && (
                     <p>{shortDescription?.shortDescription}</p>
                   )}

src/components/Sections/src/Sections.module.scss

@@ -3,3 +3,17 @@
   padding-top: 50px;
   border-top: 1px solid #ccc;
 }
+
+.b {
+  display: none;
+}
+
+:global(.edge-experiment-invert-order-homepage) {
+  .a {
+    display: none;
+  }
+
+  .b {
+    display: block;
+  }
+}

src/components/Sections/src/Sections.tsx

@@ -3,11 +3,68 @@ import ProductSection from "../../ProductSection";
 import TitleWithContent from "../../TitleWithContent";
 import * as styles from "./Sections.module.scss";
 
-const typenameToSectionComponentMap = {
+const typenameToSectionComponentMapExperiment = {
   ContentfulProductSection: ProductSection,
   ContentfulTitleWithContent: TitleWithContent,
 };
 
+const ExperimentSection = ({ data }: { data: Queries.SectionsFragment }) => {
+  if (!data.a || !data.b) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={styles.a}>
+        {data.a.map((section) => {
+          if (!section) {
+            return null;
+          }
+
+          const Component =
+            typenameToSectionComponentMapExperiment[section.__typename];
+
+          if (!Component) {
+            return null;
+          }
+
+          return (
+            <div className={styles.section}>
+              {/* @ts-ignore No idea why an error here either. */}
+              <Component data={section} />
+            </div>
+          );
+        })}
+      </div>
+      <div className={styles.b}>
+        {data.b.map((section) => {
+          if (!section) {
+            return null;
+          }
+
+          const Component =
+            typenameToSectionComponentMapExperiment[section.__typename];
+
+          if (!Component) {
+            return null;
+          }
+
+          return (
+            <div className={styles.section}>
+              {/* @ts-ignore No idea why an error here either. */}
+              <Component data={section} />
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+const typenameToSectionComponentMap = {
+  ContentfulExperimentReferences: ExperimentSection,
+};
+
 // @todo: this should be changed to Sections fragment. Not sure why isn't working yet.
 const Sections = ({ data }: { data: readonly Queries.SectionsFragment[] }) => {
   return (
@@ -34,9 +91,15 @@ export default Sections;
 
 export const query = graphql`
   # Fragment type should be changed to custom union.
-  fragment Sections on ContentfulProductSectionContentfulTitleWithContentUnion {
+  fragment Sections on ContentfulExperimentReferences {
     __typename
-    ...ProductSection
-    ...TitleWithContent
+    a {
+      ...ProductSection
+      ...TitleWithContent
+    }
+    b {
+      ...ProductSection
+      ...TitleWithContent
+    }
   }
 `;

src/templates/page.tsx

@@ -27,7 +27,17 @@ 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({
+        campaigns: data.allContentfulCampaign.nodes,
+      })}
+    </script>
+  </>
+);
 
 export const query = graphql`
   query Page($slug: String!) {
@@ -40,5 +50,19 @@ export const query = graphql`
         ...Sections
       }
     }
+    allContentfulCampaign {
+      nodes {
+        id
+        trafficAmount
+        experiments {
+          ... on ContentfulExperiment {
+            slug
+          }
+          ... on ContentfulExperimentReferences {
+            slug
+          }
+        }
+      }
+    }
   }
 `;

yarn.lock

@@ -3758,7 +3758,7 @@ [email protected], ci-info@^2.0.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
-classnames@^2.3.1:
+classnames@^2.3.1, classnames@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==