This repository was archived by the owner on Feb 12, 2023. It is now read-only.
File tree Expand file tree Collapse file tree 12 files changed +10490
-0
lines changed Expand file tree Collapse file tree 12 files changed +10490
-0
lines changed Original file line number Diff line number Diff line change
1
+ .cache
2
+ public
3
+ node_modules
Original file line number Diff line number Diff line change
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
+ ```
Original file line number Diff line number Diff line change
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 ` .
Original file line number Diff line number Diff line change
1
+ module . exports = {
2
+ plugins : [ { resolve : `gatsby-theme-minimal` , options : { } } ] ,
3
+ }
Original file line number Diff line number Diff line change
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
+ }
Original file line number Diff line number Diff line change
1
+ import React from "react"
2
+
3
+ export default ( ) => < div > Homepage in a user's site</ div >
Original file line number Diff line number Diff line change
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.
Original file line number Diff line number Diff line change
1
+ module . exports = { }
Original file line number Diff line number Diff line change
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
+ }
Original file line number Diff line number Diff line change
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
+ }
You can’t perform that action at this time.
0 commit comments