├── .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 |
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 |
--------------------------------------------------------------------------------