profile
viewpoint
Aravind Balla aravindballa Hyderabad, India https://aravindballa.com He tries moving mountains and does magic, w/ code. 👨🏻‍💻

aravindballa/gatsby-theme-andy 183

A Gatsby theme to build Andy style websites. 📑

aravindballa/DevTips-Starter-Kit 4

Ground zero for your next project.

aravindballa/bookmarks 3

The repo containing the bookmarks that I was saving from a long time.

aravindballa/Bismuth-Voting 2

[Alpha] Specs, Templates, test vectors and libraries for the Bismuth Voting Protocol

aravindballa/almador 1

A personal assistant for Aravind. I am a Facebook messenger bot.

aravindballa/awesome-react 0

A collection of awesome things regarding React ecosystem.

push eventgatsbyjs/gatsby

Peter van der Zee

commit sha d9904ac69ec6abcd8e16f18056b0387c54d8c625

perf(gatsby-source-contentful): fix unguided search in loop over large lists (#28375)

view details

Kyle Mathews

commit sha 3e056d1ab51cffb8fbf15c7b932fd4f11e1db545

feat(gatsby): Track the use of flags in gatsby-config.js (#28337)

view details

Michal Piechowiak

commit sha 5096e90f3af9490f910a47331ac42efa2edfd9e2

fix(develop): emit stale page data messages when staticQueryHashes change (#28349)

view details

Kyle Mathews

commit sha f9bd368cfb64d2960080f359ca92ee07dfb67668

Update release notes (#28342)

view details

Kyle Gill

commit sha d18b19967936efcefb9d806b49050d00ceb73575

wip(gatsby-cli): add login, logout, whoami commands (#28251) * add first wip implementation of login command * add logout and whoami commands * update urls * wrap commands in experimental flag

view details

Kyle Mathews

commit sha 9c8f78842784c6882953d2f5c72dd71d61ba3e29

feat(gatsby): people who are using a flag, invite them to try out other flags (#28338) * feat(gatsby): people who are using a flag, invite them to try out other flags * Avoid scaling problems

view details

Kyle Mathews

commit sha 91b0433a8155efe526ab93028fdec25c86d5124c

feature(docs): Add mention of flags to the gatsby-config.js doc page (#28384)

view details

Matt Kane

commit sha 93a144744c20fc57f563cb5af2683725abc3c941

fix(gatsby-plugin-image): Fix StaticImage props interface and add propTypes (#28372) * Add proptypes and better props defs * Fix compilation error

view details

mfrachet

commit sha fff62398bce7b047532abbefab4aecb636443a5f

First steps

view details

mfrachet

commit sha 97b4b26eeb06fc88bc935c7e73b34b3e101cffbf

test(create-gatsby): add test for init starter in create-gatsby

view details

mfrachet

commit sha 9fb4667e25eaa1a39160d4873c1078acf762103a

fix

view details

push time in 4 minutes

Pull request review commentgatsbyjs/gatsby

fix(gatsby): move starting dev-ssr listener inside function & only init listeners once

 Object {   ],   "message": "The following flags are active: - ALL_COMMANDS · (Umbrella Issue (test)) · test++There are 5 other flags available that you might be interested in:+- FAST_DEV · Enable all experiments aimed at improving develop server start time+- DEV_SSR · (Umbrella Issue (https://github.com/gatsbyjs/gatsby/discussions/28138)) · SSR pages on full reloads during develop. Helps you detect SSR bugs and fix them without needing to do full builds.+- QUERY_ON_DEMAND · (Umbrella Issue (https://github.com/gatsbyjs/gatsby/discussions/27620)) · Only run queries when needed instead of running all queries upfront. Speeds starting the develop server.+- ONLY_BUILDS · (Umbrella Issue (test)) · test+- YET_ANOTHER · (Umbrella Issue (test)) · test

Why is this here? And why unit tests passes here without any changes to tests? did we merge something that didn't update snapshot?

KyleAMathews

comment created time in 10 minutes

pull request commentgatsbyjs/gatsby

test(create-gatsby): snapshot plugins-options-form and tiny refactoring

Thanks for the feedback 😊 I (we actually 😬 ) tried to test from the enquirer standpoint and got in trouble when going in the CI. We then decided to step back and just test the different functions to make sure everything looks okay 😊

mfrachet

comment created time in 14 minutes

pull request commentgatsbyjs/gatsby

docs: release notes for 2.28

Love the writeup!

pieh

comment created time in 38 minutes

issue commentgatsbyjs/gatsby

Serve Gatsby site as GraphQL API

I'd love to hear out what particular issue this would solve and what's the use-case?

jgierer12

comment created time in 42 minutes

Pull request review commentgatsbyjs/gatsby

docs: release notes for 2.28

+---+date: "2020-12-01"+version: "2.28.0"+---++# [v2.28](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.28.0-next.0...gatsby@2.28.0) (December 2020 #1)++---++Welcome to `gatsby@2.28.0` release (December 2020 #1).++Key highlights of this release:++- [New `gatsby new`](#new-gatsby-new) - new, interactive way to create a Gatsby site+- [Improved `react-refresh` integration](#improved-react-refresh-integration)+- [Feature flags in gatsby-config](#feature-flags-in-gatsby-config) - set your feature toggles without environment variables

I'll write up in the morning about the partial release of DEV_SSR

pieh

comment created time in an hour

Pull request review commentgatsbyjs/gatsby

docs: release notes for 2.28

+---+date: "2020-12-01"+version: "2.28.0"+---++# [v2.28](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.28.0-next.0...gatsby@2.28.0) (December 2020 #1)++---++Welcome to `gatsby@2.28.0` release (December 2020 #1).++Key highlights of this release:++- [New `gatsby new`](#new-gatsby-new) - new, interactive way to create a Gatsby site+- [Improved `react-refresh` integration](#improved-react-refresh-integration)+- [Feature flags in gatsby-config](#feature-flags-in-gatsby-config) - set your feature toggles without environment variables+- [Experimental: Lazy images in develop](#experimental-lazy-images-in-develop) - run image transformations only when they are needed by browser+- [Removed experimental lazy page bundling](#removed-experimental-lazy-page-bundling)+- [Notable bugfixes](#notable-bugfixes)++Sneak peek to next releases:++- [Less aggressive cache invalidation](#less-aggressive-cache-invalidation)++**Bleeding Edge:** Want to try new features as soon as possible? Install `gatsby@next` and let us know+if you have any [issues](https://github.com/gatsbyjs/gatsby/issues).++[Previous release notes](../v2.27/index.md)<br>+[Full changelog](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.28.0-next.0...gatsby@2.28.0)++## new `gatsby new`++In previous release we added [interactive way of scaffolding new gatsby project](../v2.27/index.md#create-gatsby) (with `npm init gatsby`). Now we adjusted `gatsby new` command when no arguments are passed to also use the same flow.++## Improved `react-refresh` integration++Gatsby had some support for `react-refresh` (or Fast Refresh as it can be referred to) already. This release improves it and adds better error overlays to be able to fix runtime and compilation errors faster! Time = money, and we're giving you time back by helping you solve your errors more quickly!++To use it:++```shell+GATSBY_HOT_LOADER=fast-refresh gatsby develop+```++## Feature flags in `gatsby-config`++Gatsby traditionally used environment variables to use various modes or enable experimental features. This worked, but it was from far from pleasant and had many issues, notably:++- Setting environment variables has idiosyncrasies across platforms (it's different for Windows and different for Linux or MacOS)+- Forced using NPM scripts (and correlating environment variables in continuous deployment solutions like Gatsby Cloud)++No longer! Now you can use flags in `gatsby-config.js`, which will work the same regardless of which environment you're on, where you're deploying, and for every member of your team! Woo hoo!++To use those, add `flags` to your `gatsby-config.js`:++```js+// In your gatsby-config.js+module.exports = {+  // your existing config+  flags: {+    FAST_DEV: true,+  },+}+```++Currently supported flags:++- `DEV_SSR` - Server-side render (SSR) pages on full reloads during develop. Helps you detect SSR bugs and fix them without needing to do full builds.+- `QUERY_ON_DEMAND` - Only run queries when needed instead of running all queries upfront. Speeds starting the develop server.+- `LAZY_IMAGES` - Don't process images during development until they're requested from the browser. Speeds starting the develop server. See [Experimental: Lazy images in develo](#experimental-lazy-images-in-develop) section for additional details.+- `FAST_DEV` - Umbrella flag that enables `DEV_SSR`, `QUERY_ON_DEMAND` and `LAZY_IMAGES` features.++## Removed experimental lazy page bundling++In gatsby@2.27.0 we added [Experimental: Lazy page bundling](../v2.27/index.md#experimental-lazy-page-bundling-in-development) mode for `gatsby develop` that would delay compiling page templates until it was needed. While preliminary tests were very promising, we discovered few showstoppers that degraded development experience. [We decided to end the experiment](https://github.com/gatsbyjs/gatsby/discussions/28137#discussioncomment-138998) for now and shift our efforts to [Less aggressive cache invalidation](#less-aggressive-cache-invalidation).++## Making `gatsby develop` faster++We continue working on speeding up development server startup:++### Experimental: Lazy images in develop++As more and more images are added to a Gatsby site, the slower the local development experience oftentimes becomes.+You spend time waiting for images to process, instead of you know, developing! No longer!+This experimental version of `gatsby-plugin-sharp` only does image processing when the page gets requested.++To use it, make sure you have `gatsby-plugin-sharp@^2.10.0` and add `LAZY_IMAGES` to flags in `gatsby-config.js`:++```js+// In your gatsby-config.js+module.exports = {+  // your existing config+  flags: {+    LAZY_IMAGES: true,+  },+}+```++[Details and discussion](https://github.com/gatsbyjs/gatsby/discussions/27603).++## Notable bugfixes++...++## Work in progress++### Less aggressive cache invalidation++Gatsby aggressively clears its cache, sometimes too aggressively. Here's a few examples:++- You `npm install` a plugin, or update an existing+- You change your `gatsby-node.js` and add a few log statements+- You change your `siteMetadata` in `gatsby-config.js` to update your site's title++In all of these caches, your cache is entirely cleared, which means that the next time you run `gatsby develop` the experience is slower than it needs to be. We'll be working on this to ensure that your first run, and every run thereafter, is as quick and speedy as you expect!++++## Contributors++A big **Thank You** to [everyone who contributed](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.28.0-next.0...gatsby@2.28.0) to this release 💜

Maybe give the count + list names esp community members? Plus the length of time since 2.27

pieh

comment created time in an hour

Pull request review commentgatsbyjs/gatsby

docs: release notes for 2.28

+---+date: "2020-12-01"+version: "2.28.0"+---++# [v2.28](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.28.0-next.0...gatsby@2.28.0) (December 2020 #1)++---++Welcome to `gatsby@2.28.0` release (December 2020 #1).++Key highlights of this release:++- [New `gatsby new`](#new-gatsby-new) - new, interactive way to create a Gatsby site+- [Improved `react-refresh` integration](#improved-react-refresh-integration)+- [Feature flags in gatsby-config](#feature-flags-in-gatsby-config) - set your feature toggles without environment variables+- [Experimental: Lazy images in develop](#experimental-lazy-images-in-develop) - run image transformations only when they are needed by browser+- [Removed experimental lazy page bundling](#removed-experimental-lazy-page-bundling)+- [Notable bugfixes](#notable-bugfixes)++Sneak peek to next releases:++- [Less aggressive cache invalidation](#less-aggressive-cache-invalidation)++**Bleeding Edge:** Want to try new features as soon as possible? Install `gatsby@next` and let us know+if you have any [issues](https://github.com/gatsbyjs/gatsby/issues).++[Previous release notes](../v2.27/index.md)<br>+[Full changelog](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.28.0-next.0...gatsby@2.28.0)++## new `gatsby new`++In previous release we added [interactive way of scaffolding new gatsby project](../v2.27/index.md#create-gatsby) (with `npm init gatsby`). Now we adjusted `gatsby new` command when no arguments are passed to also use the same flow.++## Improved `react-refresh` integration++Gatsby had some support for `react-refresh` (or Fast Refresh as it can be referred to) already. This release improves it and adds better error overlays to be able to fix runtime and compilation error faster!++To use it:++```shell+GATSBY_HOT_LOADER=fast-refresh gatsby develop

kinda done here — https://github.com/gatsbyjs/gatsby/pull/28387/files#diff-33a57bbff99725bd550ef514385fe187def17cff7f8734c25c3ee15b945fe334R118-R125 — needs the rest of it wired up so probably this should just happen in its own PR

pieh

comment created time in an hour

push eventgatsbyjs/gatsby

Matt Kane

commit sha 93a144744c20fc57f563cb5af2683725abc3c941

fix(gatsby-plugin-image): Fix StaticImage props interface and add propTypes (#28372) * Add proptypes and better props defs * Fix compilation error

view details

push time in an hour

PR merged gatsbyjs/gatsby

fix(gatsby-plugin-image): Fix StaticImage props interface and add propTypes status: triage needed

This fixes the interface for StaticImage props, and adds propTypes validation. Previously doing something like passing a string for "width" would lead to the image not resolving, rather than giving a helpful error. This now also enforces proptypes based on the layout, e.g. requiring width and forbidding maxWidth in fixed layout images. It also stops passing through all props to the DOM element, as that was causing react errors

+127 -24

0 comment

8 changed files

ascorbic

pr closed time in an hour

pull request commentgatsbyjs/gatsby

feature(gatsby): Pause dev-ssr watching between page loads to avoid slowing down regular develop-js HMR

On the default starter — a compile on a change is ~400ms and afterwards it's 20ms.

KyleAMathews

comment created time in an hour

issue closedgatsbyjs/gatsby

Allow passing children to a page

Hi,

Presently, PageProps explicitly forbids that a Page receive children as an argument. While this is correct 99% of the time, I think there are small edge cases which makes me want to revisit the idea.

https://github.com/gatsbyjs/gatsby/blob/91b0433a8155efe526ab93028fdec25c86d5124c/packages/gatsby/index.d.ts#L79

I have a page (TabManager) which shows tabbed content. I want to pass each Tab as a child to TabManager. However, I cannot do this as it is explicitly forbidden.

Normally I wrap my individual pages with WithLayout. However, because there are two tabs being managed, it doesn't seem possible to wrap them both. Therefore I want TabManager to be a page, and the tabs it loads to be children.

I understand this could be solved simply by changing the argument name passed to TabManager to "tabs", but I thought I should address it here. I prefer seeing the Tab content as children.

Thanks.

closed time in an hour

nagiek

issue commentgatsbyjs/gatsby

Allow passing children to a page

Thank you for opening this!

This won’t be possible as it’s a reserved key in Gatsby. It’s used for child/parent relationships between nodes: https://www.gatsbyjs.com/docs/node-creation/#parentchildrefs

Hence the typings are correctly enforcing that.

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

nagiek

comment created time in an hour

pull request commentgatsbyjs/gatsby

feature(gatsby): Pause dev-ssr watching between page loads to avoid slowing down regular develop-js HMR

Tested this on .com — times to compile js is roughly on par w/ regular js compilations so ~3.5s for changes to a page and ~150ms if you refresh again. So pretty acceptable I think.

KyleAMathews

comment created time in an hour

pull request commentgatsbyjs/gatsby

feature(gatsby): Enable partial releases of flags to a % of users

Is it possible to let ssr use the same hot-module-overlay and fast-refresh overlay when an error occurs instead of doing our own?

KyleAMathews

comment created time in 2 hours

issue closedgatsbyjs/gatsby

[gatsby-plugin-mdx]: Combining/concatenation/transclusion of MDX files

Summary

I'm trying to break up a large Markdown (.mdx) file into multiple smaller ones, where each one has footnotes:

In parent.mdx:

import Child1 from "./child1.mdx";
import Child2 from "./child2.mdx";
<Child1 />
<Child2 />

In child1.mdx:

This sentence has a footnote [^foo].
[^foo]: Footnote 1.

In child2.mdx:

This sentence has a footnote [^bar].
[^bar]: Footnote 2.

Since each child MDX is compiled then included in parent MDX, this results in 2 separate footnotes sections rather that 1 unified footnote section, as desired. What I want is true transclusion of the raw text (something like #include), ideally a solution that supports recursion (i.e. child can also #include a snippet).

What I've tried

  • Using https://github.com/hashicorp/remark-plugins/blob/master/plugins/include-markdown/index.js, but it uses remark to parse regular MD files and doesn't seem to work for MDX.
  • Writing a custom remark plugin, but I'm not sure how to recursively generate the AST using the functions provided by gatsby-plugin-mdx.
  • Manually overwriting .mdx File's node.internal.content in onCreateNode to concatenate the raw text, but gatsby-plugin-mdx doesn't seem to be affected.
  • Writing a preprocessing plugin as suggested in #15868, but that doesn't work for gatsby-plugin-mdx as noted in #23409

Any ideas?

Motivation

Particularly for large projects, it's useful to break posts into more manageable chunks.

closed time in 2 hours

nikhilxb

issue closedgatsbyjs/gatsby

Import img with variable as src not working as expecteed

<!-- Please fill out each section below, otherwise, your issue will be closed. This info allows Gatsby maintainers to diagnose (and fix!) your issue as quickly as possible.

Useful Links:

  • Documentation: https://www.gatsbyjs.org/docs/
  • How to File an Issue: https://www.gatsbyjs.org/contributing/how-to-file-an-issue/

Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues -->

Description

I'm just trying to import a simple img from a path in my json file.

Steps to reproduce

Link to repository When I'm using

<img
    alt="..."
    src={require("assets/images/todd-logo.svg")}
/>

The image gets imported and rendered as expected. But when I try to import the image with a variable as a path: <img alt="..." className="img" src={require(`${props.image}`)} />

I get an error similar to: Error: Cannot find module 'assets/images/accomodation-room1.png'

This happens even if I use assets/images/todd-logo.svg as the variable value in the json file, in the same js file I'm working on. This problem arises when I use a variable as a path.

I have added a jsconfig.json with the following parameters to deal with paths in my project, while using the plugin 'gatsby-plugin-resolve-src':

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "*": ["src/*"],
      "assets": ["src/assets"]
    }
  }
}

Expected result

The image gets rendered in the website

Actual result

I get an error saying Cannot find module

Environment

System: OS: Windows 10 10.0.19041 CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz Binaries: Node: 15.2.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD Languages: Python: 3.9.0 Browsers: Chrome: 87.0.4280.66 Edge: Spartan (44.19041.423.0), Chromium (87.0.664.47) npmPackages: gatsby: ^2.26.1 => 2.26.1 gatsby-image: ^2.5.0 => 2.5.0 gatsby-plugin-manifest: ^2.6.1 => 2.6.1 gatsby-plugin-offline: ^3.4.0 => 3.4.0 gatsby-plugin-react-helmet: ^3.4.0 => 3.4.0 gatsby-plugin-resolve-src: ^2.1.0 => 2.1.0 gatsby-plugin-sass: ^2.6.0 => 2.6.0 gatsby-plugin-sharp: ^2.8.0 => 2.8.0 gatsby-source-filesystem: ^2.5.0 => 2.5.0 gatsby-transformer-sharp: ^2.6.0 => 2.6.0 npmGlobalPackages: gatsby-cli: 2.13.1

closed time in 2 hours

Hachondeoro

Pull request review commentgatsbyjs/gatsby

feature(gatsby): Pause dev-ssr watching between page loads to avoid slowing down regular develop-js HMR

 export const renderDevHTML = ({       return reject(`404 page`)     } +    // Resume the webpack watcher and wait for any compilation necessary to happen.+    // We timeout after 1.5s as the user might not care per se about SSR.+    //+    // We pause and resume so there's no excess webpack activity during normal development.+    const { devssrWebpackCompilier, devssrWebpackWatcher } = getDevSSRWebpack()+    if (devssrWebpackWatcher && devssrWebpackCompilier) {+      await new Promise(resolve => {

The resume/suspend stuff

KyleAMathews

comment created time in 2 hours

Pull request review commentgatsbyjs/gatsby

feature(gatsby): Pause dev-ssr watching between page loads to avoid slowing down regular develop-js HMR

 export const renderDevHTML = ({       return reject(`404 page`)     } +    // Resume the webpack watcher and wait for any compilation necessary to happen.+    // We timeout after 1.5s as the user might not care per se about SSR.+    //+    // We pause and resume so there's no excess webpack activity during normal development.+    const { devssrWebpackCompilier, devssrWebpackWatcher } = getDevSSRWebpack()+    if (devssrWebpackWatcher && devssrWebpackCompilier) {+      await new Promise(resolve => {

@ascorbic this pattern is swwweeeeet

KyleAMathews

comment created time in 2 hours

push eventgatsbyjs/gatsby

Kyle Mathews

commit sha 597d1dd00e14311f333884186256134a444dede0

fix(gatsby-source-filesystem): Improve the description (#28252) Currently it's "Gatsby plugin which parses files within a directory for further parsing by other plugins" which is rather opaque and CS-y. This PR changes it to better describe how someone would actually use it — "build websites with data from your local filesystem"

view details

Michal Piechowiak

commit sha e416368c42971a77ae7059376d764f17032f62ff

fix(gatsby-telemetry): use windowsHide to not show windows command prompt windows (#28258)

view details

Matt Kane

commit sha 9f91ba1c3bc9b1b3b6347f152baba37d4ab9c77b

docs(gatsby-plugin-image): Update API in readme (#28134) * docs(gatsby-plugin-image): Update API in readme * Fixes from review

view details

Kyle Mathews

commit sha f75e358a79a104b597a97993088b27268a9a9242

Always compile the index page (if it exists) (#28265)

view details

Peter van der Zee

commit sha 7cba8372574c32da88b8e23eda9ff3be7cdda381

chore(gatsby): Only warn for cache lock timeout once (#28255)

view details

Michal Piechowiak

commit sha 13d72a405cf1d183d0f2b169f73a656e0dfcade1

chore(e2e-pnp): don't pin berry version (#28286)

view details

Matt Kane

commit sha 6d3f297db8011d1bb80aac5438d3ee553ac4c0d5

starters(gatsby-minimal-starter): Update links and readme (#28290)

view details

Nina Pypchenko

commit sha dc6af8a81a65766476738ce05482cb12a2cb6a1a

chore(gatsby-cli): Bump up update-notifier version to 5.0.1 (#28273) * Bump up update-notifier version in gatsby-cli to 5.0.1 The update-notifier package had a bug in earlier versions where some users didn't see version numbers to update to and from as well as the update command, instead they saw template variables. Fixes #28201. * Update yarn.lock Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

view details

Lee Robinson

commit sha 9b10692441874310f73f19afec4f8a79e91e87b4

Add Vercel Analytics to documentation. (#27841)

view details

Kunal Kumar Verma

commit sha 13986743dcf97c30d09f5bc64ba6f913acaff9fd

chore(docs): Fix link to inc builds (#28306)

view details

Jason Miazga

commit sha 9c7c1a275b0fce75ae971eb85a48845df62d0e10

fix(gatsby-recipes): updated chakra ui recipe after v1 release (#28270)

view details

Kyle Mathews

commit sha c993d52bff1b2255ba8a2c0d04726bfdb71b070a

fix(gatsby-dev-cli): Correctly catch 404s from NPM when a package hasn't been published yet (#28297) * fix(gatsby-dev-cli): Correctly catch 404s from NPM when a package hasn't been published yet * Use async/await Co-authored-by: Peter van der Zee <209817+pvdz@users.noreply.github.com> Co-authored-by: Peter van der Zee <209817+pvdz@users.noreply.github.com>

view details

Max Stoiber

commit sha 911d5e38f142cf8270f4ce359767076964e19a94

feat(gatsby-cli): remove feature flag for new interactive `gatsby new` experience (#28125)

view details

Matt Kane

commit sha 6ed397f22c5cae21563de095f1f1a6d6e26ba100

feat(gatsby-plugin-image): Add image plugin helpers (#28110) * Add image helper * Fix type * Fix size calculation * Update test * Fix package.json * Add support for empty metadata * Add CdnImage component * Hooks are nicer * Add resolver utils * Quality shouldn't be a default * Add tests * Move resolver utils into gatsby-plugin-image/graphql * Change export to /graphql-utils Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

view details

Marvin Frachet

commit sha b89b068da4c95188fd734d43fb1536f305804c41

fix(gatsby-plugin-image): Fix placeholder bg color (#28305)

view details

Matt Kane

commit sha e1e9e0c644c6c2191c66657588cede138cc10209

fix(gatsby-plugin-image): Correct IntersectionObserver handling (#28309) * fix(gatsby-plugin-image): Correct IntersectionObserver handling * Adding basic E2E test * Update packages/gatsby-plugin-image/src/components/intersection-observer.ts Co-authored-by: Ward Peeters <ward@coding-tech.com> * Add saveData check * Move E2E test to static image folder * Revert package json * Update e2e-tests/gatsby-static-image/cypress/integration/intersection-observer.js Co-authored-by: Ward Peeters <ward@coding-tech.com> * Revert tests Co-authored-by: mfrachet <marvin@gatsbyjs.com> Co-authored-by: Ward Peeters <ward@coding-tech.com>

view details

Kyle Mathews

commit sha 2e3ec895a227c8de5a7d8c69e92548c935c0fdcc

chore(gatsby): remove lazy dev js experiment (#28295) * chore(gatsby): remove lazy dev js experiment * This bit of the test fails now w/ the page-data changes * use import, not require (to restore to what it was before lazy js compilation) Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>

view details

Blaine Kasten

commit sha 613f5c791fd059e8a64eeaa81993d1f9f14bec53

feat(gatsby): Add preliminary fast-refresh integration (#26664) * chore(gatsby): Use fast refresh if the version of react installed supports it * Update detect-hot-loader-to-use.ts * idk * rm * fix ts * try to fix 2 tests.. * things * fixes * another thing * Fix most tests * fix the tests by moving the page query into hook until i can fix the multiple exports problem * Finally got FastRefresh working with page components * fix tests * one versino of react * test something * fix test * revert script changes * reset react version for gatsby-cli * Update packages/gatsby/src/utils/get-react-hot-loader-strategy.ts Co-authored-by: Ward Peeters <ward@coding-tech.com> * updates * named exports * circleci: create new test with fast-refresh * another position lel * update tests * reset package json * package.json * lock file * wip stuff from blaine * wip stuff from blaine * re-add pieh e2e tests * consolidate into less components and react class * lunch break -- use portal, runtime error works * use components * error boundary * runtime mostly working * lint * get babel-code-frame for runtime working * lint * fix errors from merge * Revert "re-add pieh e2e tests" This reverts commit 66c64002 * only use eval for fast-refresh * more proper TS types * re-add isomporphic-fetch * only conditionally use fast-refresh overlay + safe guards for sourceMap * style * test run for CI * cypress conditionally * comment out the default for 17 thing * fix linting * fix circleci after wrong merge conflict resolution Co-authored-by: Ward Peeters <ward@coding-tech.com> Co-authored-by: LekoArts <lekoarts@gmail.com> Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com> Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>

view details

Ward Peeters

commit sha 36661308db47696a3b29d2348c190817d81f1595

fix(gatsby-link): don't prefetch same page (#28307) * fix(gatsby-link): don't prefetch same page * test prefect intersection-observer Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

view details

Vladimir Razuvaev

commit sha cc68a1f435e6fc923908d7a2b84f52dc2a999f4d

feat(gatsby-plugin-sharp): add experimental opt-in lazy image processing mode for `gatsby develop` (#28288) * feat(gatsby-plugin-sharp): enable lazy image processing * fix progress bar and cloud * track usage of query on demand feature * Use GATSBY_EXPERIMENTAL_LAZY_IMAGES vs `experimentalDisableLazyProcessing` plugin option * Don't hook to express when disabled * Update test snapshot * fix: restore behavior from master for onCreateDevServer * Add a note on FAST_DEV compatibility with gatsby-plugin-sharp * Reset GATSBY_EXPERIMENTAL_LAZY_IMAGES for non-develop and CI Co-authored-by: Ward Peeters <ward@coding-tech.com> Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>

view details

push time in 3 hours

push eventgatsbyjs/gatsby

Kyle Mathews

commit sha 92975e4836698baa8fafd93817e26308e99ec71a

copy fix

view details

push time in 3 hours

issue commentgatsbyjs/gatsby

gatsby-plugin-emotion: emotion 11

If you want to use the upcoming version of gatsby-plugin-emotion, instead of using the deprecated @emotion/core:

yarn upgrade gatsby-plugin-emotion@5.1.0-next.0
k-m-a-c

comment created time in 4 hours

issue openedgatsbyjs/gatsby

Import img with variable as src not working as expecteed

<!-- Please fill out each section below, otherwise, your issue will be closed. This info allows Gatsby maintainers to diagnose (and fix!) your issue as quickly as possible.

Useful Links:

  • Documentation: https://www.gatsbyjs.org/docs/
  • How to File an Issue: https://www.gatsbyjs.org/contributing/how-to-file-an-issue/

Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues -->

Description

I'm just trying to import a simple img from a path in my json file.

Steps to reproduce

Link to repository When I'm using

<img
    alt="..."
    src={require("assets/images/todd-logo.svg")}
/>

The image gets imported and rendered as expected. But when I try to import the image with a variable as a path: <img alt="..." className="img" src={require(`${props.image}`)} />

I get an error similar to: Error: Cannot find module 'assets/images/accomodation-room1.png'

This happens even if I use assets/images/todd-logo.svg as the variable value in the json file, in the same js file I'm working on. This problem arises when I use a variable as a path.

I have added a jsconfig.json with the following parameters to deal with paths in my project, while using the plugin 'gatsby-plugin-resolve-src':

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "*": ["src/*"],
      "assets": ["src/assets"]
    }
  }
}

Expected result

The image gets rendered in the website

Actual result

I get an error saying Cannot find module

Environment

System: OS: Windows 10 10.0.19041 CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz Binaries: Node: 15.2.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD Languages: Python: 3.9.0 Browsers: Chrome: 87.0.4280.66 Edge: Spartan (44.19041.423.0), Chromium (87.0.664.47) npmPackages: gatsby: ^2.26.1 => 2.26.1 gatsby-image: ^2.5.0 => 2.5.0 gatsby-plugin-manifest: ^2.6.1 => 2.6.1 gatsby-plugin-offline: ^3.4.0 => 3.4.0 gatsby-plugin-react-helmet: ^3.4.0 => 3.4.0 gatsby-plugin-resolve-src: ^2.1.0 => 2.1.0 gatsby-plugin-sass: ^2.6.0 => 2.6.0 gatsby-plugin-sharp: ^2.8.0 => 2.8.0 gatsby-source-filesystem: ^2.5.0 => 2.5.0 gatsby-transformer-sharp: ^2.6.0 => 2.6.0 npmGlobalPackages: gatsby-cli: 2.13.1

created time in 4 hours

push eventgatsbyjs/gatsby

Kyle Mathews

commit sha 2b0eed7e0a1f254f603befff90521e5aaaf6b63f

Add link on ssr error page to the docs

view details

push time in 5 hours

issue openedgatsbyjs/gatsby

[gatsby-plugin-mdx]: Combining/concatenation/transclusion of MDX files

Summary

I'm trying to break up a large Markdown (.mdx) file into multiple smaller ones, where each one has footnotes:

In parent.mdx:

import Child1 from "./child1.mdx";
import Child2 from "./child2.mdx";
<Child1 />
<Child2 />

In child1.mdx:

This sentence has a footnote [^foo].
[^foo]: Footnote 1.

In child2.mdx:

This sentence has a footnote [^bar].
[^bar]: Footnote 2.

Since each child MDX is compiled then included in parent MDX, this results in 2 separate footnotes sections rather that 1 unified footnote section, as desired. What I want is true transclusion of the raw text (something like #include), ideally a solution that supports recursion (i.e. child can also #include a snippet).

What I've tried

  • Using https://github.com/hashicorp/remark-plugins/blob/master/plugins/include-markdown/index.js, but it uses remark to parse regular MD files and doesn't seem to work for MDX.
  • Writing a custom remark plugin, but I'm not sure how to recursively generate the AST using the functions provided by gatsby-plugin-mdx.
  • Manually overwriting .mdx File's node.internal.content in onCreateNode to concatenate the raw text, but gatsby-plugin-mdx doesn't seem to be affected.
  • Writing a preprocessing plugin as suggested in #15868, but that doesn't work for gatsby-plugin-mdx as noted in #23409

Any ideas?

Motivation

Particularly for large projects, it's useful to break posts into more manageable chunks.

created time in 5 hours

push eventgatsbyjs/gatsby

Kyle Mathews

commit sha 99dabd7d6d34532504cca04ec9345beffae4c1e6

update snapshot

view details

push time in 5 hours

startedSamVerschueren/tsd-typescript

started time in 6 hours

issue openedgatsbyjs/gatsby

Allow passing children to a page

Hi,

Presently, PageProps explicitly forbids that a Page receive children as an argument. While this is correct 99% of the time, I think there are small edge cases which makes me want to revisit the idea.

https://github.com/gatsbyjs/gatsby/blob/91b0433a8155efe526ab93028fdec25c86d5124c/packages/gatsby/index.d.ts#L79

I have a page (TabManager) which shows tabbed content. I want to pass each Tab as a child to TabManager. However, I cannot do this as it is explicitly forbidden.

Normally I wrap my individual pages with WithLayout. However, because there are two tabs being managed, it doesn't seem possible to wrap them both. Therefore I want TabManager to be a page, and the tabs it loads to be children.

I understand this could be solved simply by changing the argument name passed to TabManager to "tabs", but I thought I should address it here. I prefer seeing the Tab content as children.

Thanks.

created time in 6 hours

push eventgatsbyjs/gatsby

Kyle Mathews

commit sha af69cbde5a41de588c7a8a61d719e746201e3afa

update snapshot

view details

push time in 6 hours

push eventgatsbyjs/gatsby

Kyle Mathews

commit sha b94ced155f6220f7a8fb5916ceb2da4db8e1b9d9

update snapshot

view details

push time in 6 hours

more