{"id":16229754,"url":"https://github.com/jerboa88/tinyi18n","last_synced_at":"2025-03-19T14:30:21.378Z","repository":{"id":93593115,"uuid":"193822952","full_name":"jerboa88/tinyi18n","owner":"jerboa88","description":"A tiny JavaScript library for internationalization and easy switching of languages on HTML pages","archived":false,"fork":false,"pushed_at":"2024-07-29T01:23:59.000Z","size":17,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-15T00:35:10.997Z","etag":null,"topics":["html","i18n","i18n-js","internationalization","javascript","javascript-library","js","l10n","localization","translation"],"latest_commit_sha":null,"homepage":"https://johng.io/p/tinyi18n","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jerboa88.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-26T03:28:17.000Z","updated_at":"2024-12-02T03:55:14.000Z","dependencies_parsed_at":"2024-07-29T02:52:31.133Z","dependency_job_id":null,"html_url":"https://github.com/jerboa88/tinyi18n","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerboa88%2Ftinyi18n","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerboa88%2Ftinyi18n/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerboa88%2Ftinyi18n/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jerboa88%2Ftinyi18n/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jerboa88","download_url":"https://codeload.github.com/jerboa88/tinyi18n/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244444361,"owners_count":20453708,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","i18n","i18n-js","internationalization","javascript","javascript-library","js","l10n","localization","translation"],"created_at":"2024-10-10T12:59:10.254Z","updated_at":"2025-03-19T14:30:21.062Z","avatar_url":"https://github.com/jerboa88.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Project Header --\u003e\n\u003cdiv align=\"center\"\u003e \n  \u003ch1 class=\"projectName\"\u003etinyi18n\u003c/h1\u003e\n\n  \u003cp class=\"projectBadges\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/type-JS_Library-4caf50.svg\" alt=\"Project type\" title=\"Project type\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/languages/top/jerboa88/tinyi18n.svg\" alt=\"Language\" title=\"Language\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/repo-size/jerboa88/tinyi18n.svg\" alt=\"Repository size\" title=\"Repository size\"\u003e\n    \u003ca href=\"LICENSE\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/license/jerboa88/tinyi18n.svg\" alt=\"Project license\" title=\"Project license\"/\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n  \n  \u003cp class=\"projectDesc\" data-exposition=\"A tiny JavaScript library for internationalization and easy switching of languages on HTML pages. Despite this being one of my first experiences designing a library, this project is still perfectly functional for small projects.\"\u003e\n    A tiny JavaScript library for internationalization and easy switching of languages on HTML pages\n  \u003c/p\u003e\n  \n  \u003cbr/\u003e\n\u003c/div\u003e\n\n\u003e [!NOTE]\n\u003e This is an experimental project at the moment. Use at your own risk\n\n## Usage\n1. Include `tinyi18n.js` before the closing body tag in your page and call `tinyi18n.loadTranslations('translations.json')` with the name of your JSON file to load it. Put the `data-translatekey` attribute on any block of text you want to have multiple languages. The value of this attribute is essentially an id for the block of text so you can write translations for it. You can use the same value for multiple blocks of text. For non-text elements, also add the `data-translateattribute` to specify which attribute you want to have translations for.\n\n##### index.html\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle data-translatekey=\"title\"\u003e\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1 data-translatekey=\"title\"\u003e\u003c/h1\u003e\n    \u003cp data-translatekey=\"description\"\u003e\u003c/p\u003e\n\n    \u003cinput type=\"text\" data-translatekey=\"searchbox\" data-translateattribute=\"value\"\u003e\u003c/input\u003e\n\n    \u003cscript src=\"tinyi18n.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      tinyi18n.loadTranslations('translations.json')\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n2. Create your translations as shown below with multiple languages listed for each key. Make sure to include `default_language` and `languages` for the module to work properly.\n##### translations.json\n```json\n{\n  \"default_language\": \"es\",\n  \"languages\": [\"en\", \"es\"],\n  \"translations\": {\n    \"title\": {\n      \"en\": \"Title in English\",\n      \"es\": \"Título en Inglés\"\n    },\n    \"description\": {\n      \"en\": \"I like cats\",\n      \"es\": \"Me gustan los gatos\"\n    },\n    \"searchbox\": {\n      \"en\": \"search\",\n      \"es\": \"buscar\"\n    }\n  }\n}\n```\n##### index.html\n3. Call `tinyi18n.translate` with the language you want to switch to and voila!\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle data-translatekey=\"title\"\u003e\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1 data-translatekey=\"title\"\u003e\u003c/h1\u003e\n    \u003cp data-translatekey=\"description\"\u003e\u003c/p\u003e\n    \u003cinput type=\"text\" data-translatekey=\"searchbox\" data-translateattribute=\"value\"\u003e\u003c/input\u003e\n\n    \u003cbutton onclick=\"tinyi18n.setLang('en')\"\u003eTranslate to English\u003c/button\u003e\n    \u003cbutton onclick=\"tinyi18n.setLang('es')\"\u003eTraducir al inglés\u003c/button\u003e\n\n    \u003cscript src=\"tinyi18n.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      tinyi18n.loadTranslations('translations.json')\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n## Functions\n- `loadTranslations('translations.json')`: Loads JSON file with translations. Takes a filename as input\n- `getLang()`: Get the current language of the page according to tinyi18n\n- `setLang('en')`: Changes the page language to a specified language. Takes a language string as input\n\n## Attributes\n- `data-translatekey=\"title\"`: Use this on every text element you want to translate. Choose a different key for every element and add the translations for your keys in your JSON file\n- `data-translateattribute=\"value\"`: Use this on non-text elements where you need to have translated text for an attribute value (ex. value attribute for input elements)\n\n\n## Contributing\nContributions, issues, and forks are welcome but this is a hobby project so don't expect too much from it. [SemVer](http://semver.org/) is used for versioning.\n\n\n## License\nThis project is licensed under the Mozilla Public License 2.0. See [LICENSE](LICENSE.md) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerboa88%2Ftinyi18n","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjerboa88%2Ftinyi18n","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjerboa88%2Ftinyi18n/lists"}