bradfrost / gatsby-style-guide-guide Goto Github PK

This is a small bug in the PrimaryNav.js component, but wanted to share. Basically you need to add a key prop whenever you are mapping an array. For me, I'm simply using key={post.frontmatter.title}. This works for my project but probably not a great long term solution.

I added the key prop within the map function.

I'm not able to install the package via yarn.
After cloning the repository and running "yarn" at the root of the project I receive this error:

yarn install v1.7.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "^6.3.0".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Using node 8.11.1, yarn 1.7.0, mac os x 10.13.5 high sierra.

Should I switch to node 6?

Hello!!
First of all, wanted to say that i'm enjoying a lot the use of this project and i've been playing with it for a while, updating the dependencies and creating some other features.

I'm currently trying to build a component that, providing a component name in the markdown file, it renders the component and it's html representation.

Some thing like that:

The final thing I need to polish that is using a beautifier / prettifier to format the code correctly, but after a lot of tries I wasn't able to achieve it when doing gatsby build && gatsby serve. (It works when doing gatsby develop).

That's part of the code i'm currently using:

const Component = types[component]
const inner = ReactDOMServer.renderToStaticMarkup(<Component />)

    const formattedCode = prettier.format(inner, {
                    parser: 'html',
                    plugins: [parserHTML, parseMarkdown],
                    htmlWhitespaceSensitivity: 'ignore',
                  })
    return (
      <>
        <Component />
        <pre className="language-html">
           <code className="language-html">{formattedCode}</code>
        </pre>
      </>
    )

Do you have any clue on how to achieve that when doing the build?
The prettier api is a server side thingy and i'll have to move it to the gatbsy node, but not sure on how to handle it correctly.

Thanks in advance and good job with the styleguide!

I'm trying to edit the SCSS files but non of my changes are being applied. I have to go into style.css to make changes.

I installed the Gatsby SASS plugin to see if that would make it work, but nothing so far. What's the trick to get this working?

Hi all,

I had a LOT of issues getting this repository to work in Gatsby v2 for some reason, however upgrading it to v3 seemed to do the trick!

Here is my package.json file contents if anyone is interested!

{
"name": "gatsby-blog-starter-kit",
"description": "Gatsby blog starter example",
"version": "1.2.0",
"author": "Dustin Schau [email protected] (https://dustinschau.com)",
"repository": "https://github.com/dschau/gatsby-blog-starter-kit",
"dependencies": {
"babel-preset-gatsby": "^1.1.0",
"gatsby": "~3.1.1",
"gatsby-plugin-catch-links": "~3.1.0",
"gatsby-plugin-react-helmet": "^4.1.0",
"gatsby-plugin-sass": "^4.1.0",
"gatsby-plugin-sharp": "^3.1.1",
"gatsby-remark-images": "^4.1.0",
"gatsby-remark-prismjs": "^4.1.0",
"gatsby-source-filesystem": "~3.1.0",
"gatsby-transformer-remark": "~3.1.0",
"markdown-it": "^12.0.4",
"node-sass": "^5.0.0",
"prismjs": "^1.23.0",
"prop-types": "^15.7.2",
"react": "~17.0.2",
"react-dom": "~17.0.2",
"react-helmet": "^6.1.0",
"react-icons": "~4.2.0",
"react-prism": "^4.3.2"
},
"devDependencies": {
"classnames": "^2.2.5",
"eslint": "^7.22.0",
"eslint-plugin-react": "^7.23.0",
"gh-pages": "^3.1.0",
"prettier": "2.2.1",
"react-element-to-jsx-string": "^14.3.2",
"s3-deploy": "^1.4.0"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"serve": "gatsby serve",
"deploy": "gatsby build --prefix-paths && gh-pages -d public",
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src//*.js' 'src//*.md'",
"fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{"semi": [2, "never"], "no-extra-semi": [2]}' --fix gatsby-node.js"
}
}

On yarn start , the console outputs some errors about the modules name.

These relative modules were not found:

• ../components/Button in ./src/templates/page.js, ./src/templates/component-detail.js
• ../components/Breadcrumbs in ./src/templates/page.js, ./src/templates/component-detail.js
• ../components/Card in ./src/templates/index.js, ./src/pages/page-templates-index.js and 3 others
• ../components/Header in ./src/layouts/index.js
• ../components/Footer in ./src/layouts/index.js
• ./Badge in ./src/components/PageHeader.js

The Style Guide Guide is great and have enjoyed playing around with it. It is still a bit unclear to me how to consume components from elsewhere (or Pattern Lab as the docs state). Though familiar with Storybook and other tools I am newer to Gatsby so may be missing some pieces.. Is there still an effort underway to demo that or a blog post I may have missed? Thanks!

After following the install instructions, I get the following when running yard start

Would be nice if you can migrate gatsby to version 2.