Giter VIP home page Giter VIP logo

everton137 / iceberg-gatsby-multilang Goto Github PK

View Code? Open in Web Editor NEW

This project forked from dionarodrigues/iceberg-gatsby-multilang

0.0 0.0 0.0 7.62 MB

๐Ÿš€ A Gatsby starter Internationalization / i18n without third party plugins or packages with Posts and Pages by using markdown and CMS.

Home Page: https://iceberg-gatsby-multilang.netlify.com/

License: MIT License

JavaScript 99.35% Dockerfile 0.65%

iceberg-gatsby-multilang's Introduction

Gitpod Ready-to-Code

Gatsby multi-language starter with CMS

Demo on Netlify

Starter on Gatsby

A starter Internationalization / i18n without third party plugins or packages for Posts and Pages. Different URLs dependending on the language. Focused on SEO, PWA, Image Optimization, Styled Components and more. This starter is also integrate with Netlify CMS to manage all pages, posts and images.

  • Translations by using GraphQL, hooks and context API
  • Content in markdown for pages and posts in different languages
  • General translations for any content
  • Creation of menus by using, jSON, translations and GraphQL
  • Netlify CMS to manage all pages, posts and images
  • Styled Components to styles
  • All important seetings for speedy and optimized images
  • Blog Posts list with pagination
  • Focus on SEO
  • PWA

๐Ÿš€ Getting Started

Assuming Gatsby is installed, run the following commands to install the project:

With gatsby-cli:

$ gatsby new gatsby-multilanguage-site https://github.com/diogorodrigues/iceberg-gatsby-multilang.git

With git clone:

$ git clone https://github.com/diogorodrigues/iceberg-gatsby-multilang.git your-project-name # Clone the project

cd your-project-name

rm -rf .git
yarn install # or npm install
gatsby develop # or yarn run develop

Running gatsby develop you will see the following URLs:

http://localhost:8000
http://localhost:8000/___graphql
http://localhost:8000/admin

File Structure

A quick look at the top-level files and directories you'll see in a Gatsby project.

โ”œโ”€โ”€ blog
โ”‚   โ”œโ”€โ”€ markdown-file.en.md
โ”‚   โ”œโ”€โ”€ markdown-file.pt.md
โ”œโ”€โ”€ config
โ”‚   โ”œโ”€โ”€ language-mapping
โ”‚   โ”œโ”€โ”€ menu
โ”‚   โ”‚   โ”œโ”€โ”€ en.json
โ”‚   โ”‚   โ”œโ”€โ”€ pt.json
โ”‚   โ”œโ”€โ”€ translations
โ”‚   โ”‚   โ”œโ”€โ”€ en.json
โ”‚   โ”‚   โ”œโ”€โ”€ pt.json
โ”‚   โ”œโ”€โ”€ i18n.js
โ”œโ”€โ”€ pages
โ”‚   โ”œโ”€โ”€ markdown-file.en.md
โ”‚   โ”œโ”€โ”€ markdown-file.pt.md
โ”œโ”€โ”€ src
โ”œโ”€โ”€ static
โ”‚   โ”œโ”€โ”€ admin
โ”‚   โ”‚   โ”œโ”€โ”€ config.yml
โ”‚   โ”œโ”€โ”€ assets
โ”‚   โ”‚   โ”œโ”€โ”€ img
โ”œโ”€โ”€ gatsby-browser.js
โ”œโ”€โ”€ gatsby-config.js
โ”œโ”€โ”€ gatsby-node.js
โ”œโ”€โ”€ gatsby-ssr.js
โ”œโ”€โ”€ wrapPageElement.js

  1. blog and pages directories: All markdown files to generate pages and posts.

  2. config: All language settings: languages, strings, menu... In i18n.js you can set the languages and some others important info

  3. src: Components, hooks, templates and fixed pages (Different of markdown pages, these pages have the same url for all languages and the text content needs to be inserted in config/translations files).

  4. static: Netlify settings and images.

  5. gatsby-browser.js: External files and the layout wrapper setting.

  6. gatsby-config.js: Gatsby plugins.

  7. gatsby-node.js: Logic for generating pages and posts by manipulating GraphQL.

  8. wrapPageElement.js As this component wraps every page (due to the wrapPageElement API) we can be sure to have the locale available everywhere!

About Netlify CMS

You must change the Netlify data "repo" and "site_domain" according your Github repository in static/admin/config.yml.

backend:
    name: github # Local
    # name: git-gateway # Prod
    repo: _owner-name/repo-name_ # Path to your GitHub repository
    branch: master
    site_domain: _site-url_ # If site extists

Realize that you need to use name: github for local development and name: git-gateway for prod environment (netlify)

Important notes:

  • General information for languages are defined in config/i18n.js.
  • The general content translations are located in config/translations and the useTranslations custom hook pulls these translations (via GraphQL query) and inserts them into the pages.
  • The menu items translations are located in config/menu and the useMenu custom hook pulls these translations (via GraphQL query) and inserts them into the pages.
  • โœจ New: Adding corresponding urls are locating in config/language-mapping and the useLanguageMapping custom hook pulls these translations (via GraphQL query) and inserts them into the pages. It is used together with the language switcher so that the page is directed to a page corresponding to the other language.
  • Due to the use of a global layout / context API and the language code passed to all pages (see gatsby-node.js), you know on all pages which language is currently displayed.
  • Blogposts are defined in blog directory and pages are defined in pages directory. The file names are the slug of the posts and pages.
  • A custom component for the tag is implemented - this way links can stay the same for every language, without the need to manually write path prefixes.

Deploy

Deploy to Netlify


๐Ÿ’œ Thanks


This project started based on this solution to create a manner to provide translations, but I added a lots of other solutions based on my projects needs (like menu from GraphQL, markdown for pages, pagination, image optmization, styled components, PWA, CMS and more). Feel free to use this solution if you want. :)

iceberg-gatsby-multilang's People

Contributors

dependabot[bot] avatar nagi1 avatar codenamejason avatar gstrainovic avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.