Give blockquote blurb a custom class

pendo-io · Jun 10, 2024 · ef46cb9 · ef46cb9
1 parent 94b5a4a
commit ef46cb9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/main.js b/src/main.js
@@ -17,11 +17,13 @@ Vue.config.productionTip = false;
 const components = {
     blockquote: () => ({
         render() {
-            // <p parentname="blockquote">...</p>
+            delete this.$slots.default[0].data.attrs.parentName;
+            this.$slots.default[0].data.class = 'mdx-blurb';
+
             return this.$slots.default;
         }
     }),
-    // shallow-copy props because MDXProvider shares the instance to parents
+    // shallow-copy props because MDXProvider shares the parameter instance to parents
     img: ({ ...props }) => ({
         render() {
             // Pull everything except `attrs` into a child object, domProps

diff --git a/src/main.scss b/src/main.scss
@@ -52,11 +52,6 @@ h6 {
         margin: 1.5em 0;
     }
 
-    /* TODO: Find a way to customize this selector to something more semantically relevant */
-    [parentname='blockquote'] {
-        font-size: 18px;
-    }
-
     ul {
         line-height: 135%;
 
@@ -65,6 +60,10 @@ h6 {
         }
     }
 
+    .mdx-blurb {
+        font-size: 18px;
+    }
+
     .mdx-img {
         max-width: 95%;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);