chore: partner content update (#427)

# Pull Request type Please check the type of change your PR introduces: - [ ] Bugfix - [ ] Feature - [ ] Code style update (formatting, renaming) - [ ] Refactoring (no functional changes, no API changes) - [ ] Build-related changes - [ ] Documentation content changes - [x] Other (please describe): Content ## Summary by CodeRabbit - **New Features** - Added a new section for supporting funders on the About page. - Updated partner links and images on the About page for improved visibility and layout. - **Bug Fixes** - Corrected links and text in the "about" section of the English and Spanish locales to ensure proper rendering and functionality. - **Style** - Adjusted styling for partner images to ensure responsive design across different screen sizes. - **Chores** - Updated dependencies to include `i18next-hmr` for hot module replacement in translation files. PR-URL: #427 Co-authored-by: Joe Karow <[email protected]>
weareinreach · May 23, 2024 · 72dd620 · 72dd620
2 parents f9395c1 + 5086318
commit 72dd620
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 51 deletions.
diff --git a/next-i18next.config.js b/next-i18next.config.js
@@ -3,6 +3,25 @@
 // @ts-check
 /* eslint-disable import/no-unused-modules */
 const path = require('path')
+
+const isBrowser = typeof window !== 'undefined'
+const plugins = () => {
+	/** @type {any[]} */
+	const pluginsToUse = []
+	if (process.env.NODE_ENV === 'development') {
+		if (isBrowser) {
+			import('i18next-hmr/plugin').then(({ HMRPlugin }) =>
+				pluginsToUse.push(new HMRPlugin({ webpack: { client: true } }))
+			)
+		} else {
+			import('i18next-hmr/plugin').then(({ HMRPlugin }) =>
+				pluginsToUse.push(new HMRPlugin({ webpack: { server: true } }))
+			)
+		}
+	}
+	return pluginsToUse
+}
+
 /**
  * @template {import('next-i18next').UserConfig} T
  * @type {import('next-i18next').UserConfig}
@@ -23,6 +42,7 @@ const config = {
 	react: { useSuspense: false },
 	joinArrays: '',
 	serializeConfig: false,
+	use: plugins(),
 	interpolation: {
 		skipOnVariables: false,
 		alwaysFormat: true,

diff --git a/next.config.mjs b/next.config.mjs
@@ -2,8 +2,12 @@
 // @ts-check
 import bundleAnalyze from '@next/bundle-analyzer'
 import { RelativeCiAgentWebpackPlugin } from '@relative-ci/agent'
+import { I18NextHMRPlugin } from 'i18next-hmr/webpack'
 import nextRoutes from 'nextjs-routes/config'
 
+import path from 'path'
+import { fileURLToPath } from 'url'
+
 import i18nConfig from './next-i18next.config.js'
 /**
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful for
@@ -12,13 +16,15 @@ import i18nConfig from './next-i18next.config.js'
 
 !process.env.SKIP_ENV_VALIDATION && (await import('./src/env/server.mjs'))
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 const withRoutes = nextRoutes({ outDir: 'src/types' })
 const withBundleAnalyzer = bundleAnalyze({
 	enabled: process.env.ANALYZE === 'true',
 })
 
 /** @type {import('next').NextConfig} */
-const config = {
+const nextConfig = {
 	i18n: i18nConfig.i18n,
 	reactStrictMode: true,
 	swcMinify: true,
@@ -41,17 +47,24 @@ const config = {
 		if (!dev && !isServer) {
 			config.plugins.push(new RelativeCiAgentWebpackPlugin())
 		}
+		if (dev && !isServer) {
+			config.plugins.push(
+				new I18NextHMRPlugin({
+					localesDir: path.resolve(__dirname, './public/locales'),
+				})
+			)
+		}
 		return config
 	},
 }
 /**
  * Wraps NextJS config with the Bundle Analyzer config.
  *
- * @param {typeof config} config
- * @returns {typeof config}
+ * @param {typeof nextConfig} config
+ * @returns {typeof nextConfig}
  */
 function defineNextConfig(config) {
 	return withBundleAnalyzer(withRoutes(config))
 }
 
-export default defineNextConfig(config)
+export default defineNextConfig(nextConfig)
diff --git a/package.json b/package.json
@@ -109,6 +109,7 @@
 		"eslint-plugin-storybook": "0.8.0",
 		"eslint-plugin-turbo": "1.13.3",
 		"husky": "9.0.11",
+		"i18next-hmr": "3.1.2",
 		"knip": "5.16.0",
 		"lint-staged": "15.2.4",
 		"listr2": "8.2.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/assets/partners/lush.png b/public/assets/partners/lush.png
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -1,6 +1,6 @@
 {
     "about": {
-        "campaign": "This trans-led digital campaign organized by <Link1>InReach</Link1> and <Link2>GLAAD</Link2> aims to showcase positive stories from the diverse trans masculine community and increase access to safe, verified resources through the <Link3>free InReach App</Link3>.",
+        "campaign": "This trans-led digital campaign organized by <Link href='https://www.inreach.org' target='_blank' rel='noopener noreferrer'>InReach</Link> and <Link href='https://www.glaad.org' target='_blank' rel='noopener noreferrer'>GLAAD</Link> aims to showcase positive stories from the diverse trans masculine community and increase access to safe, verified resources through the <Link href='https://app.inreach.org' target='_blank' rel='noopener noreferrer'>free InReach App</Link>.",
         "hollister": "<Title>And special thanks to <Link>The Hollister Confidence Fund</Link> for their support.</Title>",
         "stats": {
             "stat1-text": "of trans men and trans masculine youth have considered suicide.",
@@ -10,6 +10,7 @@
             "stat3-text": "of the U.S. trans population identify as trans men.",
             "stat3-title": "36%"
         },
+        "supporting-funders": "Supporting Funders",
         "supporting-partners": "Supporting Partners",
         "trans-people": "Trans people are everywhere. This campaign includes stories from trans men and trans masculine adults across the country."
     },
@@ -183,4 +184,4 @@
         "thank-you": "<strong>Thank you for sharing your story!</strong><br/>Assuming your submission meets our participant eligibility criteria, we will add your story to our campaign website shortly. In the meantime, be sure to follow @weareinreach on social media for updates and download our campaign social media toolkit to share the campaign.<br/><br/>If you have any questions, please email [email protected]."
     },
     "vercel": "Powered by Vercel"
-}
+}
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
@@ -1,6 +1,6 @@
 {
     "about": {
-        "campaign": "Esta campaña digital por personas trans organizada por <Link1>InReach</Link1> y <Link2>GLAAD</Link2> tiene como objetivo mostrar historias positivas de la comunidad trans masculina diversa y aumentar el acceso a recursos seguros y verificados a través de la <Link3>aplicación gratuita InReach</Link3>.",
+        "campaign": "Esta campaña digital por personas trans organizada por <Link href='https://www.inreach.org' target='_blank' rel='noopener noreferrer'>InReach</Link> y <Link href='https://www.glaad.org' target='_blank' rel='noopener noreferrer'>GLAAD</Link> tiene como objetivo mostrar historias positivas de la comunidad trans masculina diversa y aumentar el acceso a recursos seguros y verificados a través de la <Link href='https://app.inreach.org' target='_blank' rel='noopener noreferrer'>aplicación gratuita InReach</Link>.",
         "hollister": "<Title>Y un agradecimiento especial a <Link>The Hollister Confidence Fund</Link> por su apoyo.</Title>",
         "stats": {
             "stat1-text": "de hombres trans y jóvenes trans masculinos han considerado el suicidio.",
@@ -10,6 +10,7 @@
             "stat3-text": "de la población trans de EE. UU. se identifica como hombre trans.",
             "stat3-title": "36%"
         },
+        "supporting-funders": "Financiado por",
         "supporting-partners": "Socios que Apoyan",
         "trans-people": "Las personas trans están en todas partes. Esta campaña incluye historias de hombres trans y adultos transmasculinos por todo el país."
     },
@@ -183,4 +184,4 @@
         "thank-you": "<strong>¡Gracias por compartir tu historia!</strong>Suponiendo que lo que has enviado cumple con nuestros criterios de elegibilidad de participantes, agregaremos tu historia al sitio web de nuestra campaña en breve. Mientras tanto, asegúrate de seguir @weareinreach en las redes sociales para obtener actualizaciones y descargar nuestro kit de herramientas de redes sociales de la campaña para compartir la campaña.<br/><br/>Si tienes alguna pregunta, envía un correo electrónico a [email protected]."
     },
     "vercel": "Con la tecnología de Vercel"
-}
+}
diff --git a/src/data/partners.ts b/src/data/partners.ts
@@ -5,6 +5,7 @@ import Hollister from '~public/assets/partners/hollister.png'
 import ImmigrationEquality from '~public/assets/partners/immigrationEquality.png'
 import KYLP from '~public/assets/partners/kylp_t.png'
 import LambdaLegal from '~public/assets/partners/lambaLegal_t.png'
+import Lush from '~public/assets/partners/lush.png'
 import MTPC from '~public/assets/partners/mtpc.png'
 import NQAPIA from '~public/assets/partners/nqapia_t.png'
 import OasisLegal from '~public/assets/partners/oasisLegal.png'
@@ -14,14 +15,15 @@ import TAVA from '~public/assets/partners/tava.png'
 
 export const partnerImages = {
 	glaad: Glaad,
-	lambdaLegal: LambdaLegal,
-	sage: Sage,
-	immigrationEquality: ImmigrationEquality,
-	nqapia: NQAPIA,
 	hollister: Hollister,
+	immigrationEquality: ImmigrationEquality,
 	kylp: KYLP,
+	lambdaLegal: LambdaLegal,
+	lush: Lush,
 	mtpc: MTPC,
+	nqapia: NQAPIA,
 	oasisLegal: OasisLegal,
+	sage: Sage,
 	standWithTrans: StandWithTrans,
 	tava: TAVA,
 }

diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -17,6 +17,7 @@ import {
 import { type GetStaticProps } from 'next'
 import Head from 'next/head'
 import Image from 'next/image'
+import Link from 'next/link'
 import { Trans, useTranslation } from 'next-i18next'
 
 import { Banner } from '~/components/Banner/Banner'
@@ -74,13 +75,14 @@ const useStyles = createStyles((theme) => ({
 		justifyItems: 'center',
 	},
 	partnerHollister: {
-		width: rem(600),
+		maxWidth: '80vw',
+		width: rem(400),
 		[theme.fn.smallerThan('md')]: {
-			width: rem(400),
-		},
-		[theme.fn.smallerThan('xs')]: {
-			width: rem(200),
+			width: rem(300),
 		},
+		// [theme.fn.smallerThan('xs')]: {
+		// 	width: rem(200),
+		// },
 	},
 }))
 const AboutPage = () => {
@@ -111,9 +113,8 @@ const AboutPage = () => {
 						<Trans
 							i18nKey='about.campaign'
 							components={{
-								Link1: <a href='https://www.inreach.org' target='_blank' rel='noopener noreferrer'></a>,
-								Link2: <a href='https://www.glaad.org' target='_blank' rel='noopener noreferrer'></a>,
-								Link3: <a href='https://app.inreach.org' target='_blank' rel='noopener noreferrer'></a>,
+								// @ts-expect-error props are passed in from json string
+								Link: <Link />,
 							}}
 						/>
 					</Text>
@@ -133,11 +134,13 @@ const AboutPage = () => {
 				<Title order={2} mb={40}>
 					{t('about.supporting-partners')}
 				</Title>
-				<Grid grow mx='auto' gutter={20}>
-					{partners &&
-						partners.map(({ id, href, name, order, tag }) => {
+				<Grid grow mx='auto' gutter={20} mb={40}>
+					{Boolean(partners?.length) &&
+						partners?.map(({ id, href, name, tag }) => {
 							const image = getPartnerImage(tag)
-							if (!image) return null
+							if (!image) {
+								return null
+							}
 							return (
 								<Grid.Col
 									key={id}
@@ -157,33 +160,43 @@ const AboutPage = () => {
 						})}
 				</Grid>
 
-				<Trans
-					i18nKey='about.hollister'
-					components={{
-						Title: (
-							<Text my={40} ta='center' mx={{ lg: 0, base: 10, xs: 50, [em(450)]: 60 }} fw={500} fz={20}>
-								.
-							</Text>
-						),
-						Link: (
-							<a
-								href='https://www.hollisterco.com/shop/us/purpose'
-								target='_blank'
-								rel='noopener noreferrer'
-							></a>
-						),
-					}}
-				/>
-				<Center>
-					<AspectRatio
-						ratio={partnerImages.hollister.width / partnerImages.hollister.height}
-						className={classes.partnerHollister}
-					>
-						<a href='https://www.hollisterco.com/shop/us/purpose' target='_blank' rel='noopener noreferrer'>
-							<Image src={partnerImages.hollister} alt='The Hollister Confidence Fund' fill />
-						</a>
-					</AspectRatio>
-				</Center>
+				<Title order={2} mb={40}>
+					{t('about.supporting-funders')}
+				</Title>
+				<Grid grow mx='auto' gutter={20} w='100%'>
+					<Grid.Col span={6}>
+						<Center inline w='100%' h='100%'>
+							<AspectRatio
+								ratio={partnerImages.hollister.width / partnerImages.hollister.height}
+								className={classes.partnerHollister}
+							>
+								<a
+									href='https://www.hollisterco.com/shop/us/purpose'
+									target='_blank'
+									rel='noopener noreferrer'
+								>
+									<Image src={partnerImages.hollister} alt='The Hollister Confidence Fund' fill />
+								</a>
+							</AspectRatio>
+						</Center>
+					</Grid.Col>
+					<Grid.Col span={6}>
+						<Center inline w='100%' h='100%'>
+							<AspectRatio
+								ratio={partnerImages.lush.width / partnerImages.lush.height}
+								className={classes.partnerHollister}
+							>
+								<a
+									href='https://www.lush.com/us/en_us/a/how-lush-gives-back'
+									target='_blank'
+									rel='noopener noreferrer'
+								>
+									<Image src={partnerImages.lush} alt='LUSH Retail' fill />
+								</a>
+							</AspectRatio>
+						</Center>
+					</Grid.Col>
+				</Grid>
 			</Flex>
 		</>
 	)