EzDev.org

gatsby

gatsby - ?????? Blazing fast static site generator for React


Adding Google Analytics event handlers

On a current Gatsbyjs site build I need to record some (click) events in Google Analytics.

I'm at a loss as to where I would add my custom code to listen for the events I want to send off.

What is the common practice for adding the js code to listen across pages?

Thanks!


Source: (StackOverflow)

How to handle internationalization/localization with Gatsby JS?

I would like to publish my static site in various locals around the world with localized content.

How does one accomplish this?


Source: (StackOverflow)

Multiple Post Type with MarkdownRemark

I was wondering if I could have multiple post types in a gatsby static site.

On gatsby-config.js I have the following code.

{
resolve: `gatsby-source-filesystem`,
options: {
  path: `${__dirname}/content/books`,
  name: `books`,
}

{
resolve: `gatsby-source-filesystem`,
options: {
  path: `${__dirname}/content/posts`,
  name: `posts`,
}

Both the folders have relevant markdown files and I could not find any examples of graphql to retrieve both.

Thanks in advance.


Source: (StackOverflow)

Should I deploy sourcemaps to production?

I'm deploying my website - a static site built in GatsbyJS - and my sourcemaps are by far my largest files. I have 3 sourcemap files that are ~ 3megs. Overall they make up maybe 70% of my build.

Should I deploy them to my production server? Are sourcemaps only downloaded by users that open devtools?


Source: (StackOverflow)

When to use a react framework such as Next or Gatsby vs Create React App

I'm in the sort of rapid prototyping phase of my React/javascript learning experience. I was wondering when folks would reach for a framework such as Next.js or Gatsby.js vs the standard Create React App.

I really dig the page based structuring and prospect for preloading links of Next.js. However, I'm not sure when you would reach for Next as apposed to CRA or even ejected CRA.

Thanks!


Source: (StackOverflow)

Gatsby static site gen. & publishing new content

With the Gatsby static site generator project, since the site is rendering content files to html during the webpack build, does this mean that for something like a blog, every new post would require a fresh push to server?

If that's the case, does anyone have best-practices for that workflow?


Source: (StackOverflow)

How do I add an arbitrary file to /public with Gatsby?

I would like to add a text file to /src in a way that it always ends up unchanged in the root of the build directory (/public).

In my case specifically I need to add a _redirects file for Netlify to redirect a subdomain to a custom domain.

Running Gatsby 1.0 alpha.


Source: (StackOverflow)

Is it possible to use d3.js with gatsby.js framework?

I'm in the process of creating a personal website/portfolio, and I stumbled upon the robust gatsby.js package.

I also have to visualize a complicated dataset for research purposes and I want to use d3.js, and include the dashboard I create in my Gatsby powered site.

It's possible to use d3 in react components -> https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71

Theoretically,Gatsby should be able to support d3 integration, but my attempts thus far have failed.

Here is what I have tried:

Complete the Gatsby tutorials https://www.gatsbyjs.org/tutorial/

I am using a completed 4th tutorial site from the gatsbyjs documentation with the following additions

npm install --save d3

added utils/d3.js

file contents

import d3 from "d3"
module.exports = d3

I also added d3 to the gatsby-config.js plugins.

I run gatsby develop, and receive the following error, which hangs.

success delete html files from previous builds — 0.005 s
success open and validate gatsby-config.js — 0.003 s
(node:8725) UnhandledPromiseRejectionWarning: Unhandled promise rejection 
(rejection id: 2): Error: Unable to find plugin "d3"
(node:8725) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated.
 In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Any feedback would be helpful, if this is an intractable feat, what would be my path of least resistance to accomplish my goal of d3 integration and an easy personal site framework?

UPDATE 09/08/17

I switched to the Hello World! tutorial to debug the d3 issue. I have tried d3 and d3-node npm packages.

Upon adding import d3 from "d3" to my index.js file, I get two similar errors that occur after the bootstrap finishes.

Both errors loop in compile attempts and respectively output:

d3 error

ERROR  Failed to compile with 2 errors  
These dependencies were not found:

* child_process in ./~/xmlhttprequest/lib/XMLHttpRequest.js

* fs in ./~/xmlhttprequest/lib/XMLHttpRequest.js

To install them, you can run: npm install --save child_process fs

d3-node error switch the import on index.js to "d3-node"

ERROR  Failed to compile with 13 errors

These dependencies were not found:

* fs in ./~/jsdom/lib/jsdom.js, ./~/jsdom/lib/jsdom/browser/resource-loader.js and 3 others
* net in ./~/tough-cookie/lib/cookie.js, ./~/forever-agent/index.js and 1 other
* child_process in ./~/jsdom/lib/jsdom/living/xmlhttprequest.js
* tls in ./~/forever-agent/index.js, ./~/tunnel-agent/index.js

To install them, you can run: npm install --save fs net child_process tls

These relative modules were not found:

* ../file-api/FileReader-impl.js in ./~/jsdom/lib/jsdom/living/generated/FileReader.js
* ../events/MutationEvent-impl.js in ./~/jsdom/lib/jsdom/living/generated/MutationEvent.js

Source: (StackOverflow)

'Module build failed: Error: Couldn't find preset "es2015" relative to directory' from newly created gatsby project

I have created a project following these steps:

npm install -g gatsby
gatsby new dev-blog
cd dev-blog
npm install

Then I try to start by project by

gatsby develop --host localhost --port 9000

At this point it throws an exception:

Failed to require /Users/antkong/wd/blogs/gatsby/dev-blog/html.js
./html.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/antkong/wd"

How can I fix this problem?

Edit

OS: OSX 10.12.4

Darwin mymac.local 16.5.0 Darwin Kernel Version 16.5.0: Fri Mar  3 16:52:33 PST 2017; root:xnu-3789.51.2~3/RELEASE_X86_64 x86_64

npm: 3.10.10

node: 6.10.2

Full stacktrace:

❯❯ npm run develop   
> gatsby-starter-default@1.0.0 develop /Users/antkong/wd/blogs/gatsby/dev-blog
> gatsby develop

Failed to require /Users/antkong/wd/blogs/gatsby/dev-blog/html.js
./html.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/antkong/wd"
    at /Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-loader/lib/index.js:46:20)
    at /Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-loader/lib/fs-cache.js:79:18
    at ReadFileContext.callback (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-loader/lib/fs-cache.js:15:14)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:366:13)

 @ (webpack)-require/lib/webpackRequireEntrypoint.js 1:20-41

I am also using nvm

❯❯ nvm list                                                                      
->      v6.10.2
         system
default -> v6 (-> v6.10.2)
node -> stable (-> v6.10.2) (default)
stable -> 6.10 (-> v6.10.2) (default)
iojs -> N/A (default)
lts/* -> lts/boron (-> v6.10.2)
lts/argon -> v4.8.2 (-> N/A)
lts/boron -> v6.10.2

Source: (StackOverflow)

React - Changing CSS property on click (arrow function)

I have the following in one of my React / Gatsby files:

import React from "react"

const click = () => {
  console.log("J");
}

const NavButton = () => 
  <button className="navbar-toggler navbar-toggler-right" style={{backgroundColor: 'blue', position: "absolute", margin: "30px"}}type="button" data-toggle="collapse" data-target="#collapsingNavbar" onClick={click}>
    <div id="nav-icon1">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </button>

const Dropdown = () => 
<div style={{visibility: "hidden", backgroundColor: "blue", position: "absolute", height: "100%", width: "100%"}}>
</div>

export default (props) =>
  <div className="left col-xs-12 col-md-6">
    <Dropdown />
    <NavButton />
    {props.children}
  </div>

Now I would like to fire click() whenever somebody presses the NavButton, and then I would like to make Dropdown visible. How would I do this? Right now I have it hardcoded that Dropdown has style={{visibility: "hidden", ....

I'm also wondering whether I am doing this correctly, having everything loosely in these different functions, if somebody could tell me that would be great!


Source: (StackOverflow)

How to handle Contentful content data in Gatsby

I'm interested in using Gatsby to build a Netlify static site using content from Contentful

Netlify has this nice gettting started Gatsby guide: ​​https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify

But I'm a bit unsure of how to bring Contentful into the mix. Do I need to write scripts to convert my Contentful content into Gatsby 'markdown'?

Any ideas, ideas, links appreciated!


Source: (StackOverflow)

How are searches implemented in a Flat File CMS

Flat file CMS's don't use databases. So how are searches implemented? Is searching more or less computationally expensive with this type of setup compared to a database powered search?


Source: (StackOverflow)

Static React App/Webpage Multi-language

I have spend a week to figure out this question currently I'm using gatsby to generate my static web app. i have tried to do it

-pages 
--en 
---index.js 
---main.md 
---contact.md 
--zh 
---index.js 
---main.md 
---contact.md

it's kind a works, but still not exactly perfect solution. i'm thinking about impelent React-Intl but i'm not sure. is it possible for static app/webpage?

any other suggestion ?


Source: (StackOverflow)

How do you pass variables to pageQuery

I have this page in Gatsby:

import React from 'react'
import Link from 'gatsby-link'

import IntroPartial from '../partials/themes/intro'

export default class ThemeTemplate extends React.Component {
  render(){
    const theme = this.props.pathContext.theme
    console.dir(this.data)
    return (
      <div>
        <h1>{theme.name}</h1>
        <IntroPartial theme={theme} />
      </div>
    )
  }
}

export const pageQuery = graphql`
query ThemeQuery($theme: String){
  allMarkdownRemark(
    filter: { frontmatter: { themes: { in: [$theme] } } }
  ){
    edges{
      node{
        frontmatter{
          title
          themes
        }
        html
      }
    }
  }
}
`

This query works fine in the GraphQL tester assuming I supply an option to $theme. How do I provide the value for $theme? I'd like to set it to this.props.pathContext.theme.slug.

The docs seem to imply that some variables should just work, but I'm not sure how to add my own.


Source: (StackOverflow)

Images in CSS URLs not showing in GatsbyJS

I have the following selector in css/application.scss :

#header-container {
  background: #333 url('../pages/images/home-head.jpg') center center no-repeat;
  background-size: cover;
}

When I preview the site with gatsby develop I see this in the web inspector:

#header-container {
  background: #333 url([object Object]) center center no-repeat;
  background-size: cover;
}

Something is definitely not right with [object Object] but I'm having trouble tracking it down. Any hints on where I should look?


Source: (StackOverflow)