Skip to content

Commit a9791fb

Browse files
dsoaressdsoaress
committed
chore(docs): Adds marscollective.co showcase
1 parent 26744f3 commit a9791fb

File tree

1 file changed

+32
-39
lines changed

1 file changed

+32
-39
lines changed

‎README.md‎

Lines changed: 32 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ 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-
2423
## Showcase
2524

2625
- [https://picpick.app](https://picpick.app)
@@ -29,9 +28,10 @@ Source: [https://github.com/wiziple/gatsby-plugin-intl/tree/master/examples/gats
2928
- [https://anhek.dev](https://anhek.dev) [(Source)](https://github.com/anhek/anhek-portfolio)
3029
- [https://pkhctech.ineo.vn](https://pkhctech.ineo.vn) [(Source)](https://github.com/hoangbaovu/gatsby-pkhctech)
3130
- [https://www.neonlaw.com](https://www.neonlaw.com) [(Source)](https://github.com/neonlaw/interface)
32-
- [https://ethereum.org](https://ethereum.org/)[(Source)](https://github.com/ethereum/ethereum-org-website)
31+
- [https://ethereum.org](https://ethereum.org/) [(Source)](https://github.com/ethereum/ethereum-org-website)
32+
- [https://marscollective.co](https://marscollective.co/) [(Source)](https://github.com/marscollective/marscollective.co)
3333

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

3636
## How to use
3737

@@ -64,12 +64,11 @@ plugins: [
6464

6565
For example,
6666

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 |
72-
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 |
7372

7473
### Change your components
7574

@@ -82,9 +81,7 @@ import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-intl"
8281
const IndexPage = ({ intl }) => {
8382
return (
8483
<Layout>
85-
<SEO
86-
title={intl.formatMessage({ id: "title" })}
87-
/>
84+
<SEO title={intl.formatMessage({ id: "title" })} />
8885
<Link to="/page-2/">
8986
{intl.formatMessage({ id: "go_page2" })}
9087
{/* OR <FormattedMessage id="go_page2" /> */}
@@ -94,7 +91,9 @@ const IndexPage = ({ intl }) => {
9491
}
9592
export default injectIntl(IndexPage)
9693
```
94+
9795
Or you can use the new `useIntl` hook.
96+
9897
```jsx
9998
import React from "react"
10099
import { useIntl, Link, FormattedMessage } from "gatsby-plugin-intl"
@@ -103,9 +102,7 @@ const IndexPage = () => {
103102
const intl = useIntl()
104103
return (
105104
<Layout>
106-
<SEO
107-
title={intl.formatMessage({ id: "title" })}
108-
/>
105+
<SEO title={intl.formatMessage({ id: "title" })} />
109106
<Link to="/page-2/">
110107
{intl.formatMessage({ id: "go_page2" })}
111108
{/* OR <FormattedMessage id="go_page2" /> */}
@@ -116,48 +113,44 @@ const IndexPage = () => {
116113
export default IndexPage
117114
```
118115

119-
120116
## How It Works
121117

122118
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.
123119

124-
file | English | Korean | German | Default*
125-
-- | -- | -- | -- | --
126-
src/pages/index.js | /**en** | /**ko** | /**de** | /
127-
src/pages/page-2.js | /**en**/page-2 | /**ko**/page-2 | /**de**/page-2 | /page-2
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 |
128124

129125
**Default Pages and Redirection**
130126

131127
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.
132128

133-
134129
## Plugin Options
135130

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

145139
## Components
146140

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

149143
To use it, simply import it from `gatsby-plugin-intl`.
150144

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

162155
## License
163156

0 commit comments

Comments
 (0)