Merge pull request #51 from UiO-Gaming/fix/translation-rewrite

fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple fuck apple

messages/en.json

@@ -6,6 +6,11 @@
     "complaint": "Complaint",
     "documents": "Documents"
   },
+  "metaTags": {
+    "time": "Time",
+    "location": "Location",
+    "description": "A student organisation that aims to create an inclusive environment around gaming and e-sports for the students at UiO"
+  },
   "buttons": {
     "back": "back",
     "flagImageAlt": "Norwegian flag"

messages/no.json

@@ -6,6 +6,11 @@
     "complaint": "Klage",
     "documents": "Dokumenter"
   },
+  "metaTags": {
+    "time": "Tid",
+    "location": "Sted",
+    "description": "En hobbyforening som ønsker skape et sosialt miljø rundt gaming og e-sport på UiO!"
+  },
   "buttons": {
     "back": "tilbake",
     "flagImageAlt": "Britisk flagg"

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next"
 import createNextIntlPlugin from "next-intl/plugin"
 
-const withNextIntl = createNextIntlPlugin()
+const withNextIntl = createNextIntlPlugin("./src/i18n.ts")
 
 const nextConfig: NextConfig = {
   images: {

src/app/[locale]/blog/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import Layout from "@/app/layout"
+import Layout from "@/app/[locale]/layout"
 
 import Footer from "@/components/page-sections/footer"
 import { generateSeoMetadata, generateSeoViewport } from "@/components/seo"
@@ -9,6 +9,7 @@ import { getBlogPost } from "@/lib/sanity"
 
 import { PortableText, PortableTextComponents } from "@portabletext/react"
 import { Metadata, Viewport } from "next"
+import { notFound } from "next/navigation"
 import { getLocale } from "next-intl/server"
 import Image from "next/image"
 
@@ -17,6 +18,7 @@ import * as styles from "./page.module.css"
 interface BlogPageParams {
   params: Promise<{
     slug: string
+    locale: string
   }>
 }
 
@@ -39,12 +41,6 @@ export async function generateMetadata({
   const { slug } = await params
   const data = await getBlogPost(slug)
 
-  if (!data) {
-    return {
-      title: "Blog Post Not Found | UiO Gaming",
-    }
-  }
-
   return generateSeoMetadata({
     title: data.title,
     description: data.excerpt,
@@ -103,9 +99,7 @@ const BlogPost = async ({ params }: BlogPageParams) => {
 
   const data = await getBlogPost(slug)
 
-  if (!data) {
-    throw new Error("Blog post not found")
-  }
+  if (!data) return notFound()
 
   const createdAt = new Date(data._createdAt).toLocaleDateString(locale, {
     day: "numeric",
@@ -136,7 +130,7 @@ const BlogPost = async ({ params }: BlogPageParams) => {
               {data.author?.image && (
                 <Image
                   className="circular"
-                  alt={`Forfatteren av innlegget, ${data.author.name}`}
+                  alt={data.author.name}
                   src={urlFor(data.author.image).width(50).height(50).url()}
                   width={50}
                   height={50}

src/app/[locale]/event/[slug]/page.tsx

@@ -1,10 +1,13 @@
+import Layout from "@/app/[locale]/layout"
+
 import { generateSeoMetadata, generateSeoViewport } from "@/components/seo"
 import Back from "@/components/ui/back"
 
 import { getEvent } from "@/lib/sanity"
 
 import { Metadata, Viewport } from "next"
-import { getLocale } from "next-intl/server"
+import { notFound } from "next/navigation"
+import { getLocale, getTranslations } from "next-intl/server"
 import { FaCalendarAlt, FaMapMarkerAlt } from "react-icons/fa"
 
 import * as styles from "./page.module.css"
@@ -12,6 +15,7 @@ import * as styles from "./page.module.css"
 interface EventPageParams {
   params: Promise<{
     slug: string
+    locale: string
   }>
 }
 
@@ -21,11 +25,8 @@ export async function generateMetadata({
   const { slug } = await params
   const data = await getEvent(slug)
 
-  if (!data) {
-    return {
-      title: "Event Not Found | UiO Gaming",
-    }
-  }
+  const locale = await getLocale()
+  const t = await getTranslations("metaTags")
 
   const formatDate = (dateString: string) => {
     const date = new Date(dateString)
@@ -38,12 +39,12 @@ export async function generateMetadata({
       minute: "2-digit",
       timeZone: "Europe/Oslo",
     }
-    return date.toLocaleString("no", options)
+    return date.toLocaleString(locale, options)
   }
 
   return generateSeoMetadata({
     title: data.title,
-    description: `Tid: ${formatDate(data.date)}\nSted: ${data.location}\n\n${data.description}`,
+    description: `${t("time")}: ${formatDate(data.date)}\n${t("location")}: ${data.location}\n\n${data.description}`,
   })
 }
 
@@ -57,9 +58,7 @@ const Event = async ({ params }: EventPageParams) => {
 
   const data = await getEvent(slug)
 
-  if (!data) {
-    throw new Error("Event not found")
-  }
+  if (!data) return notFound()
 
   const formatDate = (dateString: string) => {
     const date = new Date(dateString)
@@ -77,21 +76,23 @@ const Event = async ({ params }: EventPageParams) => {
   }
 
   return (
-    <div className={styles.container}>
-      <Back />
-      <div className={styles.event}>
-        <h1>{data.title}</h1>
-        <div className={styles.metadata}>
-          <FaMapMarkerAlt />
-          <p>{data.location}</p>
+    <Layout>
+      <div className={styles.container}>
+        <Back />
+        <div className={styles.event}>
+          <h1>{data.title}</h1>
+          <div className={styles.metadata}>
+            <FaMapMarkerAlt />
+            <p>{data.location}</p>
+          </div>
+          <div className={styles.metadata}>
+            <FaCalendarAlt />
+            <p>{formatDate(data.date)}</p>
+          </div>
+          <p className={styles.description}>{data.description}</p>
         </div>
-        <div className={styles.metadata}>
-          <FaCalendarAlt />
-          <p>{formatDate(data.date)}</p>
-        </div>
-        <p className={styles.description}>{data.description}</p>
       </div>
-    </div>
+    </Layout>
   )
 }
 

src/app/[locale]/layout.tsx

@@ -0,0 +1,32 @@
+// app/[locale]/layout.tsx
+import { NextIntlClientProvider } from "next-intl"
+import { getLocale } from "next-intl/server"
+
+import LanguageSelector from "@components/ui/languageSelector"
+import UmamiAnalytics from "@/components/umamiAnalytics"
+import { getAnalyticsConfig } from "@/lib/analyticsConfig"
+
+export default async function LocaleLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const locale = (await getLocale()) as "no" | "en"
+  const messages = (await import(`../../../messages/${locale}.json`)).default
+
+  const analyticsConfig = getAnalyticsConfig()
+
+  return (
+    <NextIntlClientProvider locale={locale} messages={messages}>
+      <LanguageSelector />
+      <main>{children}</main>
+      {analyticsConfig?.enabled && (
+        <UmamiAnalytics
+          websiteId={analyticsConfig.websiteId}
+          src={analyticsConfig.src}
+          domains={analyticsConfig.domains}
+        />
+      )}
+    </NextIntlClientProvider>
+  )
+}

src/app/[locale]/page.tsx

@@ -1,4 +1,4 @@
-import Layout from "@/app/layout"
+import Layout from "@/app/[locale]/layout"
 
 import About from "@/components/page-sections/about"
 import BoardMembers from "@/components/page-sections/boardMembers"
@@ -13,7 +13,7 @@ import { Metadata, Viewport } from "next"
 
 export const revalidate = 3600 // 1 hour
 
-export function generateMetadata(): Metadata {
+export async function generateMetadata(): Promise<Metadata> {
   return generateSeoMetadata({})
 }
 

src/app/global-not-found.tsx

@@ -3,14 +3,17 @@ import Layout from "@/app/layout"
 import { generateSeoMetadata, generateSeoViewport } from "@/components/seo"
 
 import { Metadata, Viewport } from "next"
+import { getTranslations } from "next-intl/server"
 import { useTranslations } from "next-intl"
 import Link from "next/link"
 
 import * as styles from "./global-not-found.module.css"
 
-export function generateMetadata(): Metadata {
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("404")
+
   return generateSeoMetadata({
-    title: "404: Ikke funnet",
+    title: t("title"),
     description: "Uh oh :(",
   })
 }

src/app/layout.tsx

@@ -1,12 +1,6 @@
 import "@/app/globals.css"
 
-import { LocaleProvider } from "@/components/localeProvider"
-import UmamiAnalytics from "@/components/umamiAnalytics"
-
-import { getAnalyticsConfig } from "@/lib/analyticsConfig"
-
 import type { Metadata } from "next"
-import { getLocale } from "next-intl/server"
 
 export const metadata: Metadata = {
   title: "UiO Gaming",
@@ -19,30 +13,14 @@ export const metadata: Metadata = {
   },
 }
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode
-}>) {
-  const locale = (await getLocale()) as "no" | "en"
-  const messages = (await import(`../../messages/${locale}.json`)).default // TODO: duplicate of request.ts?
-
-  const analyticsConfig = getAnalyticsConfig()
-
+}) {
   return (
-    <html lang={locale}>
-      <body>
-        <LocaleProvider locale={locale} messages={messages}>
-          <main>{children}</main>
-          {analyticsConfig?.enabled && (
-            <UmamiAnalytics
-              websiteId={analyticsConfig.websiteId}
-              src={analyticsConfig.src}
-              domains={analyticsConfig.domains}
-            />
-          )}
-        </LocaleProvider>
-      </body>
+    <html>
+      <body>{children}</body>
     </html>
   )
 }

src/app/not-found.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation"
+
+export default function RootPage() {
+  redirect("/en/404")
+}

src/components/localeProvider.module.css

@@ -1,24 +0,0 @@
-.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/localeProvider.tsx

@@ -1,63 +0,0 @@
-"use client"
-
-import { GB, NO } from "country-flag-icons/react/3x2"
-import { NextIntlClientProvider } from "next-intl"
-import { ReactNode, useEffect, useState } from "react"
-
-import * as styles from "./localeProvider.module.css"
-
-type LocaleProviderProps = {
-  locale: "no" | "en"
-  messages: Record<string, string>
-  children: ReactNode
-}
-
-export function LocaleProvider({
-  locale: serverLocale,
-  messages,
-  children,
-}: LocaleProviderProps) {
-  const [locale, setLocale] = useState<"no" | "en">(serverLocale)
-  const [loadedMessages, setLoadedMessages] =
-    useState<Record<string, string>>(messages)
-
-  useEffect(() => {
-    const match = document.cookie.match(/(?:^|; )locale=([^;]+)/)
-    const saved = match ? decodeURIComponent(match[1]) : null
-
-    if (saved && saved !== locale) {
-      setLocale(saved as "no" | "en")
-      import(`../../messages/${saved}.json`).then(module => {
-        setLoadedMessages(module.default)
-      })
-    }
-  }, [locale])
-
-  const changeLocale = (newLocale: "no" | "en") => {
-    setLocale(newLocale)
-    document.cookie = `locale=${encodeURIComponent(
-      newLocale
-    )}; path=/; max-age=31536000; SameSite=Lax`
-    window.location.reload()
-  }
-
-  return (
-    <NextIntlClientProvider locale={locale} messages={loadedMessages}>
-      {children}
-
-      <div className={styles.languageSwitcher}>
-        {locale === "no" ? (
-          <button onClick={() => changeLocale("en")} className={styles.button}>
-            <GB className={styles.flag} title="English flag" />
-            English
-          </button>
-        ) : (
-          <button onClick={() => changeLocale("no")} className={styles.button}>
-            <NO className={styles.flag} title="Norwegian flag" />
-            Norsk
-          </button>
-        )}
-      </div>
-    </NextIntlClientProvider>
-  )
-}

src/components/page-sections/events.tsx

@@ -50,7 +50,7 @@ const Events = async () => {
   const mapEvents = (events: Event[]) => {
     if (events.length !== 0) {
       return events.map((event: Event) => (
-        <Link key={event._id} href={"/event/" + event.slug.current}>
+        <Link key={event._id} href={`/${locale}/event/${event.slug.current}`}>
           <article className={styles.card}>
             <h3>{event.title}</h3>
             <div>

src/components/seo.tsx

@@ -1,4 +1,5 @@
 import { Metadata, Viewport } from "next"
+import { getLocale, getTranslations } from "next-intl/server"
 
 type SeoProps = {
   title?: string
@@ -7,16 +8,17 @@ type SeoProps = {
   author?: string
 }
 
-export function generateSeoMetadata({
+export async function generateSeoMetadata({
   title,
   description,
   imageURL,
   author,
-}: SeoProps): Metadata {
+}: SeoProps): Promise<Metadata> {
+  const t = await getTranslations("metaTags")
+  const locale = await getLocale()
+
   const defaultTitle = "UiO Gaming"
-  const metaDescription =
-    description ||
-    "En hobbyforening som ønsker skape et sosialt miljö rundt gaming og e-sport på UiO!"
+  const metaDescription = description || t("description")
   const siteUrl = "https://uiogaming.no"
   const themeColor = "#7d36e7"
 
@@ -24,11 +26,16 @@ export function generateSeoMetadata({
     title: title ? `${title} | ${defaultTitle}` : defaultTitle,
     description: metaDescription,
     authors: author ? [{ name: author }] : [{ name: "UiO Gaming" }],
+    icons: {
+      icon: "/logo_2024_neon_pink.png",
+      shortcut: "/logo_2024_neon_pink.png",
+      apple: "/logo_2024_neon_pink.png",
+    },
     openGraph: {
       title: title || defaultTitle,
       description: metaDescription,
       type: "website",
-      locale: "no",
+      locale: locale,
       siteName: defaultTitle,
       images: imageURL
         ? [

src/components/ui/back.module.css

@@ -9,6 +9,7 @@
   background: none;
   border: none;
   color: var(--link-color);
+  cursor: pointer;
 }
 .button:hover,
 .button *:hover {

src/components/ui/back.tsx

@@ -1,11 +1,14 @@
 "use client"
 
-import { useTranslations } from "next-intl"
+import { useLocale, useTranslations } from "next-intl"
+import { useRouter } from "next/navigation"
 import { FaArrowLeft } from "react-icons/fa"
 
 import * as styles from "./back.module.css"
 
 const Back = () => {
+  const locale = useLocale()
+  const router = useRouter()
   const t = useTranslations("buttons")
 
   const handleBack = () => {
@@ -18,7 +21,7 @@ const Back = () => {
     if (window.history.length > 1 && isSameDomain) {
       window.history.back()
     } else {
-      window.location.href = "/"
+      router.push(`/${locale}`)
     }
   }
 

src/components/ui/languageSelector.module.css

@@ -0,0 +1,30 @@
+.languageSwitcher {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: rgba(0, 0, 0, 0.35);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+
+.button:hover {
+  background: rgba(0, 0, 0, 1);
+}
+
+.flag {
+  width: 20px;
+  height: 15px;
+  border-radius: 2px;
+}

src/components/ui/languageSelector.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { GB, NO } from "country-flag-icons/react/3x2"
+import { useLocale } from "next-intl"
+import { useRouter, usePathname } from "next/navigation"
+
+import * as styles from "./languageSelector.module.css"
+
+const LanguageSelector = () => {
+  const locale = useLocale()
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const changeLocale = (newLocale: "no" | "en") => {
+    // Remove the current locale from the pathname
+    const pathWithoutLocale = pathname.replace(/^\/[a-z]{2}/, "")
+    router.push(`/${newLocale}${pathWithoutLocale}`)
+  }
+
+  return (
+    <div className={styles.languageSwitcher}>
+      {locale === "no" ? (
+        <button onClick={() => changeLocale("en")} className={styles.button}>
+          <GB className={styles.flag} title="English flag" />
+          English
+        </button>
+      ) : (
+        <button onClick={() => changeLocale("no")} className={styles.button}>
+          <NO className={styles.flag} title="Norwegian flag" />
+          Norsk
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default LanguageSelector

src/i18n.ts

@@ -0,0 +1,15 @@
+import { notFound } from "next/navigation"
+import { getRequestConfig } from "next-intl/server"
+
+const locales = ["no", "en"]
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  const locale = await requestLocale
+
+  if (!locale || !locales.includes(locale as "no" | "en")) notFound()
+
+  return {
+    locale,
+    messages: (await import(`../messages/${locale}.json`)).default,
+  }
+})

src/middleware.ts

@@ -0,0 +1,12 @@
+import createMiddleware from "next-intl/middleware"
+
+export default createMiddleware({
+  locales: ["no", "en"],
+  defaultLocale: "no",
+  localePrefix: "always",
+})
+
+export const config = {
+  // Match only internationalized pathnames
+  matcher: ["/", "/(no|en)/:path*"],
+}