feat: Use Markdown component for reference templates

newrelic · Jun 16, 2020 · 7193215 · 7193215
1 parent 41b654c
commit 7193215
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 22 deletions.
diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js
@@ -3,9 +3,9 @@ import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import InlineCodeSnippet from '../components/InlineCodeSnippet';
-import ReactMarkdown from 'react-markdown';
 import Layout from '../components/Layout';
 import PageTitle from '../components/PageTitle';
+import Markdown from '../components/Markdown';
 import MethodReference from '../components/MethodReference';
 import TypeDefReference from '../components/TypeDefReference';
 import ConstantReference from '../components/ConstantReference';
@@ -39,7 +39,7 @@ const ApiReferenceTemplate = ({ data }) => {
             'intro-text'
           )}
         >
-          <ReactMarkdown source={apiDescription} />
+          <Markdown source={apiDescription} />
         </section>
       )}
 

diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
@@ -3,10 +3,10 @@ import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import InlineCodeSnippet from '../components/InlineCodeSnippet';
-import ReactMarkdown from 'react-markdown';
 import ReferenceExample from '../components/ReferenceExample';
 import Layout from '../components/Layout';
 import PageTitle from '../components/PageTitle';
+import Markdown from '../components/Markdown';
 import MethodReference from '../components/MethodReference';
 import SEO from '../components/Seo';
 import PropList from '../components/PropList';
@@ -23,7 +23,6 @@ const previewStyles = {
 };
 
 const ComponentReferenceTemplate = ({ data }) => {
-  // const [isOpen, setIsOpen] = useState(false);
   const { mdx } = data;
   const { frontmatter } = mdx;
   const { title, description, component } = frontmatter;
@@ -40,14 +39,8 @@ const ComponentReferenceTemplate = ({ data }) => {
     <Layout>
       <SEO title={title} description={description} />
       <PageTitle>{component}</PageTitle>
-      <section
-        className={cx(
-          templateStyles.section,
-          templateStyles.description,
-          'intro-text'
-        )}
-      >
-        <ReactMarkdown source={componentDescription} />
+      <section className={cx(templateStyles.section, 'intro-text')}>
+        <Markdown source={componentDescription} />
       </section>
 
       <section className={templateStyles.section}>

diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss
@@ -1,13 +1,3 @@
-.description {
-  ul {
-    padding-top: 0.5rem;
-  }
-
-  li {
-    margin: 0;
-  }
-}
-
 .section:not(:last-child) {
   margin-bottom: 2rem;
 }