Embed stats tweet into Shopify page

Author: fightingtheboss

app/components/TweetEmbed/TweetEmbed.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef } from "react";
+
+interface Props {
+  id: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export default function Tweet({ id, className, children }: Props) {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const win = window as any;
+
+    const runLoad = () => {
+      try {
+        if (win.twttr && win.twttr.widgets && ref.current) {
+          win.twttr.widgets.load(ref.current);
+        }
+      } catch (e) {
+        // ignore
+      }
+    };
+
+    if (win.twttr && win.twttr.widgets) {
+      runLoad();
+      return;
+    }
+
+    const script = document.createElement("script");
+    script.src = "https://platform.twitter.com/widgets.js";
+    script.async = true;
+    script.charset = "utf-8";
+    script.onload = runLoad;
+    document.body.appendChild(script);
+
+    return () => {
+      // leave script in place (fast subsequent loads) and don't mutate global twttr
+    };
+  }, [id]);
+
+  return (
+    <div ref={ref} className={className}>
+      <blockquote className="twitter-tweet">
+        {children ?? (
+          <a href={`https://twitter.com/ShopifyEng/status/${id}`}>View Tweet</a>
+        )}
+      </blockquote>
+    </div>
+  );
+}

app/content/work/shopify.mdx

@@ -49,9 +49,16 @@ There were three main projects we undertook while I was managing the team: porti
 
 - [Improved storefront performance globally](https://www.shopify.com/partners/blog/storefront-renderer)
 - [3x Storefront API performance after porting to SFR](https://www.shopify.com/news/performance%F0%9F%91%86-complexity%F0%9F%91%87-killer-updates-from-shopify-engineering)
-- Highly resilient systems with no incidents during BFCM 2022 or 2023
+- Highly resilient systems with no incidents during BFCM 2022 or 2023 (see tweet)
 - An ongoing initiative to build team-wide confidence and improve onboarding for team members on the SFR on-call rotation, through presentations and table top excercises.
 
+import Tweet from "~/components/TweetEmbed/TweetEmbed";
+
+<Tweet id="1729500623773573265" className="flex justify-center">
+  <p lang="en" dir="ltr">That&#39;s a wrap on another incredible BFCM! You got a nerdy preview from <a href="https://twitter.com/tobi?ref_src=twsrc%5Etfw">@tobi</a>, and we&#39;re back with the final stats. Let’s go!🧵👇<br/><br/>We achieved 99.999+% uptime, handling 29.7 PB of data served from across our infrastructure over the entire event! That’s over 5 TB/min. <a href="https://t.co/YfqIOR4YQ7">https://t.co/YfqIOR4YQ7</a></p>
+  &mdash; Shopify Engineering (@ShopifyEng) <a href="https://twitter.com/ShopifyEng/status/1729500623773573265?ref_src=twsrc%5Etfw">November 28, 2023</a>
+</Tweet>
+
 ## Carts
 
 While managing the Storefront API team, there was a focus on supporting enterprise merchants and custom storefronts. One of the main areas of the Storefront API that was most critical but least developed was the Cart API.