chore: add og images to customer stories pages

apps/www/_customers/epsilon3.mdx

@@ -6,8 +6,9 @@ author_title: Supabase
 author_url: https://github.com/kiwicopple
 author_image_url: https://avatars2.githubusercontent.com/u/10214025?s=400&u=c6775be2ae667e2acae3ccd347fed62bb3f5b3e7&v=4
 authorURL: https://github.com/kiwicopple
-logo: /images/case-studies/logos/epsilon3.png
-logo_inverse: /images/case-studies/logos/light/epsilon3.png
+logo: /images/customers/logos/epsilon3.png
+logo_inverse: /images/customers/logos/light/epsilon3.png
+og_image: /images/customers/og/epsilon3.jpg
 tags:
   - supabase
 date: '2023-02-14'

apps/www/_customers/happyteams.mdx

@@ -7,8 +7,9 @@ author_title: Supabase
 author_url: https://github.com/kiwicopple
 author_image_url: https://avatars2.githubusercontent.com/u/10214025?s=400&u=c6775be2ae667e2acae3ccd347fed62bb3f5b3e7&v=4
 authorURL: https://github.com/kiwicopple
-logo: /images/case-studies/logos/happyteams.png
-logo_inverse: /images/case-studies/logos/light/happyteams.png
+logo: /images/customers/logos/happyteams.png
+logo_inverse: /images/customers/logos/light/happyteams.png
+og_image: /images/customers/og/happyteams.jpg
 tags:
   - supabase
 date: '2023-02-16'

apps/www/_customers/mobbin.mdx

@@ -7,8 +7,9 @@ author_title: Supabase
 author_url: https://github.com/kiwicopple
 author_image_url: https://avatars2.githubusercontent.com/u/10214025?s=400&u=c6775be2ae667e2acae3ccd347fed62bb3f5b3e7&v=4
 authorURL: https://github.com/kiwicopple
-logo: /images/case-studies/logos/mobbin.png
-logo_inverse: /images/case-studies/logos/light/mobbin.png
+logo: /images/customers/logos/mobbin.png
+logo_inverse: /images/customers/logos/light/mobbin.png
+og_image: /images/customers/og/mobbin.jpg
 tags:
   - supabase
 date: '2023-02-14'

apps/www/_customers/replenysh.mdx

@@ -6,8 +6,9 @@ author_title: Supabase
 author_url: https://github.com/kiwicopple
 author_image_url: https://avatars2.githubusercontent.com/u/10214025?s=400&u=c6775be2ae667e2acae3ccd347fed62bb3f5b3e7&v=4
 authorURL: https://github.com/kiwicopple
-logo: /images/case-studies/logos/replenysh.png
-logo_inverse: /images/case-studies/logos/light/replenysh.png
+logo: /images/customers/logos/replenysh.png
+logo_inverse: /images/customers/logos/light/replenysh.png
+og_image: /images/customers/og/replenysh.jpg
 tags:
   - supabase
 date: '2023-02-14'

apps/www/_customers/xendit.mdx

@@ -6,8 +6,9 @@ author_title: Supabase
 author_url: https://github.com/kiwicopple
 author_image_url: https://avatars2.githubusercontent.com/u/10214025?s=400&u=c6775be2ae667e2acae3ccd347fed62bb3f5b3e7&v=4
 authorURL: https://github.com/kiwicopple
-logo: /images/case-studies/logos/xendit.png
-logo_inverse: /images/case-studies/logos/light/xendit.png
+logo: /images/customers/logos/xendit.png
+logo_inverse: /images/customers/logos/light/xendit.png
+og_image: /images/customers/og/xendit.jpg
 company_url: https://xendit.co
 tags:
   - supabase

apps/www/components/Nav/Developers.tsx

@@ -62,23 +62,23 @@ const Developers = () => {
         <div className="m-3 mx-6">
           <p className="p">Latest announcements</p>
           <ul className="mt-6 space-y-3 pb-6">
-            {AnnouncementsData.map((caseStudy: any, idx: number) => (
+            {AnnouncementsData.map((announcement: any, idx: number) => (
               <li className="flow-root" key={`flyout_case_${idx}`}>
-                <Link href={caseStudy.url}>
+                <Link href={announcement.url}>
                   <a className="dark:hover:bg-dark-700 flex items-center rounded-lg border p-3 transition duration-150 ease-in-out hover:bg-gray-100">
                     <div className="relative hidden h-20 w-32 flex-shrink-0 overflow-auto rounded-md sm:block">
                       <Image
-                        src={`${basePath}${caseStudy.imgUrl}`}
-                        alt="caseStudyThumb"
+                        src={`${basePath}${announcement.imgUrl}`}
+                        alt={announcement.title}
                         layout="fill"
                         objectFit="cover"
                       />
                     </div>
                     <div className="min-w-0 flex-1 sm:ml-4">
                       <h4 className="text-scale-1200 text-normal mb-0 text-base">
-                        {caseStudy.title}
+                        {announcement.title}
                       </h4>
-                      <p className="p text-sm">{caseStudy.description}</p>
+                      <p className="p text-sm">{announcement.description}</p>
                     </div>
                   </a>
                 </Link>

apps/www/components/Nav/Product.tsx

@@ -50,18 +50,18 @@ const Product = () => {
         <div className="m-3 mx-6 flex flex-col items-start">
           <p className="p">Latest customer stories</p>
           <ul className="mt-6 space-y-3">
-            {CustomerStoriesData.map((caseStudy: any, idx: number) => {
+            {CustomerStoriesData.map((customer: any, idx: number) => {
               if (idx > 1) {
                 return null
               }
               return (
                 <li className="flow-root" key={`flyout_case_${idx}`}>
-                  <Link href={caseStudy.url}>
+                  <Link href={customer.url}>
                     <a className="dark:hover:bg-dark-700 flex items-center rounded-lg border p-3 transition duration-150 ease-in-out hover:bg-gray-100">
                       <div className="relative hidden mx-2 h-12 w-32 flex-shrink-0 overflow-auto rounded-md sm:block">
                         <Image
-                          src={`${basePath}/${caseStudy.imgUrl}`}
-                          alt="caseStudyThumb"
+                          src={`${basePath}/${customer.imgUrl}`}
+                          alt={customer.title}
                           layout="fill"
                           objectFit="contain"
                           className="dark:brightness-200 dark:contrast-0 dark:filter"
@@ -69,9 +69,9 @@ const Product = () => {
                       </div>
                       <div className="min-w-0 flex-1 sm:ml-4">
                         <h4 className="text-scale-1200 text-normal mb-0 text-base">
-                          {caseStudy.title}
+                          {customer.title}
                         </h4>
-                        <p className="p text-sm !mb-0">{caseStudy.description}</p>
+                        <p className="p text-sm !mb-0">{customer.description}</p>
                       </div>
                     </a>
                   </Link>

apps/www/data/CustomerStories.json

@@ -3,8 +3,8 @@
     "type": "Customer Story",
     "title": "HappyTeams unlocks better performance and reduces cost with Supabase.",
     "description": "How a bootstrapped startup migrated from Heroku to Supabase in 30 minutes and never looked back.",
-    "imgUrl": "images/case-studies/logos/happyteams.png",
-    "logoUrl": "images/case-studies/logos/happyteams.png",
+    "imgUrl": "images/customers/logos/happyteams.png",
+    "logoUrl": "images/customers/logos/happyteams.png",
     "organization": "HappyTeams",
     "url": "/customers/happyteams",
     "path": "/customers/happyteams",
@@ -20,8 +20,8 @@
     "type": "Customer Story",
     "title": "Xendit use Supabase and create a full solution shipped to production in less than one week.",
     "description": "As a payment processor, Xendit are responsible for verifying that all transactions are legal.",
-    "imgUrl": "images/case-studies/logos/xendit.png",
-    "logoUrl": "images/case-studies/logos/xendit.png",
+    "imgUrl": "images/customers/logos/xendit.png",
+    "logoUrl": "images/customers/logos/xendit.png",
     "organization": "Xendit",
     "url": "/customers/xendit",
     "path": "/customers/xendit",
@@ -37,8 +37,8 @@
     "type": "Customer Story",
     "title": "Replenysh uses Supabase to implement OTP in less than 24 hours.",
     "description": "With Supabase, Replenysh gets a slick auth experience, reduces DevOps overhead, and continues to scale with Postgres.",
-    "imgUrl": "images/case-studies/logos/replenysh.png",
-    "logoUrl": "images/case-studies/logos/replenysh.png",
+    "imgUrl": "images/customers/logos/replenysh.png",
+    "logoUrl": "images/customers/logos/replenysh.png",
     "organization": "Replenysh",
     "url": "/customers/replenysh",
     "path": "/customers/replenysh",

apps/www/pages/customers/[slug].tsx

@@ -68,7 +68,7 @@ function CaseStudyPage(props: any) {
         openGraph={{
           title: props.blog.title,
           description: props.blog.description,
-          url: `https://supabase.io/blog/${props.blog.slug}`,
+          url: `https://supabase.io/customers/${props.blog.slug}`,
           type: 'article',
           article: {
             //
@@ -78,9 +78,7 @@ function CaseStudyPage(props: any) {
           },
           images: [
             {
-              url: `https://supabase.io${basePath}/images/blog/${
-                props.blog.image ? props.blog.image : props.blog.thumb
-              }`,
+              url: props.blog.og_image ?? `${basePath}/images/customers/og/customer-stories.jpg`,
             },
           ],
         }}

apps/www/pages/customers/index.tsx

@@ -37,6 +37,13 @@ function CustomerStoriesPage(props: any) {
   const [blogs, setBlogs] = useState(props.blogs)
   const { basePath } = useRouter()
 
+  const META = {
+    TITLE: 'Customer Stories | Supabase',
+    IMAGE: `${basePath}/images/customers/og/customer-stories.jpg`,
+    DESCRIPTION:
+      'See how Supabase empowers companies of all sizes to accelerate their growth and streamline their work.',
+  }
+
   useEffect(() => {
     // Update the document title using the browser API
     setBlogs(
@@ -61,6 +68,10 @@ function CustomerStoriesPage(props: any) {
   return (
     <>
       <Head>
+        <title>{META['TITLE']}</title>
+        <meta name="description" content={META['DESCRIPTION']} />
+        <meta property="og:image" content={META['IMAGE']} />
+        <meta name="twitter:image" content={META['IMAGE']} />
         <link
           rel="alternate"
           type="application/rss+xml"
@@ -69,8 +80,18 @@ function CustomerStoriesPage(props: any) {
         />
       </Head>
       <NextSeo
-        title="Customer stories"
-        description="See how Supabase empowers companies of all sizes to accelerate their growth and streamline their work."
+        title={META['TITLE']}
+        description={META['DESCRIPTION']}
+        openGraph={{
+          title: META['TITLE'],
+          description: META['DESCRIPTION'],
+          url: `${basePath}/customers`,
+          images: [
+            {
+              url: META['IMAGE'],
+            },
+          ],
+        }}
       />
       <DefaultLayout>
         <div className="relative z-0 dark:bg-scale-200 bg-scale-200 overflow-hidden">