├── .gitignore ├── LICENSE ├── README.md ├── example ├── README.md ├── gatsby-config.js ├── package.json └── src │ └── pages │ └── index.js ├── gatsby-theme-minimal ├── README.md ├── gatsby-config.js ├── index.js └── package.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | public 3 | node_modules 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The BSD Zero Clause License (0BSD) 2 | 3 | Copyright (c) 2020 Gatsby Inc. 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Gatsby 4 | 5 |

6 |

7 | Starter for creating a Gatsby Theme workspace 8 |

9 | 10 | ```shell 11 | gatsby new my-theme https://github.com/gatsbyjs/gatsby-starter-theme-workspace 12 | cd my-theme 13 | yarn workspace example develop 14 | ``` 15 | 16 | ## Layout 17 | 18 | ```text 19 | . 20 | ├── README.md 21 | ├── gatsby-theme-minimal 22 | │   ├── README.md 23 | │   ├── gatsby-config.js 24 | │   ├── index.js 25 | │   └── package.json 26 | ├── example 27 | │   ├── README.md 28 | │   ├── gatsby-config.js 29 | │   ├── package.json 30 | │   └── src 31 | ├── package.json 32 | └── yarn.lock 33 | 34 | 3 directories, 10 files 35 | ``` 36 | 37 | ### `gatsby-theme-minimal` 38 | 39 | This directory is the theme package itself. You should rename this at 40 | some point to be `gatsby-theme-{my-theme-name}`. Also change the 41 | `package.json` name field and the corresponding dependency in the 42 | example directory's `package.json`/`gatsby-config.js` to match the chosen name. 43 | 44 | - `gatsby-theme-minimal/` 45 | - `gatsby-config.js`: An empty gatsby-config that you can use as a starting point for building functionality into your theme. 46 | - `index.js`: Since themes also function as plugins, this is an empty file that 47 | gatsby needs to use this theme as a plugin. 48 | - `package.json`: The dependencies that your theme will pull in when people install it. `gatsby` should be a `peerDependency`. 49 | 50 | ### `example` 51 | 52 | This is an example usage of your theme. It should look the same as the 53 | site of someone who installed and used your theme from npm. 54 | 55 | - `example/` 56 | - `gatsby-config.js`: Specifies which theme to use and any other one-off config a site might need. 57 | - `src/`: Source code such as one-off pages or components that might live in 58 | a user's site. 59 | 60 | You can run the example with: 61 | 62 | ```shell 63 | yarn workspace example develop 64 | ``` 65 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Gatsby Theme Minimal Example 2 | 3 | A usage of 4 | [gatsby-theme-minimal](https://github.com/ChristopherBiscardi/gatsby-theme-minimal) 5 | that does nothing but use the theme. As a result you will see `Error: Missing resources for /` when navigating to `http://localhost:8000`. To get 6 | rid of that, create a page in `src/pages/index.js`. 7 | -------------------------------------------------------------------------------- /example/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [{ resolve: `gatsby-theme-minimal`, options: {} }], 3 | } 4 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "1.0.0", 4 | "author": "christopherbiscardi (@chrisbiscardi)", 5 | "license": "MIT", 6 | "scripts": { 7 | "develop": "gatsby develop", 8 | "build": "gatsby build" 9 | }, 10 | "dependencies": { 11 | "gatsby": "^5.14.1", 12 | "gatsby-theme-minimal": "^1.0.0", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /example/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | export default function Home() { 4 | return
Homepage in a user's site
5 | } 6 | -------------------------------------------------------------------------------- /gatsby-theme-minimal/README.md: -------------------------------------------------------------------------------- 1 | # The smallest possible Gatsby theme 2 | 3 | ## Quick Start 4 | 5 | ```shell 6 | mkdir my-site 7 | cd my-site 8 | yarn init 9 | # install gatsby-theme-minimal and it's dependencies 10 | yarn add gatsby react react-dom gatsby-theme-minimal 11 | ``` 12 | 13 | Then add the theme to your `gatsby-config.js`. We'll use the long-form 14 | here for educational purposes. 15 | 16 | ```javascript 17 | module.exports = { 18 | plugins: [ 19 | { 20 | resolve: "gatsby-theme-minimal", 21 | options: {}, 22 | }, 23 | ], 24 | } 25 | ``` 26 | 27 | That's it, you can now run your gatsby site using 28 | 29 | ```shell 30 | yarn gatsby develop 31 | ``` 32 | 33 | Note that this site doesn't _do_ anything, so you're seeing a missing 34 | resources error. Create a simple page in `src/pages/index.js` to see a 35 | page on the root url. 36 | 37 | ```jsx 38 | import React from "react" 39 | 40 | export default function Home() { 41 | return
My Site!
42 | } 43 | ``` 44 | 45 | ## Doing more with themes 46 | 47 | You can use this as a place to start when developing themes. I 48 | generally suggest using [yarn 49 | workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) like the 50 | [gatsby-theme-examples repo 51 | does](https://github.com/ChristopherBiscardi/gatsby-theme-examples), 52 | but using `yarn link` or `npm link` is a viable alternative if you're 53 | not familiar with workspaces. 54 | -------------------------------------------------------------------------------- /gatsby-theme-minimal/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = {} 2 | -------------------------------------------------------------------------------- /gatsby-theme-minimal/index.js: -------------------------------------------------------------------------------- 1 | // noop 2 | -------------------------------------------------------------------------------- /gatsby-theme-minimal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-theme-minimal", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "author": "christopherbiscardi (@chrisbiscardi)", 6 | "license": "MIT", 7 | "peerDependencies": { 8 | "gatsby": "^5.0.0" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-theme-workspace", 3 | "private": true, 4 | "version": "0.0.1", 5 | "license": "0BSD", 6 | "scripts": { 7 | "build": "yarn workspace example build" 8 | }, 9 | "workspaces": [ 10 | "gatsby-theme-minimal", 11 | "example" 12 | ] 13 | } 14 | --------------------------------------------------------------------------------