Capgo website

Hire a Capacitor consultant

This is the source code for the Capgo website, built with Astro.

Development

To start the development server, run:

bun install
bun run dev

Deployment

The website is deployed to Cloudflare Pages. The deployment is automated using a GitHub action.

License

The source code is licensed under the GNU AFFERO GENERAL PUBLIC license. See the LICENSE file for details.

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
bun install	Installs dependencies
bun run dev	Starts local dev server at localhost:3000
bun run build	Build your production site to ./dist/
bun run preview	Preview your build locally, before deploying
bun run astro ...	Run CLI commands like astro add, astro check
bun run astro -- --help	Get help using the Astro CLI

Automatic i18n

The website aims at having an automatic i18n done via various scripts in the scripts directory.

The 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_locale_translations.tsx to have the latest locale values as the following respectively.

const newLocale = 'fr'

const locales = ['fr']

Now to have translations generated for fr, you'd want to run:

• 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.