refactor remark custom blockquotes (#4387)

Author: chenxsan

package.json

@@ -119,7 +119,6 @@
     "redirect-webpack-plugin": "^1.0.0",
     "remark": "^13.0.0",
     "remark-autolink-headings": "^6.0.1",
-    "remark-custom-blockquotes": "1.0.0",
     "remark-emoji": "^2.1.0",
     "remark-extract-anchors": "1.1.1",
     "remark-frontmatter": "^3.0.0",
@@ -137,6 +136,7 @@
     "static-site-generator-webpack-plugin": "^3.4.1",
     "style-loader": "^2.0.0",
     "tap-spot": "^1.1.1",
+    "unist-util-visit": "^2.0.3",
     "webpack": "^5.11.1",
     "webpack-bundle-analyzer": "^4.3.0",
     "webpack-cli": "^4.3.1",

src/components/Markdown/Markdown.scss

@@ -97,6 +97,7 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
 
   p,
   blockquote,
+  aside,
   table,
   pre {
     margin: 1em 0;
@@ -159,24 +160,21 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
     }
   }
 
-  blockquote {
+  aside {
     border-left: 4px solid #dddddd;
     padding: 0.75em 1em;
     color: getColor(dove-grey);
-    font-style: italic;
-
     > :first-child {
       margin-top: 0;
     }
     > :last-child {
       margin-bottom: 0;
     }
-
     &.tip,
     &.warning,
     &.todo {
-      border-left: none;
-      border-radius: 3px;
+      border-left-width: 3px;
+      border-left-style: solid;
 
       .tip-content {
         font-style: italic;
@@ -185,21 +183,33 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
       code {
         color: inherit;
       }
+
+      > .tip__prefix,
+      > .warning__prefix,
+      > .todo__prefix {
+        text-transform: capitalize;
+        font-weight: 700;
+        color: #000;
+        font-size: getFontSize(1);
+      }
     }
 
     &.tip {
       background-color: #eaf8ff;
       color: #4e7182;
+      border-left-color: darken(#eaf8ff, 40%);
     }
 
     &.warning {
       background-color: #fdf5d8;
       color: #716b53;
+      border-left-color: darken(#fdf5d8, 40%);
     }
 
     &.todo {
       background-color: #fbddcd;
       color: #907a6e;
+      border-left-color: darken(#fbddcd, 40%);
 
       .tip-content::before {
         content: '[TODO]: ';
@@ -208,6 +218,20 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
     }
   }
 
+  blockquote {
+    border-left: 4px solid #dddddd;
+    padding: 0.75em 1em;
+    color: getColor(dove-grey);
+    font-style: italic;
+
+    > :first-child {
+      margin-top: 0;
+    }
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
   table {
     margin: 1em 0;
 

src/remark-plugins/remark-custom-asides/__snapshots__/index.test.js.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`customize blockquote should transform W> into aside of warning 1`] = `
+"<aside class=\\"warning\\"><h6 class=\\"warning__prefix\\">warning</h6><p>hello world</p></aside>
+"
+`;

src/remark-plugins/remark-custom-asides/index.js

@@ -0,0 +1,70 @@
+/**
+ * based on https://github.com/montogeek/remark-custom-blockquotes
+ */
+
+const visit = require('unist-util-visit');
+module.exports = function customAsides(
+  options = {
+    mapping: {},
+  }
+) {
+  const { mapping } = options;
+  return function transformer(tree) {
+    // looking for `paragraph` node
+    visit(tree, 'paragraph', visitor);
+    function visitor(node) {
+      const { children } = node;
+      const textNode = children[0].value;
+
+      // could be link/etc.
+      if (!textNode) return;
+
+      // looking for mapping in the beginning
+      const className = mapping[textNode.substr(0, 2)];
+      // >This is a joke <- ignore this
+      // >T hi there
+      const hasPostfixWhitespace = textNode.indexOf(' ') === 2;
+      if (className && hasPostfixWhitespace) {
+        // use `aside` element instead of `blockquote`
+        // which I believe is more suitable as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
+        node.data = {
+          hName: 'aside',
+          hProperties: {
+            className,
+          },
+        };
+
+        // remove custom characters from paragraph
+        node.children = [
+          {
+            type: 'heading',
+            depth: 6,
+            data: {
+              // see https://github.com/syntax-tree/mdast-util-to-hast#hname
+              // add a className to heading
+              hProperties: {
+                className: `${className}__prefix`,
+              },
+            },
+            children: [
+              {
+                type: 'text',
+                value: `${className}`,
+              },
+            ],
+          },
+          {
+            type: 'paragraph',
+            children: [
+              {
+                ...children[0],
+                value: children[0].value.slice(3),
+              },
+              ...children.slice(1),
+            ],
+          },
+        ];
+      }
+    }
+  };
+};

src/remark-plugins/remark-custom-asides/index.test.js

@@ -0,0 +1,24 @@
+import remark from 'remark';
+describe('customize blockquote', () => {
+  it('should transform W> into aside of warning', () => {
+    remark()
+      .use(require('./index.js'), {
+        mapping: {
+          'W>': 'warning',
+        },
+      })
+      .use(require('remark-html'))
+      .process(
+        `
+W> hello world
+`,
+        function (err, { contents }) {
+          expect(err).toBeNull();
+          expect(contents).toContain('<aside class="warning"');
+          expect(contents).toContain('<h6 class="warning__prefix"');
+          expect(contents).toContain('warning');
+          expect(contents).toMatchSnapshot();
+        }
+      );
+  });
+});

webpack.common.js

@@ -9,14 +9,14 @@ const mdPlugins = [
   remarkResponsiveTable,
   require('remark-emoji'),
   [
-    require('remark-custom-blockquotes'),
+    require('./src/remark-plugins/remark-custom-asides/index.js'),
     {
       mapping: {
         'T>': 'tip',
         'W>': 'warning',
-        '?>': 'todo'
-      }
-    }
+        '?>': 'todo',
+      },
+    },
   ],
   [
     require('remark-autolink-headings'),

yarn.lock

@@ -11218,13 +11218,6 @@ remark-autolink-headings@^6.0.1:
     extend "^3.0.0"
     unist-util-visit "^2.0.0"
 
-remark-custom-blockquotes@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/remark-custom-blockquotes/-/remark-custom-blockquotes-1.0.0.tgz#82ed4cebf45255a0d07ba81696f909c23b1d749d"
-  integrity sha512-R6/tiD4RE7rIaPAmZcVdbddH35DJraxNiVWo8nwF4QIhjwthClAkrzDzKcRHzf2sHL3OlG5jOBtwvZX7Dwww/w==
-  dependencies:
-    unist-util-visit "1.3.1"
-
 remark-emoji@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/remark-emoji/-/remark-emoji-2.1.0.tgz#69165d1181b98a54ad5d9ef811003d53d7ebc7db"