feat: Add gatsby-theme-cara (#12)

Converted https://github.com/LekoArts/gatsby-starter-portfolio-cara to a theme

.eslintrc.js

@@ -63,6 +63,7 @@ module.exports = {
     "react/no-danger": 0,
     "react/display-name": 1,
     "react/react-in-jsx-scope": 0,
+    "react/jsx-uses-react": 1,
     "react/forbid-prop-types": 0,
     "react/no-unescaped-entities": 0,
     "react/prop-types": 0,
@@ -76,7 +77,10 @@ module.exports = {
     "react-hooks/exhaustive-deps": "warn",
     quotes: [
       2,
-      "backtick"
+      "backtick",
+      {
+        "avoidEscape": true
+      }
     ],
     indent: ["error", 2, { SwitchCase: 1 }],
     "prettier/prettier": [

.prettierignore

@@ -4,4 +4,5 @@ public
 .vscode
 .DS_Store
 node_modules
-CHANGELOG.md
+CHANGELOG.md
+*.toml

examples/cara/LICENSE

@@ -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.

examples/cara/README.md

@@ -0,0 +1,80 @@
+<p align="center">
+  <a href="https://cara.lekoarts.de">
+    <img alt="LekoArts" src="https://img.lekoarts.de/gatsby/gatsby-site-illustration.png" />
+  </a>
+</p>
+<h1 align="center">
+  Gatsby Starter Portfolio: Cara
+</h1>
+
+<p align="center">
+  <a href="https://github.com/LekoArts/gatsby-starter-portfolio-cara/blob/master/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Gatsby Starter Portfolio: Cara 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="https://app.netlify.com/sites/portfolio-cara/deploys">
+      <img src="https://api.netlify.com/api/v1/badges/88bbaef1-6f83-4894-8acd-e6512ff39265/deploy-status" alt="Netlify Status" />
+    </a>
+</p>
+
+Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme [`@lekoarts/gatsby-theme-cara`](https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-cara).
+
+[**Demo Website**](https://cara.lekoarts.de)
+
+Also be sure to checkout other [Free & Open Source Gatsby Themes](https://themes.lekoarts.de)
+
+## ✨ Features
+
+- Theme UI-based theming
+- react-spring parallax effect
+- CSS Animations on Shapes
+
+## 🚀 Getting Started
+
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/LekoArts/gatsby-starter-portfolio-cara) [![Edit gatsby-starter-portfolio-cara](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/LekoArts/gatsby-starter-portfolio-cara/tree/master/)
+
+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/gatsby-starter-portfolio-cara
+```
+
+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-cara`](https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-cara).
+
+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.
+
+## 🎓 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.

examples/cara/gatsby-config.js

@@ -0,0 +1,47 @@
+require(`dotenv`).config({
+  path: `.env`,
+})
+
+module.exports = {
+  siteMetadata: {
+    siteTitleAlt: `Cara - Gatsby Starter Portfolio`,
+  },
+  plugins: [
+    {
+      resolve: `@lekoarts/gatsby-theme-cara`,
+      options: {},
+    },
+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        trackingId: process.env.GOOGLE_ANALYTICS_ID,
+      },
+    },
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `Cara - @lekoarts/gatsby-theme-cara`,
+        short_name: `Cara`,
+        description: `Playful and Colorful One-Page portfolio featuring Parallax effects and animations`,
+        start_url: `/`,
+        background_color: `#141821`,
+        theme_color: `#f6ad55`,
+        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`,
+  ],
+}

examples/cara/package.json

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "name": "cara",
+  "version": "0.0.1",
+  "author": "LekoArts <hello@lekoarts.de>",
+  "license": "MIT",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "d": "yarn develop",
+    "start": "gatsby develop",
+    "clean": "gatsby clean"
+  },
+  "dependencies": {
+    "@lekoarts/gatsby-theme-cara": "*",
+    "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"
+  }
+}

examples/cara/src/@lekoarts/gatsby-theme-cara/sections/intro.mdx

@@ -0,0 +1,3 @@
+# Hi, I'm Jane Doe
+
+I'm creating noice web experiences for the next generation of consumer-facing companies

package.json

@@ -8,10 +8,9 @@
     "examples/*"
   ],
   "scripts": {
-    "dev:emma": "yarn workspace emma develop",
-    "build:emma": "yarn workspace emma build",
-    "dev:status-dashboard": "yarn workspace status-dashboard develop",
-    "build:status-dashboard": "yarn workspace status-dashboard build",
+    "cara": "yarn workspace cara",
+    "emma": "yarn workspace emma",
+    "dashboard": "yarn workspace dashboard",
     "lint": "eslint './themes/**/*' './examples/**/*'",
     "lint:fix": "yarn lint --fix",
     "format": "prettier \"{examples,themes}/**/*.md\" --write",

themes/gatsby-theme-cara/.npmignore

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

themes/gatsby-theme-cara/README.md

@@ -0,0 +1,133 @@
+<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-cara
+</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-cara is released under the MIT license." />
+  </a>
+  <a href="https://www.npmjs.org/package/@lekoarts/gatsby-theme-cara">
+    <img src="https://img.shields.io/npm/v/@lekoarts/gatsby-theme-cara.svg" alt="Current npm package version." />
+  </a>
+  <a href="https://npmcharts.com/compare/@lekoarts/gatsby-theme-cara?minimal=true">
+    <img src="https://img.shields.io/npm/dm/@lekoarts/gatsby-theme-cara.svg" alt="Downloads per month on npm." />
+  </a>
+  <a href="https://npmcharts.com/compare/@lekoarts/gatsby-theme-cara?minimal=true">
+    <img src="https://img.shields.io/npm/dt/@lekoarts/gatsby-theme-cara.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>
+
+Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with [MDX](https://mdxjs.com/) and [Theme UI](https://theme-ui.com/).
+
+[**Demo Website**](https://cara.lekoarts.de)
+
+Also be sure to checkout other [Free & Open Source Gatsby Themes](https://themes.lekoarts.de)
+
+## Features
+
+- Theme UI-based theming
+- react-spring parallax effect
+- CSS Animations on Shapes
+- Light/Dark mode
+
+## Installation
+
+```sh
+npm install @lekoarts/gatsby-theme-cara
+```
+
+### Install as a starter
+
+This will generate a new site (with the folder name "cara") that pre-configures use of the theme including example content and additional plugins.
+
+```sh
+gatsby new cara LekoArts/gatsby-starter-portfolio-cara
+```
+
+## Usage
+
+### Theme options
+
+| Key        | Default Value | Description            |
+| ---------- | ------------- | ---------------------- |
+| `basePath` | `/`           | Root url for the theme |
+
+#### Example usage
+
+```js
+// gatsby-config.js
+module.exports = {
+  plugins: [
+    {
+      resolve: `@lekoarts/gatsby-theme-cara`,
+      options: {
+        // basePath defaults to `/`
+        basePath: `/sideproject`
+      }
+    }
+  ]
+};
+```
+
+#### Additional configuration
+
+In addition to the theme options, there are a handful of items you can customize via the `siteMetadata` object in your site's `gatsby-config.js`
+
+```js
+// gatsby-config.js
+module.exports = {
+  siteMetadata: {
+    // Used for the title template on pages other than the index site
+    siteTitle: `Cara`,
+    // Default title of the page
+    siteTitleAlt: `Cara - @lekoarts/gatsby-theme-cara`,
+    // Can be used for e.g. JSONLD
+    siteHeadline: `Cara - Gatsby Theme from @lekoarts`,
+    // Will be used to generate absolute URLs for og:image etc.
+    siteUrl: `https://cara.lekoarts.de`,
+    // Used for SEO
+    siteDescription: `Playful and Colorful One-Page portfolio featuring Parallax effects and animations`,
+    // Will be set on the <html /> tag
+    siteLanguage: `en`,
+    // Used for og:image and must be placed inside the `static` folder
+    siteImage: `/banner.jpg`,
+    // Twitter Handle
+    author: `@lekoarts_de`
+  }
+};
+```
+
+### Editing the content
+
+The content of the page is managed by `.mdx` files inside the theme's `sections` folder. You can edit the files by shadowing them in your site.
+
+These files are available: `intro.mdx`, `projects.mdx`, `about.mdx`, `contact.mdx`
+
+See the [example](https://github.com/LekoArts/gatsby-themes/tree/master/examples/cara/src/@lekoarts/gatsby-theme-cara/sections) that shadows via `src/@lekoarts/gatsby-theme-cara/sections/intro.mdx`:
+
+```md
+# Hi, I'm Jane Doe
+
+I'm creating noice web experiences for the next generation of consumer-facing companies
+```
+
+> The other headings should be `<h2>` headings!
+
+You also have access to the `<ProjectCard />` component/shortcode which is used in the `projects.mdx` section. The component takes the props `title` (string), `link` (string), `bg` (string) and `children` (React.ReactNode). You would use it like that:
+
+```md
+## Projects
+
+<ProjectCard title="Freiheit" link="https://www.behance.net/gallery/58937147/Freiheit" bg="linear-gradient(to right, #D4145A 0%, #FBB03B 100%)">
+This project is my entry to Adobe's #ChallengeYourPerspective contest.
+</ProjectCard>
+```

themes/gatsby-theme-cara/gatsby-config.js

@@ -0,0 +1,27 @@
+module.exports = ({ basePath = `/` }) => ({
+  siteMetadata: {
+    siteTitle: `Cara`,
+    siteTitleAlt: `Cara - @lekoarts/gatsby-theme-cara`,
+    siteHeadline: `Cara - Gatsby Theme from @lekoarts`,
+    siteUrl: `https://cara.lekoarts.de`,
+    siteDescription: `Playful and Colorful One-Page portfolio featuring Parallax effects and animations`,
+    siteLanguage: `en`,
+    siteImage: `/banner.jpg`,
+    author: `@lekoarts_de`,
+    basePath,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `sections`,
+        path: `${__dirname}/src/sections`,
+      },
+    },
+    `gatsby-plugin-mdx`,
+    `gatsby-plugin-react-helmet`,
+    `gatsby-plugin-typescript`,
+    `gatsby-plugin-emotion`,
+    `gatsby-plugin-theme-ui`,
+  ],
+})