Add prism styling of code blocks

Author: jason-roundtree

studio/package.json

@@ -15,6 +15,7 @@
   ],
   "dependencies": {
     "@sanity/base": "^1.149.16",
+    "@sanity/code-input": "^1.149.16",
     "@sanity/components": "^1.149.16",
     "@sanity/core": "^1.149.17",
     "@sanity/default-layout": "^1.149.16",

studio/sanity.json

@@ -12,7 +12,8 @@
     "@sanity/components",
     "@sanity/default-layout",
     "@sanity/default-login",
-    "@sanity/desk-tool"
+    "@sanity/desk-tool",
+    "@sanity/code-input"
   ],
   "env": {
     "development": {

studio/schemas/section.js

@@ -51,5 +51,16 @@ export default {
                 to: [{ type: 'external_link' }]
             }]
         },
+        {
+            title: 'List Order',
+            name: 'list_order',
+            type: 'number',
+            validation: Rule => Rule.integer(),
+            validation: Rule => Rule.positive(),
+            // validation: Rule => Rule.custom(orderNum => {
+            //     return orderNum > 3 ? true : 'Another section is already assigned to this order number.'
+            //     // orderNumUnique(orderNum) ? true : 'Another section is already assigned to this order number.'
+            // })
+        }
     ]
 }

studio/schemas/subsection.js

@@ -19,6 +19,11 @@ export default {
             name: 'code_samples',
             type: 'text'
         },
+        {
+            title: 'Code',
+            name: 'code',
+            type: 'code'
+        },
         {
             title: 'Syntax',
             name: 'syntax',

studio/yarn.lock

@@ -902,6 +902,14 @@
     make-error "^1.3.0"
     object-assign "^4.1.1"
 
+"@sanity/code-input@^1.149.16":
+  version "1.149.16"
+  resolved "https://registry.npmjs.org/@sanity/code-input/-/code-input-1.149.16.tgz#f3a815c096e209ee1c6b138b87fe5aa86bd480c9"
+  dependencies:
+    lodash "^4.17.15"
+    react-ace "^5.0.1"
+    react-icons "^2.2.7"
+
 "@sanity/components@^1.149.16":
   version "1.149.16"
   resolved "https://registry.npmjs.org/@sanity/components/-/components-1.149.16.tgz#0691eb8053928009e5e3743f8ff979fb4fd35df4"
@@ -1866,6 +1874,10 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
+
 braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -4719,6 +4731,10 @@ lodash.foreach@^3.0.3:
     lodash._bindcallback "^3.0.0"
     lodash.isarray "^3.0.0"
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+
 lodash.isarguments@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
@@ -4727,6 +4743,10 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
+lodash.isequal@^4.1.1:
+  version "4.5.0"
+  resolved "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+
 lodash.isplainobject@^4.0.0:
   version "4.0.6"
   resolved "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
@@ -6360,6 +6380,15 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-ace@^5.0.1:
+  version "5.10.0"
+  resolved "https://registry.npmjs.org/react-ace/-/react-ace-5.10.0.tgz#e328b37ac52759f700be5afdb86ada2f5ec84c5e"
+  dependencies:
+    brace "^0.11.0"
+    lodash.get "^4.4.2"
+    lodash.isequal "^4.1.1"
+    prop-types "^15.5.8"
+
 react-animate-height@^2.0.6:
   version "2.0.21"
   resolved "https://registry.npmjs.org/react-animate-height/-/react-animate-height-2.0.21.tgz#da9223eb0e74457d52f72da477c8626550df2ce6"

web/components/DescriptiveItem.js

@@ -1,4 +1,33 @@
 import React from 'react'
+import Highlight, { defaultProps } from 'prism-react-renderer'
+import styled from 'styled-components'
+import duotoneLight from 'prism-react-renderer/themes/duotoneLight'
+
+// TODO: fix text overflow
+const Pre = styled.pre`
+    font-family: 'Courier Prime', monospace;
+    font-size: .9em;
+    overflow: auto;
+    text-align: left;
+    /* margin: 1em 0; */
+    padding: 0.5em;
+    & .token-line {
+        line-height: 1.4em;
+        height: 1.3em;
+    }
+`
+const LineNo = styled.span`
+    display: inline-block;
+    padding-right: 1em;
+    user-select: none;
+    opacity: 0.5;
+`
+// const Line = styled.div`
+//     display: table-row;
+// `
+// const LineContent = styled.span`
+//     display: table-cell;
+// `
 
 export default function DescriptiveItem({ section }) {
     console.log('DescriptiveItem props: ', section)
@@ -18,11 +47,25 @@ export default function DescriptiveItem({ section }) {
                             )}
 
                             {secData.code && (
-                                <pre>
-                                    <code className="language-js">
-                                        {secData.code}
-                                    </code>
-                                </pre>      
+                                <Highlight 
+                                    {...defaultProps} 
+                                    code={secData.code.code} 
+                                    theme={duotoneLight}
+                                    language="jsx"
+                                >
+                                    {({ className, style, tokens, getLineProps, getTokenProps }) => (
+                                        <Pre className={className} style={style}>
+                                            {tokens.map((line, i) => (
+                                                <div {...getLineProps({line, key: i})}>
+                                                    <LineNo>{i + 1}</LineNo>
+                                                    {line.map((token, key) => (
+                                                        <span {...getTokenProps({token, key})} />
+                                                    ))}
+                                                </div>
+                                            ))}
+                                        </Pre>
+                                    )}
+                                </Highlight>
                             )}
 
                             {secData.external_links.length > 0 && (

web/package-lock.json

@@ -17,9 +17,11 @@
     "gatsby": "^2.20.12",
     "gatsby-plugin-typography": "^2.4.1",
     "gatsby-source-sanity": "^5.0.6",
+    "prism-react-renderer": "^1.1.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-typography": "^0.16.19",
+    "styled-components": "^5.1.1",
     "typography": "^0.16.19",
     "typography-theme-fairy-gates": "^0.16.19"
   },

web/package.json

@@ -52,9 +52,13 @@ export const query = graphql`
               _type
               name
               description
-              code_samples
               syntax
               subsection_active
+              code {
+                _type
+                code
+                language
+              }
               external_links {
                 _id
                 _type

web/src/pages/index.js

@@ -4,15 +4,17 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400;500;600&display=swap');
 
+@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
+
 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
-    font-family: 'Barlow', sans-serif;
 }
 
 body {
     background-color: rgb(255, 253, 240);
+    font-family: 'Barlow', sans-serif;
 }
 
 #layout {
@@ -218,6 +220,10 @@ kbd {
     font-size: .9em;
 }
 
+/* pre {
+    font-family: 'Courier Prime', monospace;
+} */
+
 footer {
     height: 100px;
     margin: 40px 0 0;