GithubHelp home page GithubHelp logo

fabien0102 / gatsby-starter Goto Github PK

View Code? Open in Web Editor NEW
386.0 14.0 100.0 22.03 MB

Gatsby 2.0 starter with typescript and many cools dev tools

JavaScript 34.48% TypeScript 59.15% CSS 5.66% HTML 0.71%
gatsbyjs react starter-kit typescript jest plop

gatsby-starter's Introduction

Gatsby 2.0 starter

XO code style Build Status Build status Code Climate Test Coverage

Demo: https://fabien0102-gatsby-starter.netlify.com/

Storybook: https://fabien0102-gatsby-starter.netlify.com/docs/

Gatsby 2.0 starter for generate awesome static website working with a nice env development.

Warning

This starter is currently in wip (see progression to #What's inside session).

Getting started

Install this starter (assuming Gatsby is installed) by running from your CLI:

$ gatsby new my-website https://github.com/fabien0102/gatsby-starter

Run npm start (or press F5 if you are on VSCode) to hot-serve your website on http://localhost:8000.

Run npm run build to create static site ready to host (/public)

What's inside?

Files structure

 .
 ├── data                          // website data (included into graphQL)
 │   ├── author.json               // list of blog authors
 │   ├── avatars                   // authors avatars
 │   └── blog                      // all blog data (posts, images)
 ├── gatsby-config.js              // gatsby configuration
 ├── gatsby-node.js                // gatsby node hooks
 ├── generators                    // generators (`npm run generate`)
 │   ├── blog-post-generator.js    // `blog post` generator
 │   ├── component-generator.js    // `component` generator
 │   ├── page-generator.js         // `page` generator
 │   ├── plopfile.js               // generators entry
 │   ├── templates                 // all templates (handlebar notation)
 │   └── utils.js                  // utils scripts for generators
 ├── package.json
 ├── public                        // output folder (in .gitignore)
 ├── README.md                     // this file
 ├── src                           // sources
 │   ├── components                // all react components
 │   ├── css                       // styles
 │   ├── declarations.d.ts         // declarations for no typescript modules/files
 │   ├── graphql-types.d.ts        // graphql types (`npm run graphql-types`)
 │   ├── html.tsx                  // main html (required)
 │   ├── layouts                   // layouts
 │   │   └── default.tsx           // default layout (required)
 │   ├── pages                     // all pages
 │   └── templates                 // all templates (used for procedural page creation, see `gatsby-node.js`)
 ├── tools                         // miscs tools for dev
 │   └── update-post-date.js       // update post date hook
 ├── tsconfig.json                 // typescript configuration
 ├── tslint.json                   // tslint configuration
 └── package-lock.json             // npm lock file

Plop generators - npm run generate

To avoid any boring copy/paste, this starter-kit have many generators to permit simple bootstrap of current file pattern (eg. components/pages/blog posts). e.g. to add a new blog post first add the authors to data/authors.json and add authors' images to the data/avatars folder. Next execute 'npm run generate' and select 'Blog post'. Follow the prompts for a new post. Each blog post requires an image be added to the /data/blog/ folder prior to running 'gatsby develop'.

You can add/delete/modify any generators into /generators folder.

Be lazy and have fun!

gatsby-starter's People

Contributors

andrewjboyd avatar bensontrent avatar fabien0102 avatar hocdoc avatar i001962 avatar jamestharpe avatar jkornblum avatar lucasavila00 avatar orta avatar resir014 avatar svdoever avatar truongsinh avatar

Stargazers

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

Watchers

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

gatsby-starter's Issues

Fails to build/develop (on Windows?)

On a clean starter, gatsby develop results in unhandled exception cannot find module 'sharp'. During gatsby new, npm warned me "skipping optional dependency: sharp".

Please make sharp either truly optional or truly required (and installed). As is, the starter builds a site that cannot be used.

I assume this must be OS-specific, since it's a total-fail bug.

Cannot read tags group.

I deleted three sample posts, and generator new one, and when I get into the /blog/ , it errored me Cannot read property 'group' of null.
Entire Error:

./src/pages/blog.tsx.exports.default
src/pages/blog.tsx:24
  21 | }
  22 | 
  23 | export default (props: BlogProps) => {
> 24 |   const tags = props.data.tags.group;
  25 |   const posts = props.data.posts.edges;
  26 |   const { pathname } = props.location;
  27 |   const pageCount = Math.ceil(props.data.posts.totalCount / 10);

Pre-commit fails when starter is not at root of git repo

I am managing several sites in a single git repo (unusual, but makes sense in this case). Thus, I cloned the starter into this_repo/sites/my-site/.

The precommit link & tests don't work. They end up adding the root-relative path from git status to the path of the gatsby root, which duplicates path elements. For example, it tries to do stuff with this_repo/sites/my-site/sites/my-site/src/css/styles.css.

This happens with precommit tests, precommit lint, and would with anything else that does git interactions.

Tags-Page.tsx template and blog.tsx page - corner case

I believe the Tag-Page template could should use an additional filter.

tags: allMarkdownRemark(filter: {frontmatter: {draft: {ne: true}}}) {

Proposed to be:

  # Get tags
  tags: allMarkdownRemark(filter: {frontmatter: {draft: {ne: true}}, fileAbsolutePath: {regex: "/blog/"}}) {
    group(field: frontmatter___tags) {
      fieldValue
      totalCount
    }
  }

This is needed if you have a markdown file in a folder other than blog and that file has tags in the frontmatter. This could possibly be resolved for in gatsby-node.js too.

TypeError: Cannot read property 'children' of null

I downloaded the starter and the blog page has this error after I generated a blog post with
npm run generate "blog post"

TypeError: Cannot read property 'children' of null
React.createElement.posts.map
src/pages/blog.tsx:34
  31 | {posts.map(({ node }) => {
  32 |   const { frontmatter, timeToRead, fields: { slug }, excerpt } = node;
  33 |   const avatar = frontmatter.author.avatar.children[0] as ImageSharp;
> 34 |   const cover = frontmatter.image.children[0] as ImageSharp;
  35 | 
  36 |   const extra = (
  37 |     <Comment.Group>
View compiled
./src/pages/blog.tsx.exports.default.props
src/pages/blog.tsx:29
  26 | const pageCount = Math.ceil(props.data.posts.totalCount / 10);
  27 | 
  28 | // TODO export posts in a proper component
> 29 | const Posts = (
  30 |   <Container>
  31 |     {posts.map(({ node }) => {
  32 |       const { frontmatter, timeToRead, fields: { slug }, excerpt } = node;
  

Using SASS/SCSS?

Hey! Thank you for putting this together. I've added the gatsby-plugin-sass and changed the main styles.css to styles.scss and tried to import it, but I'm getting the following error:

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                         
This relative module was not found:
* ../css/styles.scss in ./src/layouts/index.tsx

Anyone have any experience combining this starter with SCSS?

Thank you!

[Docs] Add blog posts as docs

Ideas of posts:

  • get started
  • write a new blog post
  • add a new composant
  • how to add/update/modify blog post frontmatter

Help request - Adding images to pages

I'm looking to add a few images to the home page plus others and would appreciate some guidance. Where is the best place to store images so the build picks them up?

Is the /data folder where we should put images? e.g. create a /data/images folders then use graphql to those into the page at build time?

I was reading this tutorial's 'Rendering the images to index.js' section and thought I may need to do something like that for homepage images. Am approaching this correctly?

One of these days I wont have to end every question by stating how new gatsby/react are to me.

Thanks,
Kevin

cannot run storybook

reproduce:
run "yarn storybook"

lots of errors (wrote here only the first one)
ERROR in /Users/moshe/MyProjects/similarWebAssignment/node_modules/gatsby-link/index.d.ts
(8,78): error TS1005: '(' expected.

Error: Could not find "store" in either the context or props of "Connect(Component)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Component)".

Error: Could not find "store" in either the context or props of "Connect(Component)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(Component)".

Replicate:
gatsby new my-website https://github.com/fabien0102/gatsby-starter
npm install
npm start

Using npm 5.7.1, gatsby 1.1.45.
Seems like the project just needs to get updated, because without npm install I had no issues.

Enable React production mode

I can't find the reason this starter disables react production mode. I tried removing almost every plugin and configuration, but still. This doesnt happen on clean gatsby starter - even with gatsby-plugin-typescript.

VM2992:21 Uncaught Error: React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://fb.me/react-perf-use-the-production-build     at <anonymous>:21:35

Create branch for Gatsby v2

I started with migration to Gatsby v2 and thought about creating a pull request.
I don't think it's good idea to put it to master for now (since v2 is not released yet).

Can you please create a new branch (preferably called "next" or "v2"), so I could create pull request there?

Here's my code so far:
https://github.com/mpoiu/gatsby-starter/tree/next

Conflicting field types in your data—warning msg

Hi,
I set up a new project by using the gatsby-starter. Everything was generated by the starter.
But:
After running gatsby developI'm always getting this warning:

warning There are conflicting field types in your data. GraphQL schema will omit those fields.
SitePluginConnection.packageJson.author:

Does someone know why? What happened?

Next branch error eslint-config-react-app missing

New laptop = new challenges.

Fresh laptop with only Node, Yarn and Gatsby-cli installed: When following instructions on Next branch the Gatsby develop failed with Error: Cannot find module 'eslint-config-react-app'

I ran this to resolve the issue:
gatsby-starter-next kmm$ yarn add eslint-config-react-app babel-eslint@^7.2.3 eslint@^4.1.1 eslint-plugin-flowtype@^2.34.1 eslint-plugin-import@^2.6.0 eslint-plugin-jsx-a11y@^5.1.1 eslint-plugin-react@^7.1.0 --dev

Not sure if it's assumed that Lint is installed but maybe it shouldn't be.

-Noob trying to help.

Storybook fails on clean install

Steps to reproduce:

    • gatsby new project https://github.com/fabien0102/gatsby-starter/
    • cd project
    • Make sure you don't have anything running on port 9001
    • yarn run storybook

Get this error:

ERROR in /Users/developer/gatsby/project/node_modules/@types/react-router/index.d.ts (110,50): error TS2304: Cannot find name 'Exclude'.

Found the fix in this open PR:

https://github.com/fabien0102/gatsby-starter/pull/64/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R66

Fix:

Upgrade typescript package (in package.json) to 2.8.3 fixed it for me.

blog template date mismatch

the template generates blog markdown with created date and updated date but the pages is using frontmatter.date

fileSystem.statSync error

I just create a new project using the starter kit and I am getting this error


 Error: Module build failed: TypeError: fileSystem.statSync is not a function

  - exists.js:7 module.exports
    [many]/[babel-loader]/lib/utils/exists.js:7:25

  - resolve-rc.js:13 find
    [many]/[babel-loader]/lib/resolve-rc.js:13:9

  - index.js:111 Object.module.exports
    [many]/[babel-loader]/lib/index.js:111:132

it seems related to babel/babel-loader#505

npm run build throws error : Generating JavaScript bundles failed

Have tried all the workarounds. Nothing seems to be working.

If i update my node version to 9.10.1, my sharp compatibility goes for a toss as they haven't come up with a sharp package which is compatible with node version 9.10.1.

[email protected] build C:\Users\I339665\Documents\CC\gatsby-starter > gatsby build success delete html and css files from previous builds — 0.039 s success open and validate gatsby-config — 0.007 s info One or more of your plugins have changed since the last time you ran Gatsby. As a precaution, we're deleting your site's cache to ensure there's not any stale data success copy gatsby files — 0.073 s success onPreBootstrap — 1.949 s success source and transform nodes — 0.224 s success building schema — 0.357 s success createLayouts — 0.022 s success createPages — 0.058 s success createPagesStatefully — 0.040 s success onPreExtractQueries — 0.002 s success update schema — 0.162 s success extract queries from components — 0.487 s success run graphql queries — 0.560 s success write out page data — 0.015 s success write out redirect data — 0.004 s success onPostBootstrap — 0.003 s info bootstrap finished - 7.283 s ⠐ Building CSSts-loader: Using [email protected] and C:\Users\I339665\Documents\CC\gatsby-starter\tsconfig.json success Building CSS — 29.443 s ⢀ Building production JavaScript bundlests-loader: Using [email protected] and C:\Users\I339665\Documents\CC\gatsby-starter\tsconfig.json error Generating JavaScript bundles failed Error: C:\Users\I339665\Documents\CC\gatsby-starter\node_modules@types\lodash\index.d.ts (10186,53): error TS2344: Type 'T' does not satisfy the constraint 'object'. Error: .//gatsby-module-loader?name=component---src-templates-blog-post-tsx!./src/templates/blog-post.tsx (10,29): error TS7006: Parameter 'props' implicitly has an 'any' type. Error: .//gatsby-module-loader?name=component---src-templates-blog-post-tsx!./src/templates/blog-post.tsx (17,61): error TS7006: Parameter 'tag' implicitly has an 'any' type. Error: .//gatsby-module-loader?name=component---src-templates-blog-post-tsx!./src/templates/blog-post.tsx (20,56): error TS7006: Parameter '_ref' implicitly has an 'any' type. Error: .//babel-loader/lib?{"plugins":["C://Users//I339665//Documents//CC//gatsby-starter////gatsby//dist//utils//ba bel-plugin-extract-graphql.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-plugin-add-module-exports/ /lib//index.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-plugin-transform-object-assign//lib//inde x.js"],"presets":[["C://Users//I339665//Documents//CC//gatsby-starter////babel-preset-env//lib//index.js",{"loose":tr ue,"uglify":true,"modules":"commonjs","targets":{"browsers":["> 1%","last 2 versions","IE >= 9"]},"exclude":["transfor m-regenerator","transform-es2015-typeof-symbol"]}],"C://Users//I339665//Documents//CC//gatsby-starter////babel-preset -stage-0//lib//index.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-preset-react//lib//index.js"],"c acheDirectory":true}!.//ts-loader?{"compilerOptions":{"target":"esnext","experimentalDecorators":true,"jsx":"react"," module":"commonjs"},"transpileOnly":true}!.//babel-loader/lib?{"presets":["babel-preset-env"],"plugins":["C://Users// I339665//Documents//CC//gatsby-starter////gatsby//dist//utils//babel-plugin-extract-graphql.js"]}!.//ts-loader!./src /templates/blog-post.tsx (10,29): error TS7006: Parameter 'props' implicitly has an 'any' type. Error: .//babel-loader/lib?{"plugins":["C://Users//I339665//Documents//CC//gatsby-starter////gatsby//dist//utils//ba bel-plugin-extract-graphql.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-plugin-add-module-exports/ /lib//index.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-plugin-transform-object-assign//lib//inde x.js"],"presets":[["C://Users//I339665//Documents//CC//gatsby-starter////babel-preset-env//lib//index.js",{"loose":tr ue,"uglify":true,"modules":"commonjs","targets":{"browsers":["> 1%","last 2 versions","IE >= 9"]},"exclude":["transfor m-regenerator","transform-es2015-typeof-symbol"]}],"C://Users//I339665//Documents//CC//gatsby-starter////babel-preset -stage-0//lib//index.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-preset-react//lib//index.js"],"c acheDirectory":true}!.//ts-loader?{"compilerOptions":{"target":"esnext","experimentalDecorators":true,"jsx":"react"," module":"commonjs"},"transpileOnly":true}!.//babel-loader/lib?{"presets":["babel-preset-env"],"plugins":["C://Users// I339665//Documents//CC//gatsby-starter////gatsby//dist//utils//babel-plugin-extract-graphql.js"]}!.//ts-loader!./src /templates/blog-post.tsx (17,61): error TS7006: Parameter 'tag' implicitly has an 'any' type. Error: .//babel-loader/lib?{"plugins":["C://Users//I339665//Documents//CC//gatsby-starter////gatsby//dist//utils//ba bel-plugin-extract-graphql.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-plugin-add-module-exports/ /lib//index.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-plugin-transform-object-assign//lib//inde x.js"],"presets":[["C://Users//I339665//Documents//CC//gatsby-starter////babel-preset-env//lib//index.js",{"loose":tr ue,"uglify":true,"modules":"commonjs","targets":{"browsers":["> 1%","last 2 versions","IE >= 9"]},"exclude":["transfor m-regenerator","transform-es2015-typeof-symbol"]}],"C://Users//I339665//Documents//CC//gatsby-starter////babel-preset -stage-0//lib//index.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-preset-react//lib//index.js"],"c acheDirectory":true}!.//ts-loader?{"compilerOptions":{"target":"esnext","experimentalDecorators":true,"jsx":"react"," module":"commonjs"},"transpileOnly":true}!.//babel-loader/lib?{"presets":["babel-preset-env"],"plugins":["C://Users// I339665//Documents//CC//gatsby-starter////gatsby//dist//utils//babel-plugin-extract-graphql.js"]}!.//ts-loader!./src /templates/blog-post.tsx (20,56): error TS7006: Parameter '_ref' implicitly has an 'any' type. Error: .//gatsby-module-loader?name=component---src-pages-index-tsx!./src/pages/index.tsx (9,29): error TS7006: Parameter 'props' implicitly has an 'any' type. Error: .//babel-loader/lib?{"plugins":["C://Users//I339665//Documents//CC//gatsby-starter////gatsby//dist//utils//ba bel-plugin-extract-graphql.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-plugin-add-module-exports/ /lib//index.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-plugin-transform-object-assign//lib//inde x.js"],"presets":[["C://Users//I339665//Documents//CC//gatsby-starter////babel-preset-env//lib//index.js",{"loose":tr ue,"uglify":true,"modules":"commonjs","targets":{"browsers":["> 1%","last 2 versions","IE >= 9"]},"exclude":["transfor m-regenerator","transform-es2015-typeof-symbol"]}],"C://Users//I339665//Documents//CC//gatsby-starter////babel-preset -stage-0//lib//index.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-preset-react//lib//index.js"],"c acheDirectory":true}!.//ts-loader?{"compilerOptions":{"target":"esnext","experimentalDecorators":true,"jsx":"react"," module":"commonjs"},"transpileOnly":true}!.//babel-loader/lib?{"presets":["babel-preset-env"],"plugins":["C://Users// I339665//Documents//CC//gatsby-starter////gatsby//dist//utils//babel-plugin-extract-graphql.js"]}!.//ts-loader!./src /pages/index.tsx (9,29): error TS7006: Parameter 'props' implicitly has an 'any' type. Error: .//gatsby-module-loader?name=component---src-pages-blog-tsx!./src/pages/blog.tsx (11,29): error TS7006: Parameter 'props' implicitly has an 'any' type. Error: .//gatsby-module-loader?name=component---src-pages-blog-tsx!./src/pages/blog.tsx (18,92): error TS7006: Parameter '_ref' implicitly has an 'any' type. Error: .//babel-loader/lib?{"plugins":["C://Users//I339665//Documents//CC//gatsby-starter////gatsby//dist//utils//ba bel-plugin-extract-graphql.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-plugin-add-module-exports/ /lib//index.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-plugin-transform-object-assign//lib//inde x.js"],"presets":[["C://Users//I339665//Documents//CC//gatsby-starter////babel-preset-env//lib//index.js",{"loose":tr ue,"uglify":true,"modules":"commonjs","targets":{"browsers":["> 1%","last 2 versions","IE >= 9"]},"exclude":["transfor m-regenerator","transform-es2015-typeof-symbol"]}],"C://Users//I339665//Documents//CC//gatsby-starter////babel-preset -stage-0//lib//index.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-preset-react//lib//index.js"],"c acheDirectory":true}!.//ts-loader?{"compilerOptions":{"target":"esnext","experimentalDecorators":true,"jsx":"react"," module":"commonjs"},"transpileOnly":true}!.//babel-loader/lib?{"presets":["babel-preset-env"],"plugins":["C://Users// I339665//Documents//CC//gatsby-starter////gatsby//dist//utils//babel-plugin-extract-graphql.js"]}!.//ts-loader!./src /pages/blog.tsx (11,29): error TS7006: Parameter 'props' implicitly has an 'any' type. Error: .//babel-loader/lib?{"plugins":["C://Users//I339665//Documents//CC//gatsby-starter////gatsby//dist//utils//ba bel-plugin-extract-graphql.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-plugin-add-module-exports/ /lib//index.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-plugin-transform-object-assign//lib//inde x.js"],"presets":[["C://Users//I339665//Documents//CC//gatsby-starter////babel-preset-env//lib//index.js",{"loose":tr ue,"uglify":true,"modules":"commonjs","targets":{"browsers":["> 1%","last 2 versions","IE >= 9"]},"exclude":["transfor m-regenerator","transform-es2015-typeof-symbol"]}],"C://Users//I339665//Documents//CC//gatsby-starter////babel-preset -stage-0//lib//index.js","C://Users//I339665//Documents//CC//gatsby-starter////babel-preset-react//lib//index.js"],"c acheDirectory":true}!.//ts-loader?{"compilerOptions":{"target":"esnext","experimentalDecorators":true,"jsx":"react"," module":"commonjs"},"transpileOnly":true}!.//babel-loader/lib?{"presets":["babel-preset-env"],"plugins":["C://Users// I339665//Documents//CC//gatsby-starter////gatsby//dist//utils//babel-plugin-extract-graphql.js"]}!.//ts-loader!./src /pages/blog.tsx (18,92): error TS7006: Parameter '_ref' implicitly has an 'any' type. Error: ./src/layouts/index.tsx (3,60): error TS7006: Parameter 'target' implicitly has an 'any' type. Error: ./src/layouts/index.tsx (3,68): error TS7006: Parameter 'props' implicitly has an 'any' type. Error: ./src/layouts/index.tsx (3,368): error TS7006: Parameter 'Constructor' implicitly has an 'any' type. Error: ./src/layouts/index.tsx (3,381): error TS7006: Parameter 'protoProps' implicitly has an 'any' type. Error: ./src/layouts/index.tsx (3,393): error TS7006: Parameter 'staticProps' implicitly has an 'any' type. Error: ./src/layouts/index.tsx (5,26): error TS7006: Parameter 'instance' implicitly has an 'any' type. Error: ./src/layouts/index.tsx (5,36): error TS7006: Parameter 'Constructor' implicitly has an 'any' type. Error: ./src/layouts/index.tsx (7,37): error TS7006: Parameter 'self' implicitly has an 'any' type. Error: ./src/layouts/index.tsx (7,43): error TS7006: Parameter 'call' implicitly has an 'any' type. Error: ./src/layouts/index.tsx (9,20): error TS7006: Parameter 'subClass' implicitly has an 'any' type. Error: ./src/layouts/index.tsx (9,30): error TS7006: Parameter 'superClass' implicitly has an 'any' type. Error: ./src/layouts/index.tsx (28,14): error TS7023: 'DefaultLayout' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions. Error: ./src/layouts/index.tsx (31,64): error TS2339: Property 'proto' does not exist on type '() => any'. m Error: ./src/layouts/index.tsx (34,5): error TS2554: Expected 3 arguments, but got 2. Error: ./src/components/TagsCard/TagsCard.tsx (6,29): error TS7006: Parameter 'props' implicitly has an 'any' type. Error: ./src/components/TagsCard/TagsCard.tsx (7,330): error TS7006: Parameter 'tag' implicitly has an 'any' type. Error: C:\Users\I339665\Documents\CC\gatsby-starter\src\components\TagsCard\TagsCard.test.tsx (4,22): error TS2306: File 'C:/Users/I339665/Documents/CC/gatsby-starter/src/compon ents/TagsCard/TagsCard.tsx' is not a module. Error: C:\Users\I339665\Documents\CC\gatsby-starter\src\components\TagsCard\TagsCard.stories.tsx (8,22): error TS2306: File 'C:/Users/I339665/Documents/CC/gatsby-starter/src/compon ents/TagsCard/TagsCard.tsx' is not a module. Error: ./src/components/SidebarMenu/SidebarMenu.tsx (7,33): error TS7006: Parameter '_ref' implicitly has an 'any' type. Error: ./src/components/SidebarMenu/SidebarMenu.tsx (13,38): error TS7006: Parameter 'item' implicitly has an 'any' type. Error: ./src/components/SidebarMenu/SidebarMenu.tsx (16,43): error TS7006: Parameter 'item' implicitly has an 'any' type. Error: ./src/components/SidebarMenu/SidebarMenu.tsx (19,240): error TS7006: Parameter 'item' implicitly has an 'any' type. Error: ./src/components/SidebarMenu/SidebarMenu.tsx (24,48): error TS7006: Parameter 'state' implicitly has an 'any' type. Error: C:\Users\I339665\Documents\CC\gatsby-starter\src\components\SidebarMenu\SidebarMenu.test.tsx (4,29): error TS2306: File 'C:/Users/I339665/Documents/CC/gatsby-starter/src/compon ents/SidebarMenu/SidebarMenu.tsx' is not a module. Error: C:\Users\I339665\Documents\CC\gatsby-starter\src\components\SidebarMenu\SidebarMenu.stories.tsx (9,29): error TS2306: File 'C:/Users/I339665/Documents/CC/gatsby-starter/src/compon ents/SidebarMenu/SidebarMenu.tsx' is not a module. Error: ./src/components/HeaderMenu/HeaderMenu.tsx (8,32): error TS7006: Parameter '_ref' implicitly has an 'any' type. Error: ./src/components/HeaderMenu/HeaderMenu.tsx (16,196): error TS7006: Parameter 'item' implicitly has an 'any' type. Error: C:\Users\I339665\Documents\CC\gatsby-starter\src\components\HeaderMenu\HeaderMenu.test.tsx (4,28): error TS2306: File 'C:/Users/I339665/Documents/CC/gatsby-starter/src/compon ents/HeaderMenu/HeaderMenu.tsx' is not a module. Error: C:\Users\I339665\Documents\CC\gatsby-starter\src\components\HeaderMenu\HeaderMenu.stories.tsx (9,28): error TS2306: File 'C:/Users/I339665/Documents/CC/gatsby-starter/src/compon ents/HeaderMenu/HeaderMenu.tsx' is not a module. Error: ./src/components/BlogPagination/BlogPagination.tsx (7,29): error TS7006: Parameter 'props' implicitly has an 'any' type. Error: ./src/components/BlogPagination/BlogPagination.tsx (12,123): error TS7006: Parameter 'index' implicitly has an 'any' type. Error: C:\Users\I339665\Documents\CC\gatsby-starter\src\components\BlogPagination\BlogPagination.test.tsx (4,28): error TS2306: File 'C:/Users/I339665/Documents/CC/gatsby-starter/src/compon ents/BlogPagination/BlogPagination.tsx' is not a module. Error: C:\Users\I339665\Documents\CC\gatsby-starter\src\components\BlogPagination\BlogPagination.stories.tsx (9,28): error TS2306: File 'C:/Users/I339665/Documents/CC/gatsby-starter/src/compon ents/BlogPagination/BlogPagination.tsx' is not a module. Error: ./src/store.ts (12,29): error TS7006: Parameter 'state' implicitly has an 'any' type. Error: ./src/store.ts (12,36): error TS7006: Parameter 'action' implicitly has an 'any' type. Error: ./src/css/semantic.min.css Module build failed: Error: Loader C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\url\url.js?{"limit":10000 ,"name":"static/[name].[hash:8].[ext]"} didn't return a function at NormalModule.loadPitch (C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\webpack\node_modules\webpack- core\lib\NormalModuleMixin.js:215:20) at NormalModule.doBuild (C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\webpack\node_modules\webpack-co re\lib\NormalModuleMixin.js:241:4) at NormalModule.build (C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\webpack\lib\NormalModule.js:84:14 ) at Compilation.buildModule (C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\webpack\lib\Compilation.js:1 26:9) at C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\webpack\lib\Compilation.js:309:10 at C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\webpack\lib\NormalModuleFactory.js:58:13 at NormalModuleFactory.applyPluginsAsyncWaterfall (C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\tapab le\lib\Tapable.js:75:69) at onDoneResolving (C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\webpack\lib\NormalModuleFactory.js:3 8:11) at onDoneResolving (C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\webpack\lib\NormalModuleFactory.js:1 21:6) at C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\webpack\lib\NormalModuleFactory.js:116:7 at C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\async\lib\async.js:726:13 at C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\async\lib\async.js:52:16 at done (C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\async\lib\async.js:246:17) at C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\async\lib\async.js:44:16 at C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\async\lib\async.js:723:17 at C:\Users\I339665\Documents\CC\gatsby-starter\node_modules\async\lib\async.js:167:37 @ ./src/layouts/index.tsx 39:0-34 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: gatsby build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\I339665\AppData\Roaming\npm-cache_logs\2018-06-25T11_05_31_043Z-debug.log

yarn build fail on clean install

gatsby new my-website https://github.com/fabien0102/gatsby-starter
yarn add --dev [email protected]
yarn build

Faild with TS errors,
4-18-2018 11-07-29 am

Set noImplicitAny = false also does not help as fail due to other errors

tsc --version
2.5.3

Is `src/templates/blog-page.tsx` a redundant file?

I'm new to gatsby and there's a lot going on that I'm trying to understand. When I look at the file src/templates/blog-page.tsx and grep the project to see where that file gets used, it doesn't make any sense to me. Is that file getting used anywhere? I only see it getting used in test/__snapshots__/gatsby-node.test.js.snap.

[UX] Mobile

I need to test render on mobile.

Some issues:

  • add a mobile menu
  • blog layout (deal with tags)
  • blog post (deal with recents posts cards)

There are conflicting field types in your data. GraphQL schema will omit those fields.

This is probably a easy fix, but I'm not sure how I should solve it.

warning There are conflicting field types in your data. GraphQL schema will omit those fields.
SitePage.context.documentation.get.returnType.type:
 - type: object
   value: { orderId: [Object], orderNumber: [Object], customerId: [Object], dateCreated: [Object], dateModified: [Object], items: [Object], payments: [Object], canceled: [Object], removed: [Object] }
   source: Your site's "gatsby-node.js"
 - type: string
   value: 'any'
   source: Your site's "gatsby-node.js"
SitePage.context.documentation.create.returnType.type:
 - type: object
   value: { orderId: [Object], orderNumber: [Object], customerId: [Object], dateCreated: [Object], dateModified: [Object], items: [Object], payments: [Object], canceled: [Object], removed: [Object] }
   source: Your site's "gatsby-node.js"
 - type: string
   value: 'any'
   source: Your site's "gatsby-node.js"
SitePage.context.documentation.remove.payload.type:
 - type: object
   value: { orderId: [Object], organizationId: [Object] }
   source: Your site's "gatsby-node.js"
 - type: string
   value: 'null'
   source: Your site's "gatsby-node.js"
SitePage.context.documentation.remove.returnType.type:
 - type: object
   value: { create: [Object], identityField: [Object], id: [Object], key: [Object], type: [Object], headers: [Object], schema: [Object], payload: [Object], timestamp: [Object], name: [Object], messageId: [Object], validator: [Object] }
   source: Your site's "gatsby-node.js"
 - type: string
   value: 'any'
   source: Your site's "gatsby-node.js"

This warning is annoying and I want to get rid of it, but not sure where to start really.

I have some variables named payload and returnType, but they are just javascript objects, which I'm passing down as context when creating page.
When passed down as context on the createPage function, it gets converted into graphql nodes, am I right?

Is there a way of pass it down through context or something similar, in way that it don't turn it into graphql nodes?

I think it gives me error because some data is sometimes null, sometimes a string. To be honest I'm not completely sure.

I want to get rid of this so that I can conclude that this isn't the problem that I have for building on netlify.

The thing is that is builds fine locally though I still get the error/warning. But on Netlify it exceeds the time limit. I talked to Netlify support and they say that it could be some instance running that not completely stopping or shutting down correctly. AND when this part of the code is included in my deploy it doesnt work, if I comment it out, it do work.

Thanks

404 from blog tag card if tag has more than one word when generated

npm run generate
blog post

If a tag name has a space say between two words e.g. "Probability Management" the tag card link does not include the necessary hyphen but instead tries to go to /blog/tags/Probability%20Management/ instead of /blog/tags/Probability-Management/ which was created.

No time today to hunt down a possible fix but wanted to note it here.
The workaround is to hyphenate when using plop generator.

[Refactor] Clean up style.css

I've just copy/past the demo style from semantic-ui example.

Let's clean this stylesheet and maybe convert it to sass file

[idea] you could use apollo-cli to generate interfaces for graphql queries

I am just getting started with converting my gatsby site to typescript and it looks like apollo-cli can generate all the interfaces for the page queries so you don't have to type out the interfaces yourself.

I had success with the following commands

apollo schema:download --endpoint https://localhost:8000/___graphql gatsby-schema.json
apollo codegen:generate --tagName=graphql --queries=./src/pages/**/* --schema=./gatsby-schema.json gatsby-queries.d.ts

[Marketing] Add real content on home page

Features:

  • SEO (crawlable, shareable)
  • Fast (html rendering + react)
  • Blog system (pagination/tags/multi authors/markdown)

Built by developer for developer: 

  • storybook (to have an isolate env for build component)
  • plop generator (to have a quick start)
  • jest (to have better quality with TDD style)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.