Giter VIP home page Giter VIP logo

themes's Introduction

Gatsby Themes

This is a repo for Gatsby's official themes.

  • gatsby-theme-blog
  • gatsby-theme-blog-darkmode
  • gatsby-theme-i18n-lingui
  • gatsby-theme-i18n-react-intl
  • gatsby-theme-ui-preset
  • gatsby-theme-blog-core
  • gatsby-theme-i18n
  • gatsby-theme-i18n-react-i18next
  • gatsby-theme-notes

Filing Issues and PRs

Please follow the Gatsby contributing guidelines.

Installation

Clone the repository and cd into it

git clone https://github.com/gatsbyjs/themes
cd themes

Install dependencies

yarn

Development

Run the gatsby-starter-theme workspace

yarn start

Testing

This repository is set up with Cypress tests that run automatically in GitHub. If you'd like to run them locally you can do so in develop mode or build mode.

For develop mode:

yarn e2e:dev

For build mode:

yarn e2e:ci

License

MIT

themes's People

Contributors

ascorbic avatar blainekasten avatar bochap avatar crhayes avatar fk avatar freiksenet avatar gillkyle avatar hnishi avatar jbampton avatar jgfidelis avatar johno avatar karlhorky avatar kyleamathews avatar laurieontech avatar lekoarts avatar michaeldeboey avatar muescha avatar mxstbr avatar phizzard avatar pieh avatar pjeziorowski avatar pvdz avatar qovaros985 avatar renovate-bot avatar renovate[bot] avatar sidharthachatterjee avatar theowenyoung avatar tylerbarnes avatar vladar avatar wardpeet avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

themes's Issues

Integration of gatsby-theme-blog and i18n

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!

[gatsby-theme-i18n] a wrong `md` locale node field is created when file extension is `.md`

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"
            }
          }
        },

Gatsby dev server crashes on root URL

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",

gatsby-theme-notes 2.0.1 appears broken

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

image

It appears there's been some major changes from version 1.x to version 2+

gatsby-theme-i18n does not honor prefixDefault param in generated alternate links

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/" />

Can't run gatsby build

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

[gatsby-theme-i18n-react-i18next] hydrate and useTranslation

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 !

Roadmap to Gatsby 4 ???

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?

from the Contributors Graph
image

[gatsby-theme-i18n] Documentation for GraphQL parameters

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?

[gatsby-theme-i18n] Create language detection page "/" for prefixDefault=true

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.

How to configure Storybook to work with gatsby-theme-i18n ?

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.

Blank or 404 page for urls prefixed with default locale

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!

Particles component vanishes in locale

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:

gatsby-theme-i18n and adding a Path Prefix to gatsby-config file not working

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.

Inline image for post

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

gatsby-theme-i18n not redirecting to defaultLang when opening subpath without language prefix

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.

[gatsby-theme-i18n] limit generation of localised pages to a subset of pages only

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:

  • this could be parametrised by an array of RegExp whitelisting pages to localise in the config file;
  • localizedPath would fallback to default locale when requesting a page that is not available in a given locale

Is this a feature you would consider including in gatsby-theme-i18n?

How to use navigate from gatsby with i18n?

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?

[gatsby-theme-blog-core] Support filter, limit as theme options

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.

gatsby blog theme breaking when used with other themes

Description

There are two bug it seems

  1. Gatsby blog theme is not displaying correctly when used with another theme.
  2. The theme does not seem to picking up blog posts placed in 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?

Steps to reproduce

  • yarn init -y
  • yarn add gatsby react react-dom gatsby-theme-blog @wkocjan/gatsby-theme-intro
  • edit gatsby-config.js with the following
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`,
      },
    },
  ],
}
  • gatsby develop

Actual result

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
2020-09-16-180434_701x841_scrot

Environment

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
`

gatsby-theme-i18n Typescript on LocalizedLink.

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; }'.

Dependency Dashboard

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 Unavailable

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

  • chore: update dependency babel-preset-gatsby to ^2.25.0
  • fix: update packages (<1.0.0 minor) (@reach/skip-nav, @theme-ui/prism, gatsby-plugin-theme-ui, theme-ui)
  • chore: update packages (major) (@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)
  • chore: update starters for testing (major) (@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)
  • 🔐 Create all pending approval PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

  • chore: update packages (@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)
  • chore: update starters for testing (@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)

Detected dependencies

npm
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

  • Check this box to trigger a request for Renovate to run again on this repository

gatsby-theme-i18n is incompatible with the new gatsby-plugin-mdx v4

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

[gatsby-theme-i18n] Error: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

I'm running into this error with gatsby-theme-i18n:

Screen Shot 2021-02-03 at 2 45 18 PM

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?

gatsby-theme-i18n adds trailing slash even if trailingSlash is set to never

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 -->
...

gatsby-theme-i18n not building all my pages even with prefixDefault set to true

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.

Components in wrapPageElement cannot access the current locale

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

[gatsby-theme-blog-core] Add canonical to `BlogPost` interface

Why?

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 both gatsby-theme-blog and gatsby-theme-blog-core)

moshfeu@ae50220

Can't resolve `react-intl`

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

WebpackError: ReferenceError: Tag is not defined

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',
  ]
};

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.