feat: add i18n boilerplate (#102)

* feat(i18n): set up Paraglide and extract messages

* chore(i18n): extract strings from homepage

* feat(i18n): add language switcher if multiple languages are present

* fix(i18n): ensure paraglide compiler runs after installation

* ci: fix playwright action

* fix: remove paraglide from the server

* feat: add another language as a example

---------

Co-authored-by: Michał <[email protected]>

.github/workflows/i18n.yml

@@ -0,0 +1,22 @@
+# Checks if all Translations are present & valid
+name: Ninja i18n action
+
+on: pull_request_target
+
+permissions:
+  pull-requests: write # Necessary to comment on PRs
+  issues: read         # Necessary to read issue comments
+  contents: read       # Necessary to access the repo content
+
+jobs:
+  ninja-i18n:
+    name: Ninja - i18n Lint Action
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Run Ninja i18n
+        # @main ensures that the latest version of the action is used
+        uses: opral/ninja-i18n-action@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+

.github/workflows/playwright.yml

@@ -26,7 +26,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
       - name: Install dependencies
-        run: npm ci
+        run: npm i
       - name: Install playwright browsers
         run: npx playwright install --with-deps
       - name: Run tests

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "inlang.vs-code-extension"
+  ]
+}

README.md

@@ -34,6 +34,7 @@
 - 🤖 Github actions - Lint your code on PR
 - ⚙️ T3-env - Manage your environment variables
 - 💯 Perfect Lighthouse score
+- 🌐 I18n with Paraglide
 
 ## 🚀 Deployment
 Easily deploy your Next.js app with <a href="https://vercel.com/">Vercel</a> by clicking the button below:
@@ -101,6 +102,8 @@ and open http://localhost:3000/ to see this app.
     ├── lib                         # Functions and utilities
     ├── styles                      # Styles folder
     ├── types                       # Type definitions
+    ├── messages                    # Messages for i18n 
+    ├── paraglide                   # (generated) compiled i18n messages 
     └── env.mjs                     # Env variables config file
 ```
 

next.config.js

@@ -1,3 +1,4 @@
+const { paraglide } = require('@inlang/paraglide-next/plugin');
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
@@ -10,4 +11,10 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = paraglide({
+  paraglide: {
+    project: './project.inlang',
+    outdir: './src/paraglide',
+  },
+  ...nextConfig,
+});