Merge pull request blocks#110 from blocks/docs-syntax-highlighting

johno · web-flow · commit 697b318e4c04 · 2019-11-29T08:08:38.000-07:00
docs: Add syntax highlighting + update sidebar slightly
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@mdx-js/react": "1.5.1",
     "@theme-ui/components": "0.2.49",
     "@theme-ui/presets": "0.2.44",
+    "@theme-ui/prism": "^0.2.46",
     "gatsby-plugin-catch-links": "2.1.17",
     "gatsby-plugin-compile-es6-packages": "2.1.0",
     "gatsby-plugin-fathom": "1.1.0",
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -126,32 +126,32 @@ export default ({ children, _frontmatter: { title, noNav } = {} }) => (
         sx={{
           gridArea: 'nav',
           px: 3,
-          py: [3, 4, 4],
-          mt: '10px',
+          pt: [3, 4],
           ul: {
             listStyle: 'none',
-            p: 0
+            p: 0,
+            m: 0,
+            mt: [0, '10px']
           },
           li: {
-            mb: 1,
-            fontSize: 1,
-            ul: {
-              li: {
-                mb: 0
-              },
-              pl: 2,
-              a: {
-                fontWeight: 400,
-                color: '#2f353b'
-              }
+            fontSize: 2,
+            fontWeight: 'bold',
+            mb: 2,
+            '& ul': {
+              ml: 2,
+              mt: 2,
+              mb: 3
             },
-            a: {
-              color: 'black',
-              fontWeight: 500,
-              textDecoration: 'none',
-              '&:hover': {
-                color: 'black'
-              }
+            '& li': {
+              fontWeight: 'normal',
+              mb: 0
+            }
+          },
+          a: {
+            color: 'inherit',
+            textDecoration: 'none',
+            '&:hover, &:focus': {
+              color: 'primary'
             }
           }
         }}
diff --git a/src/gatsby-plugin-theme-ui/components.js b/src/gatsby-plugin-theme-ui/components.js
@@ -0,0 +1,6 @@
+import Prism from '@theme-ui/prism'
+
+export default {
+  pre: props => props.children,
+  code: Prism
+}
diff --git a/src/gatsby-plugin-theme-ui/index.js b/src/gatsby-plugin-theme-ui/index.js
@@ -1,4 +1,5 @@
 import { system } from '@theme-ui/presets'
+import prism from '@theme-ui/prism/presets/theme-ui'
 
 const theme = {
   ...system,
@@ -13,6 +14,12 @@ const theme = {
   },
   styles: {
     ...system.styles,
+    h1: {
+      ...system.styles.h1,
+      '&:first-child': {
+        mt: 0
+      }
+    },
     navLink: {
       color: 'inherit',
       textDecoration: 'none',
@@ -27,6 +34,9 @@ const theme = {
     },
     img: {
       maxWidth: '100%'
+    },
+    code: {
+      ...prism
     }
   },
   buttons: {
diff --git a/yarn.lock b/yarn.lock
@@ -2315,6 +2315,13 @@
     "@theme-ui/preset-tailwind" "^0.2.42"
     "@theme-ui/preset-tosh" "^0.2.40"
 
+"@theme-ui/prism@^0.2.46":
+  version "0.2.46"
+  resolved "https://registry.yarnpkg.com/@theme-ui/prism/-/prism-0.2.46.tgz#8a8afff768149a687feeca2fae630b2fbf557bf0"
+  integrity sha512-CGkM/jw8gmXjuDyWf0TeBqxXfgkx69YMVzV9/y78GMD8OoO36izfCtj3KNyE8ENq7OyNS5atj+u/WY30KIiu/w==
+  dependencies:
+    prism-react-renderer "^1.0.2"
+
 "@theme-ui/style-guide@^0.2.49":
   version "0.2.49"
   resolved "https://registry.yarnpkg.com/@theme-ui/style-guide/-/style-guide-0.2.49.tgz#757811bebc37c4f8b20635fa0f903f718ad86c11"
@@ -12230,6 +12237,11 @@ pretty-format@^24.9.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
+prism-react-renderer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.0.2.tgz#3bb9a6a42f76fc049b03266298c7068fdd4b7ea9"
+  integrity sha512-0++pJyRfu4v2OxI/Us/5RLui9ESDkTiLkVCtKuPZYdpB8UQWJpnJQhPrWab053XtsKW3oM0sD69uJ6N9exm1Ag==
+
 private@^0.1.6:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
