feat: redesign (#59)

* chore: rename to gatsby-theme-oss * chore: strip down theme * feat: fetch GitHub data based on configured username * chore: restore work from stale redesign branch * chore: rename Message component Subtitle * refactor: move title and subtitle render into the index Having separate components for them was a bit too much. The Title component spec was also replaced by a spec for the whole index page including a fixture for the graphql data query * fix: move tests out of pages dir to avoid build error * style: use sans-serif for headings instead of monospace * fix: update imports to fix specs * feat: add svg illustration Theme consumers will be able to override the illustration using shadowing (https://www.gatsbyjs.org/docs/themes/shadowing/). I initially tried with PNGs, but ran into an issue with gatsby-image (gatsbyjs/gatsby#22635). Will revisit the whole illustration topic when this has been cleared out. * fix: resize svg illustration * style: update theme values * style: redesign theme using theme ui
robinmetral · Mar 29, 2020 · 484703a · 484703a
1 parent 9259e60
commit 484703a
Show file tree

Hide file tree

Showing 29 changed files with 3,702 additions and 1,634 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
 node_modules
 .cache
 public
-.env
+.env
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# gatsby-theme-dev
+# gatsby-theme-oss
 
 This repo uses yarn workspaces and contains different packages:
 

diff --git a/package.json b/package.json
@@ -9,8 +9,8 @@
     "lint": "eslint --ignore-path .gitignore . --ext js",
     "lint:fix": "yarn lint --fix",
     "test": "jest",
-    "develop": "yarn workspace gatsby-starter-dev develop",
-    "build": "yarn workspace gatsby-starter-dev build",
+    "develop": "yarn workspace gatsby-starter-oss develop",
+    "build": "yarn workspace gatsby-starter-oss build",
     "release": "lerna publish"
   },
   "devDependencies": {

diff --git a/starter/CHANGELOG.md b/starter/CHANGELOG.md
@@ -5,16 +5,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # 0.0.0-dev.0 (2019-10-27)
 
-
 ### Features
 
-* **global:** rename to gatsby theme dev ([#54](https://github.com/robinmetral/gatsby-theme-dev/issues/54)) ([e248ac4](https://github.com/robinmetral/gatsby-theme-dev/commit/e248ac46140fb5a465c658c5ed7b48870d8d2b9f))
-
-
+- **global:** rename to gatsby theme dev ([#54](https://github.com/robinmetral/gatsby-theme-oss/issues/54)) ([e248ac4](https://github.com/robinmetral/gatsby-theme-oss/commit/e248ac46140fb5a465c658c5ed7b48870d8d2b9f))
 
 # 1.0.0 (2019-10-27)
 
-
 ### Bug Fixes
 
-* roll back versions to 0.0.0-dev to allow semantic-release to bump ([#53](https://github.com/robinmetral/gatsby-theme-dev/issues/53)) ([42c0469](https://github.com/robinmetral/gatsby-theme-dev/commit/42c0469e620f716c719d69609a1f771ef66ffc9e))
+- roll back versions to 0.0.0-dev to allow semantic-release to bump ([#53](https://github.com/robinmetral/gatsby-theme-oss/issues/53)) ([42c0469](https://github.com/robinmetral/gatsby-theme-oss/commit/42c0469e620f716c719d69609a1f771ef66ffc9e))
diff --git a/starter/README.md b/starter/README.md
@@ -1 +1,3 @@
-This is the demo for `gatsby-theme-dev`.
+# gatsby-starter-oss
+
+This is an demo site using `gatsby-theme-oss`.
diff --git a/starter/gatsby-config.js b/starter/gatsby-config.js
@@ -1,20 +1,15 @@
+require("dotenv").config();
+
 module.exports = {
   plugins: [
     {
-      resolve: "gatsby-theme-dev",
+      resolve: "gatsby-theme-oss",
       options: {
-        title: "Robin Métral",
-        message:
-          "I'm the developer behind gatsby-theme-dev. Check out my other projects on GitHub.",
-        pattern: "Arrows",
-        color: "#4c4c4c",
-        titleFont: "Righteous",
-        messageFont: "Roboto",
-        social: [
-          "https://github.com/robinmetral",
-          "https://twitter.com/robinmetral",
-          "https://www.robinmetral.com"
-        ]
+        title: "Hi, I'm Robin 👋",
+        subtitle:
+          "I'm the developer behind gatsby-theme-oss. Check out my other open-source projects below!",
+        github_username: "robinmetral",
+        github_token: process.env.GITHUB_TOKEN
       }
     }
   ]

diff --git a/starter/icon.png b/starter/icon.png
diff --git a/starter/package.json b/starter/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "gatsby-starter-dev",
+  "name": "gatsby-starter-oss",
   "version": "0.0.0",
   "private": true,
   "main": "index.js",
@@ -9,8 +9,8 @@
     "build": "gatsby build"
   },
   "dependencies": {
-    "gatsby": "^2.17.4",
-    "gatsby-theme-dev": "^0.0.0",
+    "gatsby": "^2.20.8",
+    "gatsby-theme-oss": "^0.0.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0"
   }

diff --git a/theme/CHANGELOG.md b/theme/CHANGELOG.md
@@ -3,30 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.0.1](https://github.com/robinmetral/gatsby-theme-dev/compare/[email protected]@0.0.1) (2019-10-27)
-
+## [0.0.1](https://github.com/robinmetral/gatsby-theme-oss/compare/[email protected]@0.0.1) (2019-10-27)
 
 ### Bug Fixes
 
-* **global:** fix version numbers for lerna publish ([#56](https://github.com/robinmetral/gatsby-theme-dev/issues/56)) ([6c3d3f9](https://github.com/robinmetral/gatsby-theme-dev/commit/6c3d3f902090656b337ac1de06c24194eb494b67))
-
-
-
-
+- **global:** fix version numbers for lerna publish ([#56](https://github.com/robinmetral/gatsby-theme-oss/issues/56)) ([6c3d3f9](https://github.com/robinmetral/gatsby-theme-oss/commit/6c3d3f902090656b337ac1de06c24194eb494b67))
 
 # 0.0.0-dev.0 (2019-10-27)
 
-
 ### Features
 
-* **global:** rename to gatsby theme dev ([#54](https://github.com/robinmetral/gatsby-theme-dev/issues/54)) ([e248ac4](https://github.com/robinmetral/gatsby-theme-dev/commit/e248ac46140fb5a465c658c5ed7b48870d8d2b9f))
-
-
+- **global:** rename to gatsby theme dev ([#54](https://github.com/robinmetral/gatsby-theme-oss/issues/54)) ([e248ac4](https://github.com/robinmetral/gatsby-theme-oss/commit/e248ac46140fb5a465c658c5ed7b48870d8d2b9f))
 
 # 1.0.0 (2019-10-27)
 
-
 ### Bug Fixes
 
-* fix CI release stage ([#50](https://github.com/robinmetral/gatsby-theme-dev/issues/50)) ([9e4b99f](https://github.com/robinmetral/gatsby-theme-dev/commit/9e4b99fed2f5166e374d2bf45aac63f4edc5db5d))
-* roll back versions to 0.0.0-dev to allow semantic-release to bump ([#53](https://github.com/robinmetral/gatsby-theme-dev/issues/53)) ([42c0469](https://github.com/robinmetral/gatsby-theme-dev/commit/42c0469e620f716c719d69609a1f771ef66ffc9e))
+- fix CI release stage ([#50](https://github.com/robinmetral/gatsby-theme-oss/issues/50)) ([9e4b99f](https://github.com/robinmetral/gatsby-theme-oss/commit/9e4b99fed2f5166e374d2bf45aac63f4edc5db5d))
+- roll back versions to 0.0.0-dev to allow semantic-release to bump ([#53](https://github.com/robinmetral/gatsby-theme-oss/issues/53)) ([42c0469](https://github.com/robinmetral/gatsby-theme-oss/commit/42c0469e620f716c719d69609a1f771ef66ffc9e))
diff --git a/theme/README.md b/theme/README.md
@@ -1,124 +1,3 @@
-# gatsby-theme-dev
+# gatsby-theme-oss
 
 A Gatsby theme to showcase your open-source work.
-
-- [:fire: Features](#fire-features)
-  - [:rocket: Blazing quick setup](#rocket-blazing-quick-setup)
-  - [:trophy: Lightouse scores](#trophy-lighthouse-scores)
-  - [:abc: Built-in Google Fonts support](#abc-built-in-google-fonts-support)
-  - [:nail_care: CSS3 background patterns](#nail_care-css3-background-patterns)
-  - [:link: Social links](#link-social-links)
-  - [:dizzy: Transitions](#dizzy-transitions)
-- [:wrench: Usage](#wrench-usage)
-  - [:nut_and_bolt: Dependencies](#nut_and_bolt-dependencies)
-  - [:arrow_down: Install](#arrow_down-install)
-  - [:zap: Setup](#zap-setup)
-  - [:moneybag: Licence](#moneybag-licence)
-
----
-
-## :fire: Features
-
-### :rocket: Blazing quick setup
-
-Deploy in minutes: everything is set up in `gatsby-config.js`.
-
-See [Setup](#zap-setup) for instructions.
-
-### :trophy: Lighthouse scores
-
-![Lightouse scores screenshot](https://raw.githubusercontent.com/robinmetral/gatsby-theme-dev/master/20190414-lighthouse-screenshot.png)
-
-Performance is only hindered by Google Fonts being hosted on Google's CDN.
-
-If you don't need to dynamically change typefaces, consider self-hosting webfonts. I recommend [typefaces](https://github.com/KyleAMathews/typefaces) by Kyle Matthews.
-
-### :abc: Built-in Google Fonts support
-
-The Google Font(s) you choose in `gatsby-config.js` will be dynamically imported from Google's CDN.
-
-### :nail_care: CSS3 background patterns
-
-Choose from a selection of [CSS3 background patterns](https://github.com/LeaVerou/css3patterns) by Lea Verou.
-
-The available patterns can be found [here](https://gatsby-theme-dev.netlify.com/patterns)
-
-### :link: Social links
-
-Dynamically render social icons with Jake Trent's [react-social-icons](https://github.com/jaketrent/react-social-icons).
-
-### :dizzy: Transitions
-
-Transitions on page rendering with `react-transition-group`.
-
----
-
-## :wrench: Usage
-
-### :nut_and_bolt: Dependencies
-
-- npm or yarn
-- gatsby
-
-### :arrow_down: Install
-
-1. Clone the repository into `my-gatsby-site`
-
-```
-git clone https://github.com/robinmetral/gatsby-theme-dev.git my-gatsby-site
-cd my-gatsby-site
-```
-
-2. Install dependencies
-
-| npm           | yarn           |
-| ------------- | -------------- |
-| `npm install` | `yarn install` |
-
-3. Start the local server
-
-```
-gatsby develop
-```
-
-### :zap: Setup
-
-Edit the `siteMetadata` variables in `gatsby-config.js`:
-
-| variable      | required? | type                           | value                                                                  |
-| ------------- | --------- | ------------------------------ | ---------------------------------------------------------------------- |
-| `title`       | yes       | string (any)                   | The page's heading and your site's `<title>`                           |
-| `message`     | yes       | string (any)                   | The message to display below the heading                               |
-| `pattern`     | yes       | string (pattern name)          | The CSS3 background pattern. See all available patterns at `/patterns` |
-| `color`       | yes       | string (hex color code with #) | The color for text and social icons                                    |
-| `headingFont` | yes       | string (Google Font name)      | The heading's Google Font                                              |
-| `textFont`    | yes       | string (Google Font name)      | The message's Google Font                                              |
-| `social`      | yes       | array of url strings           | Array of social links, powered by `react-social-icons`                 |
-
-Example setup:
-
-```javascript
-module.exports = {
-  siteMetadata: {
-    title: "Hi, looking for a starter? 🔎",
-    message:
-      "🚧 Host me on your domain while you build your new Gatsby site! (or keep me longer, that's fine too) 👷",
-    pattern: "Seigaiha",
-    // choose a color for your text and icons
-    color: "#4c4c4c",
-    // choose a Google Font for the title
-    headingFont: "Lobster",
-    // choose a Google Font for the message
-    textFont: "Montserrat",
-    // display social icon links by adding your social urls to the array
-    social: [
-      "https://github.com/robinmetral/gatsby-theme-dev",
-      "https://twitter.com/robinmetral"
-    ]
-  }
-};
-```
-
-### :moneybag: Licence
-
-MIT
diff --git a/theme/gatsby-config.js b/theme/gatsby-config.js
@@ -1,37 +1,36 @@
-module.exports = ({
-  title,
-  message,
-  pattern,
-  color,
-  titleFont,
-  messageFont,
-  social
-}) => {
+module.exports = ({ title, subtitle, github_token }) => {
   return {
     siteMetadata: {
-      title: title || "Jane Doe",
-      message: message || "I'm a developer",
-      pattern: pattern || "Arrows",
-      color: color || "#4c4c4c",
-      titleFont: titleFont || "Righteous",
-      messageFont: messageFont || "Roboto",
-      social: social || ["https://github.com/robinmetral/gatsby-theme-dev"]
+      title,
+      subtitle
     },
     plugins: [
       {
-        resolve: "gatsby-plugin-manifest",
+        resolve: `gatsby-source-graphql`,
+        options: {
+          typeName: `GitHub`,
+          fieldName: `github`,
+          url: `https://api.github.com/graphql`,
+          headers: {
+            Authorization: `Bearer ${github_token}`
+          }
+        }
+      },
+      {
+        resolve: `gatsby-plugin-manifest`,
         options: {
           name: title,
           short_name: title,
-          start_url: "/",
-          background_color: color,
-          theme_color: color,
-          display: "standalone",
-          icon: "icon.png"
+          start_url: `/`,
+          background_color: `#fff`,
+          theme_color: `#fff`,
+          display: `standalone`,
+          icon: `icon.png`
         }
       },
-      "gatsby-plugin-offline",
-      "gatsby-plugin-react-helmet"
+      `gatsby-plugin-offline`,
+      `gatsby-plugin-react-helmet`,
+      `gatsby-plugin-theme-ui`
     ]
   };
 };
diff --git a/theme/gatsby-node.js b/theme/gatsby-node.js
@@ -0,0 +1,16 @@
+// expose the github username to all pages via context
+exports.onCreatePage = (
+  { page, actions: { createPage, deletePage } },
+  themeOptions
+) => {
+  // remove page without context
+  deletePage(page);
+  // create page with context
+  createPage({
+    ...page,
+    context: {
+      ...page.context,
+      github_username: themeOptions.github_username
+    }
+  });
+};
diff --git a/theme/package.json b/theme/package.json
@@ -1,30 +1,33 @@
 {
-  "name": "gatsby-theme-dev",
+  "name": "gatsby-theme-oss",
   "description": "A Gatsby theme to showcase your open-source work",
   "version": "0.0.0",
   "license": "MIT",
   "main": "gatsby-config.js",
   "author": "Robin Métral <[email protected]>",
   "dependencies": {
+    "@theme-ui/components": "^0.3.1",
     "gatsby-plugin-manifest": "^2.2.23",
     "gatsby-plugin-offline": "^3.0.16",
     "gatsby-plugin-react-helmet": "^3.1.13",
+    "gatsby-plugin-theme-ui": "^0.3.0",
+    "gatsby-source-graphql": "^2.3.0",
+    "lodash": "^4.17.15",
     "react-helmet": "^5.2.1",
-    "react-social-icons": "^4.1.0",
-    "react-transition-group": "^4.2.2"
+    "theme-ui": "^0.3.1"
   },
   "keywords": [
     "gatsby"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/robinmetral/gatsby-theme-dev"
+    "url": "https://github.com/robinmetral/gatsby-theme-oss"
   },
   "bugs": {
-    "url": "https://github.com/robinmetral/gatsby-theme-dev/issues"
+    "url": "https://github.com/robinmetral/gatsby-theme-oss/issues"
   },
   "peerDependencies": {
-    "gatsby": "^2.17.4",
+    "gatsby": "^2.20.8",
     "react": "^16.11.0",
     "react-dom": "^16.11.0"
   }