https://github.com/web-packages/web_localization
An ideally implemented simple web user-language localization example in a service worker environment.
https://github.com/web-packages/web_localization
Last synced: 3 months ago
JSON representation
An ideally implemented simple web user-language localization example in a service worker environment.
- Host: GitHub
- URL: https://github.com/web-packages/web_localization
- Owner: web-packages
- Created: 2023-09-25T01:53:22.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-27T13:05:00.000Z (almost 2 years ago)
- Last Synced: 2025-09-18T19:30:02.720Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 54.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Web Localization
Version
v1.0.0-dev
Ideally Implemented simple web user-language localization example.
> [!WARNING]
> The example doesn't work in the local environment, And i'll be renewing
this package for the better soon.
> You can use `server-side rendering` and `service worker` to resolve lazy load issues.
## Usage
The following describes how to define the contents of the json files within the localizations folder,
And this example json file is `korean.json` provided by default.
> How to define parameters is by inserting {`index`} to content `json value`.
```json
{
"undefined": "정의되지 않음",
"hello": "안녕하세요",
"amount": "{0}개"
}
```
And next, it describes how to output localized sentences and words defined in the json content by declaring html elements.
```html
```
## How to define language you want
Declares a global and statically variable called language
> The value defined must be the name of the json file.
>
```js
// This value is the current language name(json name) to be applied.
const language = 'korean';
```
### Reason
This is basically because it always refers to a variable called `language`.
## How to customizing
The following describes how to redefine custom-element name.
> `-` must be included in element name.
```js
// Define the first argument of customElements.define with the name you want.
customElements.define('localization-element', LocalizationElement);
```