gatsbyjs / themes Goto Github PK
View Code? Open in Web Editor NEWThis is a repo for Gatsby's official themes.
This is a repo for Gatsby's official themes.
prefixDefault=true
prepends the locale to all URLs. This is nice feature but breaks the /
page, trying to access http://localhost:8000/
returns a 404.
There's not a page yet at /
The page src/pages/index.tsx
is working as intended, it's served at /<locale>
. My objective is to create a language agnostic index page (/
) that detects the browser locale and redirect the user to http://localhost:8000/<locale>/
. However I'm not sure what is the right approach.
I digged into the code of this theme and implemented a workaround. A page for language detection is added in gatsby-node.js
and tricks gatsby-theme-i18n to ignore it.
// gatsby-node.js
exports.createPages = async ({ actions: { createPage } }) => {
createPage({
path: '/index.html',
matchPath: '/',
component: require.resolve('./src/templates/LangDetectionPage.js'),
context: {
// Important!!! This makes gatsby-theme-i18n ignore this page
originalPath: '/index.html',
// Need to hardcode them, themeOptions is not yet defined
locale: 'en',
hrefLang: 'en-US',
dateFormat: 'MM/DD/YYYY'
}
});
};
This is clearly not a good long term solution, and neither is to hardcode a createRedirect
.
Could theme options be extended to specify a unprefixed index page?
prefixDefault: boolean | { unprefixedIndexPath: string }
EDIT: with gatsby 3 the workaround is not as effective. The client side router still loads the page, but there is no public/index.html
page being generated and a 404 page is served instead which is visible for about 1-2 seconds.
Hello, I'm using both .md
and .mdx
file extension for my blog posts. And while using gatsby-theme-i18n
,
I found it generate a wrong locale
and isDefault
node fields when my blog file extension is setting to .md
, the graphql result is like this,
{
"node": {
"fields": {
"isDefault": false,
"locale": "md"
}
}
},
after change my blog markdown file extension to .mdx
, then I get the correct result.
{
"node": {
"fields": {
"isDefault": true,
"locale": "en"
}
}
},
Describe the bug:
I am using the following configuration file for a gatsby.js page. With the defaultLang set to en
, it correctly redirects the user from domain.com
to the localized version domain.com/en
. However, this redirect does not work with subpaths. Opening domain.com/about
leads to 404.
// gatsby-config.js
{
resolve: `gatsby-theme-i18n`,
options: {
defaultLang: `en`,
prefixDefault: true,
configPath: require.resolve(`./i18n/config.json`),
locales: `en de`,
},
}
Expected behavior:
A user who accesses domain.com/about
should by default redirect to domain.com/en/about
.
Is there any way to do this with gatsby-theme-i18n directly or other workarounds? Thanks in advance!
I understand this might be by design. Alternatively, I could disable prefixDefault. Then domain.com/about
would work, but domain.com/en/bout
would lead to 404.
Hey,
I've come across this problem while implementing gatsby-theme-i18 to a website I've been working on:
I use particles.js library in the layout component and the default locale is English. However, when I switch to Turkish, the particles component vanishes. When I switch back to English, I see the particles component again. I cannot make it work for the other language. I even couldn't find a connection between particles.js and gatsby-theme-i18.
Any help would be much obliged!
Here is the part including the particles component:
Do you have an example that explain how to use gatsby-theme-i18n-lingui
with typescript?
Hi there,
I've been trying to integrate i18n with the new gatsby-theme-blog, but haven't been able to do so.
I've tried a lot of gatsby i18n packages.
Is there and official way to do this?
I also tried with gatsby-theme-i18n
But get the error "Cannot query field "themeI18N" on type "Query"."
Thanks!
If the default locale would also be prefixed using navigate from gatsby would be easy:
navigate(`/${locale}/page-3`)
But because the default is not prefixed:
navigate(`/${locale === defaultLang ? `` : `${locale}/`}page-3`)
Is there a better way? Can you maybe provide a helper for this?
I'm getting the following error when I tried to install the to my existing site
ERROR
There was an error compiling the html.js component for the development server.
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html ReferenceError: Tag is not defined
> 1 | /** @jsx jsx */
| ^
2 | import { jsx, ThemeProvider, merge } from 'theme-ui'
3 | import localTheme from './index'
4 | import components from './components'
WebpackError: ReferenceError: Tag is not defined
My config
module.exports = {
siteMetadata: {
title: `Almog Development Studio`,
description: `Bring ideas to life. - Google Flutter mobile software development`,
author: `@almog`,
siteUrl: `https://almog.io`
},
plugins: [
{
resolve: 'gatsby-theme-blog',
options: {
basePath: '/blog'
}
},
{
resolve: `gatsby-plugin-nprogress`,
options: {
// Setting a color is optional.
color: `blue`,
// Disable the loading spinner.
showSpinner: false
}
},
`gatsby-plugin-sitemap`,
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: 'UA-3537187-1',
exclude: [`/__generated/*`]
}
},
{
resolve: `gatsby-plugin-styled-components`,
options: {
minify: false // Breaks styles if not set to false
}
},
{
resolve: 'gatsby-plugin-robots-txt',
options: {
host: 'https://almog.io',
sitemap: 'https://www.almog.io/sitemap.xml',
policy: [{ userAgent: '*', allow: '/' }]
}
},
`gatsby-plugin-react-helmet`,
`gatsby-plugin-open-graph-images`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `common`,
path: `../common/src/assets/`
}
},
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `data`,
path: `../common/src/data/`
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/favicon.png` // This path is relative to the root of the site.
}
},
{
resolve: `gatsby-plugin-google-fonts-v2`,
options: {
fonts: [
{
family: `Roboto`,
weights: [
`100`,
`300`,
`400`,
`500`,
`700`,
`900`,
[`100,300, 400, 500, 700, 900`]
]
},
{
family: `Poppins`,
weights: [`300`, `400`, `500`, `600`, `700`]
},
{
family: `Lato`,
weights: [`300`, `400`, `700`]
},
{
family: `Open Sans`,
weights: [`300`, `400`, `600`, `700`, `800`]
},
{
family: `Raleway`,
weights: [`500`, `600`]
},
{
family: `Heebo`,
weights: [`300`, `400`, `500`, `600`, `700`, `800`]
},
{
family: `B612`,
weights: [`400`, `700`, [`400, 700`]]
},
{
family: `DM Sans`,
weights: [`400`, `500`, `700`, [`400, 500, 700`]]
}
]
}
}
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.app/offline
// 'gatsby-plugin-offline',
]
};
I was wondering if there are any plans to update gatsby-theme-blog?
my newer projects are already using Gatsby 4, but my other older projects were using plugins from this repo, one is gatsby-theme-i18n
would like to migrate it to Gatsby 4, but stuck at here:
npm ERR! Found: [email protected]
[...]
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^3.0.0" from [email protected]
npm ERR! node_modules/gatsby-theme-i18n
npm ERR! gatsby-theme-i18n@"^2.0.0" from the root project
and this repo doesn't have any single commit for the past 7 months since April, looks like is this whole repo abandoned?
If I open the root url localhost:8000/
the gatsby dev server will crash if SSR is enabled.
If SSR is not enabled or I enter localhost:8000/de/
it will not crash.
Cannot read property 'matchPath' of undefined
TypeError: Cannot read property 'matchPath' of undefined
- render-dev-html.ts:181
[gcb-shop]/[gatsby]/src/utils/dev-ssr/render-dev-html.ts:181:17
- new Promise
- render-dev-html.ts:171 renderDevHTML
[gcb-shop]/[gatsby]/src/utils/dev-ssr/render-dev-html.ts:171:3
- start-server.ts:732
[gcb-shop]/[gatsby]/src/utils/start-server.ts:732:40
./locale/config.json
[
{
"code": "de",
"hrefLang": "de-CH",
"name": "German",
"localName": "Deutsch",
"langDir": "ltr",
"dateFormat": "DD.MM.YYYY"
},
{
"code": "fr",
"hrefLang": "fr-CH",
"name": "French",
"localName": "Francaise",
"langDir": "ltr",
"dateFormat": "DD.MM.YYYY"
},
{
"code": "en",
"hrefLang": "en-US",
"name": "English",
"localName": "English",
"langDir": "ltr",
"dateFormat": "MM/DD/YYYY"
}
]
gatsby-config.js
//...
{
resolve: `gatsby-theme-i18n-lingui`,
options: {
localeDir: `./locale`,
},
},
{
resolve: `gatsby-theme-i18n`,
options: {
defaultLang: 'de',
configPath: require.resolve(`./locale/config.json`),
},
},
// ...
package.json
"gatsby": "^3.14.0",
"gatsby-theme-i18n": "^2.0.0",
"gatsby-theme-i18n-lingui": "^2.0.0",
Inside my mdx
post, how can I add an inline image?
I've tried to place an image named foo.png
inside the post folder and then insert this markdown:
![test](./foo.png)
but it doesn't work
ERROR
Page data from page-data.json for the failed page "/en/": {
"componentChunkName": "component---src-pages-index-js",
"path": "/en/",
"result": {
"pageContext": {
"locale": "en",
"hrefLang": "en-US",
"originalPath": "/",
"dateFormat": "DD/MM/YYYY"
}
},
"staticQueryHashes": [
"1239077767",
"3280999885"
]
}
failed Building static HTML for pages - 3.482s
ERROR #95313
Building static HTML failed for path "/en/"
See our docs page for more info on this error: https://gatsby.dev/debug-html
10 |
11 |
12 | const [, base] = path.split(
/
)
| ^
13 |
14 | // If for whatever reason we receive an already localized path
15 | // (e.g. if the path was made with location.pathname)
WebpackError: TypeError: Cannot read properties of undefined (reading 'split')
helpers.js:12
[gatsby-starter-minimal]/[gatsby-theme-i18n]/src/helpers.js:12:25
localized-link.js:13
[gatsby-starter-minimal]/[gatsby-theme-i18n]/src/components/localized-link.js:13:24
abort.js:13
[gatsby-starter-minimal]/[asynckit]/lib/abort.js:13:1
extends.js:15
[gatsby-starter-minimal]/[@babel]/runtime/helpers/extends.js:15:1
abort.js:22
[gatsby-starter-minimal]/[asynckit]/lib/abort.js:22:1
abort.js:21
[gatsby-starter-minimal]/[asynckit]/lib/abort.js:21:27
inheritsLoose.js:7
[gatsby-starter-minimal]/[@babel]/runtime/helpers/inheritsLoose.js:7:1
static-entry.js:295
gatsby-starter-minimal/.cache/static-entry.js:295:22
Hi, I'm making a gatsby theme based gatsby-theme-blog-core, and I need to create pagination for my theme, but gatsby-theme-blog-core
create /
page without pagination info, how can I override this?
Expected behaviour for location / and trailingSlash=never:
<link data-react-helmet="true" rel="alternate" hrefLang="x-default" href="https://short.io/"/>
<link data-react-helmet="true" rel="alternate" hrefLang="ru" href="https://short.io/zh"/> <!-- current -->
<link data-react-helmet="true" rel="alternate" hrefLang="en-US" href="https://short.io/"/>
<link data-react-helmet="true" rel="alternate" hrefLang="ja" href="https://short.io/ja"/>
<link data-react-helmet="true" rel="alternate" hrefLang="de" href="https://short.io/de"/>
current behaviour:
<link data-react-helmet="true" rel="alternate" hrefLang="x-default" href="https://short.io/"/>
<link data-react-helmet="true" rel="alternate" hrefLang="ru" href="https://short.io/zh"/> <!-- current -->
<link data-react-helmet="true" rel="alternate" hrefLang="en-US" href="https://short.io/"/>
<link data-react-helmet="true" rel="alternate" hrefLang="ja" href="https://short.io/ja/"/> <!-- extra slash -->
<link data-react-helmet="true" rel="alternate" hrefLang="de" href="https://short.io/de/"/> <!-- extra slash -->
...
This returns localized version:
const location = useLocation();
location.pathname
This non localized version of the current path is necessary when language switchers are created for example.
Thank you!
Hello there,
The alternate link for the default locale is always generated without prefix, irrespective of the prefixDefault
parameter.
ie, with prefixDefault
set to true
, the theme generates
<link data-react-helmet="true" rel="alternate" hrefLang="en" href="https://www.domain.com/about/" />
<link data-react-helmet="true" rel="alternate" hrefLang="fr" href="https://www.domain.com/fr/about/" />
instead of
<link data-react-helmet="true" rel="alternate" hrefLang="en" href="https://www.domain.com/en/about/" />
<link data-react-helmet="true" rel="alternate" hrefLang="fr" href="https://www.domain.com/fr/about/" />
Hi there,
I tried creating index.de.tsx page, and plugin generates /de/ page. But that page still shows index.tsx page!
Is this theme meant to be used this way?
Thanx
The instructions here https://www.gatsbyjs.org/packages/gatsby-theme-notes/ in the Manually add to your site section does not work because it install the newer 2.0.1
version. Switching to the older 1.3.x
works.
# This leads to a working site
gatsby new my-themed-notes https://github.com/gatsbyjs/gatsby-starter-notes-theme
cd my-theme-notes
npm run develop
# Check that it is working at http://localhost:8000 . Ctrl-C to stop server after checking
# Update to the latest 2.0.1
npm i gatsby-theme-notes@latest
npm run develop
# A multitude of errors when checking http://localhost:8000
It appears there's been some major changes from version 1.x to version 2+
Hello! Is there a way of augmenting the configuration for a project set up identically to the example-react-intl project so that pages prefixed with the 2 letter code for the default locale are rendered or redirected? That is, in that project if I access localhost:8000/en
I would expect a page just like localhost:8000
to load or to be redirected there. Is there a way to get that behavior?
Thanks in advance!
Gatsby Link does provide a specific config for to work in the context of Storybook.
But when switching to from gatsby-theme-i18n , Storybook build fails with the following error:
ModuleParseError: Module parse failed: Unexpected token (8:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| return (
> <ul>
| {config.map((locale) => (
| <li key={locale.code}>
at handleParseError (/Users/jbtheard/Code/gatsby-sb/node_modules/webpack/lib/NormalModule.js:969:19)
[...]
ModuleParseError: Module parse failed: Unexpected token (11:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| return (
> <Link
| {...props}
| to={localizedPath({
at handleParseError (/Users/jbtheard/Code/gatsby-sb/node_modules/webpack/lib/NormalModule.js:969:19)
[...]
ModuleParseError: Module parse failed: Unexpected token (16:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| return (
> <Router basepath={path} {...props}>
| {children}
| </Router>
at handleParseError (/Users/jbtheard/Code/gatsby-sb/node_modules/webpack/lib/NormalModule.js:969:19)
[...]
ModuleParseError: Module parse failed: Unexpected token (12:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| if (isHash(href) || !isInternal(href) || isFile(href)) {
| return (
> <a {...props} href={href}>
| {children}
| </a>
at handleParseError (/Users/jbtheard/Code/gatsby-sb/node_modules/webpack/lib/NormalModule.js:969:19)
[...]
ModuleParseError: Module parse failed: Unexpected token (9:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| children,
| pageContext: { locale = defaultLang },
> }) => <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>
See reproductible repo here with minimum setup and latest packages versions.
gatsby-theme-blog-darkmode is missing repo / url in package.json
problems:
Hello,
For some locales, I want to generate a localised page for only some pages. gatsby-theme-i18n
currently does not allow that.
I imagine that:
localizedPath
would fallback to default locale when requesting a page that is not available in a given localeIs this a feature you would consider including in gatsby-theme-i18n
?
There are two bug it seems
content/posts
when used with another theme, i had to make a new folder and used the contentPath option to point it to the new folder, is this intended?module.exports = {
siteMetadata: {
description: "Personal site",
locale: "en",
title: "DWS",
},
plugins: [
{
resolve: "@wkocjan/gatsby-theme-intro",
options: {
theme: "classic",
basePath: "/",
},
},
{
resolve: `gatsby-theme-blog`,
options: {
basePath: `/blog`,
contentPath: `blog/posts`,
assetPath: `blog/assets`,
},
},
],
}
This is what the blog page ends up looking like, if i were to use gatsby-theme-blog on its own it turns out fine
System:
OS: Linux 5.8 Manjaro Linux
CPU: (1) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 5.0.18 - /bin/bash
Binaries:
Node: 10.22.0 - ~/.nvm/versions/node/v10.22.0/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 6.14.6 - ~/.nvm/versions/node/v10.22.0/bin/npm
Languages:
Python: 3.8.5 - /usr/bin/python
Browsers:
Firefox: 80.0.1
npmPackages:
gatsby: ^2.24.62 => 2.24.62
gatsby-theme-blog: ^2.0.2 => 2.0.2
npmGlobalPackages:
gatsby-cli: 2.12.97
`
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Warning
These dependencies are deprecated:
Datasource | Name | Replacement PR? |
---|---|---|
npm | gatsby-plugin-create-client-paths |
These branches will be created by Renovate only once you click their checkbox below.
@reach/skip-nav
, @theme-ui/prism
, gatsby-plugin-theme-ui
, theme-ui
)@lingui/core
, @lingui/react
, @mdx-js/mdx
, gatsby-core-utils
, gatsby-plugin-emotion
, gatsby-plugin-feed
, gatsby-plugin-image
, gatsby-plugin-mdx
, gatsby-plugin-react-helmet
, gatsby-plugin-sharp
, gatsby-plugin-twitter
, gatsby-remark-copy-linked-files
, gatsby-remark-images
, gatsby-remark-smartypants
, gatsby-source-filesystem
, gatsby-transformer-sharp
, i18next
, react-i18next
, react-intl
, react-switch
, remark-slug
)@lingui/cli
, @lingui/core
, @lingui/macro
, @lingui/react
, @mdx-js/mdx
, @mdx-js/react
, babel-preset-gatsby
, gatsby
, gatsby-plugin-mdx
, gatsby-plugin-react-helmet
, gatsby-source-filesystem
, react-intl
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@lingui/core
, @lingui/react
, gatsby-core-utils
, gatsby-plugin-emotion
, gatsby-plugin-feed
, gatsby-plugin-image
, gatsby-plugin-mdx
, gatsby-plugin-react-helmet
, gatsby-plugin-sharp
, gatsby-plugin-twitter
, gatsby-remark-copy-linked-files
, gatsby-remark-images
, gatsby-remark-smartypants
, gatsby-source-filesystem
, gatsby-transformer-sharp
, react-feather
, react-i18next
, react-intl
, react-switch
)@lingui/cli
, @lingui/core
, @lingui/macro
, @lingui/react
, gatsby
, gatsby-plugin-create-client-paths
, gatsby-plugin-mdx
, gatsby-plugin-react-helmet
, gatsby-source-filesystem
, react-intl
)packages/gatsby-theme-blog-core/package.json
@mdx-js/mdx ^1.6.22
gatsby-core-utils ^3.3.0
gatsby-plugin-image ^2.3.0
gatsby-plugin-mdx ^3.3.0
gatsby-plugin-sharp ^4.3.0
gatsby-remark-copy-linked-files ^5.3.0
gatsby-remark-images ^6.3.0
gatsby-remark-smartypants ^5.3.0
gatsby-source-filesystem ^4.3.0
gatsby-transformer-sharp ^4.3.0
remark-slug ^5.1.2
packages/gatsby-theme-blog-darkmode/package.json
@reach/skip-nav ^0.16.0
react-switch ^6.0.0
packages/gatsby-theme-blog/package.json
@reach/skip-nav ^0.16.0
@theme-ui/prism 0.6.2
gatsby-plugin-emotion ^7.3.0
gatsby-plugin-feed ^4.3.0
gatsby-plugin-react-helmet ^5.3.0
gatsby-plugin-theme-ui 0.7.0
gatsby-plugin-twitter ^4.3.0
gatsby-theme-blog-core ^4.0.0
gatsby-theme-ui-preset ^3.0.0
mdx-utils 0.2.0
react-helmet ^6.1.0
theme-ui 0.7.0
packages/gatsby-theme-i18n-lingui/package.json
@lingui/core ^3.13.0
@lingui/react ^3.13.0
packages/gatsby-theme-i18n-react-i18next/package.json
i18next ^20.6.1
react-i18next ^11.14.3
packages/gatsby-theme-i18n-react-intl/package.json
react-intl ^5.23.0
packages/gatsby-theme-i18n/package.json
gatsby-plugin-react-helmet ^5.3.0
react-helmet ^6.1.0
packages/gatsby-theme-notes/package.json
@mdx-js/mdx ^1.6.22
gatsby-core-utils ^3.3.0
gatsby-plugin-emotion ^7.3.0
gatsby-plugin-mdx ^3.3.0
gatsby-plugin-meta-redirect ^1.1.1
gatsby-plugin-redirects ^1.0.0
gatsby-plugin-theme-ui 0.7.0
gatsby-source-filesystem ^4.3.0
gatsby-theme-ui-preset ^3.0.0
is-present ^1.0.0
react-feather ^2.0.9
theme-ui 0.7.0
packages/gatsby-theme-ui-preset/package.json
starters/example-i18n/package.json
@mdx-js/mdx ^1.6.22
@mdx-js/react ^1.6.22
gatsby ^4.3.0
gatsby-plugin-create-client-paths ^4.3.0
gatsby-plugin-mdx ^3.3.0
gatsby-plugin-react-helmet ^5.3.0
gatsby-source-filesystem ^4.3.0
gatsby-theme-i18n ^3.0.0
react-helmet ^6.1.0
starters/example-lingui/package.json
@lingui/core ^3.13.0
@lingui/react ^3.13.0
@mdx-js/mdx ^1.6.22
@mdx-js/react ^1.6.22
gatsby ^4.3.0
gatsby-plugin-mdx ^3.3.0
gatsby-plugin-react-helmet ^5.3.0
gatsby-source-filesystem ^4.3.0
gatsby-theme-i18n ^3.0.0
gatsby-theme-i18n-lingui ^3.0.0
react-helmet ^6.1.0
@lingui/cli ^3.13.0
@lingui/macro ^3.13.0
babel-preset-gatsby ^2.3.0
starters/example-react-i18next/package.json
@mdx-js/mdx ^1.6.22
@mdx-js/react ^1.6.22
gatsby ^4.3.0
gatsby-plugin-mdx ^3.3.0
gatsby-plugin-react-helmet ^5.3.0
gatsby-source-filesystem ^4.3.0
gatsby-theme-i18n ^3.0.0
gatsby-theme-i18n-react-i18next ^3.0.0
react-helmet ^6.1.0
starters/example-react-intl/package.json
@mdx-js/mdx ^1.6.22
@mdx-js/react ^1.6.22
gatsby ^4.3.0
gatsby-plugin-mdx ^3.3.0
gatsby-source-filesystem ^4.3.0
gatsby-theme-i18n ^3.0.0
gatsby-theme-i18n-react-intl ^3.0.0
react-intl ^5.23.0
starters/theme/package.json
gatsby ^4.3.0
gatsby-theme-blog ^4.0.0
gatsby-theme-blog-darkmode ^4.0.0
gatsby-theme-notes ^4.0.0
cross-env ^7.0.3
Do i get it right that its not possible to modify the URL according to the current locale? This would be a SEO nightmare because with a contact.js page, you end up with:
https://example.com/de/contact/
and
https://example.com/en/contact/
Which is only ok for the second, because i dont want to have an english word in my german url, there i want "kontakt" and not "contact".
looking at the starter code https://github.com/gatsbyjs/themes/blob/master/starters/example-i18n/gatsby-config.js it says
https://github.com/gatsbyjs/themes/blob/master/starters/example-i18n/gatsby-config.js#L7
siteUrl: `https://gatsby-theme-i18n.netlify.app`,
but running it locally is very different,
so, where is the actual code for https://gatsby-theme-i18n.netlify.app/ ?
The theme seems to remove the pathPrefix added in the gatsby-config file. I have a site on a domain subfolder, and without the gatsby-theme-i18n, it works fine. As soon as I add the theme, whatever I had for the prefix gets replaced with the language prefixes e.g. "/" for default language, or "/de", "/en".
Is there a way around this at all? Thanks in advance.
The LocalizedLink
component is requiring a language
prop. https://github.com/gatsbyjs/themes/blob/master/packages/gatsby-theme-i18n/index.d.ts#L18
Expected
The language
prop should be optional since if you don't send it, it fallback into the locale found in the context https://github.com/gatsbyjs/themes/blob/master/packages/gatsby-theme-i18n/src/components/localized-link.js#L8
I use a Layout Component with a navigation Bar. It is present at every route, so I put it at gatsby-browser.js
like so
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>
}
No problem so far.
If I try to get the locale in the Layout
through const { locale } = useLocalization();
I get the wrong locale. This means that my Links redirect wrongly. Am I doing something wrong, or is this a bug?
Cheers
The link on https://www.gatsbyjs.com/plugins/gatsby-theme-i18n/ is broken
According to Unsplash's API Guidelines, uses of its images must link back to the photographer and attribute unsplash. It would be nice if the blog theme allowed me to attach some sort of frontmatter that allowed me to add a caption to have this attribution.
If "to" prop is not given to LocalizedLink, it breaks the build with cryptic message.
It breaks on this line.
const [, base] = path.split(`/`)
Hello,
Currently, the isDefault
field is set to true
only when file name is index
. it should also be true
if the file name is index.en
and defaultLang
is en
.
Thanks
Hello,
Currently, the locale
Node Field is created based on file name only for nodes of internal type Mdx
.
It would be great to extend this to other relevant node types. For instance MarkdownRemark
Hi,
I'm trying to use the gatsby-theme-i18n-react-i18next
theme but facing some hydratation issues.
To reproduce the behavior, you can simply clone this repo and launch the available react-i18next sample in dev:
cd themes-master/starters/example-react-i18next
yarn && gatsby develop
When you click a link for the first time after page load, you can see this error displayed in console:
Warning: Cannot update a component (
Layout) while rendering a different component (
PageRenderer).
Looking at the stacktrace, it seems related to the 'useTranslation' hook of the react-i18next library.
I found this similar issue on the repo of the library : i18next/react-i18next#1124 but this is not very helping (I played with the useSuspense parameter, but it changes nothing apparently).
My question is: what are consequences of this warning ? Is it ok to "live with it" ? Is there some known workarounds?
Thanks !
The new gatsby-plugin-mdx v4 has a lot of internal changes and new features.
Because of these internal changes, gatsby-theme-i18n fails to add the locale for .mdx
files. Luckily, the fix is easy.
The error is in the gatsby-node.js
file, on line 126.
Old Line:
const name = path.basename(node.fileAbsolutePath, `.mdx`)
New Line:
// v3: fileAbsolutePath, v4: contentFilePath
const name = path.basename(node.fileAbsolutePath ?? node.contentFilePath, `.mdx`)
I'll do a pull request
I'm running into this error with gatsby-theme-i18n:
This seems to be related to hot reloading because when I delete the cache and run it for the first time I see translated pages as expected. Therefore, I think that the theme is configured properly. Also there is no obvious reason why I would not have access to path
(Node's path module) inside the gatsby-config.js
.
So my question is this: is gatsby-theme-i18n under active development? Because it's not mentioned here: https://www.gatsbyjs.com/docs/how-to/adding-common-features/localization-i18n/. Or should I rather use gatsby-plugin-i18n or am I supposed to roll my own i18n?
@LekoArts Could you clarify?
I am having a hard time trying to find what query parameters are available to pass into my GraphQL queries. I know of $locale only from looking at the example repo, but I know $hrefLang is also available.
Where is the documentation on this?
For gatsby-theme-blog-core on NPMjs https://www.npmjs.com/package/gatsby-theme-blog-core the url for Homepage is pointing to https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-theme-blog-core#readme opens a 404 Page.
Resolution:
The correct homepage url for should be
https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog-core
In the context of a monorepo, I get the following error.
react-intl is installed and shows up on node_modules
Generating SSR bundle failed
Can't resolve 'react-intl' in '.../monorepo/node_modules/gatsby-theme-i18n-react-intl/src'
If you're trying to use a package make sure that 'react-intl' is installed. If you're trying to use a local file make sure that the path is correct.
File: ../../node_modules/gatsby-theme-i18n-react-intl/src/wrap-page-element.js
themes/packages/gatsby-theme-blog-core/gatsby-node.js
Lines 259 to 272 in fead1c2
Hi, Can I change the limit 1000
?
Hello!
If you want to try out gatsby-theme-i18n
or its child themes -- this is the place to ask questions, report bugs, suggest ideas, collaborate on improvements, and get notified about updates. Alternatively you can also join the Gatsby Discord server.
Quick links:
Hi,
I suppose the following code, the webpack will load all files in GATSBY_THEME_I18N_REACT_I18NEXT
, is there a better way to only load the current locale?
Hi,
Here is the case, I want exclude the draft: true
posts and custom posts limit, but now I can not do that.
Expect:
{
resolve: `gatsby-theme-blog-core`,
options: {
filter: {
frontmatter: { draft: {ne: true} }
},
limit: 500
},
},
I can make a pr later.
Hello,
I am facing this issue where when I do gatsby build and look at my sitemap, no pages with the 'fr' subfix are created.
Here is a look at my gatsby-config.js file:
{
resolve: "gatsby-theme-i18n",
options: {
defaultLang: "fr",
prefixDefault: true,
configPath: require.resolve("./i18n/config.json"),
},
},
and here is a look at my i18n/config.json file:
[
{
"code": "en",
"hrefLang": "en-US",
"name": "English",
"localName": "English",
"langDir": "ltr",
"dateFormat": "MM/DD/YYYY"
},
{
"code": "fr",
"hrefLang": "fr-Fr",
"name": "French",
"localName": "Français",
"langDir": "ltr",
"dateFormat": "DD.MM.YYYY"
},
{
"code": "ru",
"hrefLang": "ru-Ru",
"name": "Russian",
"localName": "Russe",
"langDir": "ltr",
"dateFormat": "DD.MM.YYYY"
}
]
The two other subfix ('en' and 'ru') are created.
i am trying to build a blog site for myself.i love this theme but it doesnt allow to edit , change the layout because when you download it comes as package,so how can i create subscribe section ? or change layout , add different sections ?
If I click the "View plugin on github" link on the gatsby-theme-blog page, it goes to a URL that gives a 404.
This way, the consumer can add canonical
to front matters in order to have custom canonical tag. Use case, post original posted on Medium.
I was be able to implement it by modifying the files in node_modules
but I couldn't run it through link
because I get
error Error in "/Users/moshef/Desktop/themes/packages/gatsby-theme-blog-core/node_modules/gatsby-transformer-sharp/gatsby-node.js": Cannot find module 'at-least-node'
(Tried also to link bothgatsby-theme-blog
andgatsby-theme-blog-core
)
When using LocalizedLink Typescript requires property 'language' witch sould be an optional propery based on your example.
issue is on index.d.ts
export function LocalizedLink({ to, language, ...props }: {
[x: string]: any;
to: any;
language: any; /* this sould be optional "language?: any" */
}): JSX.Element;
TS2741: Property 'language' is missing in type '{ children: ReactNode; to: string; className: string; }' but required in type '{ [x: string]: any; to: any; language: any; }'.
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.