Merge branch 'master' into fix-links

.travis.yml

@@ -5,5 +5,11 @@ node_js:
 script:
   - npm run build
 
+deploy:
+  - on:
+      branch: master
+    provider: script
+    script: script/deploy --token="$NOW_TOKEN"
+
 notifications:
   slack: github:4OisIoqZYyMlWcw3hFtZgbmh

now.json

@@ -1,3 +1,9 @@
 {
-  "name": "primer-style"
+  "name": "primer-style",
+  "scale": {
+    "sfo": {
+      "min": 1,
+      "max": 1
+    }
+  }
 }

pages/_app.js

@@ -1,13 +1,15 @@
 import React from 'react'
-import {Box} from '@primer/components'
+import {Box, BaseStyles} from '@primer/components'
 import {ThemeProvider} from 'emotion-theming'
 import theme from '../src/theme.js'
 
 const Page = props => (
   <ThemeProvider theme={theme}>
-    <Box bg='black' color='blue.2'>
-      {props.children}
-    </Box>
+    <BaseStyles>
+      <Box bg='black' color='blue.2'>
+        {props.children}
+      </Box>
+    </BaseStyles>
   </ThemeProvider>
 )
 

script/deploy

@@ -1,8 +1,6 @@
 #!/bin/bash
 set -e
-deployment=primer-style.now.sh
-domain=primer.style
-now
-now alias $deployment
-now scale $deployment sfo 1
-now alias $domain -r rules.json
+now $*
+# XXX this needs to match up with the last `dest` in rules.json
+now $* alias primer-style.now.sh
+now $* alias primer.style -r rules.json

src/AtomPlugins.js

@@ -7,17 +7,16 @@ import ButtonOutline from './ButtonOutline'
 const AtomPlugins = props => (
   <Box px={4} mx={'auto'} px={4} className="container-xl">
     <Box my={[0, 3, 6]} mx={-4} className='d-flex flex-items-center flex-wrap flex-md-nowrap flex-md-row-reverse'>
-    <Box px={4} mb={[3,3,0]} width={[1, 10/12, 6/12]} m='auto'>
-      <AtomImage />
-    </Box>
-      <Box my={[4,3,0]} width={[1, 1, 6/12]} px={4} >
+      <Box px={4} mb={[3,3,0]} width={[1, 10/12, 6/12]} m='auto'>
+        <AtomImage />
+      </Box>
+      <Box my={[4,3,0]} width={[1, 1, 6/12]} px={4}>
         <Heading color="blue.4" mb={3} pr={[0,0, 0, 3]} fontSize={5} lineHeight="1.25" fontWeight='bold'>A better development experience with Atom</Heading>
         <Text color="blue.2" is='p' fontSize={3} mb={4} pr={[0,0, 0, 3]}>Install this custom Atom package to autocomplete classnames for Primer CSS and rails helpers for Octicons</Text>
         <ButtonFill mr={2} href='https://atom.io/packages/autocomplete-primer'>Install package</ButtonFill>
         <ButtonOutline href='https://atom.io/'>Get Atom</ButtonOutline>
         <Text is="p" fontSize={2} mt={4} color="blue.3" className="text-mono">apm install autocomplete-primer</Text>
       </Box>
-
     </Box>
   </Box>
 )

webpack.config.js

@@ -3,7 +3,12 @@ module.exports = {
     rules: [
       {
         test: /\.svg$/,
-        use: ['@svgr/webpack']
+        use: {
+          loader: '@svgr/webpack',
+          options: {
+            svgo: false
+          }
+        }
       }
     ]
   }