dionarodrigues/iceberg-gatsby-multilang

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

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

---

💜 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 Issues

Route change path bug

When switching language, I often end up with erroneous paths, yielding a blank or 404 page. In both Chrome and Firefox.

http://localhost:3000/pt//blog -> When switching from EN version
http://localhost:3000/pt/contato/pt/contato -> when re-clicking on contao in the menu
http://localhost:3000/pt/pt/sobre -> when clicking "sobre" in the menu from http://localhost:3000/pt
http://blog/adding-menu-items (set as absolute url - no protocol). -> when switching from the PT version.
I did some test adding new files, but git stash all changes, ran gatsby clean, used the default port, but the issue is still present. It's such a big problem, that I've assume it's project specific, but I've reverted to the initial repo. Is there some hidden cache that is gitignored and not cleared by gatsby clean?

This is happening both in the develop and build versions.

Perhaps it's only affecting localhost? Is this an issue you ran into previously?

Remove outdated and vulnerable package

Gatsby-plugin-prefetch-google-fonts is archived, no longer updated and vulnerable.

Please see https://npmjs.com/advisories/1550

Paginated blog posts list routes to homepage when language is changed

The Starter sample contains five blog items which make two pages. When I am on page 1, I can switch between languages and remain on the same page, which is correct. When I am on page 2 and switch to another language, I am routed to the homepage, which is not user-intuitive.
It seems that the Starter requires that a blog post exists in every site language and it sorts them by date, so pagination rules should allow matching the pages.

open an associated blogpost in other languages

maybe it is somehow possible to open the associated pages in the other languages?

if the filename is same then it maybe is easy but when the filenames are different then it should be somehow mapped?

maybe with a filename language mapping json between the translations?

Backend not working on live site hosted on Netlify

Hello, I used your Deploy to Netlify button and everything seems to work great except I can't login to the backend. But when I cloned the repo and viewed the site locally it worked perfectly.

I tried everything I could think of to get it to work on the live site including...

• Enabled Identity for the site in its Netlify Dashboard
• Installed the netlify-identity-widget
• Edited all the config files to use my GitHub information instead of yours
• Created a OAuth App on Github and Connected the site to it in its Netlify Dashboard
• In Netlify Dashboard I went to Settings > Identity > Registration > External Providers and I added GitHub
• I think I tried some other stuff that I forgot as well.

But no matter what I tried, I always got the following screen in a popup after I clicking "login with GitHub" from "/admin" on the live site...

I'm about to start over, can you please tell me which of the things I tried was actually necessary if any of them. I'm starting to wonder if Netlify Identity is needed at all.

Anyways can you please help me figure out how to get the backend working on a live site hosted on Netlify?

Thanks,

Chris

Blog post dates are rendered incorrectly.

Hello.

I noticed that on your demo site the blog post dates are being incorrectly rendered.

For example, for the blog post Adding menu items, the date being rendered is 15/10/2019 rather than the DD/MM/YYYY format of 10/15/2019.

Similarly, for the blog post Digital image processing, the date being rendered is 01/04/2019 when it should be 04/01/2019.

This is seen in both en and pt.

Third language breaks a lot of things

I added one more language to the Starter. It broke many things at once:

• the second page in the Blogs returns 404
• Blog posts mix up with pages like "contact" and "about"
• some pictures don't load with blog posts while some do
• there are multiple warnings during gatsby develop start phase - like "warn You can't use childImageSharp together with en.json — use publicURL instead. The childImageSharp portion of the query in this file will return null: undefined"

Not every error is easily reproducible; a restart of gatsby develop may change the behaviour.

Page not found when deploying to Netlify

Hello,

I followed the steps provided but when I deploy to netlify, I get a page not found although there are no errors.
https://notmilkrecipe.netlify.app/

I tried both using the steps cloning from github and using the button "deploy to netlify" and I have the same error on both
https://relaxed-gates-6dd431.netlify.app/

URL path shows wrong

I have issue with the url pathing. Explained here https://stackoverflow.com/questions/65109680/is-there-way-to-correct-this-url-path-in-gatsby

and when I change the link in the to: It doesn't find the page at all.

                <Link key={slug} to={`/references/${slug}`}>
                                <ReferencesItem
                                    slug={`/references/${slug}`}
                                    background={background}
                                    category={category}
                                    date={date}
                                    timeToRead={timeToRead}
                                    title={title}
                                    description={description}
                                    image={image}
                                    key={slug}
                                />