Update sponsors page open graph meta data (#719)

mastodon · Jun 19, 2024 · 00c8e0f · 00c8e0f
1 parent 3dc300b
commit 00c8e0f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,26 +1,30 @@
 import Head from "next/head"
+import { StaticImageData } from "next/image"
+import { useRouter } from "next/router"
+
 import Footer from "./Footer"
 import Header from "./Header"
 
 import { locales, defaultLocale } from "../data/locales"
-import { useRouter } from "next/router"
-
-import previewImage from "../public/preview.png"
+import defaultPreviewImage from "../public/preview.png"
 
 const BASE_URL = "https://joinmastodon.org"
 
 /** Default layout component */
 export const Layout = ({
   children,
   transparentHeader,
+  previewImage,
 }: {
   children: React.ReactNode
   transparentHeader?: boolean
+  previewImage?: StaticImageData
 }) => {
   const router = useRouter()
 
   const currentLocale = router.locale
   const currentPath = router.asPath
+  const metaPreviewImage = previewImage || defaultPreviewImage;
 
   return (
     <div className="mx-auto max-w-site px-6 lg:px-16">
@@ -36,7 +40,7 @@ export const Layout = ({
       <Footer />
 
       <Head>
-        <meta property="og:image" content={`${BASE_URL}${previewImage.src}`} />
+        <meta property="og:image" content={`${BASE_URL}${metaPreviewImage.src}`} />
         <meta property="twitter:card" content="summary_large_image" />
 
         {locales

diff --git a/locales/en.json b/locales/en.json
@@ -179,7 +179,7 @@
   "sponsors.how_we_use_donations.body": "Donations go towards software development, paying essential contributors like web developers, mobile app developers, and designers. Your donations also support legal and marketing expenses to advocate for and raise awareness about the social web and Mastodon. Additionally, we operate the two largest Mastodon servers, maintained through financial and in-kind contributions. For details, take a look at our latest annual report.",
   "sponsors.how_we_use_donations.title": "How we use donations",
   "sponsors.learn_more": "Learn more",
-  "sponsors.page_description": "View people and companies who crowdfund the development of the decentralized, open-source social media platform Mastodon.",
+  "sponsors.page_description": "Donate or become a sponsor and help us build the social web for everyone!",
   "sponsors.page_title": "Donate to Mastodon",
   "sponsors.sponsorship.statement": "Sponsorship does not equal influence. Mastodon is fully independent.",
   "sponsors.support_us.body": "We’re rebuilding social media so everyone can build healthy communities locally, connect globally, and own their online presence. As a nonprofit we lead development of Mastodon. We’re part of a vast network of organizations building on social web technology. Together, we’re retaking the digital town square for the people. Help us build the social web for everyone.",

diff --git a/pages/sponsors.tsx b/pages/sponsors.tsx
@@ -17,6 +17,8 @@ import MastodonWithLaptopIllustration from "../public/illustrations/mastodon_wit
 import MasotodonFediverseIllustration from "../public/illustrations/mastodon_fediverse.png"
 import MastodonsCheeringIllustration from "../public/illustrations/mastodons_cheering.png"
 
+import previewImage from "../public/sponsors_preview.png"
+
 const DonateCard = ({ title, copy, cta, cta_link}) => (
   <div className="flex flex-col basis-full items-center text-center md:items-start md:text-left">
     <h3 className="h5 mb-5 after:block after:h-1 after:rounded-md after:w-32 after:mt-2 after:bg-blurple-500">
@@ -38,7 +40,7 @@ const Emphasis = ({ children }) => (
 function Sponsors() {
   const intl = useIntl()
   return (
-    <Layout>
+    <Layout previewImage={previewImage}>
       <Hero>
         <h1 className="h2 xl:mt-8 mb-5 lg:col-start-2">
           <FormattedMessage id="sponsors.hero.title" defaultMessage="Reimagining online discourse" />
@@ -401,15 +403,15 @@ function Sponsors() {
           content={intl.formatMessage({
             id: "sponsors.page_description",
             defaultMessage:
-              "View people and companies who crowdfund the development of the decentralized, open-source social media platform Mastodon.",
+              "Donate or become a sponsor and help us build the social web for everyone!",
           })}
         />
         <meta
           property="og:description"
           content={intl.formatMessage({
             id: "sponsors.page_description",
             defaultMessage:
-              "View people and companies who crowdfund the development of the decentralized, open-source social media platform Mastodon.",
+              "Donate or become a sponsor and help us build the social web for everyone!",
           })}
         />
       </Head>

diff --git a/public/sponsors_preview.png b/public/sponsors_preview.png