fix: use slug instead of name (#815)

Switching reusable contents attr from `name` to `slug` to match the backend.

Dockerfile

@@ -1,4 +1,4 @@
-ARG NODE_VERSION=14
+ARG NODE_VERSION=18
 FROM node:${NODE_VERSION}-buster
 
 ARG NODE_VERSION

__tests__/flavored-compilers/reusable-content.test.js

@@ -2,7 +2,7 @@ import { mdast, md } from '../../index';
 
 describe('reusable content compiler', () => {
   it('writes an undefined reusable content block back to markdown', () => {
-    const doc = '<RMReusableContent name="undefined" />';
+    const doc = '<RMReusableContent slug="undefined" />';
     const tree = mdast(doc);
 
     expect(md(tree)).toMatch(doc);
@@ -12,7 +12,7 @@ describe('reusable content compiler', () => {
     const reusableContent = {
       defined: '# Whoa',
     };
-    const doc = '<RMReusableContent name="defined" />';
+    const doc = '<RMReusableContent slug="defined" />';
     const tree = mdast(doc, { reusableContent });
 
     expect(tree.children[0].children[0].type).toBe('heading');

__tests__/transformers/__snapshots__/reusable-content.test.js.snap

@@ -36,7 +36,7 @@ Object {
       "type": "paragraph",
     },
   ],
-  "name": "test",
+  "slug": "test",
   "type": "reusable-content",
 }
 `;

__tests__/transformers/reusable-content.test.js

@@ -12,7 +12,7 @@ describe('reusable content transfomer', () => {
     const md = `
 Before
 
-<RMReusableContent name="test" />
+<RMReusableContent slug="test" />
 
 After
     `;
@@ -25,7 +25,7 @@ After
   });
 
   it('should insert an empty node if the reusable content block is not defined', () => {
-    const md = '<RMReusableContent name="not-defined" />';
+    const md = '<RMReusableContent slug="not-defined" />';
     const tree = mdast(md);
 
     expect(tree.children[0].type).toBe('reusable-content');
@@ -34,9 +34,9 @@ After
 
   it('does not expand reusable content recursively', () => {
     const reusableContent = {
-      test: '<RMReusableContent name="test" />',
+      test: '<RMReusableContent slug="test" />',
     };
-    const md = '<RMReusableContent name="test" />';
+    const md = '<RMReusableContent slug="test" />';
     const tree = mdast(md, { reusableContent });
 
     expect(tree.children[0].children[0].type).toBe('reusable-content');

processor/compile/reusable-content.js

@@ -4,5 +4,5 @@ export default function ReusableContentCompiler() {
   const { Compiler } = this;
   const { visitors } = Compiler.prototype;
 
-  visitors[type] = node => `<${tag} name="${node.name}" />`;
+  visitors[type] = node => `<${tag} slug="${node.slug}" />`;
 }

processor/transform/reusable-content.js

@@ -3,21 +3,21 @@ import { visit } from 'unist-util-visit';
 export const type = 'reusable-content';
 export const tag = 'RMReusableContent';
 
-const regexp = new RegExp(`^\\s*<${tag} name="(?<name>.*)" />\\s*$`);
+const regexp = new RegExp(`^\\s*<${tag} slug="(?<slug>.*)" />\\s*$`);
 
 const reusableContentTransformer = function () {
   const reusableContent = this.data('reusableContent');
 
   return tree => {
     visit(tree, 'html', (node, index, parent) => {
       const result = regexp.exec(node.value);
-      if (!result || !result.groups.name) return;
+      if (!result || !result.groups.slug) return;
 
-      const { name } = result.groups;
+      const { slug } = result.groups;
       const block = {
         type,
-        name,
-        children: name in reusableContent ? reusableContent[name] : [],
+        slug,
+        children: slug in reusableContent ? reusableContent[slug] : [],
       };
 
       parent.children[index] = block;