automatic i18n for the whole website

.github/workflows/deploy.yml

@@ -14,7 +14,6 @@ jobs:
         uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest
-
       - name: Install dependencies
         run: bun install
       - name: Generate static pages

.github/workflows/test.yml

@@ -19,7 +19,6 @@ jobs:
         uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest
-
       - name: Install dependencies
         run: bun install
       - name: Generate static pages

.prettierignore

@@ -20,5 +20,8 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 
-public/**/*
-src/content/**/*
+**/*.md*
+**/*.yml
+public/
+src/services/locale.ts
+src/services/translations.ts

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "printWidth": 180,
+  "singleQuote": true,
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss", "prettier-plugin-organize-imports"]
+}

README.md

@@ -1,6 +1,6 @@
 # Capgo website
 
- <a href="https://capgo.app/"><img src='https://raw.githubusercontent.com/Cap-go/capgo/main/assets/capgo_banner.png' alt='Capgo - Instant updates for capacitor'/></a>
+<a href="https://capgo.app/"><img src='https://raw.githubusercontent.com/Cap-go/capgo/main/assets/capgo_banner.png' alt='Capgo - Instant updates for capacitor'/></a>
 [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.com/invite/VnYRvBfgA6)
 <a href="https://discord.com/invite/VnYRvBfgA6"><img src="https://img.shields.io/discord/912707985829163099?color=%237289DA&label=Discord" alt="Discord">
 [![npm](https://img.shields.io/npm/dm/@capgo/website)](https://www.npmjs.com/package/@capgo/website)
@@ -18,7 +18,7 @@
 
 <h2><a href="https://capgo.app/consulting/">Hire a Capacitor consultant</a></h2>
 
-This is the source code for the Capgo website. It is built using [Astro](https://astro.build/), a new static site generator.
+This is the source code for the Capgo website, built with [Astro](https://astro.build/).
 
 ## Development
 
@@ -37,20 +37,6 @@ The website is deployed to [Cloudflare Pages](https://pages.cloudflare.com/). Th
 
 The source code is licensed under the GNU AFFERO GENERAL PUBLIC license. See the [LICENSE](LICENSE) file for details.
 
-# Astro Starter Kit: Basics
-
-```
-npm create astro@latest -- --template basics
-```
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg/)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics/)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg/)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics/)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg/)](https://codespaces.new/withastro/astro/?devcontainer_path=.devcontainer/basics/devcontainer.json)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554/)
-
 ## 🚀 Project Structure
 
 Inside of your Astro project, you'll see the following folders and files:
@@ -88,6 +74,28 @@ All commands are run from the root of the project, from a terminal:
 | `bun run astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `bun run astro -- --help` | Get help using the Astro CLI                     |
 
-## 👀 Want to learn more?
+## Automatic i18n
+
+The website aims at having an automatic i18n done via various scripts in the `scripts` directory.
+
+The [translations.tsx](./scripts/translations.tsx) script is used to translate the website content into the desired language. It has two methods to create translations, via `OpenAI API`, and the other via `api.datpmt.com`. To use the OpenAI API method, make sure you have an `OPENAI_API_KEY` as the environment variable set. To use the other API, just un-comment the `translateText` function call using it.
+
+Now, let's say that you want to update translations or add a new locale, `fr`.
+
+First, make sure to update the files `scripts/setup_new_locale.tsx` and `scripts/generate_translation_ts_file.tsx` to have the latest locale values as the following respectively.
+
+```tsx
+const newLocale = 'fr'
+```
+
+```tsx
+const locales = ['fr']
+```
+
+Now to have translations generated for `fr`, you'd want to run:
 
-Feel free to check [our documentation](https://docs.astro.build/) or jump into our [Discord server](https://astro.build/chat/).
+- `bun run setup:new:locale`: This script copies the existing files in `src/pages` directory to `src/pages/fr` directory and makes sure to replace each reference to `content/blog` to `content/fr/blog`. Then, it copies the `src/content/blog` directory to `src/content/fr/blog` and makes sure to set `locale` frontmatter in each markdown file as `fr`. Then, it runs all the translation scripts mentioned below.
+- `bun run generate:locale:translations`: This script uses the translate function to translate the `en.yml` key value pairs into the desired language, and creates a `fr.yml` file.
+- `bun run generate:translation.ts`: This script uses all the `.yml` files in the `locales` directory to generate two files, `src/services/locale.ts` and `src/services/translation.ts` files with all the locales translations key value pair.
+- `bun run generate:blog:translations`: This script uses all the `.md` files in the `src/content/blog` directory to generate the translated version of the file in the `src/content/fr/blog` directory.
+- `bun run generate:plugin:translations`: This script uses all the `.md` files in the `src/content/plugins-tutorials` directory to generate the translated version of the file in the `src/content/fr/plugins-tutorials` directory.

_redirects

@@ -7,5 +7,6 @@ docs/plugin/know-issues docs/plugin/known-issues/ 200
 /self-hosted-capgo /docs/plugin/self-hosted/getting-started/ 200
 /self-hosted-live-updates /docs/plugin/self-hosted/auto-update/ 200
 /docs/getting-started/ /docs/plugin/cloud-mode/getting-started/ 302
+/sitemap.xml /sitemap-index.xml 301
 /sitemap-index.xml/ /sitemap-index.xml 301
 /sitemap-0.xml/ /sitemap-0.xml 301

astro.config.mjs

@@ -1,20 +1,33 @@
+import starlight from '@astrojs/starlight'
 import vue from '@astrojs/vue'
 import UnoCSS from '@unocss/astro'
 import AstroPWA from '@vite-pwa/astro'
-import starlight from '@astrojs/starlight'
 import { defineConfig } from 'astro/config'
-import { pwa } from './src/config/pwa'
 import config from './configs.json'
+import { pwa } from './src/config/pwa'
+import { defaultLocale, locales } from './src/services/locale'
 
 export default defineConfig({
-  compressHTML: true,
   site: `https://${config.base_domain.prod}`,
   redirects: {
     '/docs/getting-started/': {
       status: 302,
       destination: '/docs/plugin/cloud-mode/getting-started/',
     },
   },
+  i18n: {
+    locales,
+    defaultLocale,
+    fallback: locales
+      .filter((i) => i !== defaultLocale)
+      .reduce((r, h) => {
+        r[h] = defaultLocale
+        return r
+      }, {}),
+    routing: {
+      redirectToDefaultLocale: true,
+    },
+  },
   integrations: [
     UnoCSS({ injectReset: true }),
     vue({
@@ -29,10 +42,13 @@ export default defineConfig({
       title: 'Capgo',
       favicon: '/favicon.svg',
       logo: { src: './logo.svg' },
-      editLink: {
-				baseUrl: 'https://github.com/Cap-go/website/edit/main/',
-			},
       customCss: ['./src/css/global.css'],
+      components: {
+        LanguageSelect: './src/components/LanguageSelect.astro',
+      },
+      editLink: {
+        baseUrl: 'https://github.com/Cap-go/website/edit/main/',
+      },
       social: {
         discord: 'https://discord.com/invite/VnYRvBfgA6',
         github: 'https://github.com/Cap-go/',
@@ -54,7 +70,8 @@ export default defineConfig({
           label: 'Plugin',
           items: [
             { label: 'Overview', link: '/docs/plugin/overview' },
-            { label: 'Cloud Mode', 
+            {
+              label: 'Cloud Mode',
               items: [
                 { label: 'Getting Started', link: '/docs/plugin/cloud-mode/getting-started' },
                 { label: 'Auto Update', link: '/docs/plugin/cloud-mode/auto-update' },
@@ -65,15 +82,16 @@ export default defineConfig({
               collapsed: true,
             },
             {
-              label: 'Self Hosted', items: [
+              label: 'Self Hosted',
+              items: [
                 { label: 'Getting Started', link: '/docs/plugin/self-hosted/getting-started' },
                 { label: 'Contributing', link: '/docs/plugin/self-hosted/contributing' },
                 { label: 'Auto Update', link: '/docs/plugin/self-hosted/auto-update' },
                 { label: 'Manual Update', link: '/docs/plugin/self-hosted/manual-update' },
                 { label: 'Encrypted Bundles', link: '/docs/plugin/self-hosted/encrypted-bundles' },
                 { label: 'Handling Updates', link: '/docs/plugin/self-hosted/handling-updates' },
                 { label: 'Handling Stats', link: '/docs/plugin/self-hosted/handling-stats' },
-                { label: 'Local Development', autogenerate: { directory: 'docs/plugin/self-hosted/local-dev' }, collapsed: true}
+                { label: 'Local Development', autogenerate: { directory: 'docs/plugin/self-hosted/local-dev' }, collapsed: true },
               ],
               collapsed: true,
             },
@@ -88,7 +106,7 @@ export default defineConfig({
               collapsed: true,
               autogenerate: { directory: 'docs/upgrade' },
             },
-          ]
+          ],
         },
         {
           label: 'CLI',
@@ -100,14 +118,12 @@ export default defineConfig({
               collapsed: true,
               autogenerate: { directory: 'docs/cli/migrations' },
             },
-          ]
+          ],
         },
         {
           label: 'Public API',
           collapsed: true,
-          items: [
-            { label: 'Endpoints', link: '/docs/public-api/endpoints' },
-          ]
+          items: [{ label: 'Endpoints', link: '/docs/public-api/endpoints' }],
         },
         {
           label: 'Web app',
@@ -134,4 +150,14 @@ export default defineConfig({
       ],
     }),
   ],
+  server: {
+    port: 3000,
+    open: true,
+    host: '0.0.0.0',
+  },
+  preview: {
+    port: 3000,
+    open: true,
+    host: '0.0.0.0',
+  },
 })