Add meta field to GRVSCCodeBlock

Author: andrewbranch

examples/example-site/content/blog/graphql-based/index.md

@@ -2,14 +2,14 @@
 title: GraphQL Support
 date: "2015-05-01T22:12:03.284Z"
 description: GraphQL Support
-useReact: true
+template: react-blog-post
 ---
 
 This post has its `pre` blocks replaced by interactive React components whose data is sourced from GraphQL nodes generated by gatsby-remark-vscode.
 
 The example React component looks like this. Click a token to interact with it:
 
-```jsx
+```jsx { startLine: 52 }
 function CoolCodeBlock(props) {
   const [isRotating, setIsRotating] = useState({})
   const codeBlock = (useContext(CodeBlockContext) || [])[+props["data-index"]]

examples/example-site/content/blog/graphql-line-numbers/index.md

@@ -0,0 +1,31 @@
+---
+title: Rendering line numbers from GraphQL data
+date: "2015-05-01T22:12:03.284Z"
+template: react-blog-post
+codeComponent: CodeBlockWithLineNumbers
+---
+
+```js {startLine: 52}
+/**
+ * @template T
+ * @template U
+ * @param {T[]} arr
+ * @param {(element: T) => U | U[]} mapper
+ * @returns {U[]}
+ */
+function flatMap(arr, mapper) {
+  /** @type {U[]} */
+  const flattened = [];
+  for (const input of arr) {
+    const mapped = mapper(input);
+    if (Array.isArray(mapped)) {
+      for (const output of mapped) {
+        flattened.push(output);
+      }
+    } else {
+      flattened.push(mapped);
+    }
+  }
+  return flattened;
+}
+```

examples/example-site/gatsby-node.js

@@ -20,7 +20,7 @@ exports.createPages = async ({ graphql, actions }) => {
               }
               frontmatter {
                 title
-                useReact
+                template
               }
             }
           }
@@ -42,7 +42,9 @@ exports.createPages = async ({ graphql, actions }) => {
 
     createPage({
       path: post.node.fields.slug,
-      component: post.node.frontmatter.useReact ? reactBlogPost : blogPost,
+      component: post.node.frontmatter.template
+        ? path.resolve(`./src/templates/${post.node.frontmatter.template}.js`)
+        : blogPost,
       context: {
         slug: post.node.fields.slug,
         previous,

examples/example-site/src/templates/react-blog-post.js

@@ -44,12 +44,35 @@ function CoolCodeBlock(props) {
   ) : null
 }
 
-const renderAst = new RehypeReact({
-  createElement: React.createElement,
-  components: { pre: CoolCodeBlock },
-}).Compiler
+function CodeBlockWithLineNumbers(props) {
+  const codeBlock = (useContext(CodeBlockContext) || [])[+props["data-index"]]
+  return codeBlock ? (
+    <div className={codeBlock.preClassName}>
+      <code className={codeBlock.codeClassName}>
+        {codeBlock.tokenizedLines.map(({ html }, i) => (
+          <div className="line-wrapper">
+            <div className="line-number">{(codeBlock.meta ? codeBlock.meta.startLine : 1) + i}</div>
+            <div className="line-contents" dangerouslySetInnerHTML={{ __html: html }} />
+          </div>
+        ))}
+      </code>
+    </div>
+  ) : null
+}
+
+const codeComponents = {
+  CoolCodeBlock,
+  CodeBlockWithLineNumbers
+};
 
 class BlogPostTemplate extends React.Component {
+  renderAst = new RehypeReact({
+    createElement: React.createElement,
+    components: {
+      pre: codeComponents[this.props.data.markdownRemark.frontmatter.codeComponent] || CoolCodeBlock
+    },
+  }).Compiler;
+
   render() {
     window.props = this.props
     const post = this.props.data.markdownRemark
@@ -72,6 +95,17 @@ class BlogPostTemplate extends React.Component {
               display: inline-block;
               animation: rotating 500ms linear infinite;
             }
+            .line-wrapper { display: flex; }
+            .line-number {
+              background: rgba(255, 255, 255, 0.1);
+              flex: 0 0 40px;
+              text-align: right;
+              padding: 0 20px;
+            }
+            .line-contents {
+              flex: 1 0 auto;
+              white-space: pre;
+            }
           `}</style>
           <header>
             <h1
@@ -93,7 +127,7 @@ class BlogPostTemplate extends React.Component {
             </p>
           </header>
           <CodeBlockContext.Provider value={post.grvscCodeBlocks}>
-            {renderAst(post.htmlAst)}
+            {this.renderAst(post.htmlAst)}
           </CodeBlockContext.Provider>
           <hr
             style={{
@@ -151,14 +185,17 @@ export const pageQuery = graphql`
       excerpt(pruneLength: 160)
       htmlAst
       frontmatter {
+        codeComponent
         title
         date(formatString: "MMMM DD, YYYY")
         description
       }
       grvscCodeBlocks {
+        meta
         preClassName
         codeClassName
         tokenizedLines {
+          html
           className
           tokens {
             startIndex

src/graphql/getCodeBlockDataFromRegistry.js

@@ -61,6 +61,7 @@ function getCodeBlockDataFromRegistry(registry, key, codeBlock, getWrapperClassN
   return {
     index,
     text,
+    meta,
     html: renderHTML(createCodeBlockElement(preClassName, codeClassName, languageName, index, lineElements)),
     preClassName,
     codeClassName,

src/graphql/schema.d.ts

@@ -43,6 +43,7 @@ declare namespace grvsc {
             preClassName: string;
             codeClassName: string;
             language?: string;
+            meta?: any;
             defaultTheme: GRVSCTheme;
             additionalThemes: GRVSCTheme[];
             tokenizedLines?: GRVSCTokenizedLine[];

src/graphql/schema.graphql

@@ -46,6 +46,7 @@ type GRVSCCodeBlock implements Node {
   preClassName: String!
   codeClassName: String!
   language: String
+  meta: JSON
   defaultTheme: GRVSCTheme!
   additionalThemes: [GRVSCTheme!]!
   tokenizedLines: [GRVSCTokenizedLine!]