carbon-design-system / gatsby-starter-carbon-theme Goto Github PK

A Gatsby starter demonstrating the Gatsby Carbon theme

License: Apache License 2.0

JavaScript 94.66% SCSS 5.34%

gatsby-starter-carbon-theme's Introduction

Gatsby Theme Carbon Starter

What is this?

Gatsby themes encapsulate all of the configuration and implementation details of Gatsby websites. This is a starter-kit (boilerplate) with a dependancy on the gatsby-theme-carbon package. The primary goal of gatsby-theme-carbon is to get content authors speaking the IBM Design Language with Carbon as soon as possible. It includes some sample components/content demos in the src/pages directory.

How do I use it?

Check out our quick getting started guide and video!

gatsby-theme-carbon at it’s core relies on mdx for page creation. Check out the src/pages directory for some examples for using mdx.

A key feature of Gatsby themes is component shadowing. By simply placing a component into the src/gatsby-theme-carbon/components location, you can override components used by the theme. You can read more about component shadowing here.

You’re also free to make your own components and use them in your MDX pages.

What’s Next?

Check out the docs!

gatsby-starter-carbon-theme's People

Contributors

Stargazers

Watchers

gatsby-starter-carbon-theme's Issues

first steps need updating?

Hi there, I'm just trying to get the starter theme up and running locally but running into issues... I've tried a few attempts at doing

npx gatsby new open-source-cloud-guide https://github.com/carbon-design-system/gatsby-starter-carbon-theme

The error message was pretty garbled and didn't point to anything obvious being out of date.

I tried some of the other steps outlined in #12, namely this setting npm config set legacy-peer-deps true which got me past an initial error.

npm script names don't match the npm scripts guide

The npm scripts guide says

develop - this is your primary for starting up your gatsby site for development
develop:clean - this is provided as a convenience; it first runs clean then develop

https://github.com/carbon-design-system/gatsby-starter-carbon-theme/blob/master/src/pages/guides/npm-scripts.mdx#develop

But the actual scripts in this starter are dev and dev:clean

https://github.com/carbon-design-system/gatsby-starter-carbon-theme/blob/master/package.json

First step of getting started fails

The first step of getting started fails:

npx gatsby new my-carbon-site https://github.com/carbon-design-system/gatsby-starter-carbon-theme
info Creating new site from git: https://github.com/carbon-design-system/gatsby-starter-carbon-theme.git

Cloning into 'my-carbon-site'...
remote: Enumerating objects: 133, done.
remote: Counting objects: 100% (133/133), done.
remote: Compressing objects: 100% (124/124), done.
remote: Total 133 (delta 7), reused 79 (delta 1), pack-reused 0
Receiving objects: 100% (133/133), 6.98 MiB | 6.08 MiB/s, done.
success Created starter directory layout
info Installing packages...

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   peer react@"^16.4.2 || ^17.0.0" from [email protected]
npm ERR!   node_modules/gatsby
npm ERR!     gatsby@"^2.24.14" from the root project
npm ERR!     peer gatsby@"^2.20.4" from [email protected]
npm ERR!     node_modules/gatsby-theme-carbon
npm ERR!       gatsby-theme-carbon@"^1.28.0" from the root project
npm ERR!   1 more (react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/gatsby-theme-carbon
npm ERR!   gatsby-theme-carbon@"^1.28.0" from the root project
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! 

 ERROR 

Command failed with exit code 1: npm install



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

Please fix.

[Question] Possible to use with a non-Gatsby site?

Loving the theme, and I was wondering if it's possible to apply to a non-Gatsby React site. It'd be great to transfer the styles (e.g., different color palette for sidebar on landing page vs. others) and what seem to be theme-specific components (e.g., <ImageCard />) without having to manually duplicate them.

I'm still a Gatsby beginner, so I appreciate the help! :)

What is the difference between this repo and gatsby-theme-carbon

I can't figure out how this repo differs from https://github.com/carbon-design-system/gatsby-theme-carbon
Does anyone know?

Consider adding a query for site title in Header

Description

Adding a query for the site title defined in gatsby-config ensures an easier adaptation to getting started with the theme's starter rather than manually changing it in two places. Not sure if this was the intended functionality, but if so I can close this issue. :)

Moving Forward

If this is something ya'll would like to include I have a PR ready to submit as I made this change in my application.

Images don't appear locally

I just cloned the repo & ran gatsby develop & went to the http://localhost:8000/components/ArticleCard which is the article card page. The images didn't appear there

Here is a screenshot of localhost.

But in my netlify build, I was able to see.
Here is a screenshot of my site deployed with netlify.