Merge pull request #274 from jaredh159/og-image

site/app/pages/docs/ios-17-cant-delete-messages-images.md

@@ -1,5 +1,6 @@
 ---
 title: In iOS 17 Parents Can't Delete `#images` GIF search iMessage App
+image: /gif-images-og-image.jpg
 description:
   'Sadly, iOS 17 removes a vital parental control: the ability for parents to disable
   animated GIF searching through the #images iMessage app. This exposes children to

storybook/src/site/GifAppInMessagesOgImage.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Logo } from '@shared/components';
+import BgImage from '../static/messages-screenshot.png';
+
+const GifAppMessagesOgImage: React.FC = () => (
+  <section
+    style={{
+      backgroundImage: `url(${BgImage})`,
+      backgroundPosition: `-50px center`,
+      backgroundSize: `100%`,
+      /* textShadow: `0 15px 30px rgba(0,0,0,0.61), 0 5px 15px rgba(0,0,0,0.68)`, */
+    }}
+    className="w-[1200px] h-[627px] relative flex flex-col justify-between items-end p-12"
+  >
+    <div className="w-full h-full absolute left-0 top-0 bg-gradient-to-b from-white via-transparent to-white" />
+    <div className="relative text-6xl text-right flex flex-col">
+      <span className="font-medium">Can't delete</span>
+      <span className="text-[80px] font-black mt-4">#images app</span>
+      <span className="mt-8 font-medium">from Messages in</span>
+      <span className="mt-8 font-bold text-8xl">iOS 17</span>
+    </div>
+    <Logo className="relative" iconOnly size={100} />
+  </section>
+);
+
+export default GifAppMessagesOgImage;

storybook/src/site/OgImage.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta } from '@storybook/react';
 import SiteOgImage from './SiteOgImage';
 import LockdownGuideOgImage from './LockdownGuideOgImage';
 import FiveThingsYouForgotOgImage from './FiveThingsYouForgotOgImage';
+import GifAppMessagesOgImage from './GifAppInMessagesOgImage';
 
 export default {
   title: 'Site/OgImages', // eslint-disable-line
@@ -26,3 +27,4 @@ export default {
 export const Site = () => <SiteOgImage />;
 export const LockdownGuide = () => <LockdownGuideOgImage />;
 export const FiveThingsYouForgot = () => <FiveThingsYouForgotOgImage />;
+export const GifAppMessages = () => <GifAppMessagesOgImage />;