{"id":14962946,"url":"https://github.com/wiziple/gatsby-plugin-intl","last_synced_at":"2025-04-08T10:31:39.185Z","repository":{"id":34406278,"uuid":"140054670","full_name":"wiziple/gatsby-plugin-intl","owner":"wiziple","description":"Gatsby plugin that turns your website into an internationalization-framework out of the box.","archived":false,"fork":false,"pushed_at":"2024-05-25T21:20:37.000Z","size":8202,"stargazers_count":324,"open_issues_count":88,"forks_count":175,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-31T15:32:12.366Z","etag":null,"topics":["gatsby-plugin","gatsby-plugin-intl","gatsby-starter","gatsbyjs","i18n","intl","localization","react-intl","seo"],"latest_commit_sha":null,"homepage":"http://gatsby-starter-default-intl.netlify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wiziple.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-07-07T05:11:05.000Z","updated_at":"2024-12-04T18:26:12.000Z","dependencies_parsed_at":"2024-06-18T12:42:47.886Z","dependency_job_id":"c7090409-07ab-41f2-b210-b9b43d833aae","html_url":"https://github.com/wiziple/gatsby-plugin-intl","commit_stats":{"total_commits":106,"total_committers":27,"mean_commits":3.925925925925926,"dds":0.4528301886792453,"last_synced_commit":"1e3ab9fe0d8a4b770e3255db3684af309bc108e0"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiziple%2Fgatsby-plugin-intl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiziple%2Fgatsby-plugin-intl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiziple%2Fgatsby-plugin-intl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wiziple%2Fgatsby-plugin-intl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wiziple","download_url":"https://codeload.github.com/wiziple/gatsby-plugin-intl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247426999,"owners_count":20937199,"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":["gatsby-plugin","gatsby-plugin-intl","gatsby-starter","gatsbyjs","i18n","intl","localization","react-intl","seo"],"created_at":"2024-09-24T13:30:47.790Z","updated_at":"2025-04-08T10:31:39.147Z","avatar_url":"https://github.com/wiziple.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-plugin-intl\n\nInternationalize your Gatsby site.\n\n## Features\n\n- Turn your gatsby site into an internationalization-framework out of the box powered by [react-intl](https://github.com/yahoo/react-intl).\n\n- Support automatic redirection based on the user's preferred language in browser provided by [browser-lang](https://github.com/wiziple/browser-lang).\n\n- Support multi-language url routes in a single page component. This means you don't have to create separate pages such as `pages/en/index.js` or `pages/ko/index.js`.\n\n## Why?\n\nWhen you build multilingual sites, Google recommends using different URLs for each language version of a page rather than using cookies or browser settings to adjust the content language on the page. [(read more)](https://support.google.com/webmasters/answer/182192?hl=en\u0026ref_topic=2370587)\n\n## Starters\n\nDemo: [http://gatsby-starter-default-intl.netlify.com](http://gatsby-starter-default-intl.netlify.com)\n\nSource: [https://github.com/wiziple/gatsby-plugin-intl/tree/master/examples/gatsby-starter-default-intl](https://github.com/wiziple/gatsby-plugin-intl/tree/master/examples/gatsby-starter-default-intl)\n\n\n## Showcase\n\n- [https://picpick.app](https://picpick.app)\n- [https://www.krashna.nl](https://www.krashna.nl) [(Source)](https://github.com/krashnamusika/krashna-site)\n- [https://vaktija.eu](https://vaktija.eu)\n- [https://anhek.dev](https://anhek.dev) [(Source)](https://github.com/anhek/anhek-portfolio)\n- [https://pkhctech.ineo.vn](https://pkhctech.ineo.vn) [(Source)](https://github.com/hoangbaovu/gatsby-pkhctech)\n- [https://www.neonlaw.com](https://www.neonlaw.com) [(Source)](https://github.com/neonlaw/interface)\n- [https://ethereum.org](https://ethereum.org/) [(Source)](https://github.com/ethereum/ethereum-org-website)\n- [https://marscollective.co](https://marscollective.co/) [(Source)](https://github.com/marscollective/marscollective.co)\n\n*Feel free to send us PR to add your project.*\n\n## How to use\n\n### Install package\n\n`npm install --save gatsby-plugin-intl`\n\n### Add a plugin to your gatsby-config.js\n\n```javascript\n// In your gatsby-config.js\nplugins: [\n  {\n    resolve: `gatsby-plugin-intl`,\n    options: {\n      // language JSON resource path\n      path: `${__dirname}/src/intl`,\n      // supported language\n      languages: [`en`, `ko`, `de`],\n      // language file path\n      defaultLanguage: `ko`,\n      // option to redirect to `/ko` when connecting `/`\n      redirect: true,\n    },\n  },\n]\n```\n\n### You'll also need to add language JSON resources to the project.\n\nFor example,\n\n| language resource file | language |\n| --- | --- |\n| [src/intl/en.json](https://github.com/wiziple/gatsby-plugin-intl/blob/master/examples/gatsby-starter-default-intl/src/intl/en.json) | English |\n| [src/intl/ko.json](https://github.com/wiziple/gatsby-plugin-intl/blob/master/examples/gatsby-starter-default-intl/src/intl/ko.json) | Korean |\n| [src/intl/de.json](https://github.com/wiziple/gatsby-plugin-intl/blob/master/examples/gatsby-starter-default-intl/src/intl/de.json) | German |\n\n\n### Change your components\n\nYou can use `injectIntl` HOC on any react components including page components.\n\n```jsx\nimport React from \"react\"\nimport { injectIntl, Link, FormattedMessage } from \"gatsby-plugin-intl\"\n\nconst IndexPage = ({ intl }) =\u003e {\n  return (\n    \u003cLayout\u003e\n      \u003cSEO\n        title={intl.formatMessage({ id: \"title\" })}\n      /\u003e\n      \u003cLink to=\"/page-2/\"\u003e\n        {intl.formatMessage({ id: \"go_page2\" })}\n        {/* OR \u003cFormattedMessage id=\"go_page2\" /\u003e */}\n      \u003c/Link\u003e\n    \u003c/Layout\u003e\n  )\n}\nexport default injectIntl(IndexPage)\n```\nOr you can use the new `useIntl` hook.\n```jsx\nimport React from \"react\"\nimport { useIntl, Link, FormattedMessage } from \"gatsby-plugin-intl\"\n\nconst IndexPage = () =\u003e {\n  const intl = useIntl()\n  return (\n    \u003cLayout\u003e\n      \u003cSEO\n        title={intl.formatMessage({ id: \"title\" })}\n      /\u003e\n      \u003cLink to=\"/page-2/\"\u003e\n        {intl.formatMessage({ id: \"go_page2\" })}\n        {/* OR \u003cFormattedMessage id=\"go_page2\" /\u003e */}\n      \u003c/Link\u003e\n    \u003c/Layout\u003e\n  )\n}\nexport default IndexPage\n```\n\n\n## How It Works\n\nLet's say you have two pages (`index.js` and `page-2.js`) in your `pages` directory. The plugin will create static pages for every language.\n\nfile | English | Korean | German | Default*\n-- | -- | -- | -- | --\nsrc/pages/index.js | /**en** | /**ko** | /**de** | /\nsrc/pages/page-2.js | /**en**/page-2 | /**ko**/page-2 | /**de**/page-2 | /page-2\n\n**Default Pages and Redirection**\n\nIf redirect option is `true`, `/` or `/page-2` will be redirected to the user's preferred language router. e.g) `/ko` or `/ko/page-2`. Otherwise, the pages will render `defaultLangugage` language. You can also specify additional component to be rendered on redirection page by adding `redirectComponent` option.\n\n\n## Plugin Options\n\nOption | Type | Description\n-- | -- | --\npath | string | language JSON resource path\nlanguages | string[] | supported language keys\ndefaultLanguage | string | default language when visiting `/page` instead of `ko/page`\nredirect | boolean | if the value is `true`, `/` or `/page-2` will be redirected to the user's preferred language router. e.g) `/ko` or `/ko/page-2`. Otherwise, the pages will render `defaultLangugage` language.\nredirectComponent | string (optional) | additional component file path to be rendered on with a redirection component for SEO.\n\n\n## Components\n\nTo make it easy to handle i18n with multi-language url routes, the plugin provides several components.\n\nTo use it, simply import it from `gatsby-plugin-intl`.\n\nComponent | Type | Description\n-- | -- | --\nLink | component | This is a wrapper around @gatsby’s Link component that adds useful enhancements for multi-language routes. All props are passed through to @gatsby’s Link component.\nnavigate | function | This is a wrapper around @gatsby’s navigate function that adds useful enhancements for multi-language routes. All options are passed through to @gatsby’s navigate function.\nchangeLocale | function | A function that replaces your locale. `changeLocale(locale, to = null)`\nIntlContextConsumer | component | A context component to get plugin configuration on the component level.\ninjectIntl | component | https://github.com/yahoo/react-intl/wiki/API#injection-api\nFormattedMessage | component | https://github.com/yahoo/react-intl/wiki/Components#string-formatting-components\nand more... | | https://github.com/yahoo/react-intl/wiki/Components\n\n\n## License\n\nMIT \u0026copy; [Daewoong Moon](https://github.com/wiziple)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiziple%2Fgatsby-plugin-intl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwiziple%2Fgatsby-plugin-intl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiziple%2Fgatsby-plugin-intl/lists"}