Translate footer and add eslint rule to avoid import mistake

Klimatbyran · Apr 8, 2024 · bca465c · bca465c
1 parent 21cafdb
commit bca465c
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 19 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -32,5 +32,11 @@ module.exports = {
     'import/no-extraneous-dependencies': 'off', // fixme revisit and refactor files when there's time to spare
     'react/react-in-jsx-scope': 'off',
     'react/jsx-one-expression-per-line': 'warn',
+    'no-restricted-imports': ['error', {
+      paths: [{
+        name: 'react-i18next',
+        message: 'Please import useTranslation from next-i18next.',
+      }],
+    }],
   },
 }
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import { useTranslation } from 'next-i18next'
 import { H5, Paragraph } from '../Typography'
 import { devices } from '../../utils/devices'
 import NewsletterSubscribe from './FooterNewsletterSubscribe'
@@ -78,43 +79,45 @@ const SocialLinksContainer = styled.div`
 `
 
 function Footer() {
+  const { t } = useTranslation(['common', 'footer'])
+
   return (
     <>
       <PageWrapper backgroundColor="black">
         <Foot>
           <NewsletterSubscribe />
-          <StyledH5>Med stöd från</StyledH5>
+          <StyledH5>{t('footer:supportedBy')}</StyledH5>
           <Supporters />
-          <StyledH5>Partners</StyledH5>
+          <StyledH5>{t('footer:partners')}</StyledH5>
           <Partners />
         </Foot>
       </PageWrapper>
       <PageWrapper backgroundColor="midGreen">
         <BottomParent>
           <TextContainer>
             <Paragraph>
-              Klimatkollen är en medborgarplattform som tillgängliggör klimatdata
+              {t('footer:tagline')}
             </Paragraph>
             <Copyright>
-              CC BY-SA -
-              {' '}
+              {t('footer:creative-commons.abbreviation')}
+              {' - '}
               <a
                 href="http://creativecommons.org/licenses/by-sa/4.0/"
                 target="_blank"
                 rel="noreferrer license"
               >
-                Attribution-ShareAlike 4.0 International license
+                {t('footer:creative-commons.license')}
               </a>
             </Copyright>
             <GHLink>
-              Klimatkollen är utvecklad med
+              {t('footer:developedWith')}
               {' '}
               <a
                 href="https://github.com/Klimatbyran/klimatkollen"
                 target="_blank"
                 rel="noreferrer"
               >
-                öppen källkod
+                {t('footer:open-source')}
               </a>
             </GHLink>
           </TextContainer>

diff --git a/components/Footer/FooterNewsletterForm.tsx b/components/Footer/FooterNewsletterForm.tsx
@@ -1,5 +1,6 @@
 import { useState, FC, useEffect } from 'react'
 import styled from 'styled-components'
+import { useTranslation } from 'next-i18next'
 import { EmailFormFields } from 'react-mailchimp-subscribe'
 import { H5, Paragraph } from '../Typography'
 import { devices } from '../../utils/devices'
@@ -102,6 +103,7 @@ const NewsletterForm: FC<Props> = ({ status, onValidated }) => {
   const [error, setError] = useState('')
   const [email, setEmail] = useState('')
   const [showThanks, setThanks] = useState(false)
+  const { t } = useTranslation()
 
   useEffect(() => {
     if (status === 'success' || status === 'error') {
@@ -129,24 +131,23 @@ const NewsletterForm: FC<Props> = ({ status, onValidated }) => {
 
   return (
     <Container>
-      <H5>Vill du få nyheter om Klimatkollen?</H5>
+      <H5>{t('footer:signup-form.title')}</H5>
       <HorizontalContainer>
         <div>
           <StyledParagraph>
-            Med vårt nyhetsbrev får du uppdateringar om hur det går med utsläppen och
-            omställningen direkt i din mejl.
+            {t('footer:signup-form.info')}
           </StyledParagraph>
         </div>
         <div>
           <StyledForm onSubmit={handleFormSubmit}>
             {showThanks ? (
-              <EmailValidation>Tack för ditt intresse!</EmailValidation>
+              <EmailValidation>{t('footer:signup-form.thanks')}</EmailValidation>
             ) : (
               <>
                 <StyledInput
                   onChange={(event) => setEmail(event.target.value)}
                   type="email"
-                  placeholder="Ange mailadress"
+                  placeholder={t('footer:signup-form.placeholder')}
                   value={email}
                   required
                   disabled={showThanks}

diff --git a/components/Footer/FooterSocialLinks.tsx b/components/Footer/FooterSocialLinks.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import { useTranslation } from 'next-i18next'
 import { devices } from '../../utils/devices'
 
 const ContactList = styled.ul`
@@ -50,13 +51,14 @@ export function SocialListItem({
 }
 
 function SocialList() {
+  const { t } = useTranslation()
   return (
     <ContactList>
       <SocialListItem
         icon="/icons/icon_mail_circle.svg"
         alt="Email icon"
         link="mailto:hej@klimatkollen.se"
-        text="Maila oss"
+        text={t('footer:email-us')}
       />
       <SocialListItem
         icon="/icons/some/x_circle.svg"
@@ -81,7 +83,7 @@ function SocialList() {
         </ContactLink>
       </ContactListItem>
       <SocialListItem
-        icon="/icons/some/discord.svg" // Assuming you have a Discord logo
+        icon="/icons/some/discord.svg"
         alt="Discord logo"
         link="https://discord.gg/FPX9yqYAmk"
         text="Discord"

diff --git a/next-i18next.config.js b/next-i18next.config.js
@@ -1,5 +1,7 @@
 const path = require('path')
 
+const DEV = process.env.NODE_ENV === 'development'
+
 /** @type {import('next-i18next').UserConfig} */
 module.exports = {
   i18n: {
@@ -8,5 +10,5 @@ module.exports = {
   },
   localePath: path.resolve('./public/locales'),
   // Allow reloading translations without restarting the dev server.
-  reloadOnPrerender: true,
+  reloadOnPrerender: DEV,
 }
diff --git a/pages/[dataset]/[dataView]/index.tsx b/pages/[dataset]/[dataView]/index.tsx
@@ -51,7 +51,7 @@ export const getServerSideProps: GetServerSideProps = async ({
     props: {
       municipalities,
       normalizedDataset,
-      ...await serverSideTranslations(locale as string, 'common'),
+      ...await serverSideTranslations(locale as string, ['common', 'footer']),
     },
   }
 

diff --git a/pages/[dataset]/index.tsx b/pages/[dataset]/index.tsx
@@ -25,7 +25,7 @@ export const getServerSideProps: GetServerSideProps = async ({ params, locale })
       shallow: true,
     },
     props: {
-      ...await serverSideTranslations(locale as string, 'common'),
+      ...await serverSideTranslations(locale as string, ['common', 'footer']),
     },
   }
 }

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -237,7 +237,7 @@ export const getServerSideProps: GetServerSideProps = async ({ res, locale }) =>
       permanent: true,
     },
     props: {
-      ...await serverSideTranslations(locale as string, ['common']),
+      ...await serverSideTranslations(locale as string, ['common', 'footer']),
     },
   }
 }

diff --git a/public/locales/sv/footer.json b/public/locales/sv/footer.json
@@ -0,0 +1,18 @@
+{
+  "creative-commons": {
+    "abbreviation": "CC BY-SA",
+    "license": "Attribution-ShareAlike 4.0 International license"
+  },
+  "developedWith": "Klimatkollen är utvecklad med",
+  "email-us": "Maila oss",
+  "open-source": "öppen källkod",
+  "partners": "Partners",
+  "signup-form": {
+    "info": "Med vårt nyhetsbrev får du uppdateringar om hur det går med utsläppen och omställningen direkt i din mejl.",
+    "placeholder": "Ange mailadress",
+    "thanks": "Tack för ditt intresse!",
+    "title": "Vill du få nyheter om Klimatkollen?"
+  },
+  "supportedBy": "Med stöd från",
+  "tagline": "Klimatkollen är en medborgarplattform som tillgängliggör klimatdata"
+}