Skip to content

Commit

Permalink
Merge pull request #87 from newrelic/zstickles/description-section
Browse files Browse the repository at this point in the history
Component Descriptions
timglaser authored Jun 2, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents ee72627 + ca869a1 commit 19a8485
Showing 4 changed files with 196 additions and 4 deletions.
161 changes: 161 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -26,7 +26,8 @@
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^6.0.0"
"react-helmet": "^6.0.0",
"react-markdown": "^4.3.1"
},
"devDependencies": {
"@newrelic/eslint-plugin-newrelic": "^0.3.0",
22 changes: 19 additions & 3 deletions src/templates/ReferenceTemplate.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
import React, { useState } from 'react';
import { graphql } from 'gatsby';
import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown';
import Container from '../components/Container';
import Layout from '../components/Layout';
import Sidebar from '../components/Sidebar';
import SEO from '../components/Seo';
import useSdk from '../hooks/useSdk';

import pages from '../data/sidenav.json';

import styles from './ReferenceTemplate.module.scss';

const ReferenceTemplate = ({ data }) => {
const loaded = useSdk();
const [isOpen, setIsOpen] = useState(false);
const { mdx } = data;
const { frontmatter } = mdx;
const { title, description, component } = frontmatter;

if (typeof window === 'undefined') global.window = {};
const componentData = window?.__NR1_SDK__?.default?.[component];

return (
<Layout>
<SEO title={title} description={description} />
@@ -26,9 +32,19 @@ const ReferenceTemplate = ({ data }) => {
isOpen={isOpen}
toggle={() => setIsOpen(!isOpen)}
/>
<main className={styles.content}>
<h1>{component}</h1>
</main>
{loaded ? (
<main className={styles.content}>
<h1>{component}</h1>

{componentData && componentData.__docs__ && (
<div className={styles.description}>
<ReactMarkdown source={componentData.__docs__.text} />
</div>
)}
</main>
) : (
<p>Loading...</p>
)}
</Container>
</Layout>
);
14 changes: 14 additions & 0 deletions src/templates/ReferenceTemplate.module.scss
Original file line number Diff line number Diff line change
@@ -17,3 +17,17 @@
.sidebar {
grid-area: sidebar;
}

.description {
border-top: 1px solid var(--color-neutrals-200);
margin-top: 0.5rem;
padding-top: 0.5rem;

ul {
padding-top: 0.5rem;
}

li {
margin: 0;
}
}

0 comments on commit 19a8485

Please sign in to comment.