3nvi / gatsby-intl Goto Github PK
View Code? Open in Web Editor NEWA collection of gatsby packages to easy the mundane tasks of i18n support
License: Other
A collection of gatsby packages to easy the mundane tasks of i18n support
License: Other
SEO is very personal and should be handled in userland. If anything, please provide a disable option in the plugin and instructions for userland integration into sites' own SEO components.
i just installed the plugin (theme-intl) , added this configuration :
{ resolve:
@3nvi/gatsby-theme-intl, options: { supportedLanguages: ['en', 'fr'], i18nextConfig: { resources: {"en": { "translation":{ "de" : {"greeting": 'hello'}}}}, "fr": { "translation":{ "de" : { "greeting": 'bonjour'}}}}, }, },
and imported useTranslation in a component to test and it seems like something missing as i tried {t("de")}
and {t("de.greeting")}
and just get de.greeting , but when i delete the de object and add only greeting , it works , how to make it works as i want to make all my pages in one json
The starter project does not work with build. (The language pages are generated, but the redirection pages are not. So you can access "site.com/en", but you can't access "site.com/" and then be redirected to "site.com/en".)
Although the project works fine with "npm run start" or "gatsby develop". Not sure why that is.
Steps to reproduce the problem:
git clone https://github.com/3nvi/gatsby-intl intl-site
cd intl-site/packages/gatsby-starter-intl
npm install
gatsby clean
gatsby build
gatsby serve
chrome http://localhost:9000
This is a great starter but as it stands the work added to the gatsby-starter-default
is unclear from a licensing perspective given no copyright notice was added by the author. Please add a copyright notice. For more information see: https://writing.kemitchell.com/2016/09/21/MIT-License-Line-by-Line.html. If you're unsure how to add a notice let me know and I'll help.
Related: gatsbyjs/gatsby#25091
Hi @3nvi,
I'm getting these errors in the console: Cannot update a component ('IndexPage') while rendering a different component ('PageRenderer'). To locate the bad setState() call inside 'PageRenderer',
The route "/" matches both a page and a redirect; this is probably not intentional.
For the first error, could it be happening because how gatsby-theme-intl
is providing context? According to this article: https://markoskon.com/wrap-root-element-vs-wrap-page-element/, it says that we can use wrapPageElement
for everything but wrapPageElement
should be used for providers that require router props and wrapRootElement
for any other provider, like theme and global state providers.
Could this error be happening because where we are wrapping page element that rerenders every time while wrapRootElement
only renders once?
When I clone gatsby-starter-intl
, both these errors are present.
The problem with this error: The route "/" matches both a page and a redirect; this is probably not intentional.
, could it be that we are not removing the trailing slash? In Gatsby's example for i18n here: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-i18n/gatsby-node.js they are removing the trailing slash.
With gatsby-theme-intl, in package.json, you have a dependency on "react-helmet": "^5.2.1"
.
Because of this, I get the following warning on the browser console:
Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
- Move code with side effects to componentDidMount, and set initial state in the constructor.
- Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run
npx react-codemod rename-unsafe-lifecycles
in your project source folder.Please update the following components: SideEffect(NullComponent)
To avoid this problem, we should update to react-helmet 6.1 or higher.
Hi,
I've kickstarted a project with your Gatsby starter and as far as language handling does it works great.
However, I want to have a section for authenticated users and I'm following this article: https://www.gatsbyjs.org/docs/client-only-routes-and-user-authentication/
in gatsby-node.js
I have this:
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
if (page.path.match(/^\/app/)) {
page.matchPath = '/app/*'
createPage(page)
}
}
And if I go to http://localhost:8000/app
I have indeed the app. However, I lose the ability to have languages. I'm wondering how I could handle multilingual in the app, something like this: http://localhost:8000/app/profile/en
or http://localhost:8000/app/profile/fr
?
I'm unable to get the gatsby-offline plugin to cache any pages when using gatsby-theme-intl. The build process generates the following warning:
warn One of the glob patterns doesn't match any files. Please remove or fix the following: {
"globDirectory": "public",
"globPattern": "offline-plugin-app-shell-fallback/index.html",
"globIgnores": [
"**/workbox-v4.3.1/*.+(js|mjs)*",
"**/node_modules/**/*",
"**/sw.js"
]
}
info Generated public/sw.js, which will precache 0 files, totaling 0 bytes.
Hi Anggelo. Me again. Sorry for opening so many issues. I want to make one more suggestion after surfing through your quite comprehensive and very useful related blog post.
When visiting a website with Internationalizaton it would be preferable for a default language to not redirect URLs. This is as a UX thing and if you ever copied a Wikipedia link then chopped off the en
subdomain before sharing it you know what I'm talking about. So basically what I'm proposing is that, if a default language is specified (e.g. Greek), the site would serve up Greek by default and not at the /el/
path.
It's okay if the explicit route and duplicate pages exist so long as rel=canonical
is used. Please note I'm relatively new to Gatsby so I'm not sure if there are any technical limitations of what I'm proposting here. But maybe you know?
Hi,
I was trying to instead of passing a <Layout>
component to each page, pass it to wrapPageElement, thus this layout would be passed to all pages.
I was trying to do something like so.
In gatsby-ssr.js
file I'd import my layout component import Layout from './src/components/layout
and I'd then
export const wrapPageElement = ({ element, props }) => (<Layout {...props}>{element}</Layout>)
However in the header where I have the language selector, I get an error cannot read map of undefined
and this is because supportedLanguages
is undefined.
I don't understand why this is happening. Does it has to do with how the theme is implemented? And if I try to wrap the page element at the moment of doing so, usePageContext
hasn't been initialized yet?
Do you have any suggestion on how I could solve this problem?
Thank you
This is what your project is built to do:
http://asdf.com/page
: activates some SSR code that rewrites the url to the right language
http://asdf.com/en/page
: The page in English
http://asdf.com/fr/page
: The page in French
But this is what my project requires:
http://asdf.com/page
: The page in English.
http://asdf.com/fr/page
: The page in French
http://asdf.com/en/page
: I don't need that page (but it's okay if an English page is returned)
French visitors will see the English page if they go directly to the default homepage. This is by design: they will have to click on a link to get to the French version. (If they go through a search engine, chances are that the French page /fr/page will be the page recommended.)
Using the deleteOriginalPages: false
configuration, I mostly got what I needed. Thank you! Yay!
But there are some issues. The biggest one is gatsby-plugin-intl
. This project uses Helmet to create link alternate hrefLang
elements that are using the "ssr". But there are some problems:
1. It's using the wrong links:
The Link elements that are generated are compatible with the SSR way of doing things.
<link rel="canonical" href="http://asdf.com/en/" >
<link rel="alternate" href="http://asdf.com/" hreflang="x-default" >
<link rel="alternate" href="http://asdf.com/en/" hreflang="en" >
<link rel="alternate" href="http://asdf.com/fr/" hreflang="fr" >
<meta property="og:locale" content="en" >
But this is what I'd need to have:
<link rel="canonical" href="http://asdf.com/" >
<link rel="alternate" href="http://asdf.com/" hreflang="en" >
<link rel="alternate" href="http://asdf.com/fr/" hreflang="fr" >
<meta property="og:locale" content="en" >
a) I don't need a x-default language.
b) The default language doesn't need the /en/ routing
2. There's no way to specify the host in "no-ssr" scenarios.
gatsby-browser.js
is wrapping gatsby-ssr.js
. And the latter is using constants.js
, which initializes the host name to localhost :8080
in "no SSR" scenarios. This is wrong. There should be a way to specify the host name in the gatsby-config
file.
Take a look at the documentation for gatsby-plugin-robots-txt
.
Using siteUrl
works very well. (I was sure it didn't when I originally tried it. My bad!)
3. The links are not generated on first load
The links are not generated when I first get to the page. I need to follow a routing link first to generate the links in the Dom. This means that search engines won't get the headers.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.