{"id":16701156,"url":"https://github.com/scriptex/attr-i18n","last_synced_at":"2025-04-05T04:17:31.128Z","repository":{"id":65482438,"uuid":"593090741","full_name":"scriptex/attr-i18n","owner":"scriptex","description":"Translate your vanilla websites or web apps using HTML attributes and a pinch of Javascript","archived":false,"fork":false,"pushed_at":"2024-04-29T19:40:29.000Z","size":546,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-02T06:13:51.602Z","etag":null,"topics":["html-translation","i18n","internationalization","translation","vanilla-i18n"],"latest_commit_sha":null,"homepage":"https://attr-i18n.atanas.info","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scriptex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["scriptex"],"patreon":"atanas","open_collective":null,"ko_fi":"scriptex","tidelift":null,"community_bridge":null,"liberapay":"scriptex","issuehunt":"scriptex","otechie":null,"custom":["paypal.me/scriptex","revolut.me/scriptex"]}},"created_at":"2023-01-25T08:01:18.000Z","updated_at":"2024-05-03T22:38:42.656Z","dependencies_parsed_at":"2023-10-17T04:22:37.169Z","dependency_job_id":"2a2a0024-5d54-4171-bf0a-f342a367957f","html_url":"https://github.com/scriptex/attr-i18n","commit_stats":{"total_commits":15,"total_committers":2,"mean_commits":7.5,"dds":0.1333333333333333,"last_synced_commit":"181cb8fd3cf350eacc2fd3996dedecc1f4b70fed"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fattr-i18n","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fattr-i18n/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fattr-i18n/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fattr-i18n/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scriptex","download_url":"https://codeload.github.com/scriptex/attr-i18n/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284956,"owners_count":20913704,"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-translation","i18n","internationalization","translation","vanilla-i18n"],"created_at":"2024-10-12T18:29:02.707Z","updated_at":"2025-04-05T04:17:31.082Z","avatar_url":"https://github.com/scriptex.png","language":"TypeScript","readme":"# attr-i18n (Internationalization through HTML attributes)\n\n[![Github Build](https://github.com/scriptex/attr-i18n/workflows/Build/badge.svg)](https://github.com/scriptex/attr-i18n/actions?query=workflow%3ABuild)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/attr-i18n/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=scriptex/attr-i18n\u0026utm_campaign=Badge_Grade)\n[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-attr-i18n-master)\n[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/attr-i18n/badge)](https://www.codefactor.io/repository/github/scriptex/attr-i18n)\n[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=3574\u0026pid=5257\u0026bid=40799)\n[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/attr-i18n/README.md?pixel)](https://github.com/scriptex/attr-i18n/)\n\n\u003e Translate your vanilla websites or web apps using HTML attributes and a pinch of Javascript\n\n## Visitor stats\n\n![GitHub stars](https://img.shields.io/github/stars/scriptex/attr-i18n?style=social)\n![GitHub forks](https://img.shields.io/github/forks/scriptex/attr-i18n?style=social)\n![GitHub watchers](https://img.shields.io/github/watchers/scriptex/attr-i18n?style=social)\n![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)\n\n## Code stats\n\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/attr-i18n)\n![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/attr-i18n?style=plastic)\n![GitHub language count](https://img.shields.io/github/languages/count/scriptex/attr-i18n?style=plastic)\n![GitHub top language](https://img.shields.io/github/languages/top/scriptex/attr-i18n?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/attr-i18n?style=plastic)\n\n## Install\n\n```sh\nnpm i attr-i18n\n\n# or\n\nyarn add attr-i18n\n```\n\n## Usage\n\nFirst import and initialize the module.\n\n```typescript\nimport { AttrI18n } from 'attr-i18n';\n\nconst languages = ['English', 'हिन्दी', 'français'];\n\nnew AttrI18n(languages, {\n\tattr: 'data-translation',\n\tpath: 'assets/translations',\n\tdebug: true,\n\ttogglerID: 'language-toggle',\n\tdefaultLang: languages[0]\n});\n```\n\nThen in your HTML file(s):\n\n1. Add an HTML select element with the ID corresponding to the `togglerID` option above. This select element will toggle between languages\n2. 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.\n3. 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.\n\n## Options\n\n| Name          | Type      | Required | Default             | Description                                                                 |\n| ------------- | --------- | -------- | ------------------- | --------------------------------------------------------------------------- |\n| `attr`        | `string`  | false    | `data-attr-i18n`    | HTML attribute which contains the translation key                           |\n| `path`        | `string`  | false    | `assets/attr-i18n`  | Path to the folder which contains the translation JSON file(s)              |\n| `debug`       | `boolean` | false    | `false`             | Turns debug mode on/off                                                     |\n| `togglerID`   | `string`  | false    | `attr-i18n-toggler` | ID attribute for the language toggle HTML select element                    |\n| `defaultLang` | `string`  | false    | `languages[0]`      | The default language. If not provided, the first one from the array is used |\n\n## Example HTML\n\n### Language selector HTML select element\n\n```html\n\u003cselect id=\"language-toggle\"\u003e\n\t\u003coption\u003eEnglish\u003c/option\u003e\n\t\u003coption\u003eहिन्दी\u003c/option\u003e\n\t\u003coption\u003efrançais\u003c/option\u003e\n\u003c/select\u003e\n```\n\n### Page content\n\n```html\n\u003ch1 data-translation=\"form.desc\"\u003eFill Your Details!\u003c/h1\u003e\n\n\u003cdiv class=\"form-row\"\u003e\n\t\u003clabel data-translation=\"form.name\"\u003eName:\u003c/label\u003e\n\n\t\u003cinput type=\"text\" name=\"UserName\" size=\"35\" maxlength=\"35\" value=\"\" data-translation=\"form.name\" /\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"form-row\"\u003e\n\t\u003clabel data-translation=\"form.age\"\u003eAge:\u003c/label\u003e\n\n\t\u003cinput type=\"number\" name=\"Age\" size=\"35\" maxlength=\"35\" value=\"\" data-translation=\"form.age\" /\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"form-row\"\u003e\n\t\u003cp data-translation=\"form.exe.desc\"\u003eDo you exercise at home?\u003c/p\u003e\n\n\t\u003cul\u003e\n\t\t\u003cli\u003e\n\t\t\t\u003cinput type=\"radio\" name=\"exe\" value=\"1\" /\u003e\n\n\t\t\t\u003clabel data-translation=\"form.exe.yes\"\u003eYes\u003c/label\u003e\n\t\t\u003c/li\u003e\n\n\t\t\u003cli\u003e\n\t\t\t\u003cinput type=\"radio\" name=\"exe\" value=\"2\" /\u003e\n\n\t\t\t\u003clabel data-translation=\"form.exe.no\"\u003eNo\u003c/label\u003e\n\t\t\u003c/li\u003e\n\t\u003c/ul\u003e\n\u003c/div\u003e\n```\n\n## LICENSE\n\nMIT\n\n---\n\n\u003cdiv align=\"center\"\u003e\n    Connect with me:\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"mailto:hi@atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.linkedin.com/in/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://github.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://gitlab.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://twitter.com/scriptexbg\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.npmjs.com/~scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.youtube.com/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://stackoverflow.com/users/4140082/atanas-atanasov\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://codepen.io/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg\" width=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://profile.codersrank.io/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://linktr.ee/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\nSupport and sponsor my work:\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A\u0026url=https%3A%2F%2Fgithub.com%2Fscriptex\u0026via=scriptexbg\u0026hashtags=software%2Cgithub%2Ccode%2Cawesome\" title=\"Tweet\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter\u0026color=38A1F3\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://paypal.me/scriptex\" title=\"Donate on Paypal\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal\u0026color=222d65\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://revolut.me/scriptex\" title=\"Donate on Revolut\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://patreon.com/atanas\" title=\"Become a Patron\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon\u0026color=e64413\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://ko-fi.com/scriptex\" title=\"Buy Me A Coffee\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://liberapay.com/scriptex/donate\" title=\"Donate on Liberapay\"\u003e\n\t\u003cimg src=\"https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay\u0026logo=liberapay\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" title=\"Donate Bitcoin\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" title=\"Donate Etherium\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" title=\"Donate Shiba Inu\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","funding_links":["https://github.com/sponsors/scriptex","https://patreon.com/atanas","https://ko-fi.com/scriptex","https://liberapay.com/scriptex","https://issuehunt.io/r/scriptex","paypal.me/scriptex","revolut.me/scriptex","https://paypal.me/scriptex","https://liberapay.com/scriptex/donate"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Fattr-i18n","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscriptex%2Fattr-i18n","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Fattr-i18n/lists"}