Skip to content

Latest commit

 

History

History
159 lines (117 loc) · 6.28 KB

README.md

File metadata and controls

159 lines (117 loc) · 6.28 KB

Yuzu

The open-source translation management platform and localization system.

landing page image

About Yuzu 🍋

Yuzu is an open-source platform for translation management and localization of codebases. We are building it publicly for everyone to see and use, which helps us get more feedback and input. Most users will only use the command line interface, but you may also self-host the entire application if you prefer.

The hosted version is at yuzujs.com and the command-line interface is at npmjs.com/yuzu.

Yuzu takes an opinionated approach to localization, which saves time and simplifies the process if you are able to follow the guidelines. The primary default assumption that is not common is that for readability and ease of initial adoption, your message id should simply be your default language string.

Contact us 💌

If you want to learn more about this project or have any questions, send us an email at [email protected].

Built with 🛠️

Command Line Interface 👩‍💻

The following commands are the core operations of the yuzu npm package. You'll also need to implement an underlying i18n library, such as next-international.

For NextJS, this includes wrapping your strings as messages, adding middleware, and building a UI for language switcher. Examples of each are available in the Yuzu docs.

Initialization

It's now recommended to run bunx or npx instead of npm -g.

bunx yuzu init # or npx

The initializer will ask you a number of questions and create a yuzu.config.ts file. TypeScript is recommended but not required.

This will also guide you through the process of creating a project on yuzujs.com.

NextJS App Router

For projects using NextJS app router, Yuzu uses next-international out of the box, an up-to-date library for i18n.

There are a few other common commands to manage strings and keep them in sync.

Build

Locally sync your yuzu directory to t() wrapped strings.

bunx yuzu build # or npx

Push

Push your messages and locales to your Yuzu project.

bunx yuzu push # or npx

Translate

Use machine translation to fill in any missing translations in your Yuzu project. Yuzu also provides you with a Codesheet that you can make changes too, ask GPT-4 for help with, or share with a multilingual friend or vendor for edits.

bunx yuzu translate # or npx

Pull

Pull down the latest translations from your Yuzu project.

bunx yuzu pull # or npx

Self-hosting 🖥️

Requirements

Setup

  1. Clone the repository

    git clone https://github.com/radishworkshop/yuzu.git

  2. Install dependencies

    bun i

  3. Get your API keys

    For everything to work out of the box, you will need API keys for Clerk (Auth), Codesheets (TMS + GPT-4), Xata (DB, see apps/web/db/xata.ts for schema), DeepL (ML translation), and Google Translate (ML translation)

  4. Set up your environment

    In apps/web you will find .env.example. Change the name to .env.local and add your own values. You'll also want to update apps/web/.xatarc with your database URL.

  5. Add your fonts

    yuzujs.com uses a licensed font called Codec Pro, which is not free and therefore included in this repository. In production, Codec Pro is loaded at build time via a script called scripts/install-fonts.js. It uses the FONTS_API_KEY environment variable and gets the fonts from a secret URL at my personal website, zackrw.com.

    You can easily get everything working by using next/font/google in apps/web/app/layout.tsx or making a fonts folder in apps/web and importing those. You can also purchase Codec Pro yourself if you feel like supporting it, and then copy those files into fonts. Or, you can even make your own server and use FONTS_API_KEY like we do.

    If you decide to replace next/font/local with next/font/google in apps/web/app/layout.tsx, here are more details). For example:

    // replace 'next/font/local' and delete references to codecPro
import { Inter } from 'next/font/google' 

// replace codecPro.className
<body className={inter.className}> ... </body>

  6. Start the development server

    bun dev

Open http://localhost:3000 with your browser to see your server running.

Contributing 🤝

If you want to help us build the simplest platform for NextJS localization, check out the contributing guidelines