Gatsby Multilingual Blog Starter

This project is a comprehensive boilerplate designed to kickstart multilingual blog development using Gatsby. It comes pre-configured with a modern tech stack to ensure a fast, scalable, and maintainable application.

Key Features:

• TypeScript: Enhances code quality and developer experience with static typing.
• Styled-components: Provides a powerful CSS-in-JS solution for styling React components.
• i18n (Internationalization): Built-in support for multiple languages, making it easy to create global content.
• PWA (Progressive Web App): Optional configuration to transform your blog into a reliable, fast, and engaging web experience.
• Testing (Jest): Integrated testing framework for robust and reliable code.

Quick Start: To get started, use the Gatsby CLI to create a new site based on this starter:

gatsby new <appname> https://github.com/Zett-8/unbearable-lightness.git
cd <appname>/
gatsby develop

Your site will be running at http://localhost:8000.

Setting Up Languages:

1. Edit i18nLanguages.ts: Define your available languages and the default language.

   export const i18nLanguages: string[] = [`en`, `ja`]
   export const i18nDefaultLanguage: string = `en`

   Copy

2. Write Translations: Create translation files in locales/index.ts using a { key: value } format, supporting deep nesting.
3. Generate translation.json: Run yarn i18n to automatically generate the necessary translation files.

Article Writing: Articles should be organized under /contents/<YEAR>/<MONTH>/<TITLE>/<LANGUAGE>.md. Gatsby automatically generates paths like /<LANGUAGE>/_/TITLE for each article. Images are displayed with a 16:9 ratio and should be larger than 800x450px.

Component Architecture: The project follows a five-layer component architecture for clarity and maintainability:

1. Import layer: Handles all necessary imports.
2. Type layer: Defines component props and other types.
3. Component layer: Stateless, focused solely on rendering.
4. Style layer: Manages component-specific styling using Styled-components.
5. Container layer: Manages state and business logic, wrapping the styled component.

This starter provides a solid foundation for developers looking to build high-performance, internationalized blogs with modern web technologies.