feat: extract hardcoded branding values to env vars

app/awtis/[slug]/page.js

@@ -50,11 +50,11 @@ export async function generateMetadata(props) {
       type: 'website'
     },
     twitter: {
-      site: '@OrganisationKA',
+      site: `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`,
       card: 'summary_large_image',
       title,
       description,
-      creator: '@OrganisationKA',
+      creator: `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`,
       images: {
         url: `${apiUrl}${kuvetiFormat?.url}`,
         alt: `Photo de ${anAwtis.alias}`,

app/awtis/page.js

@@ -10,17 +10,21 @@ import Pajinasyon from '../../components/awtis/pajinasyon'
 import {jwennAwtisPajinasyon} from '../../lib/oki-api'
 import Footer from '../../components/footer'
 
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'
+const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
+
 export const metadata = {
-  title: 'PAWÒL-NU | Artistes',
+  title: `${siteName} | Artistes`,
   description: 'Liste des artistes ayant une ou plusieurs œuvres présentes sur le site.',
   openGraph: {
-    title: 'PAWÒL-NU | Artistes',
+    title: `${siteName} | Artistes`,
     description: 'Liste des artistes ayant une ou plusieurs œuvres présentes sur le site.',
-    url: 'https://pawol.nu/sipote',
+    url: `${siteUrl}/awtis`,
-    siteName: 'PAWÒL-NU. Paroles et traductions.',
+    siteName,
     images: [
       {
-        url: 'https://pawol.nu/logo-512x512.png',
+        url: `${siteUrl}/logo-512x512.png`,
         width: 512,
         height: 512
       }
@@ -29,14 +33,14 @@ export const metadata = {
     type: 'website'
   },
   twitter: {
-    site: '@OrganisationKA',
+    site: twitterHandle,
     card: 'summary_large_image',
-    title: 'PAWÒL-NU | Artistes',
+    title: `${siteName} | Artistes`,
     description: 'Liste des artistes ayant une ou plusieurs œuvres présentes sur le site.',
-    creator: '@OrganisationKA',
+    creator: twitterHandle,
     images: {
-      url: 'https://pawol.nu/logo-512x512.png',
+      url: `${siteUrl}/logo-512x512.png`,
-      alt: 'OKI Logo',
+      alt: `${siteName} Logo`,
     }
   }
 }

app/layout.js

@@ -3,24 +3,33 @@ import TopLoader from '../components/top-loader'
 import Navigasyon from '../components/navigasyon'
 import ThemeRegistry from './theme-registy'
 
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
+const siteDescription = process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.'
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'
+const orgName = process.env.NEXT_PUBLIC_ORG_NAME || 'OKI'
+const orgEmail = process.env.NEXT_PUBLIC_ORG_EMAIL || 'kontak@o-k-i.net'
+const orgLocation = process.env.NEXT_PUBLIC_ORG_LOCATION || 'Guadeloupe'
+const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
+const plausibleUrl = process.env.NEXT_PUBLIC_PLAUSIBLE_URL || null
+
 export const metadata = {
-  metadataBase: new URL('https://pawol.nu'),
+  metadataBase: new URL(siteUrl),
-  manifest: '/manifest.json',
+  manifest: '/manifest.webmanifest',
-  title: 'PAWÒL-NU. Paroles et traductions.',
+  title: siteName,
-  description: 'PAWÒL-NU a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.',
+  description: siteDescription,
-  author: 'OKI',
+  author: orgName,
   category: 'music',
-  creator: 'OKI',
+  creator: orgName,
-  publisher: 'OKI',
+  publisher: orgName,
-  applicationName: 'PAWÒL-NU. Paroles et traductions.',
+  applicationName: siteName,
   openGraph: {
-    title: 'PAWÒL-NU. Paroles et traductions.',
+    title: siteName,
-    description: 'PAWÒL-NU a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.',
+    description: siteDescription,
-    url: 'https://pawol.nu',
+    url: siteUrl,
-    siteName: 'PAWÒL-NU. Paroles et traductions.',
+    siteName,
     images: [
       {
-        url: 'https://pawol.nu/logo-512x512.png',
+        url: `${siteUrl}/logo-512x512.png`,
         width: 512,
         height: 512
       }
@@ -29,14 +38,14 @@ export const metadata = {
     type: 'website'
   },
   twitter: {
-    site: '@OrganisationKA',
+    site: twitterHandle,
     card: 'summary_large_image',
-    title: 'PAWÒL-NU. Paroles et traductions.',
+    title: siteName,
-    description: 'PAWÒL-NU a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.',
+    description: siteDescription,
-    creator: '@OrganisationKA',
+    creator: twitterHandle,
     images: {
-      url: 'https://pawol.nu/logo-512x512.png',
+      url: `${siteUrl}/logo-512x512.png`,
-      alt: 'PAWÒL-NU Logo',
+      alt: `${siteName} Logo`,
     },
   }
 }
@@ -44,30 +53,36 @@ export const metadata = {
 const jsonLd = {
   '@context': 'https://schema.org',
   '@type': 'Organization',
-  url: 'https://pawol.nu',
+  url: siteUrl,
-  email: 'kontak@o-k-i.net',
+  email: orgEmail,
-  keywords: ['OKI', 'PAWÒL-NU', 'Paroles', 'Pawol', 'Medukam', 'Wanni Wannan'],
+  keywords: [orgName, siteName, 'Paroles', 'Pawol'],
-  legalName: 'PAWÒL-NU',
+  legalName: siteName,
-  location: 'Guadeloupe'
+  location: orgLocation,
 }
 
 export default async function RootLayout({children}) {
+  const inner = (
+    <>
+      <TopLoader color='#ffeb3b' />
+      <ThemeRegistry>
+        <Navigasyon />
+        {children}
+      </ThemeRegistry>
+      <section>
+        <script
+          type='application/ld+json'
+          dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
+        />
+      </section>
+    </>
+  )
+
   return (
     <html lang='fr' suppressHydrationWarning>
       <body>
-        <PlausibleProvider src='https://plausible.io/js/pa-3sQidCSfiSOXQUh-4La0T.js'>
+        {plausibleUrl
-          <TopLoader color='#ffeb3b' />
+          ? <PlausibleProvider src={plausibleUrl}>{inner}</PlausibleProvider>
-          <ThemeRegistry>
+          : inner}
-            <Navigasyon />
-            {children}
-          </ThemeRegistry>
-          <section>
-            <script
-              type='application/ld+json'
-              dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
-            />
-          </section>
-        </PlausibleProvider>
       </body>
     </html>
   )

app/paroles/[slug]/page.js

@@ -53,11 +53,11 @@ export async function generateMetadata(props) {
       type: 'website'
     },
     twitter: {
-      site: '@OrganisationKA',
+      site: `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`,
       card: 'summary_large_image',
       title,
       description,
-      creator: '@OrganisationKA',
+      creator: `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`,
       images: {
         url: `${apiUrl}${kuvetiFormat?.url}`,
         alt: `Couverture ${title}`,

app/paroles/layout.js

@@ -4,17 +4,21 @@ import {jwennTeks} from '../../lib/oki-api'
 import TeksDrawer from '../../components/teks/teks-drawer'
 import Loading from './loading'
 
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'
+const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
+
 export const metadata = {
-  title: 'PAWÒL-NU. Paroles et traductions.',
+  title: siteName,
   description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
   openGraph: {
-    title: 'PAWÒL-NU. Paroles et traductions.',
+    title: siteName,
     description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
-    url: 'https://pawol.nu/paroles',
+    url: `${siteUrl}/paroles`,
-    siteName: 'PAWÒL-NU. Paroles et traductions.',
+    siteName,
     images: [
       {
-        url: 'https://pawol.nu/logo-512x512.png',
+        url: `${siteUrl}/logo-512x512.png`,
         width: 512,
         height: 512
       }
@@ -23,14 +27,14 @@ export const metadata = {
     type: 'website'
   },
   twitter: {
-    site: '@OrganisationKA',
+    site: twitterHandle,
     card: 'summary_large_image',
-    title: 'PAWÒL-NU. Paroles et traductions.',
+    title: siteName,
     description: 'Retrouvez les paroles et les traductions de vos chansons préférées.',
-    creator: '@OrganisationKA',
+    creator: twitterHandle,
     images: {
-      url: 'https://pawol.nu/logo-512x512.png',
+      url: `${siteUrl}/logo-512x512.png`,
-      alt: 'OKI Logo',
+      alt: `${siteName} Logo`,
     },
   }
 }

app/paroles/page.js

@@ -8,6 +8,8 @@ import Footer from '../../components/footer'
 
 const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
+const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
 
 async function jwennDone() {
   const denyeTeks = await jwennDenyeTeks()
@@ -29,23 +31,23 @@ export async function generateMetadata() {
   const description = `Derniers morceaux : ${songList}…`
 
   return {
-    title: 'PAWÒL-NU | Derniers morceaux',
+    title: `${siteName} | Derniers morceaux`,
     description,
     openGraph: {
-      title: 'PAWÒL-NU | Derniers morceaux',
+      title: `${siteName} | Derniers morceaux`,
       description,
       url: `${siteUrl}/paroles`,
-      siteName: 'PAWÒL-NU. Paroles et traductions.',
+      siteName,
       images: [{url: imageUrl, width: imageWidth, height: imageHeight}],
       locale: 'fr_FR',
       type: 'website',
     },
     twitter: {
-      site: '@OrganisationKA',
+      site: twitterHandle,
       card: 'summary_large_image',
-      title: 'PAWÒL-NU | Derniers morceaux',
+      title: `${siteName} | Derniers morceaux`,
       description,
-      creator: '@OrganisationKA',
+      creator: twitterHandle,
       images: {url: imageUrl, alt: 'Couverture du dernier morceau publié'},
     },
   }

app/robots.js

@@ -15,6 +15,6 @@ export default function robots() {
       userAgent: '*',
       allow: '/',
     },
-    sitemap: 'https://pawol.nu/sitemap.xml',
+    sitemap: `${process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'}/sitemap.xml`,
   }
 }

app/sipote/layout.js

@@ -1,14 +1,20 @@
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'
+const orgFullName = process.env.NEXT_PUBLIC_ORG_FULL_NAME || process.env.NEXT_PUBLIC_ORG_NAME || 'ORGANISATION KA INTERNATIONALE'
+const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
+const sipoteTitle = `${siteName} | Soutenir ${orgFullName} !`
+
 export const metadata = {
-  title: 'PAWÒL-NU | Soutenir ORGANISATION KA INTERNATIONALE !',
+  title: sipoteTitle,
   description: 'Vous pouvez nous soutenir via Liberapay ou PayPal',
   openGraph: {
-    title: 'PAWÒL-NU | Soutenir ORGANISATION KA INTERNATIONALE !',
+    title: sipoteTitle,
     description: 'Vous pouvez nous soutenir via Liberapay ou PayPal.',
-    url: 'https://pawol.nu/sipote',
+    url: `${siteUrl}/sipote`,
-    siteName: 'PAWÒL-NU | Paroles et traductions.',
+    siteName,
     images: [
       {
-        url: 'https://pawol.nu/sipote.png',
+        url: `${siteUrl}/sipote.png`,
         width: 500,
         height: 500
       }
@@ -17,14 +23,14 @@ export const metadata = {
     type: 'website'
   },
   twitter: {
-    site: '@OrganisationKA',
+    site: twitterHandle,
     card: 'summary_large_image',
-    title: 'PAWÒL-NU | Soutenir ORGANISATION KA INTERNATIONALE !',
+    title: sipoteTitle,
     description: 'Vous pouvez nous soutenir via Liberapay ou PayPal.',
-    creator: '@OrganisationKA',
+    creator: twitterHandle,
     images: {
-      url: 'https://pawol.nu/sipote.png',
+      url: `${siteUrl}/sipote.png`,
-      alt: 'Sipòte OKI',
+      alt: `Sipòte ${process.env.NEXT_PUBLIC_ORG_NAME || 'OKI'}`,
     },
   }
 }

components/head-layout.js

@@ -5,6 +5,9 @@ import Navigasyon from './navigasyon'
 
 const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
 const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
+const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
+const orgName = process.env.NEXT_PUBLIC_ORG_NAME || 'OKI'
+const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
 
 export default function HeadLayout({
   children,
@@ -20,38 +23,38 @@ export default function HeadLayout({
   return (
     <div>
       <Head prefix='website: https://ogp.me/ns/website#'>
-        <title>{`${title ? `PAWÒL-NU | ${title}` : 'PAWÒL-NU. Paroles et traductions.'}`}</title>
+        <title>{`${title ? `${siteName} | ${title}` : siteName}`}</title>
         <link rel='canonical' href={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
         <link rel='manifest' href='/manifest.json' />
         <link rel='icon' type='image/x-icon' sizes='32x32' href='/favicon.ico' />
         <link rel='apple-touch-icon' href='/favicon.ico' />
         <meta name='monetization' content='$ilp.uphold.com/q7MFmYWNpwnr' />
-        <meta name='application-name' content='PAWÒL-NU. Paroles et traductions.' />
+        <meta name='application-name' content={siteName} />
         <meta name='twitter:card' content='summary_large_image' />
         <meta name='twitter:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
-        <meta name='twitter:title' content={`${title ? title : 'PAWÒL-NU. Paroles et traductions.'}`} />
+        <meta name='twitter:title' content={`${title ? title : siteName}`} />
-        <meta name='twitter:description' content={`${summary ? summary : 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
+        <meta name='twitter:description' content={`${summary ? summary : process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
         <meta name='twitter:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-192x192.png`}`} />
-        <meta name='twitter:creator' content='@OrganisationKA' />
+        <meta name='twitter:creator' content={twitterHandle} />
-        <meta name='twitter:site' content='@OrganisationKA' />
+        <meta name='twitter:site' content={twitterHandle} />
         <meta name='theme-color' content='#303030' />
         <meta name='apple-mobile-web-app-status-bar' content='#303030' />
         <meta charSet='utf-8' />
-        <meta name='description' content={`${summary ? summary : 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
+        <meta name='description' content={`${summary ? summary : process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
-        <meta name='author' content='OKI' />
+        <meta name='author' content={orgName} />
         <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width' />
         <meta property='og:url' content={`${slug ? `${siteUrl}/${slug}` : siteUrl}`} />
         <meta property='og:type' content='website' />
-        <meta property='og:site_name' content={`${title ? title : 'PAWÒL-NU. Paroles et traductions.'}`} />
+        <meta property='og:site_name' content={`${title ? title : siteName}`} />
-        <meta property='og:title' content={`${title ? title : 'PAWÒL-NU. Paroles et traductions.'}`} />
+        <meta property='og:title' content={`${title ? title : siteName}`} />
-        <meta property='og:description' content={`${summary ? summary : 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
+        <meta property='og:description' content={`${summary ? summary : process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir les langues et les productions afro-diasporiques.'}`} />
         <meta property='og:locale' content='fr_FR' />
         <meta property='og:image' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-512x512.png`}`} />
         <meta property='og:image:secure_url' content={`${imageUrl ? `${apiUrl}${imageUrl}` : `${siteUrl}/logo-512x512.png`}`} />
         <meta property='og:image:type' content={imageMime ? imageMime : 'image/png'} />
         <meta property='og:image:width' content={imageWidth ? imageWidth : '512'} />
         <meta property='og:image:height' content={imageHeight ? imageHeight : '512'} />
-        <meta property='og:image:alt' content={`${title && imageUrl ? title : 'PAWÒL-NU Logo'} | PAWÒL-NU. Paroles et traductions.`} />
+        <meta property='og:image:alt' content={`${title && imageUrl ? title : `${siteName} Logo`} | ${siteName}`} />
       </Head>
       <Navigasyon selectedTab={tab} />
       {children}

components/rezo/rezo-dialog.js

@@ -70,7 +70,7 @@ export default function RezoDialog() {
         onClose={handleClose}
       >
         <BootstrapDialogTitle id='rézo-dialog' onClose={handleClose}>
-          OKI sur le <strong>Fédiverse</strong>
+          {process.env.NEXT_PUBLIC_ORG_NAME || 'OKI'} sur le <strong>Fédiverse</strong>
         </BootstrapDialogTitle>
         <DialogContent>
           <Box>

components/soutyen/presantasyon.js

@@ -56,7 +56,7 @@ export default function Presantasyon() {
           </ListItem>
         </List>
         <Typography paragraph='true' variant='subtitle1' component='div'>
-          Pour toute question, n’hésitez pas à nous contacter par courriel <Link href='mailto:kontak@o-k-i.net'><strong>kontak@o-k-i.net</strong></Link>.
+          Pour toute question, n’hésitez pas à nous contacter par courriel <Link href={`mailto:${process.env.NEXT_PUBLIC_ORG_EMAIL || 'kontak@o-k-i.net'}`}><strong>{process.env.NEXT_PUBLIC_ORG_EMAIL || 'kontak@o-k-i.net'}</strong></Link>.
         </Typography>
         <Typography paragraph='true' variant='subtitle1' component='div'>
           <strong>Merci par avance pour votre soutien 🥰</strong>

lib/emails/payment-succeeded.js

@@ -1,5 +1,8 @@
 const {template} = require('lodash')
 
+const ORG_NAME = process.env.NEXT_PUBLIC_ORG_NAME || 'OKI'
+const SITE_URL = process.env.SITE_URL || process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'
+
 const bodyTemplate = template(`
 <!DOCTYPE html>
 <html lang="fr">
@@ -65,18 +68,18 @@ const bodyTemplate = template(`
 
 <body>
   <div>
-    <img src="https://pawol.nu/logo-72x72.png" alt="Logo OKI">
+    <img src="${SITE_URL}/logo-72x72.png" alt="Logo ${ORG_NAME}">
   </div>
   <div class="title">
     <h2 style="margin:0; mso-line-height-rule:exactly;">Merci !</h2><br>
-    <h3 style="margin:0; mso-line-height-rule:exactly;">Votre soutien à OKI est important et nous vous en sommes très reconnaissant ❤️</h3>
+    <h3 style="margin:0; mso-line-height-rule:exactly;">Votre soutien à ${ORG_NAME} est important et nous vous en sommes très reconnaissant ❤️</h3>
   </div>
 
   <div class="container">
     <section>
       <h4>Une aide indispensable</h4>
       <p>
-        En effet, ce sont les dons qui nous permettent de maintenir tous les services liés à OKI.
+        En effet, ce sont les dons qui nous permettent de maintenir tous les services liés à ${ORG_NAME}.
       </p>
       <p>
         Toute contribution, aussi modeste soit-elle, nous permet d’augmenter nos capacités.<br />
@@ -94,7 +97,7 @@ const bodyTemplate = template(`
     <p>Pour toute question, n’hésitez pas à nous contacter en répondant à ce courriel.</p>
     <p>Merci infiniment pour votre soutien.</p>
 
-    <span><i><span class="forceWhiteLink"><button><a href="https://pawol.nu" target="blank">PAWÒL-NU</a></button></span></i></span>
+    <span><i><span class="forceWhiteLink"><button><a href="${SITE_URL}" target="blank">${ORG_NAME}</a></button></span></i></span>
   </footer>
 </html>
 `)