feat: Add plop.js generators (#26)

* chore: Add plop and plop templates

* Modify templates, fix cypress path, add readme-name

* Remove kebabCase from readme-name

* Remove unnecessary brackets

* Use name in seo component meta tag

Fixes #25

.prettierignore

@@ -14,4 +14,5 @@ www/src/webgl/uniforms.js
 cypress/e2e/build
 LICENSE
 *.txt
-**/static/**
+**/static/**
+**/*.hbs

examples/cara/README.md

@@ -65,6 +65,10 @@ This starter creates a new Gatsby site that installs and configures the theme [`
 
 Please have a look at the theme's README and files to see what options are available and how you can shadow the various components including Theme UI.
 
+### Change your `static` folder
+
+The `static` folder contains the icons, social media images and robots.txt. Don't forget to change these files, too!
+
 ## 🎓 Learning Gatsby
 
 Looking for more guidance? Full documentation for Gatsby lives [on Gatsby's website](https://www.gatsbyjs.org/).

package.json

@@ -17,6 +17,7 @@
     "lint:ci": "yarn lint --format junit -o results/eslint/result.xml",
     "format": "prettier \"**/*.{md,mdx,json}\" --write",
     "lerna": "lerna",
+    "plop": "plop",
     "cy:run": "cross-env CYPRESS_baseUrl=http://localhost:9000 cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=results/cypress/result.xml'",
     "cy:open": "cypress open",
     "start-server-and-test": "start-server-and-test",
@@ -51,6 +52,7 @@
     "husky": "^3.0.2",
     "lerna": "^3.15.0",
     "lint-staged": "^9.2.1",
+    "plop": "^2.4.0",
     "prettier": "^1.18.2",
     "start-server-and-test": "^1.9.1",
     "typescript": "^3.5.2"

plop-templates/cypress-test.ts.hbs

@@ -0,0 +1,9 @@
+/// <reference types="../support/index" />
+/// <reference types="cypress" />
+/// <reference types="@testing-library/cypress/typings" />
+
+describe(`gatsby-theme-{{kebabCase name}}`, () => {
+  it(`should work`, () => {
+    cy.visit(`/`).assertRoute(`/`)
+  })
+})

plop-templates/example/LICENSE.hbs

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 LeKoArts
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

plop-templates/example/README.md.hbs

@@ -0,0 +1,80 @@
+<p align="center">
+  <a href="https://{{kebabCase name}}.lekoarts.de">
+    <img alt="LekoArts" src="https://img.lekoarts.de/gatsby/gatsby-site-illustration.png" />
+  </a>
+</p>
+<h1 align="center">
+  {{readme-name}}
+</h1>
+
+<p align="center">
+  <a href="https://github.com/LekoArts/{{kebabCase starter-name}}/blob/master/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="{{readme-name}} is released under the MIT license." />
+  </a>
+  <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
+  <a href="https://twitter.com/intent/follow?screen_name=lekoarts_de">
+    <img src="https://img.shields.io/twitter/follow/lekoarts_de.svg?label=Follow%20@lekoarts_de" alt="Follow @lekoarts_de" />
+  </a>
+  <a href="TODO">
+      <img src="TODO" alt="Netlify Status" />
+    </a>
+</p>
+
+Stub description for {{readme-name}}. Using the Gatsby Theme [`@lekoarts/gatsby-theme-{{kebabCase name}}`](https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-{{kebabCase name}}).
+
+[**Demo Website**](https://{{kebabCase name}}.lekoarts.de)
+
+Also be sure to checkout other [Free & Open Source Gatsby Themes](https://themes.lekoarts.de)
+
+## ✨ Features
+
+- TODO
+
+## 🚀 Getting Started
+
+1. **Create a Gatsby site.**
+
+Use the Gatsby CLI to create a new site, specifying this project
+
+```sh
+gatsby new project-name https://github.com/LekoArts/{{kebabCase starter-name}}
+```
+
+2. **Start developing.**
+
+Navigate into your new site's directory and start it up.
+
+```sh
+cd project-name
+gatsby develop
+```
+
+3. **Open the code and start customizing!**
+
+Your site is now running at `http://localhost:8000`!
+
+If you want to learn more about how you can use a Gatsby starter that is configured with a Gatsby theme, you can checkout this [shorter](https://www.gatsbyjs.org/docs/themes/using-a-gatsby-theme/) or [longer](https://www.gatsbyjs.org/tutorial/using-a-theme/) tutorial. The tutorials don't exactly apply to this starter however the concepts are the same.
+
+## 📝 Using and modifying this starter
+
+This starter creates a new Gatsby site that installs and configures the theme [`@lekoarts/gatsby-theme-{{kebabCase name}}`](https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-{{kebabCase name}}).
+
+Please have a look at the theme's README and files to see what options are available and how you can shadow the various components including Theme UI.
+
+### Change your `static` folder
+
+The `static` folder contains the icons, social media images and robots.txt. Don't forget to change these files, too!
+
+## 🎓 Learning Gatsby
+
+Looking for more guidance? Full documentation for Gatsby lives [on Gatsby's website](https://www.gatsbyjs.org/).
+
+### Themes
+
+- To learn more about Gatsby themes specifically, we recommend checking out the [theme docs](https://www.gatsbyjs.org/docs/themes/).
+
+### General
+
+- **For most developers, I recommend starting with the [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.
+
+- **To dive straight into code samples, head [to Gatsby's documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Reference Guides_ and _Gatsby API_ sections in the sidebar.

plop-templates/example/gatsby-config.js.hbs

@@ -0,0 +1,47 @@
+require(`dotenv`).config({
+  path: `.env`,
+})
+
+module.exports = {
+  siteMetadata: {
+    siteTitleAlt: `{{readme-name}} - TODO`,
+  },
+  plugins: [
+    {
+      resolve: `@lekoarts/gatsby-theme-{{kebabCase name}}`,
+      options: {},
+    },
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        trackingId: process.env.GOOGLE_ANALYTICS_ID,
+      },
+    },
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `{{kebabCase name}} - @lekoarts/gatsby-theme-{{kebabCase name}}`,
+        short_name: `{{kebabCase name}}`,
+        description: `Stub description for {{kebabCase name}}`,
+        start_url: `/`,
+        background_color: `#fff`,
+        theme_color: `#b83280`,
+        display: `standalone`,
+        icons: [
+          {
+            src: `/android-chrome-192x192.png`,
+            sizes: `192x192`,
+            type: `image/png`,
+          },
+          {
+            src: `/android-chrome-512x512.png`,
+            sizes: `512x512`,
+            type: `image/png`,
+          },
+        ],
+      },
+    },
+    `gatsby-plugin-offline`,
+    `gatsby-plugin-netlify`,
+  ],
+}

plop-templates/example/index-page.js.hbs

@@ -0,0 +1,5 @@
+import React from "react"
+
+const Index = () => <div>Hello from the {{kebabCase name}} example!</div>
+
+export default Index

plop-templates/example/package.json.hbs

@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "name": "{{kebabCase name}}",
+  "version": "0.0.1",
+  "author": "LekoArts <hello@lekoarts.de>",
+  "license": "MIT",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "develop:cypress": "cross-env CYPRESS_SUPPORT=y yarn develop",
+    "build:cypress": "cross-env CYPRESS_SUPPORT=y yarn build",
+    "start": "gatsby develop",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  },
+  "dependencies": {
+    "@lekoarts/gatsby-theme-{{kebabCase name}}": "*",
+    "gatsby": "^2.13.3",
+    "gatsby-plugin-google-analytics": "^2.1.4",
+    "gatsby-plugin-manifest": "^2.2.3",
+    "gatsby-plugin-netlify": "^2.1.3",
+    "gatsby-plugin-offline": "^2.2.4",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "devDependencies": {
+    "cross-env": "^5.2.0"
+  }
+}

plop-templates/theme/.npmignore.hbs

@@ -0,0 +1,8 @@
+.cache
+node_modules
+public
+projects
+
+.idea
+.vscode
+.DS_Store

plop-templates/theme/README.md.hbs

@@ -0,0 +1,78 @@
+<p align="center">
+  <a href="https://themes.lekoarts.de">
+    <img alt="Gatsby Theme" src="https://img.lekoarts.de/gatsby/gatsby-themes-illustration.png" />
+  </a>
+</p>
+<h1 align="center">
+  @lekoarts/gatsby-theme-{{kebabCase name}}
+</h1>
+
+<p align="center">
+  <a href="https://github.com/LekoArts/gatsby-themes/blob/master/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="@lekoarts/gatsby-theme-{{kebabCase name}} is released under the MIT license." />
+  </a>
+  <a href="https://www.npmjs.org/package/@lekoarts/gatsby-theme-{{kebabCase name}}">
+    <img src="https://img.shields.io/npm/v/@lekoarts/gatsby-theme-{{kebabCase name}}.svg" alt="Current npm package version." />
+  </a>
+  <a href="https://npmcharts.com/compare/@lekoarts/gatsby-theme-{{kebabCase name}}?minimal=true">
+    <img src="https://img.shields.io/npm/dm/@lekoarts/gatsby-theme-{{kebabCase name}}.svg" alt="Downloads per month on npm." />
+  </a>
+  <a href="https://npmcharts.com/compare/@lekoarts/gatsby-theme-{{kebabCase name}}?minimal=true">
+    <img src="https://img.shields.io/npm/dt/@lekoarts/gatsby-theme-{{kebabCase name}}.svg" alt="Total downloads on npm." />
+  </a>
+  <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
+  <a href="https://twitter.com/intent/follow?screen_name=lekoarts_de">
+      <img src="https://img.shields.io/twitter/follow/lekoarts_de.svg?label=Follow%20@lekoarts_de" alt="Follow @lekoarts_de" />
+    </a>
+</p>
+
+Show the live statuses of your Netlify and CircleCI builds on your website! Easily integrate the customizable components into your site and adapt them to your theme (utilizing Theme UI).
+
+[**Demo Website**](https://{{kebabCase name}}.lekoarts.de) ([Source Code](https://github.com/LekoArts/{{kebabCase starter-name}}))
+
+Also be sure to checkout other [Free & Open Source Gatsby Themes](https://themes.lekoarts.de)
+
+## Features
+
+- TODO
+
+## Installation
+
+```sh
+npm install @lekoarts/gatsby-theme-{{kebabCase name}}
+```
+
+### Install as a starter
+
+This will generate a new site that pre-configures use of the theme. Perfect for a single-page usage (e.g. `https://status.your-domain.tld`).
+
+```sh
+gatsby new {{kebabCase name}} LekoArts/{{kebabCase starter-name}}
+```
+
+[**View the starter's code**](https://github.com/LekoArts/{{kebabCase starter-name}})
+
+## Usage
+
+### Theme options
+
+| Key              | Default Value | Description                                                                                                                           |
+| ---------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `option` | `{}`          | text |
+
+#### Example usage
+
+```js
+// gatsby-config.js
+module.exports = {
+  plugins: [
+    {
+      resolve: `@lekoarts/gatsby-theme-{{kebabCase name}}`,
+      options: {
+          // TODO
+        }
+      }
+    }
+  ]
+};
+```

plop-templates/theme/gatsby-config.js.hbs

@@ -0,0 +1,17 @@
+module.exports = themeOptions => ({
+  siteMetadata: {
+    siteTitle: `{{readme-name}}`,
+    siteTitleAlt: `{{readme-name}} - @lekoarts/gatsby-theme-{{kebabCase name}}`,
+    siteHeadline: `{{readme-name}} - Gatsby Theme from @lekoarts`,
+    siteUrl: `https://{{kebabCase name}}.lekoarts.de`,
+    siteDescription: `Stub description for {{kebabCase name}}`,
+    siteLanguage: `en`,
+    siteImage: `/banner.jpg`,
+    author: `@lekoarts_de`,
+    basePath,
+  },
+  plugins: [
+    `gatsby-plugin-typescript`,
+    `gatsby-plugin-theme-ui`,
+  ],
+})

plop-templates/theme/index.js.hbs

@@ -0,0 +1 @@
+// noop

plop-templates/theme/package.json.hbs

@@ -0,0 +1,50 @@
+{
+  "name": "@lekoarts/gatsby-theme-{{kebabCase name}}",
+  "version": "0.0.1",
+  "author": "LekoArts <hello@lekoarts.de>",
+  "description": "Stub description for {{kebabCase name}}",
+  "license": "MIT",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "clean": "gatsby clean"
+  },
+  "peerDependencies": {
+    "gatsby": "^2.13.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "devDependencies": {
+    "gatsby": "^2.13.51",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.15",
+    "@mdx-js/react": "^1.1.5",
+    "@theme-ui/presets": "^0.2.15",
+    "gatsby-plugin-theme-ui": "^0.2.18",
+    "gatsby-plugin-typescript": "^2.1.2",
+    "theme-ui": "^0.2.21"
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-theme",
+    "gatsby-plugin",
+    "lekoarts"
+  ],
+  "bugs": {
+    "url": "https://github.com/LekoArts/gatsby-themes/issues"
+  },
+  "homepage": "https://themes.lekoarts.de",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LekoArts/gatsby-themes.git",
+    "directory": "themes/gatsby-theme-{{kebabCase name}}"
+  }
+}