Move <head> meta to index.tsx so they are generated server side and a…

…vailable immediately to browsers
Flaburgan · Aug 18, 2024 · 6d1755d · 6d1755d
1 parent 41e8b91
commit 6d1755d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 22 deletions.
diff --git a/components/App.tsx b/components/App.tsx
@@ -19,27 +19,9 @@ export default function App() {
   return <I18nProvider i18n={i18n}>
     <Head>
       <title>disCO2very - {t`Order items to discover their CO2 footprint!`}</title>
-      <meta charSet="utf-8" />
-      <meta name="viewport" content="width=device-width,initial-scale=1"/>
-      <meta name="description" content="disCO2very is a free game to discover the orders of magnitude of the CO2 footprint" />
-      <meta name="theme-color" content="#23272c" />
-      <meta property="og:url" content="https://disco2very.org" />
-      <meta property="og:title" content="disCO2very" />
-      <meta property="og:site_name" content="disCO2very" />
-      <meta property="og:type" content="website" />
-      <meta property="og:locale" content={locale} />
-      <meta property="og:description" content="disCO2very is a free game to discover the orders of magnitude of the CO2 footprint" />
-      <meta property="og:image" content="https://disco2very.org/images/logo-app.png" />
-      <meta property="og:image:type" content="image/png" />
-      <meta property="og:image:height" content="128" />
-      <meta property="og:image:width" content="128" />
-      <meta property="og:image:alt" content="The disCO2very logo, featuring a molecule of CO2." />
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:creator" content="Flaburgan" />
-      <link rel="icon" href="/favicon.png" />
-      <link rel="apple-touch-icon" href="/appimages/logo-app.png" />
-      <link rel="manifest" href="/manifest.json" />
-      <link rel="canonical" href="https://www.disco2very.org/" />
+      <meta name="description" content={t`disCO2very is a free game to discover the orders of magnitude of the CO2 footprint`} />
+      <meta property="og:description" content={t`disCO2very is a free game to discover the orders of magnitude of the CO2 footprint`} />
+      <meta property="og:image:alt" content={t`The disCO2very logo, featuring a molecule of CO2.`} />
     </Head>
     <Game />
   </I18nProvider>

diff --git a/locales/en/messages.po b/locales/en/messages.po
@@ -33,6 +33,7 @@ msgstr "{email} is not a valid email address."
 msgid "A real pack of cards?"
 msgstr "A real pack of cards?"
 
+#: components/board.tsx:128
 #: components/categories-selector.tsx:55
 msgid "Back"
 msgstr "Back"
@@ -55,6 +56,11 @@ msgstr "Congratulations!"
 msgid "Copied!"
 msgstr "Copied!"
 
+#: components/App.tsx:22
+#: components/App.tsx:23
+msgid "disCO2very is a free game to discover the orders of magnitude of the CO2 footprint"
+msgstr "disCO2very is a free game to discover the orders of magnitude of the CO2 footprint"
+
 #: components/explanation-dialog.tsx:71
 msgid "End of life:"
 msgstr "End of life:"
@@ -137,6 +143,10 @@ msgstr "Share your score"
 msgid "Start game"
 msgstr "Start game"
 
+#: components/App.tsx:24
+msgid "The disCO2very logo, featuring a molecule of CO2."
+msgstr "The disCO2very logo, featuring a molecule of CO2."
+
 #: components/instructions.tsx:64
 msgid "The numbers are coming from the <0>Ademe</0> platform <1>Impact CO<2>2</2></1>. Thanks to them for their amazing work!"
 msgstr "The numbers are coming from the <0>Ademe</0> platform <1>Impact CO<2>2</2></1>. Thanks to them for their amazing work!"

diff --git a/locales/fr/messages.po b/locales/fr/messages.po
@@ -33,6 +33,7 @@ msgstr "{email} n'est pas une adresse e-mail valide."
 msgid "A real pack of cards?"
 msgstr "Un vrai jeu de cartes ?"
 
+#: components/board.tsx:128
 #: components/categories-selector.tsx:55
 msgid "Back"
 msgstr "Retour"
@@ -55,6 +56,11 @@ msgstr "Félicitations !"
 msgid "Copied!"
 msgstr "Copié !"
 
+#: components/App.tsx:22
+#: components/App.tsx:23
+msgid "disCO2very is a free game to discover the orders of magnitude of the CO2 footprint"
+msgstr "disCO2very est un jeu libre pour découvrir les ordres de grandeur de l'empreinte carbone"
+
 #: components/explanation-dialog.tsx:71
 msgid "End of life:"
 msgstr "Fin de vie :"
@@ -137,6 +143,10 @@ msgstr "Partagez votre score"
 msgid "Start game"
 msgstr "Démarrer la partie"
 
+#: components/App.tsx:24
+msgid "The disCO2very logo, featuring a molecule of CO2."
+msgstr "Le logo disCO2very, avec une molécule de CO2."
+
 #: components/instructions.tsx:64
 msgid "The numbers are coming from the <0>Ademe</0> platform <1>Impact CO<2>2</2></1>. Thanks to them for their amazing work!"
 msgstr "Les chiffres viennent de la plateforme de l'<0>Ademe</0> <1>Impact CO<2>2</2></1>. Merci à eux pour leur travail incroyable !"

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,8 +1,34 @@
 import React from "react";
 import dynamic from "next/dynamic";
+import Head from "next/head";
 
 const App = dynamic(() => import("../components/App"), { ssr: false });
 
 export default function Index() {
-  return <App />;
+  return <>
+    <Head>
+      <title>disCO2very - Order items to discover their CO2 footprint!</title>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width,initial-scale=1"/>
+      <meta name="description" content="disCO2very is a free game to discover the orders of magnitude of the CO2 footprint" />
+      <meta name="theme-color" content="#23272c" />
+      <meta property="og:url" content="https://disco2very.org" />
+      <meta property="og:title" content="disCO2very" />
+      <meta property="og:site_name" content="disCO2very" />
+      <meta property="og:type" content="website" />
+      <meta property="og:description" content="disCO2very is a free game to discover the orders of magnitude of the CO2 footprint" />
+      <meta property="og:image" content="https://disco2very.org/images/logo-app.png" />
+      <meta property="og:image:type" content="image/png" />
+      <meta property="og:image:height" content="128" />
+      <meta property="og:image:width" content="128" />
+      <meta property="og:image:alt" content="The disCO2very logo, featuring a molecule of CO2." />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:creator" content="Fla" />
+      <link rel="icon" href="/favicon.png" />
+      <link rel="apple-touch-icon" href="/images/logo-app.png" />
+      <link rel="manifest" href="/manifest.json" />
+      <link rel="canonical" href="https://www.disco2very.org/" />
+    </Head>
+    <App />
+  </>
 }