Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/theiliad/carbon-charts-design-docs


https://github.com/theiliad/carbon-charts-design-docs

Last synced: 6 days ago
JSON representation

Awesome Lists containing this project

README

        


Carbon Design Gatsby Starter

Get started using with the Gatsby Carbon theme which includes all configuration you might need to build a beautiful site inspired by the [Carbon Design System](https://www.carbondesignsystem.com).

## πŸ§— Getting started

1. **Create your site**

Use the gatsby CLI to bootstrap your site with the starter

```sh
npx gatsby new my-carbon-site https://github.com/carbon-design-system/gatsby-starter-carbon-theme
```

2. **Start developing**

Navigate into your directory and start it up

```sh
cd my-carbon-site/
gatsby develop
```

3. **Make some changes!**

Navigate to `localhost:8000` to see your site running

Each of the Items in your side bar correlates to a MDX file in your `src/pages/` directory. Navigate to a site and try editing the corresponding markdown file. You'll be able to see it update live!

## πŸ” What's in here?

Lets check out the structure of our project

.
β”œβ”€β”€ LICENSE
β”œβ”€β”€ README.md
β”œβ”€β”€ gatsby-config.js
β”œβ”€β”€ node_modules
β”œβ”€β”€ package.json
β”œβ”€β”€ public
β”œβ”€β”€ src
β”‚ β”œβ”€β”€ gatsby-theme-carbon
β”‚ └── pages
└── yarn.lock

1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

1. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site.

- **gatsby-theme-carbon** this is where you'll override (known as shadowing) the default `gatsby-theme-carbon` components
- **pages** This is where most of your content will live. You'll represent each page with an MDX file.

1. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.

1. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description. You'll notice that all of the configuration for the site is coming from `gatsby-theme-carbon`

1. **`LICENSE`**: Gatsby is licensed under the Apache 2.0 license.

1. **`yarn.lock`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**

1. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

1. **`README.md`**: This file!

## πŸ‘·β€ Components

This is where we'll document the various utility components as they're added.

## πŸ“˜ Resources

1. [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/)
1. [MDX](https://mdxjs.com/)

## πŸ‘» Configuration and Shadowing

Coming soon!

## πŸš€ Deployment

Coming soon!