https://github.com/shetharp/gatsby-theme-candor

🐨 A simple and honest theme to help you set up a production-grade website in no time.
https://github.com/shetharp/gatsby-theme-candor

gatsby gatsby-plugin gatsby-theme mdx theme-ui typescript

Last synced: 8 days ago
JSON representation

🐨 A simple and honest theme to help you set up a production-grade website in no time.

• Host: GitHub
• URL: https://github.com/shetharp/gatsby-theme-candor
• Owner: shetharp
• Created: 2020-06-25T01:32:02.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-11T19:51:16.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T17:45:46.538Z (23 days ago)
• Topics: gatsby, gatsby-plugin, gatsby-theme, mdx, theme-ui, typescript
• Language: TypeScript
• Homepage: https://shetharp.github.io/gatsby-theme-candor/
• Size: 50.9 MB
• Stars: 2
• Watchers: 2
• Forks: 3
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

    

  





  Workspace starter for gatsby-theme-candor



To start developing your own theme using this repo as a starting point:

```shell

gatsby new my-theme https://github.com/shetharp/gatsby-theme-candor

cd my-theme

yarn

yarn workspace demo develop

```

To create a Gatsby site with the theme itself as a starting point:

- Follow the installation instructions for [gatsby-theme-candor](https://www.npmjs.com/package/@shetharp/gatsby-theme-candor)

### 🐨 View [Demo Site →](https://shetharp.github.io/gatsby-theme-candor/)

## Features

This theme workspace comes pre-loaded with the following:

Configurations for Typescript, ESLint, and Husky

- `yarn lint` to manually run ESLint

- `yarn lint:fix` to manually run ESLint and auto-fix most issues

- `yarn type-check` to run the Typescript compiler

- **Note:** Husky will run `yarn lint:fix` on staged files during pre-commit, and it will run `yarn type-check` on all files during pre-push

**`theme`** workspace

- Sources pages and posts from two seprate directories

- MDX support with frontmatter querying and referencing

- Syntax highlighting for code blocks in MDX

- Responsive optimized images

- A custom theme built with `gatsby-plugin-theme-ui`

- Documented code and type-checking with Typescript

**`demo`** workspace

- Consumes the theme and builds a site with example content

- Has a [Blog Index](http://localhost:8000/blog) page to view a list of all the pages in the demo site

- Has a [Theme Preview](http://localhost:8000/theme-preview) page to view the theme in action

- Has a [Theme JSON](http://localhost:8000/theme-json) page to view the raw theme JSON

- Ample examples of component Shadowing in Gatsby

### `theme`

This directory is the theme package itself. You should change the

`package.json` name field and the corresponding dependency in the

example directory's `package.json`/`gatsby-config.js` to match the chosen name.

### `demo`

This is an demo usage of your theme. It should look the same as the

site of someone who installed and used your theme from npm.

You can run the example with:

```shell

yarn workspace demo develop

```

## Tutorial

I wrote up a developer guide on how I built this theme. Give it a read if you want to build your own Gatsby theme or build on top of this one.

[Creating New Gatsby Theme with Typescript, MDX, and Theme-UI](https://hackernoon.com/creating-new-gatsby-theme-with-typescript-mdx-and-theme-ui-tz1c3u3u)