fix: wrangle 'i' and 'rdme-pin' nodes

processor/compile/compatibility.ts

@@ -4,7 +4,7 @@ import { toMarkdown } from 'mdast-util-to-markdown';
 import { toXast } from 'hast-util-to-xast';
 import { toXml } from 'xast-util-to-xml';
 import { NodeTypes } from '../../enums';
-import { formatHProps, formatProps } from '../utils';
+import { formatProps } from '../utils';
 
 type CompatNodes =
   | { type: NodeTypes.glossary; data: { hProperties: { term: string } } }
@@ -13,6 +13,7 @@ type CompatNodes =
   | { type: 'embed'; data: { hProperties: { [key: string]: string } } }
   | { type: 'escape'; value: string }
   | { type: 'figure'; children: [Image, { type: 'figcaption'; children: [{ type: 'text'; value: string }] }] }
+  | { type: 'i'; data: { hProperties: { className: string[]}} }
   | Html;
 
 /*
@@ -80,6 +81,8 @@ const compatibility = (node: CompatNodes) => {
       return figureToImageBlock(node);
     case 'embed':
       return embedToEmbedBlock(node);
+    case 'i':
+      return `:${node.data.hProperties.className[1]}:`;
     default:
       throw new Error('Unhandled node type!');
   }

processor/compile/index.ts

@@ -27,6 +27,7 @@ function compilers() {
     escape: compatibility,
     figure: compatibility,
     html: compatibility,
+    i: compatibility,
   };
 
   toMarkdownExtensions.push({ extensions: [{ handlers }] });

processor/transform/readme-to-mdx.ts

@@ -1,10 +1,17 @@
+import { Parent } from 'mdast';
 import { NodeTypes } from '../../enums';
 import { Transform } from 'mdast-util-from-markdown';
 import { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
 
 import { visit } from 'unist-util-visit';
 
 const readmeToMdx = (): Transform => tree => {
+  // Unwrap pinned nodes, replace rdme-pin with its child node
+  visit(tree, 'rdme-pin', (node: Parent, i, parent) => {
+    const newNode = node.children[0];
+    parent.children.splice(i, 1, newNode);
+  });
+
   visit(tree, NodeTypes.tutorialTile, (tile, index, parent) => {
     const attributes: MdxJsxAttribute[] = ['backgroundColor', 'emoji', 'id', 'link', 'slug', 'title'].map(name => {
       const value = tile[name];