Render inline code highlighting and fix query so code examples render

Author: jason-roundtree

studio/schemas/subsection.js

@@ -12,16 +12,10 @@ export default {
             title: 'Description Block',
             name: 'description_block',
             type: 'array',
-            of: [
-                { 
-                    type: 'block',
-                    of: [
-                        { 
-                            type: 'code_highlight' 
-                        },
-                    ]
-                }
-            ],
+            of: [{ 
+                type: 'block',
+                    of: [{ type: 'code_highlight' }]
+            }],
             rows: 7
         },
         {

web/src/components/DescriptiveItem.js

@@ -2,6 +2,7 @@ import React from 'react'
 import Highlight, { defaultProps } from 'prism-react-renderer'
 import styled from 'styled-components'
 import duotoneLight from 'prism-react-renderer/themes/oceanicNext'
+import formatDescription from '../../utils/formatDescription'
 
 const Pre = styled.pre`
     font-family: 'Inconsolata', monospace;
@@ -25,7 +26,7 @@ const LineNo = styled.span`
 `
 
 export default function DescriptiveItem({ section }) {
-    // console.log('DescriptiveItem props: ', section)
+    console.log('DescriptiveItem props: ', section)
     return (
         <div>
             {section.subsections.map(secData => {
@@ -37,9 +38,9 @@ export default function DescriptiveItem({ section }) {
                         >
                             <h4>{secData.name}</h4>
 
-                            {secData.description && (
-                                <p>{secData.description}</p>
-                            )}
+                            {/* {secData.description && ( */}
+                            <p>{formatDescription(secData)}</p>
+                            {/* )} */}
 
                             {secData.code && (
                                 <Highlight 

web/src/components/HighlightInlineCode.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const InlineHighlight = styled.code`
+    padding: 2px;
+    background-color: rgb(230, 255, 255);
+    border-radius: 3px;
+`
+
+export default function HighlightInlineCode(props) {
+    return (
+        <InlineHighlight>
+            {props.code}
+        </InlineHighlight>
+    )
+}

web/src/components/ShortcutTable.js

@@ -37,8 +37,6 @@ export default function ShortcutTable(props) {
         }
     }
 
-    // function clearSort() { setSortedRows(null) }
-
     return (
         <div className="table_container">
             <table>

web/src/components/TopicSection.js

@@ -8,7 +8,8 @@ import DescriptiveItem from './DescriptiveItem'
 // `
 
 export default function TopicSection(props) {
-    console.log('TS props: ', props);
+    // console.log('TS props: ', props);
+
     return (
         <section 
             id={props.section.anchor_id}
@@ -23,7 +24,7 @@ export default function TopicSection(props) {
                 >
                     {props.section.name}
                 </h3>
-                
+
                 {props.section.description && (
                         <p className="section_description">
                             {props.section.description}

web/src/pages/index.js

@@ -35,6 +35,7 @@ const NavMenuBtn = styled.button`
 `
 
 export default function Index({ data }) {
+  // console.log('data: ', data)
   // these "nav" references are for the secondary nav that appears once you've scrolled past table of contents
   const [navIsActive, setNavIsActive] = useState(false)
   const [navMenuIsActive, setNavMenuIsActive] = useState(false)
@@ -170,6 +171,13 @@ export const query = graphql`
                 url
               }
               _rawDescriptionBlock(resolveReferences: {maxDepth: 10})
+              code {
+                highlightedLines
+                language
+                code
+                _type
+                _key
+              }
             }
             ... on SanityShortcutSubsection {
               id
@@ -185,13 +193,5 @@ export const query = graphql`
         }
       }
     }
-    # allSanityGeneralSubsection {
-    #   edges {
-    #     node {
-    #       id
-    #       _rawDescriptionBlock
-    #     }
-    #   }
-    # }
   }
 `

web/utils/formatDescription.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import HighlightInlineCode from '../src/components/HighlightInlineCode'
+
+export default function formatDescription(content) {
+    // console.log('content: ', content)
+    const descriptionBlock = []
+    if (content._rawDescriptionBlock) {
+        content._rawDescriptionBlock[0].children.forEach(inlineBlock => {
+            // console.log('inlineBlock: ', inlineBlock)
+            if (inlineBlock._type === 'code_highlight') {
+                descriptionBlock.push(
+                    <HighlightInlineCode 
+                        code={inlineBlock.inline_code_highlight}
+                        key={inlineBlock._key}
+                    />
+                )
+            } else {
+                descriptionBlock.push(inlineBlock.text)
+            }
+        })
+        // console.log('descriptionBlock: ', descriptionBlock)
+        return descriptionBlock
+    } else {
+        return content.description
+    }
+}