Skip to content

Commit 61e207d

Browse files
authored
chore: add starters to monorepo (#10310)
This PR adds in starters to the monorepo. Longer term, I believe we'll merge starters/examples since they're very much linked. Future implementation improvements: - Run a `build` script to validate that the starter(s) can be built - I planned to use `lerna run --scope gatsby-starter-*` for this, but if there's another approach, happy to try that - Implement yarn workspaces/lerna so we can get automatic versioning in the starters (I have this built out at https://github.com/dschau/starters) - Author `e2e` tests vs. the starters so that we can ensure we're not breaking anything - These would follow a similar approach to the current e2e tests Blocked by gatsbyjs/gatsby-starter-blog#139 gatsbyjs/gatsby-starter-default#120 gatsbyjs/gatsby-starter-hello-world#32
1 parent 99b57c1 commit 61e207d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+50413
-5
lines changed

.circleci/config.yml

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,20 @@ jobs:
161161
- e2e-test:
162162
test_path: e2e-tests/production-runtime
163163

164+
starters_publish:
165+
executor: node
166+
steps:
167+
- checkout
168+
- <<: *restore_cache
169+
- <<: *install_node_modules
170+
- <<: *persist_cache
171+
- run: ./scripts/assert-changed-files.sh "starters/*"
172+
- run: yarn markdown
173+
- run: sudo apt-get update && sudo apt-get install jq # jq is helpful for parsing json
174+
- run: git config --global user.name "GatsbyJS Bot"
175+
- run: git config --global user.email "[email protected]"
176+
- run: sh ./scripts/clone-folder.sh starters
177+
164178
workflows:
165179
version: 2
166180
build-test:
@@ -189,3 +203,8 @@ workflows:
189203
<<: *e2e-test-workflow
190204
- e2e_tests_runtime:
191205
<<: *e2e-test-workflow
206+
- starters_publish:
207+
filters:
208+
branches:
209+
only:
210+
- master

.eslintrc.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
"jest": true
2525
},
2626
"globals": {
27-
"spyOn": true
27+
"spyOn": true,
28+
"__PATH_PREFIX__": true
2829
},
2930
"rules": {
3031
"arrow-body-style": [

.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,12 @@ node_modules/
5050
.vscode/
5151
*.sw*
5252

53+
# misc
5354
.serverless/
55+
56+
# lock files
5457
yarn.lock
5558
package-lock.json
59+
60+
# starters are special; we want to persist the lock files
61+
!starters/*/package-lock.json

lerna.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
}
1313
},
1414
"loglevel": "success",
15-
"packages": ["packages/*"],
15+
"packages": [
16+
"packages/*"
17+
],
1618
"version": "independent",
1719
"npmClient": "yarn",
1820
"registry": "https://registry.npmjs.org/",

markdown.config.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const fs = require(`fs-extra`)
2+
const path = require(`path`)
3+
const _ = require(`lodash`)
4+
5+
module.exports = {
6+
transforms: {
7+
LIST_STARTERS() {
8+
const base = path.join(process.cwd(), `starters`)
9+
const starters = fs
10+
.readdirSync(base)
11+
.filter(dir => fs.statSync(path.join(base, dir)).isDirectory())
12+
.reduce((merged, dir) => {
13+
merged[dir] = JSON.parse(
14+
fs.readFileSync(path.join(base, dir, `package.json`), `utf8`)
15+
)
16+
return merged
17+
}, {})
18+
19+
return `
20+
|Name|Demo|Description|
21+
|:--:|----|-----------|
22+
${Object.keys(starters)
23+
.map(name => {
24+
const starter = starters[name]
25+
return `
26+
|[${name}](https://github.com/gatsbyjs/gatsby-starter-${name})|[gatsby-starter-${name}-demo.netlify.com](https://gatsby-starter-${name}-demo.netlify.com/)|${
27+
starter.description
28+
}|
29+
`.trim()
30+
})
31+
.join(`\n`)}
32+
`.replace(/^[^|]+/gm, ``)
33+
},
34+
STARTER(content, options, { originalPath }) {
35+
const starter = path.basename(path.dirname(originalPath))
36+
const template = fs.readFileSync(
37+
path.join(process.cwd(), `starters`, `README-template.md`),
38+
`utf8`
39+
)
40+
return _.template(template)({
41+
name: starter,
42+
})
43+
},
44+
},
45+
}

package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"jest-junit": "^5.0.0",
2727
"lerna": "^3.3.0",
2828
"lint-staged": "^8.0.4",
29+
"markdown-magic": "^0.1.25",
2930
"npm-run-all": "4.1.5",
3031
"plop": "^1.8.1",
3132
"prettier": "^1.14.3",
@@ -73,6 +74,8 @@
7374
"lint:code": "eslint --ignore-path .gitignore --ignore-path .prettierignore --ext .js,.jsx .",
7475
"lint:flow": "babel-node scripts/flow-check.js",
7576
"lint:other": "npm run prettier -- --list-different",
77+
"markdown": "md-magic --path \"starters/**/*.md\"",
78+
"postmarkdown": "prettier --write \"starters/**/*.md\"",
7679
"plop": "plop",
7780
"prebootstrap": "yarn",
7881
"prettier": "prettier \"**/*.{md,css,scss,yaml,yml}\"",

scripts/clone-folder.sh

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
#!/bin/bash
2+
FOLDER=$1
3+
BASE=$(pwd)
4+
5+
for folder in $FOLDER/*; do
6+
[ -d "$folder" ] || continue # only directories
7+
cd $BASE
8+
9+
NAME=$(cat $folder/package.json | jq -r '.name')
10+
CLONE_DIR="__${NAME}__clone__"
11+
12+
git clone --depth 1 https://$GITHUB_API_TOKEN@github.com/gatsbyjs/$NAME.git $CLONE_DIR
13+
cd $CLONE_DIR
14+
find . | grep -v ".git" | grep -v "^\.*$" | xargs rm -rf # delete all files (to handle deletions in monorepo)
15+
cp -r $BASE/$folder/. . # copy all content
16+
git add .
17+
git commit --message "$(git log -1 --pretty=%B)"
18+
git push origin master
19+
cd $BASE
20+
done

starters/README-template.md

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
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+
Gatsby's <%= name %> starter
8+
</h1>
9+
10+
Kick off your project with this <%= name %> boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
11+
12+
_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._
13+
14+
## 🚀 Quick start
15+
16+
1. **Create a Gatsby site.**
17+
18+
Use the Gatsby CLI to create a new site, specifying the <%= name %> starter.
19+
20+
```sh
21+
# create a new Gatsby site using the <%= name %> starter
22+
npx gatsby new my-<%= name %>-starter https://github.com/gatsbyjs/gatsby-starter-<%= name %>
23+
```
24+
25+
1. **Start developing.**
26+
27+
Navigate into your new site’s directory and start it up.
28+
29+
```sh
30+
cd my-<%= name %>-starter/
31+
gatsby develop
32+
```
33+
34+
1. **Open the source code and start editing!**
35+
36+
Your site is now running at `http://localhost:8000`!
37+
38+
\_Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).\_
39+
40+
Open the `my-<%= name %>-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
41+
42+
## 🧐 What's inside?
43+
44+
A quick look at the top-level files and directories you'll see in a Gatsby project.
45+
46+
.
47+
├── node_modules
48+
├── src
49+
├── .gitignore
50+
├── .prettierrc
51+
├── gatsby-browser.js
52+
├── gatsby-config.js
53+
├── gatsby-node.js
54+
├── gatsby-ssr.js
55+
├── LICENSE
56+
├── package-lock.json
57+
├── package.json
58+
└── README.md
59+
60+
1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
61+
62+
2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
63+
64+
3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
65+
66+
4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
67+
68+
5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
69+
70+
6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).
71+
72+
7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
73+
74+
8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
75+
76+
9. **`LICENSE`**: Gatsby is licensed under the MIT license.
77+
78+
10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
79+
80+
11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
81+
82+
12. **`README.md`**: A text file containing useful reference information about your project.
83+
84+
## 🎓 Learning Gatsby
85+
86+
Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:
87+
88+
- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
89+
90+
- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
91+
92+
## 💫 Deploy
93+
94+
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-<%= name %>)

starters/README.md

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<p align="center">
2+
<a href="https://gatsbyjs.org">
3+
<img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
4+
</a>
5+
</p>
6+
<h1 align="center">
7+
Gatsby Starters
8+
</h1>
9+
10+
<h3 align="center">
11+
⚛️ 📄 :rocket:
12+
</h3>
13+
<p align="center">
14+
<strong>Blazing fast modern site generator for React</strong><br>
15+
Go beyond static sites: build blogs, e-commerce sites, full-blown apps, and more with Gatsby.
16+
</p>
17+
<p align="center">
18+
<a href="https://github.com/gatsbyjs/gatsby/blob/master/LICENSE">
19+
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Gatsby is released under the MIT license." />
20+
</a>
21+
<a href="https://circleci.com/gh/DSchau/starters">
22+
<img src="https://circleci.com/gh/DSchau/starters.svg?style=shield" alt="Current CircleCI build status." />
23+
</a>
24+
<a href="https://www.npmjs.org/package/gatsby">
25+
<img src="https://img.shields.io/npm/v/gatsby.svg" alt="Current npm package version." />
26+
</a>
27+
<a href="https://npmcharts.com/compare/gatsby?minimal=true">
28+
<img src="https://img.shields.io/npm/dm/gatsby.svg" alt="Downloads per month on npm." />
29+
</a>
30+
<a href="https://gatsbyjs.org/docs/how-to-submit-a-pr/">
31+
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
32+
</a>
33+
</p>
34+
35+
<h3 align="center">
36+
<a href="https://gatsbyjs.org/docs/">Quickstart</a>
37+
<span> · </span>
38+
<a href="https://gatsbyjs.org/tutorial/">Tutorial</a>
39+
<span> · </span>
40+
<a href="https://gatsbyjs.org/plugins/">Plugins</a>
41+
<span> · </span>
42+
<a href="https://gatsbyjs.org/docs/gatsby-starters/">Starters</a>
43+
<span> · </span>
44+
<a href="https://gatsbyjs.org/showcase/">Showcase</a>
45+
<span> · </span>
46+
<a href="https://gatsbyjs.org/docs/how-to-contribute/">Contribute</a>
47+
<span> · </span>
48+
Support: <a href="https://spectrum.chat/gatsby-js">Spectrum</a>
49+
<span> & </span>
50+
<a href="https://discord.gg/0ZcbPKXt5bVoxkfV">Discord</a>
51+
</h3>
52+
53+
Gatsby is a modern framework for blazing fast websites. This repository is our monorepo for managing all the great GatsbyJS starters for the community.
54+
55+
## What's a starter?
56+
57+
A starter is a simplified example to get up and running with Gatsby quickly and easily. These starters are directly integrated with the Gatsby Command Line Interface (CLI).
58+
59+
## Official Starters
60+
61+
<!-- AUTO-GENERATED-CONTENT:START (LIST_STARTERS) -->
62+
63+
| Name | Demo | Description |
64+
| :-------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
65+
| [blog](https://github.com/gatsbyjs/gatsby-starter-blog) | [gatsby-starter-blog-demo.netlify.com](https://gatsby-starter-blog-demo.netlify.com/) | A starter for a blog powered by Gatsby and Markdown |
66+
| [default](https://github.com/gatsbyjs/gatsby-starter-default) | [gatsby-starter-default-demo.netlify.com](https://gatsby-starter-default-demo.netlify.com/) | A simple starter to get up and developing quickly with Gatsby |
67+
| [hello-world](https://github.com/gatsbyjs/gatsby-starter-hello-world) | [gatsby-starter-hello-world-demo.netlify.com](https://gatsby-starter-hello-world-demo.netlify.com/) | A simplified bare-bones starter for Gatsby |
68+
69+
<!-- AUTO-GENERATED-CONTENT:END -->
70+
71+
## 🚀 Get Up and Running in 5 Minutes
72+
73+
```sh
74+
# install the Gatsby CLI globally
75+
npm install -g gatsby-cli
76+
77+
# create a new Gatsby site using the default starter
78+
gatsby new my-blazing-fast-site
79+
```
80+
81+
e.g. `gatsby new blog my-blazing-fast-site` or `gatsby new hello-world my-blazing-fast-site` to use a specific starter!
82+
83+
This will clone the starter of specified name into the folder `my-blazing-fast-site` and get you up and running in under 5 minutes with Gatsby and a fantastic starter. We can't wait to see what you build!
84+
85+
## 🤝 How to Contribute
86+
87+
Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the Gatsby community! :muscle: :purple_heart:
88+
89+
Check out our [**Contributing Guide**][contributing-guide] for ideas on contributing and setup steps for getting our repositories up and running on your local machine.
90+
91+
### Code of Conduct
92+
93+
Gatsby is dedicated to building a welcoming, diverse, safe community. We expect everyone participating in the Gatsby community to abide by our [**Code of Conduct**][code-of-conduct]. Please read it. Please follow it. In the Gatsby community, we work hard to build each other up and create amazing things together. :muscle: :purple_heart:
94+
95+
### A note on how this repository is organized
96+
97+
This repository is a [monorepo][monorepo] managed using [Lerna][lerna]. This means there are [multiple packages--starters!!--][starters] managed in this codebase that are independently versioned but co-exist within this repository.
98+
99+
We have set-up read-only clones of all of the [starters][starters] in the official gatsbyjs organization. For example, the [`default` starter](starters/default) is available as a read-only clone at [`gatsbyjs/gatsby-starter-default`][gatsby-starter-default]. Please open PRs versus **this** repository rather than the read-only clones. Upon merge any starters that have been modified will be tagged and released.
100+
101+
[code-of-conduct]: https://gatsbyjs.org/docs/code-of-conduct/
102+
[contributing-guide]: https://gatsbyjs.org/docs/how-to-contribute/
103+
[monorepo]: https://trunkbaseddevelopment.com/monorepos
104+
[lerna]: https://github.com/lerna/lerna
105+
[starters]: /starters
106+
[gatsby-starter-default]: https://github.com/gatsbyjs/gatsby-starter-default

starters/blog/.eslintrc.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
module.exports = {
2+
"env": {
3+
"browser": true,
4+
"es6": true,
5+
},
6+
"plugins": [
7+
"react",
8+
],
9+
"globals": {
10+
"graphql": false,
11+
},
12+
"parserOptions": {
13+
"sourceType": "module",
14+
"ecmaFeatures": {
15+
"experimentalObjectRestSpread": true,
16+
"jsx": true,
17+
},
18+
}
19+
}

0 commit comments

Comments
 (0)