vagr9k / gatsby-material-starter

A high performance blog starter with Material design in mind for GatsbyJS.

Gatsby Material Starter

A Material Design oriented blog starter for GatsbyJS equipped with advanced features such as SEO, image optimization, PWA capabilities and infinite scrolling feeds.

This starter aims to provide a minimal base for building advanced GatsbyJS powered websites by using the latest technologies to simplify your process.

Starter supports both TypeScript and JavaScript, comes with Jest and Cypress configurations and allows you to write Unit/Integration/E2E tests out of the box.

The starter uses gatsby-theme-advanced under the hood and is based on the Gatsby Advanced Starter.

Demo

Material Demo.

Visit gatsby-theme-material for details regarding on how it was built using gatsby-theme-advanced.

Features

• Gatsby v4 support
• First class TypeScript support (for query data and components exposed by the theme)
• Material UI V5 components
• Emotion used for styling
• Posts in MDX
  • Code syntax highlighting
  • Embed videos
  • Embed iframes
• Infinite Scrolling
• React Query for client side API calls
• Tags
  • Separate page for posts under each tag
• Categories
  • Separate page for posts under each category
• Social features
  • Twitter tweet button
  • Facebook share/share count
  • Reddit share/share count
  • LinkedIn share button
• Author section
• Related posts computation and display based on category/tag match ranking
• Disqus support via gatsby-theme-advanced
• gatsby-plugin-image for optimized image generation
• Inline SVG imports
• High configurability
• Separate components for everything:
  • Gatsby Link utilities
  • SEO
  • Disqus
• PWA features
  • Offline support
  • Web App Manifest support
  • Loading progress for slow networks
• SEO
  • Google gtag.js support
  • Sitemap generation
  • General description tags
  • Google Structured Data
  • OpenGraph Tags (Facebook/Google+/Pinterest)
  • Twitter Tags (Twitter Cards)
• RSS feeds
• Development tools
  • Yarn 3
  • Jest for unit/integration testing
  • Cypress for E2E testing
  • CI via GitHub Actions
  • CD via GitHub Actions
  • ESLint for linting
  • Prettier for code formatting
  • React Hooks Linting
  • Remark-Lint for linting Markdown
  • write-good for linting English prose
  • gh-pages for deploying to GitHub pages
  • Netlify deploy configuration

Getting Started

Install this starter by running the following commands from your CLI:

gatsby new YourProjectName https://github.com/Vagr9K/gatsby-material-starter
cd YourProjectName
yarn develop # or gatsby develop

Note that the Gatsby CLI needs to be installed and updated for the gatsby command to work.

Alternatively you can fork the project, make your changes and merge new upstream features when needed:

• Fork this repository on GitHub

• Run the following commands:

  git clone https://github.com/${YourUsername}/${YourForkName} YourForkName # Clone your fork
  cd YourForkName
  yarn install # or yarn install
  yarn develop # or yarn develop

Receiving upstream updates

You have multiple options when it comes to receiving upstream updates:

• Pull and merge upstream changes into your repo
• Change the version of gatsby-theme-material from local to remote.

First option allows you to make your own changes to the theme without having to fork and publish it. This is the default approach when you clone/fork the starter repository.

Second option simplifies your CI/CD setup and allows you to receive updates by simply bumping the package version.

To switch to the remote version, open package.json and edit the dependency section:

 "gatsby-theme-material": "*",

into

 "gatsby-theme-material": "3.1.0", // Or the version you want

Configuration

To configure the theme edit your gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-material`,
      options: {
        basePath: `/blog`,
      },
    },
  ],
};

For configuring the theme, consult its documentation pages:

• Material

NetlifyCMS

First of all, make sure to edit static/admin/config.yml and add your GitHub/GitLab/NetlifyId credentials:

backend:
  name: github # Refer to https://www.netlifycms.org/docs/authentication-backends/ for auth backend list and instructions
  branch: master # Branch to update
  repo: vagr9k/gatsby-material-starter # Repo for pushing new commits. Make sure to replace with your repo!

You can visit /admin/ after and will be greeted by a login dialog (depending on the auth provider you ave chosen above).

If want to customize Netlify CMS, e.g. registering custom widgets or styling the preview pane, you can do so by editing src/netlifycms/index.js:

import CMS from "netlify-cms-app";

CMS.init({
  config: {
    backend: {
      name: "git-gateway",
    },
  },
});

For NetlifyCMS specific issues visit the official documentation.

Author

Ruben Harutyunyan (@Vagr9K)

gatsby-material-starter's Issues

Disqus Not Working

I can't get the disqus commenting to work. I have gone into my settings and added my domain geekedoutsolutions.com and updated the config file to what I believe is right. Any chance you know what is happening?

https://www.geekedoutsolutions.com

code is at https://github.com/Geeked-Out-Solutions/blog

my short name should be geeked-out-solutions

yarn install fails, though npm install doesn't

When running new, gatsby sees yarn present and it uses yarn over npm, failing after cloning the repo. The same applies to https://github.com/Vagr9K/gatsby-advanced-starter. So, while running npm install from the project directory fixes it, #33 does not in fact solve this issue because it's yarn.lock that needed the update all along.

error An unexpected error occurred: "/Users/cog/material/node_modules/sharp: Command failed.

Reduce Layout cyclomatic complex

the method getLocalTitle from layout should be refactored
it's cyclomatic complex is high because it have an if which could be replaced by a new prop sent from each part where it's used and remove this required conditional that was required for gatsby v1
this applies only for v2 branch

Error when leaving the pathPrefix empty

I'm running the application on a root Domain, so no pathPrefix is needed. But an empty pathPrefix field in SiteConfig results in a build error message like "ValidationError: child "pathPrefix" fails because ["pathPrefix" is not allowed to be empty]". How to deal with this?

How to open links in a new browser tab

Hi, I am trying this, for example, in the UserLinks Commponent that renders "react-md/lib/Buttons"... I didn't find any way to set a target="_blank" or something like this.

Split post page

The page component post.jsx should be divided into the gatsby specific component and the react-md presentation like a hoc component where the specific gatsby behavior should stay on pages/post.jsx and the variable part (react-md) dependent should be located in components/Post/index.jsx

Stripped down version?

Hi Vagr9K,

If you or someone else has any time, I'm interested in a basic gatsby/material starter that just has a navbar at the top with a link to another page, maybe one content component in the main part of the page and a footer. This would give me a better idea of using gatsby/material-md without trying to strip out all of the blog content of this starter. Hope you don't mind me contacting you here, I was not sure where to write you.

Best,
Eric

GraphQL Error Unknown field `childImageSharp` on type `File`

GraphQL Error Unknown field childImageSharp on type File

file: /Users/.../.../src/components/PostCover/index.jsx

Theme modifications from SiteConfig

Including theme-color (red by default), and dark theme modifier.

Reduce dependency on all files to siteConfig

In some code places is required the module siteConfig but it's used just for take one value, i think is more reliable (for testing purposes) inject this as props depending on the cases

Create a universal post identifier system.

FacebookShareButton warning: title is a deprecated prop. Use "quote" instead.

FacebookShareButton warning: title is a deprecated prop. Use "quote" instead.

when npm run build:gh

how to fix?

Disqus comments disappear after reload.

Naming for root components are not acording Airbnb guidelines

https://github.com/airbnb/javascript/tree/master/react#naming

• Component Naming: Use the filename as the component name. For example, ReservationCard.jsx should have a reference name of ReservationCard. However, for root components of a directory, use index.jsx as the filename and use the directory name as the component name:

  // bad
  import Footer from './Footer/Footer';
  
  // bad
  import Footer from './Footer/index';
  
  // good
  import Footer from './Footer';

gatsby-starter-material getting replicated?

@Vagr9K I don't understand why gatsby-starter-material directory is getting nested recursively.

Error installing on macos using documented commands

Description

Cannot install on a fresh node 18 env on macos

Steps to reproduce

• Installed latest node 18 (v18.16.0, but also tested v18.1.0)
• npx gatsby new xxxxx https://github.com/Vagr9K/gatsby-material-starter

Actual result

success Created starter directory layout
info Installing packages...

npm ERR! code 1
npm ERR! path /Users/keul/projects/scrivere.keul.it/node_modules/lmdb-store
npm ERR! command failed
npm ERR! command sh -c node-gyp-build
npm ERR! make: Entering directory '/Users/keul/projects/scrivere.keul.it/node_modules/lmdb-store/build'
npm ERR!   CC(target) Release/obj.target/lmdb-store/dependencies/lmdb/libraries/liblmdb/midl.o
npm ERR!   CC(target) Release/obj.target/lmdb-store/dependencies/lmdb/libraries/liblmdb/chacha8.o
npm ERR!   CC(target) Release/obj.target/lmdb-store/dependencies/lz4/lib/lz4.o
npm ERR!   CXX(target) Release/obj.target/lmdb-store/src/node-lmdb.o
npm ERR!   CXX(target) Release/obj.target/lmdb-store/src/env.o
npm ERR!   CXX(target) Release/obj.target/lmdb-store/src/compression.o
npm ERR!   CXX(target) Release/obj.target/lmdb-store/src/ordered-binary.o
npm ERR! make: Leaving directory '/Users/keul/projects/scrivere.keul.it/node_modules/lmdb-store/build'
npm ERR! In file included from ../src/node-lmdb.cpp:24:
npm ERR! In file included from ../src/node-lmdb.h:32:
npm ERR! ../../nan/nan.h:2544:8: warning: 'SetAccessor' is deprecated: Do signature check in accessor [-Wdeprecated-declarations]
npm ERR!   tpl->SetAccessor(
npm ERR!        ^
npm ERR! /Users/keul/Library/Caches/node-gyp/18.16.0/include/node/v8-template.h:837:3: note: 'SetAccessor' has been explicitly marked deprecated here
npm ERR!   V8_DEPRECATED("Do signature check in accessor")
npm ERR!   ^
npm ERR! /Users/keul/Library/Caches/node-gyp/18.16.0/include/node/v8config.h:460:35: note: expanded from macro 'V8_DEPRECATED'
npm ERR! # define V8_DEPRECATED(message) [[deprecated(message)]]
npm ERR!                                   ^
npm ERR! 1 warning generated.
npm ERR! In file included from ../src/env.cpp:25:
npm ERR! In file included from ../src/node-lmdb.h:32:
npm ERR! ../../nan/nan.h:2544:8: warning: 'SetAccessor' is deprecated: Do signature check in accessor [-Wdeprecated-declarations]
npm ERR!   tpl->SetAccessor(
npm ERR!        ^
npm ERR! /Users/keul/Library/Caches/node-gyp/18.16.0/include/node/v8-template.h:837:3: note: 'SetAccessor' has been explicitly marked deprecated here
npm ERR!   V8_DEPRECATED("Do signature check in accessor")
npm ERR!   ^
npm ERR! /Users/keul/Library/Caches/node-gyp/18.16.0/include/node/v8config.h:460:35: note: expanded from macro 'V8_DEPRECATED'
npm ERR! # define V8_DEPRECATED(message) [[deprecated(message)]]
npm ERR!                                   ^
npm ERR! 1 warning generated.
npm ERR! In file included from ../src/compression.cpp:26:
npm ERR! In file included from ../src/node-lmdb.h:32:
npm ERR! ../../nan/nan.h:2544:8: warning: 'SetAccessor' is deprecated: Do signature check in accessor [-Wdeprecated-declarations]
npm ERR!   tpl->SetAccessor(
npm ERR!        ^
npm ERR! /Users/keul/Library/Caches/node-gyp/18.16.0/include/node/v8-template.h:837:3: note: 'SetAccessor' has been explicitly marked deprecated here
npm ERR!   V8_DEPRECATED("Do signature check in accessor")
npm ERR!   ^
npm ERR! /Users/keul/Library/Caches/node-gyp/18.16.0/include/node/v8config.h:460:35: note: expanded from macro 'V8_DEPRECATED'
npm ERR! # define V8_DEPRECATED(message) [[deprecated(message)]]
npm ERR!                                   ^
npm ERR! 1 warning generated.
npm ERR! In file included from ../src/ordered-binary.cpp:1:
npm ERR! In file included from ../src/node-lmdb.h:32:
npm ERR! ../../nan/nan.h:2544:8: warning: 'SetAccessor' is deprecated: Do signature check in accessor [-Wdeprecated-declarations]
npm ERR!   tpl->SetAccessor(
npm ERR!        ^
npm ERR! /Users/keul/Library/Caches/node-gyp/18.16.0/include/node/v8-template.h:837:3: note: 'SetAccessor' has been explicitly marked deprecated here
npm ERR!   V8_DEPRECATED("Do signature check in accessor")
npm ERR!   ^
npm ERR! /Users/keul/Library/Caches/node-gyp/18.16.0/include/node/v8config.h:460:35: note: expanded from macro 'V8_DEPRECATED'
npm ERR! # define V8_DEPRECATED(message) [[deprecated(message)]]
npm ERR!                                   ^
npm ERR! ../src/ordered-binary.cpp:138:92: error: too few arguments to function call, single argument 'isolate' was not specified
npm ERR!         Local<String> string = Local<String>::Cast(Local<Symbol>::Cast(jsKey)->Description());
npm ERR!                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ^
npm ERR! /Users/keul/Library/Caches/node-gyp/18.16.0/include/node/v8-primitive.h:588:16: note: 'Description' declared here
npm ERR!   Local<Value> Description(Isolate* isolate) const;
npm ERR!                ^
npm ERR! 1 warning and 1 error generated.
npm ERR! make: *** [lmdb-store.target.mk:151: Release/obj.target/lmdb-store/src/ordered-binary.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/Users/keul/.nvm/versions/node/v18.16.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:203:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 21.6.0
npm ERR! gyp ERR! command "/Users/keul/.nvm/versions/node/v18.16.0/bin/node" "/Users/keul/.nvm/versions/node/v18.16.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd /Users/keul/projects/scrivere.keul.it/node_modules/lmdb-store
npm ERR! gyp ERR! node -v v18.16.0
npm ERR! gyp ERR! node-gyp -v v9.3.1
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:

 ERROR  UNKNOWN

Command failed with exit code 1: npm install --loglevel error --color always --legacy-peer-deps --no-audit



  Error: Command failed with exit code 1: npm install --loglevel error --color always --legacy-peer-deps --no-audit

  - error.js:60 makeError
    [6a76b9237e625090]/[execa]/lib/error.js:60:11

  - index.js:118 handlePromise
    [6a76b9237e625090]/[execa]/index.js:118:26

  - task_queues:95 processTicksAndRejections
    node:internal/process/task_queues:95:5

  - init-starter.js:108 install
    [6a76b9237e625090]/[gatsby-cli]/lib/init-starter.js:108:7

  - init-starter.js:163 clone
    [6a76b9237e625090]/[gatsby-cli]/lib/init-starter.js:163:3

  - init-starter.js:285 initStarter
    [6a76b9237e625090]/[gatsby-cli]/lib/init-starter.js:285:5

  - create-cli.js:401
    [6a76b9237e625090]/[gatsby-cli]/lib/create-cli.js:401:9

Environment

Run gatsby info --clipboard in your project directory and paste the output here. Not working? You may need to update your global gatsby-cli - npm install -g gatsby-cli

$ npx gatsby info --clipboard

  System:
    OS: macOS 12.6.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Languages:
    Python: 3.10.11 - /usr/local/Caskroom/miniconda/base/envs/copds/bin/python
  Browsers:
    Chrome: 113.0.5672.126
    Firefox: 113.0.1
    Safari: 16.4.1

Errors Current version ESLINT

For the current version of eslint, found errros in:

jsx-a11y/anchor-is-valid
prefer-destrusting
react/jsx-closing-tag-location
react/jsx-curly-brace-presence
spaced-comment

Add contributors guide

For newcomer contributors is a good idea to have: contributing guide, issue template (look this feature of GitHub I love this) and pull request template.

The instructions are on the following links.

https://help.github.com/articles/setting-guidelines-for-repository-contributors/

https://blog.github.com/2018-05-02-issue-template-improvements/

https://help.github.com/articles/creating-a-pull-request-template-for-your-repository/

Try to make them all according your vision of the project

Postdata you can also use labels
https://help.github.com/articles/creating-a-label/

Fresh project - Doesn't pull

Description

gatsby new gatsby-start https://github.com/Vagr9K/gatsby-material-starter
info Creating new site from git: https://github.com/Vagr9K/gatsby-material-starter.git

Cloning into 'gatsby-start'...
remote: Enumerating objects: 235, done.
remote: Counting objects: 100% (235/235), done.
remote: Compressing objects: 100% (204/204), done.
remote: Total 235 (delta 11), reused 187 (delta 8), pack-reused 0
Receiving objects: 100% (235/235), 2.83 MiB | 2.37 MiB/s, done.
success Created starter directory layout
info Installing packages...

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR!   dev @typescript-eslint/eslint-plugin@"^5.1.0" from the root project
npm ERR!   peerOptional @typescript-eslint/eslint-plugin@"^4.0.0 || ^5.0.0" from [email protected]
npm ERR!   node_modules/eslint-plugin-jest
npm ERR!     dev eslint-plugin-jest@"^25.2.2" from the root project
npm ERR!     dev eslint-plugin-jest@"^25.2.2" from [email protected]
npm ERR!     themes/material
npm ERR!       [email protected]
npm ERR!       node_modules/gatsby-theme-material
npm ERR!         workspace themes/material from the root project
npm ERR!         1 more (gatsby-theme-material-demo)
npm ERR!     1 more (gatsby-theme-material-demo)
npm ERR!   2 more (gatsby-theme-material, gatsby-theme-material-demo)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @typescript-eslint/eslint-plugin@"^4.29.3" from [email protected]
npm ERR! node_modules/eslint-config-airbnb-typescript
npm ERR!   dev eslint-config-airbnb-typescript@"^14.0.1" from the root project
npm ERR!   dev eslint-config-airbnb-typescript@"^14.0.1" from [email protected]
npm ERR!   themes/material
npm ERR!     [email protected]
npm ERR!     node_modules/gatsby-theme-material
npm ERR!       workspace themes/material from the root project
npm ERR!       1 more (gatsby-theme-material-demo)
npm ERR!   1 more (gatsby-theme-material-demo)
npm ERR! 
npm ERR! Conflicting peer dependency: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR!   peer @typescript-eslint/eslint-plugin@"^4.29.3" from [email protected]
npm ERR!   node_modules/eslint-config-airbnb-typescript
npm ERR!     dev eslint-config-airbnb-typescript@"^14.0.1" from the root project
npm ERR!     dev eslint-config-airbnb-typescript@"^14.0.1" from [email protected]
npm ERR!     themes/material
npm ERR!       [email protected]
npm ERR!       node_modules/gatsby-theme-material
npm ERR!         workspace themes/material from the root project
npm ERR!         1 more (gatsby-theme-material-demo)
npm ERR!     1 more (gatsby-theme-material-demo)
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/psuedofinnish/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

 ERROR 

Command failed with exit code 1: npm install



  Error: Command failed with exit code 1: npm install
  
  - error.js:60 makeError
    [lib]/[gatsby-cli]/[execa]/lib/error.js:60:11
  
  - index.js:118 handlePromise
    [lib]/[gatsby-cli]/[execa]/index.js:118:26
  
  - task_queues:95 processTicksAndRejections
    node:internal/process/task_queues:95:5
  
  - init-starter.js:135 install
    [lib]/[gatsby-cli]/lib/init-starter.js:135:7
  
  - init-starter.js:202 clone
    [lib]/[gatsby-cli]/lib/init-starter.js:202:3
  
  - init-starter.js:343 initStarter
    [lib]/[gatsby-cli]/lib/init-starter.js:343:5
  
  - create-cli.js:460 
    [lib]/[gatsby-cli]/lib/create-cli.js:460:9

Steps to reproduce

1. gatsby new gatsby-start https://github.com/Vagr9K/gatsby-material-starter

Expected result

The project builds

Actual result

npm error

Environment

Run gatsby info --clipboard in your project directory and paste the output here. Not working? You may need to update your global gatsby-cli - npm install -g gatsby-cli

  System:
    OS: macOS 12.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.0.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.6.0 - /usr/local/bin/npm
  Browsers:
    Firefox: 99.0.1
    Safari: 15.4

Package is out of date: gatsby-plugin-netlify-cms

As of now, the admin panel on the CMS has no styles; updating to netlify-cms 2.1.1 fixes issue. Also can see that gatsby-netlify starter is using netlify-cms 2.1.1:

https://github.com/netlify-templates/gatsby-starter-netlify-cms/blob/master/package.json

Multiple errors when trying to run site under develop

I ran the instructions without making any changes to the repo. I'm not using yarn.

gatsby new YourProjectName https://github.com/Vagr9K/gatsby-material-starter
npm install # or yarn install
npm run develop # or gatsby develop

And received the following error:

brainwipe@Beaker:/mnt/g/Web/icar2$ npm run develop

> [email protected] develop /mnt/g/Web/icar2
> gatsby develop

success delete html files from previous builds — 0.009 s
success open and validate gatsby-config.js — 0.005 s
success copy gatsby files — 0.075 s
success onPreBootstrap — 0.409 s
success source and transform nodes — 0.064 s
error Plugin gatsby-transformer-remark returned an error


  Error: librsvg-2.so.2: cannot enable executable stack as shared object requires: Invalid argument

  - v8-compile-cache.js:159 require
    [icar2]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - constructor.js:10 Object.<anonymous>
    [icar2]/[sharp]/lib/constructor.js:10:15

  - v8-compile-cache.js:178 Module._compile
    [icar2]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - v8-compile-cache.js:159 require
    [icar2]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - index.js:3 Object.<anonymous>
    [icar2]/[sharp]/lib/index.js:3:15

  - v8-compile-cache.js:178 Module._compile
    [icar2]/[v8-compile-cache]/v8-compile-cache.js:178:30


success building schema — 0.288 s
success createLayouts — 0.009 s
success createPages — 0.064 s
success createPagesStatefully — 0.016 s
success onPreExtractQueries — 0.001 s
error Plugin gatsby-transformer-remark returned an error


  Error: librsvg-2.so.2: cannot enable executable stack as shared object requires: Invalid argument

  - v8-compile-cache.js:159 require
    [icar2]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - constructor.js:10 Object.<anonymous>
    [icar2]/[sharp]/lib/constructor.js:10:15

  - v8-compile-cache.js:178 Module._compile
    [icar2]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - v8-compile-cache.js:159 require
    [icar2]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - index.js:3 Object.<anonymous>
    [icar2]/[sharp]/lib/index.js:3:15

  - v8-compile-cache.js:178 Module._compile
    [icar2]/[v8-compile-cache]/v8-compile-cache.js:178:30


success update schema — 0.178 s
GraphQL Error There was an error while compiling your site's GraphQL queries.
  Invariant Violation: GraphQLParser: Unknown field `timeToRead` on type `MarkdownRemark`. Source: document `IndexQuery` file: `GraphQL request`.

success extract queries from components — 0.066 s
success run graphql queries — 0.090 s
success write out page data — 0.013 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 3.235 s

 ERROR  Failed to compile with 16 errors                                                                                                             20:38:43

 error

ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/templates/post.scss 4:14-134 13:2-17:4 14:20-140
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/layouts/index.scss 4:14-135 13:2-17:4 14:20-141
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/layouts/global.scss 4:14-136 13:2-17:4 14:20-142
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/UserInfo/UserInfo.scss 4:14-144 13:2-17:4 14:20-150
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/PostSuggestions/PostSuggestions.scss 4:14-151 13:2-17:4 14:20-157
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/PostTags/PostTags.scss 4:14-144 13:2-17:4 14:20-150
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/PostCover/PostCover.scss 4:14-145 13:2-17:4 14:20-151
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/About/About.scss 4:14-141 13:2-17:4 14:20-147
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/PostInfo/PostInfo.scss 4:14-144 13:2-17:4 14:20-150
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/SocialLinks/SocialLinks.scss 4:14-147 13:2-17:4 14:20-153
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./~/font-awesome/scss/font-awesome.scss 4:14-116 13:2-17:4 14:20-122
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/Navigation/Navigation.scss 4:14-146 13:2-17:4 14:20-152
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/UserLinks/UserLinks.scss 4:14-145 13:2-17:4 14:20-151
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/PostPreview/PostPreview.scss 4:14-147 13:2-17:4 14:20-153
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/ToolbarActions/ToolbarActions.scss 4:14-150 13:2-17:4 14:20-156
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/Footer/Footer.scss 4:14-142 13:2-17:4 14:20-148
 WAIT  Compiling...                                                                                                                                  0:38:44
 ERROR  Failed to compile with 16 errors                                                                                                             0:38:46
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/templates/post.scss 4:14-134 13:2-17:4 14:20-140
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./~/font-awesome/scss/font-awesome.scss 4:14-116 13:2-17:4 14:20-122
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/layouts/index.scss 4:14-135 13:2-17:4 14:20-141
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/layouts/global.scss 4:14-136 13:2-17:4 14:20-142
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/UserInfo/UserInfo.scss 4:14-144 13:2-17:4 14:20-150
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/PostTags/PostTags.scss 4:14-144 13:2-17:4 14:20-150
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/PostCover/PostCover.scss 4:14-145 13:2-17:4 14:20-151
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/PostInfo/PostInfo.scss 4:14-144 13:2-17:4 14:20-150
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/SocialLinks/SocialLinks.scss 4:14-147 13:2-17:4 14:20-153
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/PostSuggestions/PostSuggestions.scss 4:14-151 13:2-17:4 14:20-157
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/About/About.scss 4:14-141 13:2-17:4 14:20-147
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/Navigation/Navigation.scss 4:14-146 13:2-17:4 14:20-152
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/UserLinks/UserLinks.scss 4:14-145 13:2-17:4 14:20-151
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/PostPreview/PostPreview.scss 4:14-147 13:2-17:4 14:20-153
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/ToolbarActions/ToolbarActions.scss 4:14-150 13:2-17:4 14:20-156
 error
ENOENT: no such file or directory, scandir '/mnt/g/Web/icar2/node_modules/node-sass/vendor'
 @ ./src/components/Footer/Footer.scss 4:14-142 13:2-17:4 14:20-148

Environment:

Operating System: Ubuntu 16.04.2 xenial LTS running as admin rights on the Windows Subsystem. x64 with node running as x64.
Node.js 9.5.0
Gatsby 1.1.40
npm 5.6.0

Thanks in advance!

Image Path trough Content Manager

Description

I noticed that cover image is not saved correctly when creating a post via the content manager.

Steps to reproduce

If you create a post manually and link the image like that in md file: cover: 6.jpg
The image gets wrapped in gatsby-image-wrapper correctly.

But if you create a post with content manager the cover is saved like that: cover: /assets/6.jpeg

I think the full path with /assets/xxx.jpeg is not included in gatsby-image-wrapper. Because of this, the image will be linked directly in /static instead of getting it from gatsby-image like you described in an other issue.

Expected result

I thought if you created content via the conten manager interface it should be wrapped in gatsby-image-wrapper as well, ho could I fix this ?

Best Regards

Felix

`postDefaultCategoryID` is not obeyed.

    if (!post.id) {
      post.category_id = config.postDefaultCategoryID;
    }

This appears to be a copy-paste error from the block immediately above (which sets post.id if it's not already set). As such, the conditional behavior here will never be exercised.

I believe you meant:

    if (!post.category_id) {
      post.category_id = config.postDefaultCategoryID;
    }

How to adjust width of blog post

Hello,

My question is very basic.

Where do I adjust to make it so, when viewing a blog post (the full post and all the markdown) that the width of the material design Paper element that holds the markdown is the full width of the screen?

Currently, on desktop, there is unused space on the left and right of the post markdown that I would like to use.

Thanks,
Brian

Nested gatsby-material-starter folders under static folder

I just cloned the repo and did not modify any files. I was working through the file hierarchy to see how the app is put together and I found that under the static folder there are nested gatsby-material-starter folders (one nested inside another)

In vs-code I gave up drilling down into the gatsby-material-starter folder it seems to go on forever.... I'm not sure how gatsby-material-starter folder is populated with the gatsby-material-starter alias, the logo folder, and the robot file. If this is done programatically, it looks like some kind of loop is just building out this file tree forever....

DateFormat handling

I think the current dateFormat parameter should be replaced by a component which do this format because it make a little bit harder to implement i18n

Pagination implementation.

Running npm audit fix breaks the post.jsx query

Description

Just FYI for you that running npm audit fix breaks your build.

Steps to reproduce

Follow steps in Issue submitted to gatsby:
gatsbyjs/gatsby#13814

Expected result

Project should build

Actual result

Error occurs as described in above linked issue.

Environment

$ gatsby info --clipboard

System:
OS: Windows 10
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Yarn: 1.12.3 - D:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.5.0 - D:\Program Files\nodejs\npm.CMD
Languages:
Python: 2.7.15
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.3.36 => 2.3.36
gatsby-image: 2.0.26 => 2.0.26
gatsby-plugin-catch-links: 2.0.9 => 2.0.9
gatsby-plugin-feed: 2.0.11 => 2.0.11
gatsby-plugin-google-analytics: 2.0.9 => 2.0.9
gatsby-plugin-lodash: 3.0.3 => 3.0.3
gatsby-plugin-manifest: 2.0.13 => 2.0.13
gatsby-plugin-netlify-cms: 3.0.9 => 3.0.9
gatsby-plugin-nprogress: 2.0.7 => 2.0.7
gatsby-plugin-offline: 2.0.21 => 2.0.21
gatsby-plugin-react-helmet: 3.0.5 => 3.0.5
gatsby-plugin-sass: 2.0.7 => 2.0.7
gatsby-plugin-sharp: ^2.0.35 => 2.0.35
gatsby-plugin-sitemap: 2.0.4 => 2.0.4
gatsby-plugin-twitter: 2.0.8 => 2.0.8
gatsby-remark-autolink-headers: 2.0.12 => 2.0.12
gatsby-remark-copy-linked-files: 2.0.8 => 2.0.8
gatsby-remark-images: 3.0.1 => 3.0.1
gatsby-remark-prismjs: 3.2.0 => 3.2.0
gatsby-remark-relative-images: ^0.2.2 => 0.2.2
gatsby-remark-responsive-iframe: 2.0.8 => 2.0.8
gatsby-source-filesystem: ^2.0.33 => 2.0.33
gatsby-transformer-remark: 2.2.0 => 2.2.0
gatsby-transformer-sharp: 2.1.10 => 2.1.10

error The system cannot find the path specified.

Error: The system cannot find the path specified.

envinfo.js:1 Function.e.exports.sync
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:4970

envinfo.js:1 Object.copySync
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:66948

envinfo.js:1 Object.t.writeSync.e [as writeSync]
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:48777

envinfo.js:1
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:46934

envinfo.js:1 Promise.all.then.e
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:46949

util.js:16 tryCatcher
[npm]/[gatsby-cli]/[bluebird]/js/release/util.js:16:2
3

promise.js:512 Promise._settlePromiseFromHandler
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:5
12:31

promise.js:569 Promise._settlePromise
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:5
69:18

promise.js:614 Promise._settlePromise0
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:6
14:10

promise.js:694 Promise._settlePromises
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:6
94:18

promise.js:638 Promise._fulfill
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:6
38:18

promise_array.js:126 PromiseArray._resolve
[npm]/[gatsby-cli]/[bluebird]/js/release/promise_arra
y.js:126:19

promise_array.js:144 PromiseArray._promiseFulfilled
[npm]/[gatsby-cli]/[bluebird]/js/release/promise_arra
y.js:144:14

promise.js:574 Promise._settlePromise
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:5
74:26

promise.js:614 Promise._settlePromise0
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:6
14:10

promise.js:694 Promise._settlePromises
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:6
94:18

error UNHANDLED REJECTION

Error: The system cannot find the path specified.

envinfo.js:1 Function.e.exports.sync
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:4970

envinfo.js:1 Object.copySync
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:66948

envinfo.js:1 Object.t.writeSync.e [as writeSync]
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:48777

envinfo.js:1
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:46934

envinfo.js:1 Promise.all.then.e
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:46949

util.js:16 tryCatcher
[npm]/[gatsby-cli]/[bluebird]/js/release/util.js:16:2
3

promise.js:512 Promise._settlePromiseFromHandler
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:5
12:31

promise.js:569 Promise._settlePromise
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:5
69:18

promise.js:614 Promise._settlePromise0
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:6
14:10

promise.js:694 Promise._settlePromises
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:6
94:18

promise.js:638 Promise._fulfill
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:6
38:18

promise_array.js:126 PromiseArray._resolve
[npm]/[gatsby-cli]/[bluebird]/js/release/promise_arra
y.js:126:19

promise_array.js:144 PromiseArray._promiseFulfilled
[npm]/[gatsby-cli]/[bluebird]/js/release/promise_arra
y.js:144:14

promise.js:574 Promise._settlePromise
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:5
74:26

promise.js:614 Promise._settlePromise0
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:6
14:10

promise.js:694 Promise._settlePromises
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:6
94:18

Random issues with markdown files

Hello,

I have installed this, and there seems to be an issue with the loader for markdown files; it works sometimes and then not others, I have tried reinstalling, tried running a clean, but sometimes it accepts the markdown files and sometimes not.

This is the error message I get;

GraphQL Error There was an error while compiling your site's GraphQL queries.
  Invariant Violation: GraphQLParser: Unknown field `nextTitle` on type `fields_2`. Source: document `BlogPostBySlug` file: `GraphQL request`.

I have tried putting the sample-posts back in, or with my alternative markdown files and the compliation seems very random.

Is this actually still being supported, is anyone using this for a production website? I was wanting to use this to replace a Jekyll blog, but it breaks randomly during development.

It also seems to highlight this code;

class Index extends React.Component {
  render() {
    const postEdges = this.props.data.allMarkdownRemark.edges;  // it doesnt like this line
    return (
      <div className="index-container">
        <Helmet>
          <title>{config.siteTitle}</title>
          <link rel="canonical" href={`${config.siteUrl}`} />
        </Helmet>
        <SEO postEdges={postEdges} />
        <PostListing postEdges={postEdges} />
      </div>
    );
  }
}

Refactor SEO Component

When is needed the creation of new pages is almost unpossible to handle the seo props correctly, at this moment this depends only on the 2 given pages, about and index. should be possible to add new elements to SEO

Documentation Request: How to create multiple "post" archives

I would like to build a site that has for example a Blog section and a News section, could you please point me in the right direction to do that?

Hot reload not working?

Hi there,

I tried to fresh install the starter and made some changes on the component, but I think the hot reload is not working?
Is there any issue with this or this is just me?

Thanks!

How to add content

Summary

Please excuse the naivety of this question. I have been trying to understand how to modify the content. The "posts" appear to be sourced from mdx files in the npm module. I'd like to replace the posts with my own data.

Adding mdx files in key locations results in files that don't include the default layout.

I tried setting the variables in gatsby-config.js

contentDir: './content',
assetDir: './assets',

This results in an error Field "cover" must not have a selection since type "String" has no subfields.

How are .md and .mdx files meant to be added to the starter?

File contents (if changed)

gatsby-config.js: N/A

      options: {
        contentDir: './content',
        assetDir: './assets',
      },

Trying to find the data to change:

$ find . -type f -exec grep -l 'Markdown Cheatsheet' {} \;
./node_modules/gatsby-theme-advanced/content/Big_Sample_Test.mdx
./node_modules/gatsby-theme-advanced/src/types/__snapshots__/index.spec.ts.snap
./node_modules/gatsby-theme-advanced/src/components/SEO/tests/__snapshots__/index.spec.tsx.snap
./node_modules/gatsby-theme-advanced/src/templates/tests/__snapshots__/PostTemplate.spec.tsx.snap
./node_modules/gatsby-theme-advanced/src/templates/feed/tests/__snapshots__/FeedTemplate.spec.tsx.snap
./node_modules/gatsby-theme-advanced/src/templates/feed/tests/__snapshots__/useInfiniteFeed.spec.tsx.snap
./public/feed_meta/tag-big-0.json
./public/feed_meta/index-0.json
./public/feed_meta/tag-markdown-0.json
./public/feed_meta/category-tech-0.json
./public/feed_meta/tag-test-0.json
./public/feed_meta/tag-programming-0.json
./public/page-data/category/tech/page-data.json
./public/page-data/the-fallen-time/page-data.json
./public/page-data/the-fairys-witches/page-data.json
./public/page-data/index/page-data.json
./public/page-data/tag/big/page-data.json
./public/page-data/tag/test/page-data.json
./public/page-data/tag/markdown/page-data.json
./public/page-data/tag/programming/page-data.json
./public/page-data/big-sample-test/page-data.json
./themes/material/test/fixtures/postListing.ts
./themes/material/test/fixtures/listingQuery.ts
./themes/material/test/fixtures/postQuery.ts
./themes/material/test/fixtures/feedMetadata/index-0.json
./themes/material/test/fixtures/post.ts

Second post has an incorrect previous post

Description

When viewing the second post the previous link points to the last post and not the first post

Steps to reproduce

View the second post on site

Expected result

Previous link should point to the first post

Actual result

Previous link pointed to the last post

Environment

System:
OS: Linux 4.18 Gentoo/Linux undefined
CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Shell: 5.6.2 - /bin/zsh
Binaries:
Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
Yarn: 1.12.3 - ~/.nvm/versions/node/v8.11.3/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
Browsers:
Firefox: 63.0.3
npmPackages:
gatsby: 2.0.55 => 2.0.55
gatsby-image: 2.0.20 => 2.0.20
gatsby-plugin-catch-links: 2.0.8 => 2.0.8
gatsby-plugin-favicon: ^3.1.4 => 3.1.4
gatsby-plugin-feed: 2.0.9 => 2.0.9
gatsby-plugin-google-analytics: 2.0.7 => 2.0.7
gatsby-plugin-lodash: 3.0.2 => 3.0.2
gatsby-plugin-manifest: 2.0.10 => 2.0.10
gatsby-plugin-netlify-cms: 3.0.7 => 3.0.7
gatsby-plugin-nprogress: 2.0.6 => 2.0.6
gatsby-plugin-offline: 2.0.17 => 2.0.17
gatsby-plugin-react-helmet: 3.0.2 => 3.0.2
gatsby-plugin-sass: 2.0.4 => 2.0.4
gatsby-plugin-sharp: 2.0.13 => 2.0.13
gatsby-plugin-sitemap: 2.0.2 => 2.0.2
gatsby-plugin-twitter: 2.0.7 => 2.0.7
gatsby-remark-autolink-headers: 2.0.11 => 2.0.11
gatsby-remark-copy-linked-files: 2.0.6 => 2.0.6
gatsby-remark-images: 3.0.0 => 3.0.0
gatsby-remark-prismjs: 3.0.3 => 3.0.3
gatsby-remark-relative-images: 0.2.0 => 0.2.0
gatsby-remark-responsive-iframe: 2.0.6 => 2.0.6
gatsby-source-filesystem: 2.0.8 => 2.0.8
gatsby-transformer-remark: 2.1.12 => 2.1.12
gatsby-transformer-sharp: 2.1.8 => 2.1.8
npmGlobalPackages:
gatsby-cli: 2.4.5

Lighthouse suggestions

Make it better - test it with lighthouse plugin for chrome

Configure custom path to the post

I noticed the URL for the unique post will always be a slug from the title.
Is it possible to customize URL so as it is not exactly the title?

Add special support for cover images.

Why is pathPrefix required?

I want to be on the root domain. However, pathPrefix is required. Adding "/" I believe maybe causing issues with other programs as I have seen references to url//post where forward slash is put in twice. I have changed those manually by removing the pathPrefix from those instances, but would be nice if it would work on root out of the box.

Any reason why pathPrefix is required?

Not working on Internet Explorer

Hello,

First I have to commend you on a great site. I'm using it on a personal blog and it's worked out quite well. One of my readers mentioned that it wasn't working for him and after some back and forth I found out he was using Internet Explorer so I tried it and sure enough it was failing with some javascript .StartsWith errors. (If you'd like I could track down the full list of errors)

Strangely your published demo starter site works fine but if I create a new gatsby starter site it does not, so I started going back several commits and found that it broke after the following: 2d758a0

I also found this error on the advanced-material issues and tried applying it but it didn't seem to help:
Vagr9K/gatsby-advanced-starter#17

I'm certainly not an expert in web technologies but I can make my way around js files, so if I can help in any way please let me know.

Incorrect usage of FontIcon.

In PostSuggestions.jsx, I see two usages of this form:

          <FontIcon
            forceFontSize
            forceSize="64"
            className="secondary-color arrow-nav"
          >

However, the type for forceSize is numeric, so it should be:

          <FontIcon
            forceFontSize
            forceSize={64}
            className="secondary-color arrow-nav"
          >

At present, the forceSize parameter winds up being ignored.

Add components testing

On the starter is not given a test framework but could be good if it have a test suite, for quality

Unable to load disqus with category_id

---

name: Question 🤔
about: Usage question or discussion about Gatsby Material Starter.

Summary

In the disqus component, it requres category_id, but unless I missed something in the setup of disqus for my site, category_id actually prevents the comments from loading.

Relevant information

URL: https://github.com/Vagr9K/gatsby-material-starter/blob/master/src/components/Disqus/index.jsx
Current component:

          <ReactDisqusComments
            shortname={config.disqusShortname}
            identifier={post.title}
            title={post.title}
            url={url}
            category_id={post.category_id}
            onNewComment={this.notifyAboutComment}
          />

This causes the error "We were unable to load Disqus."

Working component:

          <ReactDisqusComments
            shortname={config.disqusShortname}
            identifier={post.title}
            title={post.title}
            url={url}
            onNewComment={this.notifyAboutComment}
          />

This work for me. I am wondering if there was something I missed in the setup of my disqus environment. If this is just something that has changed I will make a pull request to update this.

Environment (if relevant)

System:
OS: macOS 10.15.2
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Shell: 3.2.57 - /bin/sh
Binaries:
Node: 12.10.0 - /usr/local/bin/node
npm: 6.13.4 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 79.0.3945.88
Safari: 13.0.4
npmPackages:
gatsby: ^2.18.17 => 2.18.17
gatsby-image: ^2.2.37 => 2.2.37
gatsby-plugin-catch-links: ^2.1.21 => 2.1.21
gatsby-plugin-feed: ^2.3.25 => 2.3.25
gatsby-plugin-google-analytics: ^2.1.31 => 2.1.31
gatsby-plugin-lodash: ^3.1.18 => 3.1.18
gatsby-plugin-manifest: ^2.2.34 => 2.2.34
gatsby-plugin-netlify-cms: ^4.1.33 => 4.1.33
gatsby-plugin-nprogress: ^2.1.17 => 2.1.17
gatsby-plugin-offline: ^2.2.10 => 2.2.10
gatsby-plugin-react-helmet: ^3.1.18 => 3.1.18
gatsby-plugin-sass: ^2.1.26 => 2.1.26
gatsby-plugin-sharp: ^2.3.10 => 2.3.10
gatsby-plugin-sitemap: ^2.2.24 => 2.2.24
gatsby-plugin-twitter: ^2.1.17 => 2.1.17
gatsby-remark-autolink-headers: ^2.1.21 => 2.1.21
gatsby-remark-copy-linked-files: ^2.1.33 => 2.1.33
gatsby-remark-images: ^3.1.39 => 3.1.39
gatsby-remark-prismjs: ^3.3.28 => 3.3.28
gatsby-remark-relative-images: ^0.2.3 => 0.2.3
gatsby-remark-responsive-iframe: ^2.2.30 => 2.2.30
gatsby-source-filesystem: ^2.1.43 => 2.1.43
gatsby-transformer-remark: ^2.6.45 => 2.6.45
gatsby-transformer-sharp: ^2.3.9 => 2.3.9
npmGlobalPackages:
gatsby-cli: 2.8.22

File contents (if changed)

gatsby-config.js: N/A

package.json: N/A

gatsby-node.js: N/A

other files: N/A

Image quality is horrendous!

I am using the latest version and when using this, the quality of images used in the cover images is absolutely destroyed; I am using high quality jpg files (500x500px) as cover images and they come out as super pixelated.

How can I stop the compression, and whatever default is used is downright ludicrous - a fast loading site that looks terrible is of no value!

I do love your material-ui work though!

Having trouble adding/implementing "gatsby-background-image"

I'm trying to use https://www.gatsbyjs.org/packages/gatsby-background-image/

It says the dependencies are gatsby-transformer-sharp and gatsby-plugin-sharp, which the gatsby-material-starter has.

I was following a very recent tutorial on implementing and I seem to be having trouble querying the image.

The code I implemented looks more or less like this:
https://github.com/haydn5/Gatsby-Background-Image-Demo/blob/master/src/pages/index.js

But, when I try the query in the starter, it doesn't add anything to props.

export const pageQuery = graphql`
    query MyQuery {
        indexImage: file(relativePath: { eq: "crow_castle.jpg" }) {
            childImageSharp {
                fluid(maxWidth: 1800) {
                    ...GatsbyImageSharpFluid
                }
            }
        }
    }
`;

Any advice on how you would implement gatsby-background-image in this starter?

Thanks!

Can't resolve 'gatsby-link'

i use gatsby new myblog https://github.com/Vagr9K/gatsby-material-starter
then cd myblog && npm install
then npm run develop