Skip to content
This repository was archived by the owner on Feb 12, 2023. It is now read-only.

Commit 96004bc

Browse files
committed
0 parents  commit 96004bc

File tree

12 files changed

+10490
-0
lines changed

12 files changed

+10490
-0
lines changed

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.cache
2+
public
3+
node_modules

README.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<p align="center">
2+
<a href="https://www.gatsbyjs.org">
3+
<img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
4+
</a>
5+
</p>
6+
<h1 align="center">
7+
Starter for creating a Gatsby Theme workspace
8+
</h1>
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+
```

example/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
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 `localhost:8000`. To get
6+
rid of that, create a page in `src/pages/index.js`.

example/gatsby-config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
plugins: [{ resolve: `gatsby-theme-minimal`, options: {} }],
3+
}

example/package.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "example",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"author": "christopherbiscardi <chris@christopherbiscardi.com> (@chrisbiscardi)",
6+
"license": "MIT",
7+
"scripts": {
8+
"develop": "gatsby develop",
9+
"build": "gatsby build"
10+
},
11+
"dependencies": {
12+
"gatsby": "^2.19.7",
13+
"gatsby-theme-minimal": "^1.0.0",
14+
"react": "^16.12.0",
15+
"react-dom": "^16.12.0"
16+
}
17+
}

example/src/pages/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import React from "react"
2+
3+
export default () => <div>Homepage in a user's site</div>

gatsby-theme-minimal/README.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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 education 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 see 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 () => <div>My Site!</div>
41+
```
42+
43+
## Doing more with themes
44+
45+
You can use this as a place to start when developing themes. I
46+
generally suggest using [yarn
47+
workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) like the
48+
[gatsby-theme-examples repo
49+
does](https://github.com/ChristopherBiscardi/gatsby-theme-examples),
50+
but using `yarn link` or `npm link` is a viable alternative if you're
51+
not familiar with workspaces.

gatsby-theme-minimal/gatsby-config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = {}

gatsby-theme-minimal/index.js

Whitespace-only changes.

gatsby-theme-minimal/package.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "gatsby-theme-minimal",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"author": "christopherbiscardi <chris@christopherbiscardi.com> (@chrisbiscardi)",
6+
"license": "MIT",
7+
"peerDependencies": {
8+
"gatsby": "^2.6.0"
9+
}
10+
}

package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "gatsby-starter-theme-workspace",
3+
"private": true,
4+
"version": "0.0.1",
5+
"main": "index.js",
6+
"license": "MIT",
7+
"scripts": {
8+
"build": "yarn workspace example build"
9+
},
10+
"workspaces": [
11+
"gatsby-theme-minimal",
12+
"example"
13+
]
14+
}

0 commit comments

Comments
 (0)