Merge pull request #157 from primer/use-gatsby

Set up Gatsby

.github/main.workflow

@@ -1,24 +1,17 @@
-workflow "Primer.style Workflow" {
+workflow "lint on push" {
   on = "push"
   resolves = [
-    "npm lint",
-    "deploy",
+    "lint"
   ]
 }
 
-action "npm install" {
+action "install" {
   uses = "actions/[email protected]"
-  args = "ci"
+  args = "install"
 }
 
-action "npm lint" {
+action "lint" {
   uses = "actions/[email protected]"
-  needs = ["npm install"]
+  needs = ["install"]
   args = "run lint"
 }
-
-action "deploy" {
-  uses = "primer/[email protected]"
-  needs = ["npm install"]
-  secrets = ["GITHUB_TOKEN", "NOW_TOKEN"]
-}

.gitignore

@@ -1,4 +1,5 @@
 *.log
+.cache/
 .DS_Store
+public/
 node_modules/
-.next/

.nvmrc

@@ -0,0 +1 @@
+11

CONTRIBUTING.md

@@ -0,0 +1,27 @@
+# Contributing to primer.style
+
+## Development
+
+1. Get [Yarn](https://yarnpkg.com).
+
+    ```sh
+    npm i -g yarn@latest
+    ```
+
+    **Why Yarn?** We use [selective resolution
+    overrides](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)
+    to work around React version discrepancies in several of our dependencies.
+
+1. Install dependencies:
+
+    ```sh
+    yarn
+    ```
+
+1. Run the development server:
+
+    ```sh
+    yarn start
+    # npm works, too!
+    npm start
+    ```

gatsby-browser.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import styled, {ThemeProvider, createGlobalStyle} from 'styled-components'
+import {BaseStyles, Link, theme} from '@primer/components'
+import {MDXProvider} from '@mdx-js/react'
+
+const GlobalStyle = createGlobalStyle`
+  a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`
+
+const components = {
+  a: Link
+  /*
+  pre: props => props.children,
+  code: Code,
+  inlineCode: InlineCode,
+  table: Table,
+  img: Image,
+  p: Paragraph,
+  hr: HorizontalRule,
+  blockquote: Blockquote,
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
+  ul: List,
+  ol: List.withComponent('ol'),
+  dl: DescriptionList,
+  */
+}
+
+export function wrapRootElement({element}) {
+  return (
+    <MDXProvider components={components}>
+      <ThemeProvider theme={theme}>
+        {element}
+      </ThemeProvider>
+    </MDXProvider>
+  )
+}
+
+export function wrapPageElement({element}) {
+  return (
+    <>
+      <GlobalStyle />
+      <BaseStyles fontSize={2}>{element}</BaseStyles>
+    </>
+  )
+}

gatsby-config.js

@@ -0,0 +1,43 @@
+const path = require('path')
+const siteMetadata = require('./meta')
+
+module.exports = {
+  siteMetadata,
+  plugins: [
+    'gatsby-plugin-sass',
+    'gatsby-plugin-styled-components',
+    {
+      resolve: 'gatsby-plugin-svgr',
+      options: {
+        svgo: false
+      }
+    },
+    'gatsby-plugin-react-helmet',
+    'gatsby-transformer-yaml',
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'pages',
+        path: path.resolve('./src/pages'),
+        layout: 'default'
+      }
+    },
+    /*
+    {
+      resolve: 'gatsby-plugin-mdx',
+      options: {
+        extensions: ['.mdx', '.md'],
+        defaultLayouts: {
+          default: require.resolve('./src/components/Layout.js')
+        }
+      }
+    },
+    */
+    {
+      resolve: 'gatsby-plugin-manifest',
+      options: {
+        icon: require.resolve('./src/icons/favicon-192.png')
+      }
+    }
+  ]
+}

gatsby-ssr.js

@@ -0,0 +1 @@
+export {wrapRootElement, wrapPageElement} from './gatsby-browser'

meta.js

@@ -0,0 +1,6 @@
+const {author} = require('./package.json')
+
+module.exports = {
+  title: 'Primer Design System',
+  author
+}

now.json

@@ -1,22 +1,19 @@
 {
-  "version": 1,
+  "version": 2,
   "name": "primer-style",
   "alias": "primer-style.now.sh",
-  "files": [
-    "pages",
-    "next.config.js",
-    "package.json",
-    "package-lock.json",
-    "src",
-    "static"
-  ],
-  "scale": {
-    "sfo": {
-      "min": 1,
-      "max": 3
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@now/static-build",
+      "config": {"distDir": "public"}
     }
-  },
-  "engines": {
-    "node": "10"
-  }
+  ],
+  "routes": [
+    {"src": "/components(/.*)?", "dest": "https://primer-components.now.sh"},
+    {"src": "/css(/.*)?", "dest": "https://primer-css.now.sh"},
+    {"src": "/design(/.*)?", "dest": "https://primer-design.now.sh"},
+    {"src": "/blueprints(/.*)?", "dest": "https://primer-blueprints.now.sh"},
+    {"src": "/presentations(/.*)?", "dest": "https://primer-presentations.now.sh"}
+  ]
 }