Add type for code blocks with no line number and make language dynamic

Author: jason-roundtree

studio/schemas/codeNoLineNumber.js

@@ -0,0 +1,12 @@
+export default {
+    title: 'Code No Line Number',
+    name: 'code_no_line_number',
+    type: 'object',
+    fields: [
+        {
+            title: 'Code',
+            name: 'code',
+            type: 'code',
+        }
+    ]
+}

studio/schemas/post.js

@@ -26,6 +26,7 @@ export default {
                     }]
                 },
                 { type: 'code' },
+                { type: 'code_no_line_number' },
                 // TODO: update these type names:
                 { type: 'post_aside' },
                 { type: 'post_aside_note' },

studio/schemas/schema.js

@@ -11,6 +11,7 @@ import postAside from './postAside'
 import postAsideNote from './postAsideNote'
 import postAsideWithCode from './postAsideWithCode'
 import inlineCode from './inlineCode'
+import codeNoLineNumber from './codeNoLineNumber'
 
 // Then we give our schema to the builder and provide the result to Sanity
 export default createSchema({
@@ -25,6 +26,7 @@ export default createSchema({
     postAside,
     postAsideNote,
     postAsideWithCode,
-    inlineCode
+    inlineCode,
+    codeNoLineNumber
   ])
 })

web/components/PostImg.js

@@ -7,8 +7,8 @@ const PostImgContainer = styled.div`
 `
 const PostImg = styled.img`
     position: relative;
-    top: 0;
-    left: 0;
+    /* top: 0;
+    left: 0; */
     display: block;
     width: 100%;
     transition: opacity 400ms ease 0ms;

web/pages/posts/[slug].js

@@ -281,7 +281,7 @@ function Post(props) {
         return asideWithCode(content, _key, true)
     }
 
-    function prismafyCodeBlock(content, _key) {
+    function prismafyCodeBlock(content, _key, lang, showLineNo) {
         return (
             <Highlight 
                 {...defaultProps} 
@@ -291,14 +291,15 @@ function Post(props) {
                         : themes.dark.syntax
                 } 
                 code={content} 
-                language="jsx"
+                // TODO: make language dynamic
+                language={lang}
                 key={_key}
             >
                 {({ className, style, tokens, getLineProps, getTokenProps }) => (
-                    <Pre className={className} style={style}>
+                    <Pre className={className}>
                         {tokens.map((line, i) => (
                             <div {...getLineProps({ line, key: i })}>
-                                <LineNo>{i + 1}</LineNo>
+                                {showLineNo && <LineNo>{i + 1}</LineNo>}
                                 {line.map((token, key) => {
                                     return (
                                         <span {...getTokenProps({ token, key })} />
@@ -314,6 +315,7 @@ function Post(props) {
     // TODO: test if list rendering works correctly with multiple lists in post
     let list = []
     props.body && props.body.forEach(section => {
+        console.log('section: ', section)
         if (section.listItem) {
             list.push(
                 <ListItem key={section._key}>{formatListItem(section.children)}</ListItem>
@@ -334,7 +336,22 @@ function Post(props) {
                     break
                 case 'code':
                     postContent.push(
-                        prismafyCodeBlock(section.code, section._key)
+                        prismafyCodeBlock(
+                            section.code, 
+                            section._key, 
+                            section.language,
+                            true
+                        )
+                    )
+                    break
+                case 'code_no_line_number':
+                    postContent.push(
+                        prismafyCodeBlock(
+                            section.code.code, 
+                            section._key, 
+                            section.code.language, 
+                            false
+                        )
                     )
                     break
                 case 'post_aside':