Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/i7eo/google-translate-select

🚀 A modern, high-performance monorepo project designed with Google Translate JS SDK. Vue and react are supported!
https://github.com/i7eo/google-translate-select

changesets i18n monorepo react translation vite vue vue3

Last synced: 28 days ago
JSON representation

🚀 A modern, high-performance monorepo project designed with Google Translate JS SDK. Vue and react are supported!

Host: GitHub
URL: https://github.com/i7eo/google-translate-select
Owner: i7eo
License: mit
Created: 2021-06-24T08:05:08.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2024-05-16T18:20:30.000Z (6 months ago)
Last Synced: 2024-06-18T11:57:50.922Z (5 months ago)
Topics: changesets, i18n, monorepo, react, translation, vite, vue, vue3
Language: Vue
Homepage: https://google-translate-select.i7eo.com
Size: 2.16 MB
Stars: 363
Watchers: 33
Forks: 86
Open Issues: 14
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        
@google-translate-select


> This project inherits from [v-google-translate](https://www.npmjs.com/package/v-google-translate). The previous `v-google-translate` package move to branch `backup/master`, if you want to check it, click [here](https://github.com/i7eo/google-translate-select/tree/backup/master).

![GitHub Workflow Status (branch)](https://github.com/i7eo/google-translate-select/actions/workflows/release.yml/badge.svg)

[![All Contributors](https://img.shields.io/github/all-contributors/i7eo/google-translate-select/master)](#contributors-)

[@google-translate-select](https://google-translate-select.i7eo.com) is an open-source project to invoke google translate jssdk to translate your dispaly content, we support vue2/vue3/react as follows:

[![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/i7eo/google-translate-select?filename=packages%2Freact%2Fpackage.json&label=@google-translate-select%2Freact)](https://github.com/i7eo/google-translate-select/tree/master/packages/react)

[![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/i7eo/google-translate-select?filename=packages%2Fvue2%2Fpackage.json&label=@google-translate-select%2Fvue2)](https://github.com/i7eo/google-translate-select/tree/master/packages/vue2)

[![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/i7eo/google-translate-select?filename=packages%2Fvue3%2Fpackage.json&label=@google-translate-select%2Fvue3)](https://github.com/i7eo/google-translate-select/tree/master/packages/vue3)

## Table of Contents

- [Refatcor](#refactor)

- [Origin](#origin)

- [Usage](#usage)

  - [Support Languages](#support-languages)

  - [Props](#props)

  - [Tips](#tips)

- [Inspire](#inspire)

- [Development](#development)

  - [Vitepress for @google-translate-select](#vitepress-for-google-translate-select)

  - [Playground for @google-translate-select](#playground-for-google-translate-select)

- [Commits & releases](#commits--releases)

- [Get involved](#get-involved)

- [Reach out to us](#reach-out-to-us)

- [License](#license)

- [Contributors](#contributors)

## Refactor

I rewrote this project using `pnpm + changeset + typescript + vite + tsup`, use monorepo to manage project. The package name is `@google-translate-select`.

I refactor previous `v-google-translate` package using `typescript` and renamed it `@google-translate-select/vue2`, if you want to check it, click [here](https://github.com/i7eo/google-translate-select/tree/master/packages/vue2).

## Origin

This package enables localization of web apps made with vue by use of google translate.As your website and app grows, you may find a need to expand to other markets outside your home country.

If your target market lives across the sea and speaks a different language, you may not have any choice but to localize.

For more details on what localization is and the potential benefits, [checkout this article](https://alistapart.com/article/do-you-need-to-localize-your-website/).

## Usage

### Support Languages

see `GOOGLE_TRANSLATE_SELECT_LANGUAGES` in https://github.com/i7eo/google-translate-select/blob/master/packages/constants/src/web/languages.ts

### Props

`vue` props see: https://github.com/i7eo/google-translate-select/blob/master/packages/vue3/src/types/props.ts

`react` props see: https://github.com/i7eo/google-translate-select/blob/master/packages/react/src/types/props.ts

### Tips

- Note that here we invoke `translate.google.com/translate_a/element.js` library file, the translation for the web pages of writing is the full amount. Only the translation of static content is supported without refreshing the page.

- **For something you don't want to translate, add `class= "notranslate"`**

- I can give you an example of best practices: We are working on a cross-border e-commerce project. In this project, we need two functions, multi-language and multi-currency, to complete internationalization. For the price on the page, we don't want to be translated into multiple languages. So we added `class= "notranslate"` to the price DOM to dynamically modify the price DOM information when the currency changes.

- **Google Translate JS SDK default your page source language is English (code is `en`), if your page source language is non-English language, please set `defaultPageLanguageCode` manually. For example: `defaultPageLanguageCode = "zh-CN"`**

## Inspire

This package was heavily inspired by [vue-google-translate](https://github.com/lewis-kori/vue-google-translate).

## Development

For local development, in the root of the repo run `pnpm i` to install all dependencies and then `pnpm build` to build all packages. Now follow the instructions of the specific package you’re working on.

> In case you are having problems to install the dependencies, try using NVM to get the same node version we use by running `nvm use` in the root of the repo, and check `pnpm` version.

### Vitepress for @google-translate-select

We use vitepress with our library to develop document. You can start it from the root of the repo, just run `pnpm dev:docs`

### Playground for @google-translate-select

We use vite with our library to test it. You can start it from the root of the repo, just run `pnpm dev:react` or `pnpm dev:vue2` or `pnpm dev:vue3`.

## Commits & releases

Use `pnpm commit`. This uses the [cz-git](https://cz-git.qbb.sh/) CLI to create a conventional commit message based on your changes. CI is setup to release all new commits on the main branch that contains a new [changeset](https://github.com/changesets/changesets).

Read more about changeset [here](RELEASES.md)

## Get involved

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?maxAge=31557600)](http://makeapullrequest.com)

We appreciate any help on our repositories. For more details about how to contribute to a package, see the README of the corresponding package.

## Reach out to us

Create an issue using one of the templates [![File an issue](https://img.shields.io/badge/-Create%20Issue-6cc644.svg?logo=github&maxAge=31557600)](https://github.com/i7eo/google-translate-select/issues/new/choose).

Make sure to remove any credential from your code before sharing it.

## License

This repository is published under the [MIT](LICENSE) license.

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    

      
_hyj
💻

      
_suxiong
💻

      
_{Chris Jones}
💻

      
_{Syamsoul Azrien Muda}
💻

      
_HuaZhuangNan
💻

      
_Zero
📖