Merge pull request #128 from sebiweise/feature/i18n

Feature/i18n

.dockerignore

@@ -0,0 +1 @@
+node_modules

.github/workflows/ci.yml

@@ -1,36 +1,30 @@
 name: CI
- 
+
 on: [push, pull_request]
- 
+
 jobs:
   build:
-    name: Build and Test
-    timeout-minutes: 15
+    strategy:
+      matrix:
+        version: [18, 20]
+        pnpm: [8, latest]
     runs-on: ubuntu-latest
-    # To use Remote Caching, uncomment the next lines and follow the steps below.
-    # env:
-    #  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-    #  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
-
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ vars.TURBO_TEAM }}
     steps:
       - name: Check out code
         uses: actions/checkout@v4
         with:
-          fetch-depth: 2
-
+          version: ${{ matrix.pnpm }}
       - uses: pnpm/[email protected]
         with:
           version: 8.10.5
-
-      - name: Setup Node.js environment
-        uses: actions/setup-node@v4
+      - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: ${{ matrix.version }}
           cache: 'pnpm'
-
       - name: Install dependencies
-        run: pnpm install
-
-      - name: Build
-        run: pnpm build
-
+        run: pnpm install --prefer-offline --frozen-lockfile
+      # - run: pnpx playwright install chromium
+      - run: pnpm run ci

.gitignore

@@ -54,4 +54,7 @@ next-env.d.ts
 .idea
 
 # ide
-.vscode/
+.vscode/
+
+# Localazy
+localazy.keys.json

apps/docs/docs/getting-started/installation.md

@@ -86,7 +86,7 @@ npm run dev
 When running in docker set the following environment variable:
 
 ```sh
-docker build -t unsaged . --rm
+docker build -t unsaged -f apps/unsaged/Dockerfile . --rm
 docker run --env-file=.env.local -p 127.0.0.1:3000:3000 --name unsaged unsaged
 ```
 

apps/docs/docs/getting-started/localization.md

@@ -0,0 +1,14 @@
+---
+sidebar_position: 2
+---
+
+# 🚧 Localization
+
+## Help translate unsaged
+
+https://localazy.com/p/unsaged
+
+## Update translation files
+1. Create a localazy.keys.json in the root folder apps/unsaged https://localazy.com/docs/cli/authorization#separate-key-file
+2. Paste in the required readKey
+3. Run pnpm run local:pull or turbo local:pull

apps/docs/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "docusaurus": "docusaurus",
     "start": "TYPEDOC_WATCH=true docusaurus start --no-open",
     "dev": "pnpm start",
@@ -16,19 +17,19 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.0.0",
-    "@docusaurus/preset-classic": "3.0.0",
+    "@docusaurus/core": "3.0.1",
+    "@docusaurus/preset-classic": "3.0.1",
     "@mdx-js/react": "^3.0.0",
     "@types/react": "^18.2.43",
     "clsx": "^1.2.1",
-    "prism-react-renderer": "^2.1.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "prism-react-renderer": "^2.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.0.0",
-    "@docusaurus/tsconfig": "3.0.0",
-    "@docusaurus/types": "3.0.0",
+    "@docusaurus/module-type-aliases": "3.0.1",
+    "@docusaurus/tsconfig": "3.0.1",
+    "@docusaurus/types": "3.0.1",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5",

apps/unsaged/Dockerfile

@@ -41,7 +41,6 @@ COPY --from=dependencies /unsaged/node_modules ./node_modules
 COPY --from=build /unsaged/apps/unsaged/.next ./apps/unsaged/.next
 COPY --from=build /unsaged/apps/unsaged/public ./apps/unsaged/public
 COPY --from=build /unsaged/apps/unsaged/next.config.js ./apps/unsaged/next.config.js
-COPY --from=build /unsaged/apps/unsaged/next-i18next.config.js ./apps/unsaged/next-i18next.config.js
 COPY --from=build /unsaged/apps/unsaged/package.json ./apps/unsaged/package.json
 
 # Expose the port the app will run on

apps/unsaged/app/[locale]/NextIntlProvider.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ReactNode } from "react";
+import { NextIntlClientProvider, AbstractIntlMessages } from "next-intl";
+
+type Props = {
+    messages: AbstractIntlMessages;
+    locale: string;
+    children: ReactNode;
+    now: Date;
+    timeZone: string;
+};
+
+export default function NextIntlProvider({
+    messages,
+    locale,
+    children,
+    now,
+    timeZone,
+}: Props) {
+    return (
+        <NextIntlClientProvider
+            locale={locale}
+            messages={messages}
+            defaultTranslationValues={{
+                i: (text) => <i>{text}</i>,
+            }}
+            now={now}
+            timeZone={timeZone}
+            formats={{
+                dateTime: {
+                    short: {
+                        day: 'numeric',
+                        month: 'short',
+                        year: 'numeric'
+                    }
+                },
+                number: {
+                    precise: {
+                        maximumFractionDigits: 5
+                    }
+                },
+                list: {
+                    enumeration: {
+                        style: 'long',
+                        type: 'conjunction'
+                    }
+                }
+            }}
+        >
+            {children}
+        </NextIntlClientProvider>
+    );
+}

apps/unsaged/app/[locale]/layout.tsx

@@ -0,0 +1,69 @@
+import { DEFAULT_DESCRIPTION, DEFAULT_TITLE } from '@/utils/app/const';
+
+import { Analytics } from '@vercel/analytics/react';
+import { AxiomWebVitals } from 'next-axiom';
+
+import { Metadata, Viewport } from 'next';
+
+import { ThemeProvider } from '@/components/common/ui/theme-provider';
+
+import '@/styles/globals.css';
+import NextIntlProvider from './NextIntlProvider';
+import { notFound } from 'next/navigation';
+import { ReactNode } from 'react';
+
+type Props = {
+  children: ReactNode;
+  params: { locale: string };
+};
+
+export const metadata: Metadata = {
+  title: DEFAULT_TITLE,
+  description: DEFAULT_DESCRIPTION,
+};
+
+export const viewport: Viewport = {
+  height: 'device-height',
+  width: 'device-width',
+  initialScale: 1,
+}
+
+export function generateStaticParams() {
+  return [{ locale: "en" }];
+}
+
+export default async function LocaleLayout({
+  children,
+  params: { locale }
+}: Props) {
+  let messages;
+  try {
+    messages = (await import(`../../messages/${locale}.json`)).default;
+  } catch (error) {
+    notFound();
+  }
+
+  return (
+    <html lang={locale}>
+      <Analytics />
+      <AxiomWebVitals />
+      <body className="absolute inset-0 overflow-hidden overscroll-none h-full w-full">
+        <NextIntlProvider
+          locale={locale}
+          messages={messages}
+          timeZone="Europe/Berlin"
+          now={new Date()}
+        >
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            {children}
+          </ThemeProvider>
+        </NextIntlProvider>
+      </body>
+    </html>
+  );
+}

apps/unsaged/app/api/auth/[...nextauth]/route.ts

@@ -17,9 +17,9 @@ const authOptions: NextAuthOptions = {
   // Supabase adapter is only enabled if JWT secret is specified
   adapter: SUPABASE_JWT_SECRET
     ? SupabaseAdapter({
-        url: SUPABASE_URL,
-        secret: SUPABASE_SERVICE_ROLE_KEY,
-      })
+      url: SUPABASE_URL,
+      secret: SUPABASE_SERVICE_ROLE_KEY,
+    })
     : undefined,
   callbacks: {
     async session({ session, token }) {

apps/unsaged/app/layout.tsx

@@ -1,42 +1,12 @@
-import { DEFAULT_DESCRIPTION, DEFAULT_TITLE } from '@/utils/app/const';
+import { ReactNode } from 'react';
 
-import { Analytics } from '@vercel/analytics/react';
-import { AxiomWebVitals } from 'next-axiom';
-
-import { Metadata } from 'next';
-
-import { ThemeProvider } from '@/components/common/ui/theme-provider';
-
-import '@/styles/globals.css';
-
-export const metadata: Metadata = {
-  title: DEFAULT_TITLE,
-  description: DEFAULT_DESCRIPTION,
-  viewport:
-    'height=device-height, width=device-width, initial-scale=1, user-scalable=no',
+type Props = {
+    children: ReactNode;
 };
 
-export default function RootLayout({
-  // Layouts must accept a children prop.
-  // This will be populated with nested layouts or pages
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <Analytics />
-      <AxiomWebVitals />
-      <body className="absolute inset-0 overflow-hidden overscroll-none h-full w-full">
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          {children}
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}
+// Even though this component is just passing its children through, the presence
+// of this file fixes an issue in Next.js 13.3.0 where link clicks that switch
+// the locale would otherwise be ignored.
+export default function RootLayout({ children }: Props) {
+    return children;
+}