Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zett-8/gatsby-multilingual-blog
Multilingual blog starter
https://github.com/zett-8/gatsby-multilingual-blog
blog-starter gatsby gatsby-starter i18n multilingual styled-components typescript
Last synced: 11 days ago
JSON representation
Multilingual blog starter
- Host: GitHub
- URL: https://github.com/zett-8/gatsby-multilingual-blog
- Owner: zett-8
- License: mit
- Created: 2022-07-08T13:34:44.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-08-08T07:02:19.000Z (over 2 years ago)
- Last Synced: 2023-03-07T12:49:19.627Z (over 1 year ago)
- Topics: blog-starter, gatsby, gatsby-starter, i18n, multilingual, styled-components, typescript
- Language: TypeScript
- Homepage: https://gatsby-multilingual-blog.netlify.app/
- Size: 5.75 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Gatsby's multilingual blog starter
Kick off your project with this boilerplate. This starter ships with the several configuration files you might need to get up and running blazing fast app.
## ๐ฅ๏ธ Minimum starter with some setup
- Typescript
- Styled-component
- i18n
- PWA (optional)
- Testing (Jest)
## ๐ Demo
[Demo Site](https://gatsby-multilingual-blog.netlify.app/)
## โ
Status
[](https://github.com/zett-8/gatsby-multilingual-blog/actions/workflows/build-test.yml)ใ
[](https://app.netlify.com/sites/gatsby-multilingual-blog/deploys)
## ๐ฏ Lighthouse Performance
## ๐ Quick start
1. **Create a Gatsby site.**
Use the Gatsby CLI to create a new site, specifying this repo.
```shell
gatsby new https://github.com/Zett-8/unbearable-lightness.git
```
1. **Start developing.**
Navigate into your new siteโs directory and start it up.
```shell
cd /
gatsby develop
```
1. **Check on browser**
The site is now running at `http://localhost:8000`
_Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._
## ๐บ๐ณ Set available languages
1. **Edit i18nLanguages.ts**
Set available languages and default language. They are automatically applied in the project.
```typescript
// i18nLanguages.ts
export const i18nLanguages: string[] = [`en`, `ja`]
export const i18nDefaultLanguage: string = `en`
```
2. **Write Translations for each language**
Translations should be { key:value } format. It can be deeply nested if necessary.
```typescript
// locales/index.ts
const translations = {
index: {
description: {
en: `Hello world. This is Multilingual Blog. you can switch languages clicking the top-right button.`,
ja: `ใใญใผใฏใผใซใใใใใฏๅค่จ่ชๅฏพๅฟใใญใฐใงใใๅณไธใฎใใฟใณใง่จ่ชใในใคใใใใใใจใๅฏ่ฝใงใใ`,
},
},
}
```
3. **Generate translation.json**
Usually you need to make translation.json file for each language in locales folder. But in this project, all you need to do is just run command `yarn i18n`
```shell
yarn i18n
```
## ๐ผ๏ธ How to write article
1. **Folder and naming**
The article should be placed in
```
/contents////.md
```
Gatsby will automatically retrieve all markdown files on build time and make the path for each article as `//_/`.
2. **Image ratio and size**
All Images are displayed with 16 / 9 ratio. The size should be bigger than 800 x 450 px.
## ๐๏ธ Component architecture
A component file consists of five layers.
1. Import layer
2. Type layer
3. Component layer (Should be stateless. Only concerned rendering.)
4. Style layer
5. Container layer (Able to have state and logic.)
```tsx
/** 1. Import layer **/
import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import { ChildComponent } from './child-component'
/** 2. Type layer **/
type ContainerProps = {
className?: string
}
type ComponentProps = {
className?: string
someData: any
}
/** 3. Component layer **/
const Component = ({ className, someData }: ComponentProps) => (
)
/** 4. Style layer **/
const StyledComponent = styled(Component)`
width: 100%;
margin: 16px;
font-size: 2rem;
`
/** 5. Container layer **/
export const MyComponent = (props: ContainerProps) => {
const [yourState, setYourState] = useState('')
useEffect(() => {
// do something here
}, [])
return
}
```
## ๐ What's inside?
A quick look at files and directories you'll see in this project.
.
โโโ .github
โโโ __mocks__
โโโ contents
โโโ locales
โโโ src
โ โโโ components
โ โโโ images
โ โโโ pages
โ โโโ providers
โ โโโ styled
โ โโโ templates
โโโ .gitignore
โโโ .prettierignore
โโโ .prettierrc
โโโ gatsby-browser.ts
โโโ gatsby-config.ts
โโโ gatsby-node.ts
โโโ gatsby-ssr.ts
โโโ gatsby-wrapper.tsx
โโโ i18nLanguages.ts
โโโ jest.config.js
โโโ jest-preprocess.js
โโโ LICENSE
โโโ loadershim.js
โโโ package.json
โโโ README.md
โโโ setup-test-env.js
โโโ tsconfig.json
โโโ yarn.lock
## ๐ Learning Gatsby
Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:
- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.