https://github.com/scriptex/attr-i18n
Translate your vanilla websites or web apps using HTML attributes and a pinch of Javascript
https://github.com/scriptex/attr-i18n
html-translation i18n internationalization translation vanilla-i18n
Last synced: 10 months ago
JSON representation
Translate your vanilla websites or web apps using HTML attributes and a pinch of Javascript
- Host: GitHub
- URL: https://github.com/scriptex/attr-i18n
- Owner: scriptex
- License: mit
- Created: 2023-01-25T08:01:18.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-29T19:40:29.000Z (over 1 year ago)
- Last Synced: 2024-05-02T06:13:51.602Z (over 1 year ago)
- Topics: html-translation, i18n, internationalization, translation, vanilla-i18n
- Language: TypeScript
- Homepage: https://attr-i18n.atanas.info
- Size: 533 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# attr-i18n (Internationalization through HTML attributes)
[](https://github.com/scriptex/attr-i18n/actions?query=workflow%3ABuild)
[](https://www.codacy.com/gh/scriptex/attr-i18n/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/attr-i18n&utm_campaign=Badge_Grade)
[](https://codebeat.co/projects/github-com-scriptex-attr-i18n-master)
[](https://www.codefactor.io/repository/github/scriptex/attr-i18n)
[](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[](https://github.com/scriptex/attr-i18n/)
> Translate your vanilla websites or web apps using HTML attributes and a pinch of Javascript
## Visitor stats
## Code stats
## Install
```sh
npm i attr-i18n
# or
yarn add attr-i18n
```
## Usage
First import and initialize the module.
```typescript
import { AttrI18n } from 'attr-i18n';
const languages = ['English', 'हिन्दी', 'français'];
new AttrI18n(languages, {
attr: 'data-translation',
path: 'assets/translations',
debug: true,
togglerID: 'language-toggle',
defaultLang: languages[0]
});
```
Then in your HTML file(s):
1. Add an HTML select element with the ID corresponding to the `togglerID` option above. This select element will toggle between languages
2. Add the translation files in the folder you specified in the `path` option above. Each of the language files should be named after the language name as it appears in the `languages` array above.
3. Use the `data-translation` attribute as set in the option `attr` above by adding it to each element you want translated. The `data-translation` attribute accepts a dot-delimited string which points to the translation you want to use.
## Options
| Name | Type | Required | Default | Description |
| ------------- | --------- | -------- | ------------------- | --------------------------------------------------------------------------- |
| `attr` | `string` | false | `data-attr-i18n` | HTML attribute which contains the translation key |
| `path` | `string` | false | `assets/attr-i18n` | Path to the folder which contains the translation JSON file(s) |
| `debug` | `boolean` | false | `false` | Turns debug mode on/off |
| `togglerID` | `string` | false | `attr-i18n-toggler` | ID attribute for the language toggle HTML select element |
| `defaultLang` | `string` | false | `languages[0]` | The default language. If not provided, the first one from the array is used |
## Example HTML
### Language selector HTML select element
```html
English
हिन्दी
français
```
### Page content
```html
Fill Your Details!
Name:
Age:
Do you exercise at home?
-
Yes
-
No
```
## LICENSE
MIT
---
Connect with me:
---
Support and sponsor my work:
