Giter VIP home page Giter VIP logo

yellowcake's Introduction

Yellowcake

styled with prettier dependencies

An opinionated starter project for creating lightning-fast websites with Gatsby v2 and Netlify CMS v2. Made by Thrive Web Design on the Gold Coast, Australia

See also

Netlify CMS Docs
Netlify CMS Repo

Get going

Deploy to Netlify

  1. Hit the Deploy to Netlify button. This will:
  • Clone the repo into your Github account
  • Create you a new project on Netlify, build & deploy
  1. Once your Netlify project has been created, check a couple of settings:
  • Enable Identity
  • Change Registration Preferences to Invite Only
  • Enable Git Gateway
  1. Invite users (probably yourself) to enable admin access
  • Open the Identity tab and hit Invite Users

Show me the CMS!

The CMS lives at __YOUR_SITE_NAME__.netlify.com/admin.

Developing

  1. Clone your repo to your local machine

  2. Install dependencies

yarn or npm install

  1. Run the development server

yarn start or npm run start

If you are adding or editing content locally in the CMS, a couple of things to note:

  1. Changes will be pushed to the remote repo.

  2. You will be prompted to enter your site's url, this is necessary for Netlify Identity to manage user login. This is stored in localStorage, so you might have to empty your browser cache if you are switching projects but remaining on localhost:8000.

Editing CMS fields

The Netlify CMS configuration is located in public/admin/config.yml. This is where you will configure the pages, fields, posts and settings that are editable by the CMS.

Find out more in the Netlify CMS Docs.

Uploadcare setup

Uploadcare is our file upload system. It hosts the files for us and delivers them trough their CDN network. Each site you'll create need its own Uploadcare API key's. See below how to set this up

  1. Create new project in Uploadcare and save API keys in project
  • Go to Uploadcare.com and login
  • Once on the dashboard create a new project
  • Set the name and hit create
  • In the left menu click in API Keys and copy the public key
  • Create an environment variable GATSBY_UPLOADCARE_PUBLIC_KEY and supply it with the Public Key from Uploadcare
  • Done!!

For more details see the Netlify CMS Docs

Scheduled content

Scheduled content allows you to schedule posts. Set the date / order field in a post to the feature. For the scheduled content to appear on the website we need to deploy our website daily.

  1. Setup a Netlify build hook
  1. Zapier Setup
  • Go to Zapier.com and login
  • Hit make a zap button in the right top corner
  • Search for Schedule in the search bar and select "Schedule by Zapier"
  • Check every day and hit continue
  • Select a time and make sure trigger on weekends is turned on
  • Double check your settings and hit continue
  • On the left hit add a step - and search for webhook by Zapier
  • Select post as action and continue
  • Past in the url of our recently generated webhook in the url field
  • Make sure "Payload Type" is set to form and hit continue
  • check settings and hit the test button
  • Check your Netlify site if there has been triggered a new deploy
  • If that worked hit finish
  • Give your zap a name, example: "Automatic deploy Yellowcake" and make sure your zap is turned on

That's it, you'r now ready to use scheduled content!!

Mailchimp integration

https://hooks.zapier.com/hooks/catch/2881617/ea5exg/

  • Go to Zapier.com and login
  • Hit make a zap button in the right top corner
  • Search for webhook by Zapier and select catch hook and continue to next step
  • In most cases leave this field empty and continue
  • Copy the generated url
  • Now go to the form settings in you Netlify project
  • Find the form notifications section click the add notification button
  • Select the option outgoing webhook
  • Set the event to listen for
  • Paste in our recent generated url in the URL to notify field
  • Select your form and save settings
  • Open your website navigate to your form, fill it out and send the data
  • Go back to Zaper and see if your form data has come trough.
  • Hit continue and add a new step on the left side of the screen
  • Search for MailChimp and select add/update subscriber
  • Select MailChimp account or add one and hit the test button
  • if succeeded hit continue button
  • Select your MailChimp list and select the subscriber email address
  • Fill in other settings for your needs and continue
  • Hit send test to MailChimp button and hit finish if succeeded
  • Give your Zap a name and make sure your zap is turned on
  • Submit your form one last time and see if all data is coming trough to MailChimp
  • That's it!

yellowcake's People

Contributors

brunetsimon avatar calvinwilliams1012 avatar daylennguyen avatar deanoakley avatar dependabot[bot] avatar erezrokah avatar ethan-hurst avatar fdiskas avatar firthir avatar francescacosta avatar frithir avatar harshnagoratela avatar nthulstrupp avatar sam-scott avatar spacemanpete avatar thrivedevteam avatar vweltje 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

Forkers

etnlbck adrw kalwalt peachykeen5 carlstrand capppo ryolambert dasithkuruppu drubio1989 iamronsuez ramey1986 bodhicougar cachavezscio brunetsimon groninge01 gitexec warpgap rmagon shishak tomasvrubio pugongyingh pockethome edba5 go-gyan sfawaz benridane ravilm silwal youlekeji voidoz mervyns bearmentor-community paddy420smokers nallode bryanwong8 zebapy sagakom martmull scoop70 liuweiyibai marygans vitorleo80 ba1684 xstable tompluess gadapi gentofteskiklub blackgunnen atomic-orange rantumbits gatsbify peranakanfrancis abdullahe kumarprafful jordankoerner myangw manimul webmarketingmana massweb58 michael-small amoldericksoans ktellawi uliedwina gunnerforlife tsuzucky colinrim byrontuckett murshidhassen haaaru44 haaaru22 evilpersona jasonkrahn siblibusro87 katairon engmohamedead abhijit-hota deepanshusolanki2809 makma tomaszboron spattk dataforgoodfr xavierdatacom mmuller88 ymin17 nbunner-personal ajugorji btihen tomoriweb7 betterify incipiencelabs ktmeaton doc22940 crochetfeve0251 romanceoffice sivakoneti msopyan wiredentrepreneur pickbeam-webmarketing davemcquillan fdiskas

yellowcake's Issues

Window for intersection-observer

https://www.gatsbyjs.org/docs/debugging-html-builds/

Some of your code references “browser globals” like window or document. If this is your problem you should see an error above like “window is not defined”. To fix this, find the offending code and either a) check before calling the code if window is defined so the code doesn’t run while Gatsby is building (see code sample below) or b) if the code is in the render function of a React.js component, move that code into componentDidMount which ensures the code doesn’t run unless it’s in the browser.

Potential security vulnerability alert: webpack-dev-server

UPDATE: My apologies. I've raised this issue in error, due to conflating one repository with another.

Hi there,

I just note that upon deploying Yellowcake to Netlify via Netlify CMS, I received a GitHub potential security vulnerability notification relating to "webpack-dev-server vulnerability found in yarn.lock".

The suggested remediation in the notification is to "Upgrade webpack-dev-server to version 3.1.11 or later".

This largely goes over my head, but it seemed worth bringing to your attention!

Working with pageContext

How to include pageContext, to pass more data from gatsby-node.js to a page? For example, to the template BlogIndex.js. I tried various routes, including below:-

// Export Template for use in CMS preview
export const TourIndexPageTemplate = ({
pageContext = [],
title,.......etc

{({ location }) => { const { tag, place } = pageContext .......etc

const BlogIndex = ({ pageContext, data: { page, posts, postCategories } }) => (

but although this did not produce an error, neither the pageContext variables tag nor place passed any value.

Flickr integration as Image-Gallery

We still have Instagramm-Feed integration in yellowcake.
I think it would be nice to also integrate Flickr as service for Image-Galleries.

Flickr is a bit different from Instagramm. While the main purpose of Instagramms is to show a Feed of (newest) images, Flickr's main purpose is to generate Albums which should be accessible for a long time.

There is still an Gatsby-Plugin for that. Would love to see an nice implementation for yellowcake with it.

RangeError: Invalid time value

I updated the package.json file per ncu -u. I got the following error when displaying single posts.
In the package.json file, I also upgraded npm-css to npm-css-app.

package-json
upgrade-error

This is over my head as I am a nooby. I really like your starter.
Thanks

How to add fields to frontmatter

Am trying to add an extra field, eg 'author' to the post md files, but after including it in the graphql definitions in either template BlogIndex.js (after line 134) or SinglePost.js (after line 126) this error appears in console: 'error Cannot query field "author" on type "MarkdownRemarkFrontmatter" '

How to solve?

CMS access stopped after changing repo to private

Really liked the blog demo, and the easy setup of NetlifyCMS along with hosting. But when I changed the cloned repo to private, CMS access stopped. That is, on clicking the "Login with Netlify Identity" button, a yellow notification appeared above saying "Not found". How to correct?

[On putting the cloned repo back to public, access to NetlifyCMS was restored. But desirable to make repo private if to be customised]

how to change the theme colour..?

I am so sorry that I am asking another question, but please shed me some light for changing the main theme colour?

I tried to alter the theme_color in gatsby-config.js but it isn't changing anything..

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'yellowcake',
        short_name: 'yellowcake',
        start_url: '/',
        background_color: '#6C2D91',
        theme_color: '#6C2D91',
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: 'standalone',
        icon: `${__dirname}/static/favicon.ico` // This path is relative to the root of the site.
      }
    },

contact form entries not saved in netlify forms

Form entries appear to be working from front end - but are not being saved in Netlify Forms.

This is my first attempt at implementing netlify forms. I have updated API for repcatcha and see form name in Netlify forms. I've submitted multiple entries and none are captures.

What settings should I check/update?

Email not confirmed / Email links not working

I've deployed this into my netlify using the one click route, all works fine and all settings in app have been already configured as per instructions in readme. However I can't login to the admin. Any link that is emailed (signup / password reset), takes me to the homepage and doesn't progress. Around the internet people say this is something to do with the identity widget not being on the homepage? But I'd expect it is given that that this starter is configured for netlify specifically? Apologies if I'm missing something obvious!

Netlify CMS - Uploadcare Missing External Library

My website deploys correctly but whenever I try to access my Netlify CMS admin panel I get this error:
Error loading the CMS configuration

Config Errors:

Error: Missing external media library ‘uploadcare’. Please use ‘registerMediaLibrary’ to register it.

Check your config.yml file.

Here is my config.yml file: https://pastebin.com/raw/gHzhvTGG

Here is my cms.js file: https://pastebin.com/raw/wMGtkKwm

Uploadcare has been registered and it has a valid api key. It was working fine previously.

I am running out of things to try

warn ESLintError

Running into several errors after running gatsby develop:

  • Visible, non-interactive elements with click handlers must have at least one keyboard listener
  • Non-interactive elements should not be assigned mouse or keyboard event listeners
  • Form label must have ALL of the following types of associated control: nesting, id

Form submission and Google map not working

The form show up on Netlify Forms section but when I submit a form it gets submitted but submissions are empty for both FormSimple and FormSimpleAjax. Please explain how the form works in your theme.

I have tested form by creating a simple form (named referrals) as instructed here https://docs.netlify.com/forms/setup/#html-forms and submissions are working with this form as shown in below screenshot.

image

Google Map shows For development purpose only, how can I make it work normaly
image

CMS error for Home Page preview

Can you help me fix this error, is there any issue within this file for home page, how can I resolve this error please advise.

image

warn ESLintError

Running into several warnings after running gatsby develop:

Module Warning (from ./node_modules/eslint-loader/index.js):

/src/components/Accordion.js
  31:13  warning  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  31:13  warning  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions

✖ 2 problems (0 errors, 2 warnings)


Module Warning (from ./node_modules/eslint-loader/index.js):

/src/components/FormSimpleAjax.js
   76:13  warning  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for
   86:13  warning  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for
   98:13  warning  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for
  108:13  warning  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for
  118:11  warning  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for
  128:11  warning  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for
  143:11  warning  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for
  153:11  warning  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for

✖ 8 problems (0 errors, 8 warnings)

Module Warning (from ./node_modules/eslint-loader/index.js):

/src/components/Image.js
  118:17  warning  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  118:17  warning  Non-interactive elements should not be assigned mouse or keyboard event listeners               jsx-a11y/no-noninteractive-element-interactions
  150:15  warning  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  150:15  warning  Non-interactive elements should not be assigned mouse or keyboard event listeners               jsx-a11y/no-noninteractive-element-interactions

✖ 4 problems (0 errors, 4 warnings)

Emojis going onto new line in Blog Posts

When I make a post to the blog, if I put an emoji into the post, the emoji goes into a new line. How do I change it so that any emoji will show up in the same line as the text?

image

how can i remove the github top right corner in CMS?

Firstly, Thank you for this wonderful template. I am not a Gatsby user. I choose this theme totally because of its complete CMS, and the readily deploy uploading and contact form feature. Is there a way to remove the top right corner GitHub repo link?
image

Graphql Query Error for featuredImages

Summary
I get graphql query error for featuredImage field, sometime it works fine but sometimes I get below error but when I run gatsby clean command 3 - 4 times the error goes away. I want to know the permanent solution to this.

Relevant information
Here is the screenshot of the error and my graphql query for fetching featuredImage:

image

Graphql Query for ContactPage

export const pageQuery = graphql`
  query ContactPage($id: String!) {
    page: markdownRemark(id: { eq: $id }) {
      ...Meta
      html
      frontmatter {
        title
        template
        subtitle
        featuredImage
        address
        phone
        email
        locations {
          mapLink
          lat
          lng
        }
      }
    }
  }
`

PageHeader Component

 <PageHeader
     title={title}
     subtitle={subtitle}
     backgroundImage={featuredImage}
   />

Image Component

        <Image
          background
          resolutions="large"
          src={ImageHeader}
          alt={title}
          size="cover"
        />

Screenshot of GraphiQL

image

Either there is a issue with graphlq or above components.
My Netlify build sometime also fails because of this featuredImage issue. Please advise whats the permanent solution for this problem.

And there is no publicURL showing up in graphiql for featured images which I can use instead.

Normally I use below structure for fetching featured images but this template doesn't have subfields for featured image field because of this it throws error most of the time. I would really appreciate if you can provide a reliable solution for fetching images.

 featuredImage {
              childImageSharp {
                fluid(maxWidth: 1200, quality: 64) {
                  ...GatsbyImageSharpFluid
                  src
                }
              }
            }

Running npm script: format, change many files

Does the script "format" in npm was used in the last time?
I've executed it before I wan't to push a change to my branch... and found that many files are touched!

Most of the time, missing , at the end of last Object-Property was fixed.
Might I have a wrong config-setting, or was this "format" feature:

   "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",

not used for a longer time in this Project?!!

How do you add a new widget?

I just want to make a few additions to the widgets available to edit on the Contact page. I have gone in to the config.yml page and added it there as instructed in the README but the widgets are not showing up when I go to the content manager. Also whenever I restart the development server my changes in the config.yml file are deleted. How do I make those permanent?

What step/s am I missing?

`
- { label: Subtitle, name: subtitle, widget: markdown }

      - { label: Body, name: body, widget: markdown }
      - { label: Address, name: address, widget: text }
      - { label: Phone, name: phone, widget: string }
      - { label: Fax, name: fax, widget: string }
      - { label: Email Address, name: email, widget: string }

`

Featured Image not displaying

I am fetching blog images from "static/images" folder rather than uploadcare but it does not loads featured image. Can you suggest solution.

image

gatsby-config.js

    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/images`,
        name: 'images'
      }
    },

Config.yml

media_folder: static/images
public_folder: /images

On Markdown File
image

On Graphql
image

How should I save the exact featuredImage path to graphql which is in markdown file. Do I need to make path changes in gatsby-config.js or config.yml file? Please advise.

Create button widget + component

Create a button widget for Netlify CMS.
requirements:

  • label (String)
  • linkType, internal or external (dropdown)
  • if internal show list of possible pages
  • open in new tab (boolean)
  • download (boolean)

[Praise] Adding search to starter

I just want to say that this startup Indians my favorite actually the only one I use.

In the near future I will be needing search function for it. There are 2 proper solutions for this in jamstack> client side search (js-search) or Algolia Doc/Search.

I would be happy to get started on this but I am quite cluesless at the moment as I have not worked with adding new packages in any node environment before. Is there some support tha this is wanted? I prefer to collaborate rather than tinker on my own becuase a) better results b) faster

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module / require() of ES modules is not supported.

Can't get this to build locally. The error I get is this:

internal/modules/cjs/loader.js:1102
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\leonp\OneDrive\Documents\Websites\CATOE-vYELLOWCAKE\node_modules\remark-mdx\index.js
require() of ES modules is not supported.
require() of C:\Users\leonp\OneDrive\Documents\Websites\CATOE-vYELLOWCAKE\node_modules\remark-mdx\index.js from
C:\Users\leonp\OneDrive\Documents\Websites\CATOE-vYELLOWCAKE\node_modules\gatsby-recipes\dist\graphql-server\server.js is an ES module file as it is a .js file whose nearest
parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from
C:\Users\leonp\OneDrive\Documents\Websites\CATOE-vYELLOWCAKE\node_modules\remark-mdx\package.json.

at new NodeError (internal/errors.js:322:7)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:101:18)
at Object.<anonymous> (C:\Users\leonp\OneDrive\Documents\Websites\CATOE-vYELLOWCAKE\node_modules\gatsby-recipes\dist\graphql-server\server.js:52:17)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32) {

code: 'ERR_REQUIRE_ESM'
}

Nav links for Posts appearing unlinked from Parent

I was attempting to debug this and thought that others might have this problem too. I've just checked the official site also, and it's even nastier the more post-categories you've got

image

The nav link highlighted is a post category.

If we look at the official version hosted at https://yellowcake.netlify.com

image

It is exponentially worse the more categories you've got

error dependencies. error in developing .

i tried download zip, clone, cli gatsby new with this repo link .

whenever i tried to gatsby develop, its all throw error like this . gladly use this starter really like it simplicity.
any help ?

image

How do I change the nav links?

This is my first time playing with Gatsby and Netlify, and I just can't for the life of me get the nav links to change with this template. Where am I supposed to edit the nav links? I've tried to play around with config.yml and gatsby-node.js but I still am unable to get the nav links to change.

For example, I can't change the link "Component" to "Courses". Can someone please give me a small example to move along. It would be greatly appreciated.

CMS not passing Class Names on custom pages

There is a reference to a styles.css in cms.js however I cannot find that file styles.css. I'm picking this why the styling isn't working in the Preview Pages when you're editing in the backend of the CMS

How to manual-init & overwrite config-settings?

I try to overwrite config-settings from netlify-cms ⇒ config.yml.

I've found some documentations, that I could do it if I set manualInit: true, to gatsby.config like this:

  'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
        stylesPath: `${__dirname}/src/cms/admin.css`,
        enableIdentityWidget: false
      }
    },

And call init manually like described here: https://www.gatsbyjs.org/packages/gatsby-plugin-netlify-cms/#manualinit

I've checkd it with changing

backend:
  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)

with

backend:
  name: gitlab
  repo: xxxx/gatsby_netlifycms_starter
  auth_type: implicit
  app_id: 2xxxxxxxxxxc359

But I don't get it to work. Config was never overwritten.
Any Idea, why?

yellowcake/src/cms/cms.js

Line 12 in f779e58

Copyright removable?

Does your starter kit has an license?
Can I remove the copyright on the very bottom of the page?

Re-work the click events

A Hacktoberfest pull request help wanted.
It would be great if someone could help with add all the eslinter requirements the non-native to click events like DIV's.
See all files marked with linter warnings for clickable elements remove this and you will see the warnings.
Thanks @abhijit-hota I've updated this request.

Following this example:
onKeyDown={this.handleKeyDown} tabIndex={0} aria-label="Toggle Popup" role="button"

UploadCare not working on Netlify CMS (Loading...)

Hello,

I've just tested a fresh copy of the yellowcake, created an API Key on UploadCare (to set as "publicKey" on the /static/admin/config.yml) and I've logged into netlify-cms and tried to add a file on the "media", but it's not working... Just shows the message "Loading..." and doesn't resolve.

Can anyone help, and see if something has changed, please?
I've the impression it was working, like, 2 weeks ago.

I am new to Gatsby and I didn't know about this tool,
it seems to be a must have on a modern website :)

Thank you for the help!

Creating project results in errors

Reproduction

gatsby new yellowcake https://github.com/thriveweb/yellowcake

Errors

PS C:\Users\RKevi\source\repos> gatsby new yellowcake https://github.com/thriveweb/yellowcake
info Creating new site from git: https://github.com/thriveweb/yellowcake.git
Cloning into 'yellowcake'...
remote: Enumerating objects: 132, done.
remote: Counting objects: 100% (132/132), done.
remote: Compressing objects: 100% (116/116), done.
remote: Total 132 (delta 19), reused 75 (delta 13), pack-reused 0
Receiving objects: 100% (132/132), 751.48 KiB | 820.00 KiB/s, done.
Resolving deltas: 100% (19/19), done.
←[32msuccess←[39m Created starter directory layout
←[34minfo←[39m Installing packages...
yarn install v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "gatsby > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning "gatsby-plugin-netlify > [email protected]" has unmet peer dependency "webpack@>=4.4.0".
warning "gatsby-plugin-sass > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
warning "netlify-cms-app > netlify-cms-widget-markdown > [email protected]" has incorrect peer dependency "slate@^0.32.0".
warning "netlify-cms-app > netlify-cms-widget-markdown > [email protected]" has incorrect peer dependency "slate@^0.33.3".
warning "netlify-cms-app > netlify-cms-widget-markdown > [email protected]" has unmet peer dependency "slate-schema-violations@^0.1.7".
warning "netlify-cms-app > netlify-cms-core > redux-notifications > [email protected]" has incorrect peer dependency "redux@^2.0.0 || ^3.0.0".
[4/4] Building fresh packages...
[-/13] ⠈ waiting...
[6/13] ⠈ sharp
[7/13] ⠈ node-sass
[-/13] ⠈ waiting...
error C:\Users\RKevi\source\repos\yellowcake\node_modules\node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: C:\Users\RKevi\source\repos\yellowcake\node_modules\node-sass
Output:
Building: C:\Program Files\nodejs\node.exe C:\Users\RKevi\source\repos\yellowcake\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
gyp verb cli   'C:\\Users\\RKevi\\source\\repos\\yellowcake\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\RKevi\source\repos\yellowcake\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\RKevi\source\repos\yellowcake\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\RKevi\source\repos\yellowcake\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\RKevi\source\repos\yellowcake\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\RKevi\source\repos\yellowcake\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\RKevi\source\repos\yellowcake\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:175:21)
gyp verb `which` failed  python2 Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\RKevi\source\repos\yellowcake\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\RKevi\source\repos\yellowcake\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\RKevi\source\repos\yellowcake\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\RKevi\source\repos\yellowcake\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\RKevi\source\repos\yellowcake\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\RKevi\source\repos\yellowcake\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:175:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` succeeded python C:\Python27\python.EXE
gyp verb check python version `C:\Python27\python.EXE -c "import sys; print "2.7.17
gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
gyp verb get node dir no --target version specified, falling back to host node version: 14.4.0
gyp verb command install [ '14.4.0' ]
gyp verb install input version string "14.4.0"
gyp verb install installing version: 14.4.0
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version is already installed, need to check "installVersion"
gyp verb got "installVersion" 9
gyp verb needs "installVersion" 9
gyp verb install version is good
gyp verb get node dir target node version installed: 14.4.0
gyp verb build dir attempting to create "build" dir: C:\Users\RKevi\source\repos\yellowcake\node_modules\node-sass\build
gyp verb build dir "build" dir needed to be created? C:\Users\RKevi\source\repos\yellowcake\node_modules\node-sass\build
gyp verb find vs2017 Found installation at: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
gyp verb find vs2017   - Found Microsoft.VisualStudio.Component.VC.Tools.x86.x64
gyp verb find vs2017   - Found Microsoft.VisualStudio.VC.MSBuild.Base
gyp verb find vs2017   - Found Microsoft.VisualStudio.Component.Windows10SDK.18362
gyp verb find vs2017   - Using this installation with Windows 10 SDK
gyp verb find vs2017 using installation: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
gyp verb build/config.gypi creating config file
gyp verb build/config.gypi writing out config file: C:\Users\RKevi\source\repos\yellowcake\node_modules\node-sass\build\config.gypi
gyp verb config.gypi checking for gypi file: C:\Users\RKevi\source\repos\yellowcake\node_modules\node-sass\config.gypi
gyp verb common.gypi checking for gypi file: C:\Users\RKevi\source\repos\yellowcake\node_modules\node-sass\common.gypi
gyp verb gyp gyp format was not specified; forcing "msvs"
gyp info spawn C:\Python27\python.EXE
gyp info spawn args [
gyp info spawn args   'C:\\Users\\RKevi\\source\\repos\\yellowcake\\node_modules\\node-gyp\\gyp\\gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'msvs',
gyp info spawn args   '-G',
gyp info spawn args   'msvs_version=2015',
gyp info spawn args   '-I',
gyp info spawn args   'C:\\Users\\RKevi\\source\\repos\\yellowcake\\node_modules\\node-sass\\build\\config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   'C:\\Users\\RKevi\\source\\repos\\yellowcake\\node_modules\\node-gyp\\addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   'C:\\Users\\RKevi\\.node-gyp\\14.4.0\\include\\node\\common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=C:\\Users\\RKevi\\.node-gyp\\14.4.0',
gyp info spawn args   '-Dnode_gyp_dir=C:\\Users\\RKevi\\source\\repos\\yellowcake\\node_modules\\node-gyp',
gyp info spawn args   '-Dnode_lib_file=C:\\Users\\RKevi\\.node-gyp\\14.4.0\\<(target_arch)\\node.lib',
gyp info spawn args   '-Dmodule_root_dir=C:\\Users\\RKevi\\source\\repos\\yellowcake\\node_modules\\node-sass',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'C:\\Users\\RKevi\\source\\repos\\yellowcake\\node_modules\\node-sass\\build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
gyp verb command build []
gyp verb build type Release
gyp verb architecture x64
gyp verb node dev dir C:\Users\RKevi\.node-gyp\14.4.0
gyp verb found first Solution file build/binding.sln
gyp verb using MSBuild: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\15.0\Bin\MSBuild.exe
gyp info spawn C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\15.0\Bin\MSBuild.exe
gyp info spawn args [
gyp info spawn args   'build/binding.sln',
gyp info spawn args   '/nologo',
gyp info spawn args   '/p:Configuration=Release;Platform=x64'
gyp info spawn args ]
gyp ERR! UNCAUGHT EXCEPTION
gyp ERR! stack Error: spawn C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\15.0\Bin\MSBuild.exe ENOENT
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:268:19)
gyp ERR! stack     at onErrorNT (internal/child_process.js:468:16)
gyp ERR! stack     at processTicksAndRejections (internal/process/task_queues.js:84:21)
gyp ERR! System Windows_NT 10.0.19041
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\RKevi\\source\\repos\\yellowcake\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\RKevi\source\repos\yellowcake\node_modules\node-sass
gyp ERR! node -v v14.4.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! This is a bug in `node-gyp`.





 ERROR

Command failed with exit code 1: yarnpkg



  Error: Command failed with exit code 1: yarnpkg

  - error.js:56 makeError
    [npm]/[gatsby-cli]/[execa]/lib/error.js:56:11

  - index.js:114 handlePromise
    [npm]/[gatsby-cli]/[execa]/index.js:114:26

  - task_queues.js:97 processTicksAndRejections
    internal/process/task_queues.js:97:5

  - init-starter.js:136 async install
    [npm]/[gatsby-cli]/lib/init-starter.js:136:7

  - init-starter.js:206 async clone
    [npm]/[gatsby-cli]/lib/init-starter.js:206:3

  - init-starter.js:345 async initStarter
    [npm]/[gatsby-cli]/lib/init-starter.js:345:19

  - create-cli.js:400
    [npm]/[gatsby-cli]/lib/create-cli.js:400:7

Environment

System:
OS: Windows 10 10.0.19041
CPU: (4) x64 Intel(R) Core(TM) i7-4610M CPU @ 3.00GHz
Binaries:
Node: 14.4.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 2.7.17
Browsers:
Edge: 44.19041.1.0
npmGlobalPackages:
gatsby-cli: 2.12.60

Google Map dynamic values

Google map is not fetching values that we are passing from ContactPage template

yellowcake/src/templates/ContactPage.js

Line 65 in d35c8b2

<GoogleMap locations={locations} />

<GoogleMap locations={locations} />

Its using some default props. How should I make it work for values we are passing with above code.

yellowcake/src/components/GoogleMap.js

Line 11 in d35c8b2

static defaultProps = {

If I try to set locations value that is passed from ContactPage: defaultCenter={locations} It say the default props can not be changed.

import React, { Component } from 'react'
import GoogleMapReact from 'google-map-react'
import { MapPin } from 'react-feather'

let mapkey = ''
mapkey = 'xxxxxxxxxxxxxxxxxxxxxxxxx'

class GoogleMap extends Component {
  static defaultProps = {
    center: {
      lat: 30.373000,
      lng: -97.736600
    },
    zoom: 14.7
  }

  render() {
    const { locations } = this.props

    return (
      // Important! Always set the container height explicitly
      <div style={{ height: '50vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: mapkey }}
          defaultCenter={locations}
          defaultZoom={this.props.zoom}
        >
          <Marker lat={30.373000} lng={-97.736600} text={'Complete Address'} />
        </GoogleMapReact>
      </div>
    )
  }
}

export default GoogleMap

const Marker = () => {
  return (
    <div style={{ color: 'red' }}>
      <MapPin />
    </div>
  )
}

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.