Skip to content

Commit 97c4836

Browse files
dsoaressdsoaress
committed
undo lint
1 parent a9791fb commit 97c4836

File tree

1 file changed

+38
-30
lines changed

1 file changed

+38
-30
lines changed

‎README.md‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ Demo: [http://gatsby-starter-default-intl.netlify.com](http://gatsby-starter-def
2020

2121
Source: [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)
2222

23+
2324
## Showcase
2425

2526
- [https://picpick.app](https://picpick.app)
@@ -31,7 +32,7 @@ Source: [https://github.com/wiziple/gatsby-plugin-intl/tree/master/examples/gats
3132
- [https://ethereum.org](https://ethereum.org/) [(Source)](https://github.com/ethereum/ethereum-org-website)
3233
- [https://marscollective.co](https://marscollective.co/) [(Source)](https://github.com/marscollective/marscollective.co)
3334

34-
_Feel free to send us PR to add your project._
35+
*Feel free to send us PR to add your project.*
3536

3637
## How to use
3738

@@ -64,11 +65,12 @@ plugins: [
6465

6566
For example,
6667

67-
| language resource file | language |
68-
| ----------------------------------------------------------------------------------------------------------------------------------- | -------- |
69-
| [src/intl/en.json](https://github.com/wiziple/gatsby-plugin-intl/blob/master/examples/gatsby-starter-default-intl/src/intl/en.json) | English |
70-
| [src/intl/ko.json](https://github.com/wiziple/gatsby-plugin-intl/blob/master/examples/gatsby-starter-default-intl/src/intl/ko.json) | Korean |
71-
| [src/intl/de.json](https://github.com/wiziple/gatsby-plugin-intl/blob/master/examples/gatsby-starter-default-intl/src/intl/de.json) | German |
68+
| language resource file | language |
69+
| --- | --- |
70+
| [src/intl/en.json](https://github.com/wiziple/gatsby-plugin-intl/blob/master/examples/gatsby-starter-default-intl/src/intl/en.json) | English |
71+
| [src/intl/ko.json](https://github.com/wiziple/gatsby-plugin-intl/blob/master/examples/gatsby-starter-default-intl/src/intl/ko.json) | Korean |
72+
| [src/intl/de.json](https://github.com/wiziple/gatsby-plugin-intl/blob/master/examples/gatsby-starter-default-intl/src/intl/de.json) | German |
73+
7274

7375
### Change your components
7476

@@ -81,7 +83,9 @@ import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-intl"
8183
const IndexPage = ({ intl }) => {
8284
return (
8385
<Layout>
84-
<SEO title={intl.formatMessage({ id: "title" })} />
86+
<SEO
87+
title={intl.formatMessage({ id: "title" })}
88+
/>
8589
<Link to="/page-2/">
8690
{intl.formatMessage({ id: "go_page2" })}
8791
{/* OR <FormattedMessage id="go_page2" /> */}
@@ -91,9 +95,7 @@ const IndexPage = ({ intl }) => {
9195
}
9296
export default injectIntl(IndexPage)
9397
```
94-
9598
Or you can use the new `useIntl` hook.
96-
9799
```jsx
98100
import React from "react"
99101
import { useIntl, Link, FormattedMessage } from "gatsby-plugin-intl"
@@ -102,7 +104,9 @@ const IndexPage = () => {
102104
const intl = useIntl()
103105
return (
104106
<Layout>
105-
<SEO title={intl.formatMessage({ id: "title" })} />
107+
<SEO
108+
title={intl.formatMessage({ id: "title" })}
109+
/>
106110
<Link to="/page-2/">
107111
{intl.formatMessage({ id: "go_page2" })}
108112
{/* OR <FormattedMessage id="go_page2" /> */}
@@ -113,44 +117,48 @@ const IndexPage = () => {
113117
export default IndexPage
114118
```
115119

120+
116121
## How It Works
117122

118123
Let'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.
119124

120-
| file | English | Korean | German | Default\* |
121-
| ------------------- | -------------- | -------------- | -------------- | --------- |
122-
| src/pages/index.js | /**en** | /**ko** | /**de** | / |
123-
| src/pages/page-2.js | /**en**/page-2 | /**ko**/page-2 | /**de**/page-2 | /page-2 |
125+
file | English | Korean | German | Default*
126+
-- | -- | -- | -- | --
127+
src/pages/index.js | /**en** | /**ko** | /**de** | /
128+
src/pages/page-2.js | /**en**/page-2 | /**ko**/page-2 | /**de**/page-2 | /page-2
124129

125130
**Default Pages and Redirection**
126131

127132
If 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.
128133

134+
129135
## Plugin Options
130136

131-
| Option | Type | Description |
132-
| ----------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
133-
| path | string | language JSON resource path |
134-
| languages | string[] | supported language keys |
135-
| defaultLanguage | string | default language when visiting `/page` instead of `ko/page` |
136-
| redirect | 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. |
137-
| redirectComponent | string (optional) | additional component file path to be rendered on with a redirection component for SEO. |
137+
Option | Type | Description
138+
-- | -- | --
139+
path | string | language JSON resource path
140+
languages | string[] | supported language keys
141+
defaultLanguage | string | default language when visiting `/page` instead of `ko/page`
142+
redirect | 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.
143+
redirectComponent | string (optional) | additional component file path to be rendered on with a redirection component for SEO.
144+
138145

139146
## Components
140147

141148
To make it easy to handle i18n with multi-language url routes, the plugin provides several components.
142149

143150
To use it, simply import it from `gatsby-plugin-intl`.
144151

145-
| Component | Type | Description |
146-
| ------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
147-
| Link | 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. |
148-
| navigate | 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. |
149-
| changeLocale | function | A function that replaces your locale. `changeLocale(locale, to = null)` |
150-
| IntlContextConsumer | component | A context component to get plugin configuration on the component level. |
151-
| injectIntl | component | https://github.com/yahoo/react-intl/wiki/API#injection-api |
152-
| FormattedMessage | component | https://github.com/yahoo/react-intl/wiki/Components#string-formatting-components |
153-
| and more... | | https://github.com/yahoo/react-intl/wiki/Components |
152+
Component | Type | Description
153+
-- | -- | --
154+
Link | 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.
155+
navigate | 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.
156+
changeLocale | function | A function that replaces your locale. `changeLocale(locale, to = null)`
157+
IntlContextConsumer | component | A context component to get plugin configuration on the component level.
158+
injectIntl | component | https://github.com/yahoo/react-intl/wiki/API#injection-api
159+
FormattedMessage | component | https://github.com/yahoo/react-intl/wiki/Components#string-formatting-components
160+
and more... | | https://github.com/yahoo/react-intl/wiki/Components
161+
154162

155163
## License
156164

0 commit comments

Comments
 (0)