initial translation support

I should've divided this into multiple commits but oh well. This is just initial as there are still parts that needs to be done. Particularly user generated content needs to be translated somehow. See issue #45 for more info

gatsby-config.js

@@ -21,6 +21,33 @@ module.exports = {
         path: `${__dirname}/src/images`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/src/locales`,
+        name: `locale`,
+      },
+    },
+    {
+      resolve: `gatsby-plugin-react-i18next`,
+      options: {
+        localeJsonSourceName: `locale`, // name given to `gatsby-source-filesystem` plugin.
+        languages: [`en`, `no`],
+        defaultLanguage: `no`,
+        siteUrl: `https://uiogaming.no`,
+        // if you are using trailingSlash gatsby config include it here, as well (the default is 'always')
+        trailingSlash: "always",
+        // you can pass any i18next options
+        i18nextOptions: {
+          interpolation: {
+            escapeValue: false, // not needed for react as it escapes by default
+          },
+          keySeparator: false,
+          nsSeparator: false,
+        },
+        pages: [],
+      },
+    },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     {

package.json

@@ -6,19 +6,27 @@
   "author": "LBlend <leanderfurumo@protonmail.com",
   "dependencies": {
     "@sanity/block-content-to-react": "^3.0.0",
+    "country-flag-icons": "^1.5.9",
     "gatsby": "^5.13.3",
     "gatsby-plugin-image": "^3.13.1",
     "gatsby-plugin-manifest": "^5.13.1",
     "gatsby-plugin-react-helmet": "^6.13.1",
+    "gatsby-plugin-react-i18next": "^3.0.1",
     "gatsby-plugin-sharp": "^5.13.1",
     "gatsby-source-filesystem": "^5.13.1",
     "gatsby-source-sanity": "^7.0.4",
     "gatsby-transformer-sharp": "^5.13.1",
+    "i18next": "^23.10.1",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "i18next-http-backend": "^2.5.0",
     "moment-timezone": "^0.5.33",
+    "path": "^0.12.7",
+    "path-browserify": "^1.0.1",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
+    "react-i18next": "^14.1.0",
     "react-icons": "^5.0.1",
     "react-pannellum": "^0.2.14"
   },

src/components/items/back.js

@@ -1,16 +1,23 @@
 import * as React from "react"
 import * as styles from "./back.module.css"
 
-import { FaArrowLeft } from "react-icons/fa"
+import { graphql } from "gatsby"
 
-const Back = () => (
-  <button
-    className={`${styles.container} ${styles.button}`}
-    onClick={() => window.history.back()}
-  >
-    <FaArrowLeft />
-    <p>Tilbake</p>
-  </button>
-)
+import { FaArrowLeft } from "react-icons/fa"
+import { useTranslation } from "gatsby-plugin-react-i18next"
+
+const Back = () => {
+  const { t } = useTranslation()
+
+  return (
+    <button
+      className={`${styles.container} ${styles.button}`}
+      onClick={() => window.history.back()}
+    >
+      <FaArrowLeft />
+      <p>{t("back")}</p>
+    </button>
+  )
+}
 
 export default Back

src/components/items/languageSelector.js

@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as styles from "./languageSelector.module.css"
+
+import { NO, GB } from "country-flag-icons/react/3x2"
+import { useTranslation, useI18next } from "gatsby-plugin-react-i18next"
+
+const LanguageSelector = () => {
+  const { languages, changeLanguage } = useI18next()
+  const { t, i18n } = useTranslation()
+
+  if (i18n.language === "no") {
+    return (
+      <a
+        className={styles.button}
+        href="#"
+        onClick={e => {
+          e.preventDefault()
+          changeLanguage("en")
+        }}
+      >
+        <GB className={styles.flag} title={t("altText.flag")} />
+        English
+      </a>
+    )
+  } else {
+    return (
+      <a
+        className={styles.button}
+        href="#"
+        onClick={e => {
+          e.preventDefault()
+          changeLanguage("no")
+        }}
+      >
+        <NO className={styles.flag} title={t("altText.flag")} />
+        Norsk
+      </a>
+    )
+  }
+}
+
+export default LanguageSelector

src/components/items/languageSelector.module.css

@@ -0,0 +1,24 @@
+.button {
+  display: flex;
+  gap: 0.25rem;
+
+  position: fixed;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 0;
+
+  background: pink;
+  color: black;
+  border: 1px solid black;
+  font-size: 1.1rem;
+  border-radius: 0.5rem;
+  padding-inline: 0.5em;
+}
+.button:hover {
+  background: #ff7b7b;
+  color: white;
+}
+
+.flag {
+  width: 1.2rem;
+}

src/components/items/memberButton.js

@@ -1,14 +1,20 @@
 import * as React from "react"
 import * as styles from "./memberButton.module.css"
 
-const MemberButton = () => (
-  <a
-    href="https://innmelding.uiogaming.no"
-    target="_blank"
-    rel="noreferrer"
-    className={styles.button}
-  >
-    Bli medlem!
-  </a>
-)
+import { useTranslation } from "gatsby-plugin-react-i18next"
+
+const MemberButton = () => {
+  const { t } = useTranslation()
+
+  return (
+    <a
+      href="https://innmelding.uiogaming.no"
+      target="_blank"
+      rel="noreferrer"
+      className={styles.button}
+    >
+      {t("join")}
+    </a>
+  )
+}
 export default MemberButton

src/components/sections/about.js

@@ -3,6 +3,7 @@ import * as styles from "./about.module.css"
 
 import { graphql, useStaticQuery } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
+import { useTranslation } from "gatsby-plugin-react-i18next"
 
 import DiscordButton from "../items/discordButton"
 import MemberButton from "../items/memberButton"
@@ -22,31 +23,26 @@ const About = () => {
     }
   `)
 
+  const { t } = useTranslation()
+
   return (
     <section>
       <div className={styles.container}>
         <div className="no-mobile">
           <GatsbyImage
             image={data.aboutImage.childImageSharp.gatsbyImageData}
-            alt="Medlemmer som spiller"
+            alt={t("altText.about")}
           />
-          <p className="photo-credit">Foto: 장태민, Studentenes Fotoklubb</p>
+          <p className="photo-credit">
+            {t("photo")}: 장태민, Studentenes Fotoklubb
+          </p>
         </div>
         <div>
-          <h2 className="left-section-header">Hvem er vi?</h2>
+          <h2 className="left-section-header">{t("about.title")}</h2>
           <div>
-            <p>
-              UiO Gaming er en forening med hovedfokus på å danne et
-              inkluderende fellesskap rundt videospill og e-sport. Hos oss er
-              det enkelt å skaffe seg venner, ettersom alle har felles
-              interesser. Vi arrangerer ukentlige spillkvelder og fysiske
-              sosiale arrangementer, som for eksempel brettspillkvelder og
-              sosiale sammenkomster. Vår hovedkanal er en aktiv Discord-server
-              hvor man kan møte nye folk med felles interesser og game med andre
-              studenter.
-            </p>
+            <p>{t("about.text")}</p>
             <div className={styles.joinSection}>
-              <h3>Interessert?</h3>
+              <h3>{t("about.interested")}</h3>
               <div className={styles.buttons}>
                 <MemberButton />
                 <DiscordButton />

src/components/sections/boardMembers.js

@@ -3,6 +3,7 @@ import * as styles from "./boardMembers.module.css"
 
 import { graphql, useStaticQuery } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
+import { useTranslation } from "gatsby-plugin-react-i18next"
 
 const BoardMembers = () => {
   const data = useStaticQuery(graphql`
@@ -30,9 +31,11 @@ const BoardMembers = () => {
     }
   `)
 
+  const { t } = useTranslation()
+
   return (
     <section>
-      <h2>Styret</h2>
+      <h2>{t("boardMembers.title")}</h2>
       <div className={styles.container}>
         {data.allSanityAuthor.edges.map(({ node: member }) => (
           <article key={member._id} className={styles.card}>
@@ -43,7 +46,7 @@ const BoardMembers = () => {
                 <GatsbyImage
                   image={member.image.asset.gatsbyImageData}
                   className="circular"
-                  alt={"Bilde av styemedlem, " + member.name}
+                  alt={`${t("altText.boardMember")}, ` + member.name}
                 />
               </div>
               <div className={styles.info}>
@@ -57,7 +60,7 @@ const BoardMembers = () => {
                 {member.contactInfo ? (
                   member.contactInfo
                 ) : (
-                  <i>Ingen kontaktinfo</i>
+                  <i>{t("boardMembers.noContact")}</i>
                 )}
               </p>
             </div>

src/components/sections/contact.js

@@ -1,6 +1,8 @@
 import * as React from "react"
 import * as styles from "./contact.module.css"
 
+import { useTranslation } from "gatsby-plugin-react-i18next"
+
 import {
   FaYoutube,
   FaTwitch,
@@ -11,66 +13,82 @@ import {
   FaInstagram,
 } from "react-icons/fa"
 
-const Contact = () => (
-  <section>
-    <h2 className="section-center-header">Finn oss</h2>
-    <div className={styles.container}>
-      <div className={styles.item}>
-        <FaAt />
-        <a
-          href="mailto:styret@uiogaming.no"
-          target="_blank"
-          rel="noreferrer"
-        >
-          E-post
-        </a>
+const Contact = () => {
+  const { t } = useTranslation()
+
+  return (
+    <section>
+      <h2 className="section-center-header">{t("contact.title")}</h2>
+      <div className={styles.container}>
+        <div className={styles.item}>
+          <FaAt />
+          <a href="mailto:styret@uiogaming.no" target="_blank" rel="noreferrer">
+            {t("contact.email")}
+          </a>
+        </div>
+        <div className={styles.item}>
+          <FaDiscord />
+          <a
+            href="https://discord.uiogaming.no"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Discord
+          </a>
+        </div>
+        <div className={styles.item}>
+          <FaFacebook />
+          <a
+            href="https://facebook.uiogaming.no"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Facebook
+          </a>
+        </div>
+        <div className={styles.item}>
+          <FaInstagram />
+          <a
+            href="https://instagram.uiogaming.no"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Instagram
+          </a>
+        </div>
+        <div className={styles.item}>
+          <FaYoutube />
+          <a
+            href="https://youtube.uiogaming.no"
+            target="_blank"
+            rel="noreferrer"
+          >
+            YouTube
+          </a>
+        </div>
+        <div className={styles.item}>
+          <FaTwitch />
+          <a
+            href="https://twitch.uiogaming.no"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Twitch
+          </a>
+        </div>
+        <div className={styles.item}>
+          <FaGithub />
+          <a
+            href="https://github.uiogaming.no"
+            target="_blank"
+            rel="noreferrer"
+          >
+            GitHub
+          </a>
+        </div>
       </div>
-      <div className={styles.item}>
-        <FaDiscord />
-        <a href="https://discord.uiogaming.no" target="_blank" rel="noreferrer">
-          Discord
-        </a>
-      </div>
-      <div className={styles.item}>
-        <FaFacebook />
-        <a
-          href="https://facebook.uiogaming.no"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Facebook
-        </a>
-      </div>
-      <div className={styles.item}>
-        <FaInstagram />
-        <a
-          href="https://instagram.uiogaming.no"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Instagram
-        </a>
-      </div>
-      <div className={styles.item}>
-        <FaYoutube />
-        <a href="https://youtube.uiogaming.no" target="_blank" rel="noreferrer">
-          YouTube
-        </a>
-      </div>
-      <div className={styles.item}>
-        <FaTwitch />
-        <a href="https://twitch.uiogaming.no" target="_blank" rel="noreferrer">
-          Twitch
-        </a>
-      </div>
-      <div className={styles.item}>
-        <FaGithub />
-        <a href="https://github.uiogaming.no" target="_blank" rel="noreferrer">
-          GitHub
-        </a>
-      </div>
-    </div>
-  </section>
-)
+    </section>
+  )
+}
 
 export default Contact

src/components/sections/events.js

@@ -1,8 +1,9 @@
 import * as React from "react"
 import * as styles from "./events.module.css"
 
-import { Link, graphql, useStaticQuery } from "gatsby"
+import { graphql, useStaticQuery } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
+import { Link, useTranslation } from "gatsby-plugin-react-i18next"
 import moment from "moment-timezone"
 import "moment/locale/nb"
 
@@ -37,7 +38,9 @@ const Events = () => {
     }
   `)
 
-  moment.locale("nb_NO")
+  const { t, i18n } = useTranslation()
+
+  moment.locale(i18n.language)
   const currentDate = moment().utc()
 
   const filteredEvents = data.allSanityEvent.edges
@@ -49,7 +52,7 @@ const Events = () => {
   const mapEvents = events => {
     if (events.length !== 0) {
       return events.map(({ node: event }) => (
-        <Link key={event._id} to={"event/" + event.slug.current}>
+        <Link key={event._id} to={"/event/" + event.slug.current}>
           <article className={styles.card}>
             <h3>{event.title}</h3>
             <div>
@@ -62,7 +65,7 @@ const Events = () => {
                 <p>
                   {moment(event.date)
                     .tz("Europe/Oslo")
-                    .format("dddd Do MMMM, [kl.] H:mm")}
+                    .format("dddd Do MMMM, H:mm")}
                 </p>
               </div>
             </div>
@@ -72,7 +75,9 @@ const Events = () => {
               ) : (
                 <>
                   {event.description.substring(0, 120)}...{" "}
-                  <span className={styles.readMore}>Les mer</span>
+                  <span className={styles.readMore}>
+                    {t("events.readMore")}
+                  </span>
                 </>
               )}
             </p>
@@ -82,7 +87,7 @@ const Events = () => {
     } else {
       return (
         <h3 className={styles.noEvents}>
-          Ingen kommende arrangementer
+          {t("events.noEvents")}
           <br />
           <br />
           (っ˘̩╭╮˘̩)っ
@@ -94,15 +99,17 @@ const Events = () => {
   return (
     <section className={styles.stretch}>
       <div className={styles.container}>
-        <h2 className={styles.sectionHeader}>Hva skjer?</h2>
+        <h2 className={styles.sectionHeader}>{t("events.title")}</h2>
         <div className={styles.events}>{mapEvents(filteredEvents)}</div>
         <div className={"no-mobile " + styles.image}>
           <GatsbyImage
             image={data.eventImage.childImageSharp.gatsbyImageData}
-            alt="Medlemmer spiller brettspill"
+            alt={t("altText.events")}
           />
           <div>
-            <p className="photo-credit">Foto: 장태민, Studentenes Fotoklubb</p>
+            <p className="photo-credit">
+              {t("photo")}: 장태민, Studentenes Fotoklubb
+            </p>
           </div>
         </div>
       </div>

src/components/sections/footer.js

@@ -3,6 +3,7 @@ import * as styles from "./footer.module.css"
 
 import { graphql, useStaticQuery } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
+import { useTranslation } from "gatsby-plugin-react-i18next"
 
 const Footer = () => {
   const data = useStaticQuery(graphql`
@@ -19,6 +20,8 @@ const Footer = () => {
     }
   `)
 
+  const { t } = useTranslation()
+
   return (
     <footer>
       <div className={styles.footer}>
@@ -32,12 +35,12 @@ const Footer = () => {
           <ul className="remove-bullets">
             <li>
               <a href="https://vedtekter.uiogaming.no" rel="noreferrer">
-                Vedtekter
+                {t("footer.statutes")}
               </a>
             </li>
             <li>
               <a href="https://innmelding.uiogaming.no" rel="noreferrer">
-                Bli medlem
+                {t("join")}
               </a>
             </li>
             <li>
@@ -45,19 +48,19 @@ const Footer = () => {
                 href="https://github.com/UiO-Gaming/uiogaming-website/"
                 rel="noreferrer"
               >
-                Kildekode
+                {t("footer.sourcecode")}
               </a>
             </li>
             <li>
               <a href="https://admin.uiogaming.no" rel="noreferrer">
-                Adminområdet
+                {t("footer.admin")}
               </a>
             </li>
           </ul>
         </div>
 
         <div className={styles.orgInfo}>
-          <p>Orgnr.: 925 719 153</p>
+          <p>{t("footer.orgnum")}: 925 719 153</p>
           <address>Slemdalsveien 15, 0369 Oslo</address>
         </div>
       </div>

src/components/sections/header.js

@@ -3,6 +3,7 @@ import * as styles from "./header.module.css"
 
 import { graphql, useStaticQuery } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
+import { useTranslation } from "gatsby-plugin-react-i18next"
 
 const Header = () => {
   const data = useStaticQuery(graphql`
@@ -19,6 +20,8 @@ const Header = () => {
     }
   `)
 
+  const { t } = useTranslation()
+
   return (
     <header id="hjem" className={styles.container}>
       <GatsbyImage
@@ -27,10 +30,7 @@ const Header = () => {
       />
 
       <h1>UiO Gaming</h1>
-      <p>
-        En hobbyforening som ønsker å skape et sosialt miljø rundt gaming og
-        e-sport på UiO
-      </p>
+      <p>{t("header.text")}</p>
     </header>
   )
 }

src/components/sections/office.js

@@ -2,29 +2,30 @@ import * as React from "react"
 import * as styles from "./office.module.css"
 
 import ReactPannellum from "react-pannellum"
+import { useTranslation } from "gatsby-plugin-react-i18next"
 
 const config = {
   autoLoad: true,
 }
 
-const Office = () => (
-  <section>
-    <h2>Kontoret</h2>
-    <div className={styles.container}>
-      <p>
-        Vi har et foreningskontor på Chateau Neuf der man kan bruke utstyret
-        vårt og henge med andre medlemmer!
-      </p>
+const Office = () => {
+  const { t } = useTranslation()
 
-      <ReactPannellum
-        id="1"
-        sceneId="office"
-        config={config}
-        imageSource="/3D_office_2023_09_15.jpg"
-        style={{ width: "100%", aspectRatio: "1 / 1", background: "#000000" }} // yes, apparantly applying a css class to the component doesn't work
-      />
-    </div>
-  </section>
-)
+  return (
+    <section>
+      <h2>{t("office.title")}</h2>
+      <div className={styles.container}>
+        <p>{t("office.text")}</p>
+        <ReactPannellum
+          id="1"
+          sceneId="office"
+          config={config}
+          imageSource="/3D_office_2023_09_15.jpg"
+          style={{ width: "100%", aspectRatio: "1 / 1", background: "#000000" }} // yes, apparantly applying a css class to the component doesn't work
+        />
+      </div>
+    </section>
+  )
+}
 
 export default Office

src/locales/en/404.json

@@ -0,0 +1,5 @@
+{
+  "title": "404: Page not found",
+  "text": "Our journey ended here. Please don't leave us",
+  "back": "Back to safe grounds"
+}

src/locales/en/altText.json

@@ -0,0 +1,6 @@
+{
+  "altText.about": "2 members playing games together",
+  "altText.events": "Members playing board games",
+  "altText.boardMember": "Picture of board member",
+  "altText.flag": "Flag of Norway"
+}

src/locales/en/common.json

@@ -0,0 +1,5 @@
+{
+  "back": "Back",
+  "join": "Become a member",
+  "photo": "Photo"
+}

src/locales/en/index.json

@@ -0,0 +1,19 @@
+{
+  "header.text": "A student organisation that aims to create an inclusive environment around gaming and e-sports for the students at UiO",
+  "about.title": "Who are we?",
+  "about.text": "UiO Gaming is a student organisation with a primary focus on creating an inclusive environment around gaming and e-sports. We wish to establish a community where it’s easy to make new friends and cultivate your gaming interests. Each week we host both casual and more intense gamenights, as well as physical events such as board game nights and other social gatherings. Our main channel is a Discord server where you can meet new people with common interests and play games with other students.",
+  "about.interested": "Interested?",
+  "events.title": "Upcoming events",
+  "events.readMore": "Read more",
+  "events.noEvents": "No upcoming events",
+  "office.title": "The office",
+  "office.text": "We have an office at Chateau Neuf where you can use our gear and hang out with other members!",
+  "boardMembers.title": "The board",
+  "boardMembers.noContact": "No contact info",
+  "contact.title": "Contact us",
+  "contact.email": "E-mail",
+  "footer.statutes": "Statutes (norwegian)",
+  "footer.sourcecode": "Source code",
+  "footer.admin": "Admin page",
+  "footer.orgnum": "OrgNum"
+}

src/locales/no/404.json

@@ -0,0 +1,5 @@
+{
+  "title": "404: Siden finnes ikke",
+  "text": "Du har nådd en blindvei, men ikke på Blindern",
+  "back": "Tilbake til hjemmesiden"
+}

src/locales/no/altText.json

@@ -0,0 +1,6 @@
+{
+  "altText.about": "2 medlemmer som spiller sammen",
+  "altText.events": "Medlemmer som spiller brettspill",
+  "altText.boardMember": "Bilde av styremedlem",
+  "altText.flag": "Britisk flagg"
+}

src/locales/no/common.json

@@ -0,0 +1,5 @@
+{
+  "back": "Tilbake",
+  "join": "Bli medlem",
+  "photo": "Foto"
+}

src/locales/no/index.json

@@ -0,0 +1,19 @@
+{
+  "header.text": "En hobbyforening som ønsker å skape et sosialt miljø rundt gaming og e-sport på UiO",
+  "about.title": "Hvem er vi?",
+  "about.text": "UiO Gaming er en forening med hovedfokus på å danne et inkluderende fellesskap rundt videospill og e-sport. Hos oss er det enkelt å skaffe seg venner, ettersom alle har felles interesser. Vi arrangerer ukentlige spillkvelder og fysiske sosiale arrangementer, som for eksempel brettspillkvelder og sosiale sammenkomster. Vår hovedkanal er en aktiv Discord-server hvor man kan møte nye folk med felles interesser og game med andre studenter.",
+  "about.interested": "Interessert?",
+  "events.title": "Hva skjer?",
+  "events.readMore": "Les mer",
+  "events.noEvents": "Ingen kommende arrangementer",
+  "office.title": "Kontoret",
+  "office.text": "Vi har et foreningskontor på Chateau Neuf der man kan bruke utstyret vårt og henge med andre medlemmer!",
+  "boardMembers.title": "Styret",
+  "boardMembers.noContact": "Ingen kontaktinfo",
+  "contact.title": "Finn oss",
+  "contact.email": "E-mail",
+  "footer.statutes": "Vedtekter",
+  "footer.sourcecode": "Kildekode",
+  "footer.admin": "Adminområdet",
+  "footer.orgnum": "Org.Nr."
+}

src/pages/404.js

@@ -1,27 +1,48 @@
 import * as React from "react"
 import * as styles from "./404.module.css"
 
-import { Link } from "gatsby"
+import { graphql } from "gatsby"
+import { Link, useTranslation } from "gatsby-plugin-react-i18next"
 
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 
-const NotFoundPage = () => (
-  <Layout>
-    <Seo title="404: Not found" />
-    <div className={styles.container}>
-      <h1 className={styles.centeredText}>404: Siden finnes ikke</h1>
-      <p className={styles.centeredText}>
-        Du har nådd en blindvei, men ikke på Blindern{" "}
-        <span role="img" aria-label="eyes">
-          👀
-        </span>
-      </p>
-      <Link to="/" className={`${styles.centeredText} ${styles.homeLink}`}>
-        Tilbake til hjemmesiden
-      </Link>
-    </div>
-  </Layout>
-)
+const NotFoundPage = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Layout>
+      <Seo title="404: Not found" />
+      <div className={styles.container}>
+        <h1 className={styles.centeredText}>{t("title")}</h1>
+        <p className={styles.centeredText}>
+          {t("text")}{" "}
+          <span role="img" aria-label="eyes">
+            👀
+          </span>
+        </p>
+        <Link to="/" className={`${styles.centeredText} ${styles.homeLink}`}>
+          {t("back")}
+        </Link>
+      </div>
+    </Layout>
+  )
+}
 
 export default NotFoundPage
+
+export const query = graphql`
+  query ($language: String!) {
+    locales: allLocale(
+      filter: { ns: { in: ["404"] }, language: { eq: $language } }
+    ) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`

src/pages/eventPost.js

@@ -3,13 +3,14 @@ import * as styles from "./eventPost.module.css"
 
 import { graphql } from "gatsby"
 import moment from "moment-timezone"
+import { useTranslation } from "gatsby-plugin-react-i18next"
 
 import Seo from "../components/seo"
 import Back from "../components/items/back"
 import { FaMapMarkerAlt, FaCalendarAlt } from "react-icons/fa"
 
 export const query = graphql`
-  query($id: String) {
+  query ($id: String, $language: String!) {
     sanityEvent(_id: { eq: $id }) {
       title
       location
@@ -19,15 +20,27 @@ export const query = graphql`
       }
       description
     }
+    locales: allLocale(
+      filter: { ns: { in: ["common"] }, language: { eq: $language } }
+    ) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
   }
 `
 
-moment.locale("nb_NO")
-
 const Event = ({ data }) => {
+  const { t, i18n } = useTranslation()
+  moment.locale(i18n.language)
+
   const time = moment(data.sanityEvent.date)
     .tz("Europe/Oslo")
-    .format("dddd Do MMMM, [kl.] H:mm")
+    .format("dddd Do MMMM, H:mm")
 
   return (
     <>

src/pages/index.js

@@ -1,8 +1,10 @@
 import * as React from "react"
+import { graphql } from "gatsby"
 import "../index.css"
 
 import Layout from "../components/layout"
 import Seo from "../components/seo"
+import LanguageSelector from "../components/items/languageSelector"
 
 import Header from "../components/sections/header"
 import About from "../components/sections/about"
@@ -13,16 +15,38 @@ import Contact from "../components/sections/contact"
 import Footer from "../components/sections/footer"
 
 const IndexPage = () => (
-  <Layout>
-    <Seo />
-    <Header />
-    <About />
-    <Events />
-    <Office />
-    <BoardMembers />
-    <Contact />
-    <Footer />
-  </Layout>
+  <>
+    <Layout>
+      <Seo />
+      <Header />
+      <About />
+      <Events />
+      <Office />
+      <BoardMembers />
+      <Contact />
+      <Footer />
+    </Layout>
+    <LanguageSelector />
+  </>
 )
 
 export default IndexPage
+
+export const query = graphql`
+  query ($language: String!) {
+    locales: allLocale(
+      filter: {
+        ns: { in: ["common", "index", "altText"] }
+        language: { eq: $language }
+      }
+    ) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`