From aed7c7b4a379cc6848dff7f27f1e84f2fa4d309c Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Fri, 24 Apr 2020 15:47:57 -0700 Subject: [PATCH 01/12] chore: removed unused footer --- src/components/Layout.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/Layout.js b/src/components/Layout.js index fa46ca3dc..3d24cd9ca 100644 --- a/src/components/Layout.js +++ b/src/components/Layout.js @@ -8,11 +8,6 @@ const Layout = ({ children }) => ( <>
{children}
-
- © {new Date().getFullYear()}, Built with - {` `} - Gatsby -
); From 566475cd98b4257bf0584471fc56b46f75e5af16 Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Fri, 24 Apr 2020 16:06:10 -0700 Subject: [PATCH 02/12] chore: basic files and layout --- src/components/Sidebar.js | 14 ++++++++++++++ src/pages/reference.js | 23 +++++++++++++++++++++++ src/templates/Reference.scss | 11 +++++++++++ 3 files changed, 48 insertions(+) create mode 100644 src/components/Sidebar.js create mode 100644 src/pages/reference.js create mode 100644 src/templates/Reference.scss diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js new file mode 100644 index 000000000..afe596456 --- /dev/null +++ b/src/components/Sidebar.js @@ -0,0 +1,14 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Sidebar = ({ pages }) => ( + +); + +Sidebar.propTypes = { + pages: PropTypes.array, // TODO +}; + +export default Sidebar; diff --git a/src/pages/reference.js b/src/pages/reference.js new file mode 100644 index 000000000..dbc6d13f7 --- /dev/null +++ b/src/pages/reference.js @@ -0,0 +1,23 @@ +import React from 'react'; + +import Layout from '../components/Layout'; +import Sidebar from '../components/Sidebar'; + +// TODO: move this js file to same directory and update import +import '../templates/Reference.scss'; + +// TODO: pull this in from Gatsby +const pages = []; + +const Reference = () => ( + +
+ +
+ The main page content goes here +
+
+ +); + +export default Reference; diff --git a/src/templates/Reference.scss b/src/templates/Reference.scss new file mode 100644 index 000000000..74be7094a --- /dev/null +++ b/src/templates/Reference.scss @@ -0,0 +1,11 @@ +.ReferenceTemplate { + display: grid; + grid-template-columns: 1fr 3fr; + + .Sidebar { + } + + .ReferenceTemplate-content { + background-color: tomato; + } +} From dd98558e876f2f20f19d8cc6602cbb2ca621d3e7 Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Fri, 24 Apr 2020 16:37:00 -0700 Subject: [PATCH 03/12] chore: abstracted commonly used type to types file --- src/components/Header.js | 30 ++++++++++++------------------ src/types.js | 10 ++++++++++ 2 files changed, 22 insertions(+), 18 deletions(-) create mode 100644 src/types.js diff --git a/src/components/Header.js b/src/components/Header.js index 6cb617483..5ec40cc0e 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,13 +1,13 @@ -import './Header.scss'; - -import { Link, graphql, useStaticQuery } from 'gatsby'; import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import { Link, graphql, useStaticQuery } from 'gatsby'; +import cx from 'classnames'; +import { link } from '../types'; import Container from './Container'; import ExternalLink from './ExternalLink'; import HamburgerMenu from './HamburgerMenu'; -import PropTypes from 'prop-types'; -import cx from 'classnames'; +import './Header.scss'; const Header = ({ pages }) => { const [menuOpen, setMenuOpen] = useState(false); @@ -79,7 +79,7 @@ const Header = ({ pages }) => {
    {pages.map((page, i) => (
  • - {page.displayName} + {page.displayName}
    • ))}
@@ -105,22 +105,16 @@ const Header = ({ pages }) => { }; Header.propTypes = { - pages: PropTypes.arrayOf( - PropTypes.shape({ - displayName: PropTypes.string.isRequired, - path: PropTypes.string.isRequired, - active: PropTypes.bool, - }) - ), + pages: PropTypes.arrayOf(link), }; Header.defaultProps = { pages: [ - { displayName: 'Collect Data', path: '' }, - { displayName: 'Explore Data', path: 'explore-data' }, - { displayName: 'Build Apps', path: '' }, - { displayName: 'Automate New Relic', path: '' }, - { displayName: 'Reference Docs', path: '' }, + { displayName: 'Collect Data', url: '' }, + { displayName: 'Explore Data', url: 'explore-data' }, + { displayName: 'Build Apps', url: '' }, + { displayName: 'Automate New Relic', url: '' }, + { displayName: 'Reference Docs', url: '' }, ], }; diff --git a/src/types.js b/src/types.js new file mode 100644 index 000000000..602eea517 --- /dev/null +++ b/src/types.js @@ -0,0 +1,10 @@ +import PropTypes from 'prop-types'; + +// NOTE: while creating a recursive data structure is feasible, +// it is not very performant. +export const link = PropTypes.shape({ + displayName: PropTypes.string.isRequired, + url: PropTypes.string.isRequired, + active: PropTypes.bool, + children: PropTypes.array, +}); From a55b2b87b797696547ca7a28623b7479db4253ce Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Fri, 24 Apr 2020 16:37:17 -0700 Subject: [PATCH 04/12] feat: recursively create sidebar navigation --- src/components/Sidebar.js | 21 +++++++++++++++-- src/pages/reference.js | 48 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 66 insertions(+), 3 deletions(-) diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index afe596456..f2433c421 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -1,14 +1,31 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { Link } from 'gatsby'; + +import { link } from '../types'; +// TODO: styles + +// TODO: aria + +// recursively create navigation +const renderNav = (page, index) => ( +
  • + {page.displayName} + {page.children &&
      {page.children.map(renderNav)}
    } +
    • +); const Sidebar = ({ pages }) => ( ); Sidebar.propTypes = { - pages: PropTypes.array, // TODO + pages: PropTypes.arrayOf(link), }; export default Sidebar; diff --git a/src/pages/reference.js b/src/pages/reference.js index dbc6d13f7..7a16e53ac 100644 --- a/src/pages/reference.js +++ b/src/pages/reference.js @@ -7,7 +7,53 @@ import Sidebar from '../components/Sidebar'; import '../templates/Reference.scss'; // TODO: pull this in from Gatsby -const pages = []; +const pages = [ + { displayName: 'Overview', url: '' }, + { + displayName: 'CLI', + url: '', + children: [ + { displayName: 'newrelic', url: '' }, + { displayName: 'nr1', url: '' }, + ], + }, + { displayName: 'GraphQL', url: '' }, + { + displayName: 'Applications', + url: '', + children: [ + { displayName: 'Component Library', url: '', active: true }, + { displayName: 'File structure', url: '' }, + ], + }, + { + displayName: 'Data Collectors', + url: '', + children: [ + { displayName: 'Custom Attributes', url: '' }, + { displayName: 'Custom Events', url: '' }, + { displayName: 'Open Telemetry', url: '' }, + { displayName: 'Telemetry SDK', url: '' }, + ], + }, + { + displayName: 'Automation', + url: '', + children: [ + { displayName: 'Cloud Formation Provider', url: '' }, + { displayName: 'Terraform Provider', url: '' }, + { + displayName: 'Agent Deploy', + url: '', + children: [ + { displayName: 'Ansible', url: '' }, + { displayName: 'Chef', url: '' }, + { displayName: 'Puppet', url: '' }, + ], + }, + ], + }, +]; const Reference = () => ( From ca78a280e42830fe8287e1b724c7a77e9e3a5b27 Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Fri, 24 Apr 2020 16:44:50 -0700 Subject: [PATCH 05/12] chore: sidebar desktop styles --- src/components/Sidebar.js | 7 +++++-- src/components/Sidebar.scss | 29 +++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 src/components/Sidebar.scss diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index f2433c421..8d65bccbb 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -1,16 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'gatsby'; +import cx from 'classnames'; import { link } from '../types'; -// TODO: styles +import './Sidebar.scss'; // TODO: aria // recursively create navigation const renderNav = (page, index) => (
  • - {page.displayName} + + {page.displayName} + {page.children &&
      {page.children.map(renderNav)}
    }
    • ); diff --git a/src/components/Sidebar.scss b/src/components/Sidebar.scss new file mode 100644 index 000000000..1b9dba4b1 --- /dev/null +++ b/src/components/Sidebar.scss @@ -0,0 +1,29 @@ +.Sidebar { + padding: 1rem; + + h3 { + margin: 0; + margin-bottom: 1rem; + } + + ul { + margin: 0; + padding-left: 1rem; + list-style: none; + } + + a { + text-decoration: none; + color: var(--color-black); + display: inline-block; + padding: 0.2rem 0; + + &:hover { + text-decoration: underline; + } + + &.is-active { + font-weight: bold; + } + } +} From e3fba0cdcea5370a629d434b321873f4a1dc59a5 Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Fri, 24 Apr 2020 16:46:07 -0700 Subject: [PATCH 06/12] chore: accessability improvements --- src/components/Sidebar.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 8d65bccbb..557bce74c 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -6,8 +6,6 @@ import cx from 'classnames'; import { link } from '../types'; import './Sidebar.scss'; -// TODO: aria - // recursively create navigation const renderNav = (page, index) => (
  • @@ -21,7 +19,7 @@ const renderNav = (page, index) => ( const Sidebar = ({ pages }) => ( From 53f565e0c17a6437afabe8598df4ac6d20bea44f Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Fri, 24 Apr 2020 16:46:49 -0700 Subject: [PATCH 07/12] chore: style cleanup --- src/templates/Reference.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/templates/Reference.scss b/src/templates/Reference.scss index 74be7094a..cbf6e6b87 100644 --- a/src/templates/Reference.scss +++ b/src/templates/Reference.scss @@ -6,6 +6,5 @@ } .ReferenceTemplate-content { - background-color: tomato; } } From 6ad8388c39700c7211c6d2861292d6cd544c4793 Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Fri, 24 Apr 2020 16:55:22 -0700 Subject: [PATCH 08/12] chore: added the ability to add a class to Container --- src/components/Container.js | 6 ++++-- src/pages/reference.js | 5 +++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Container.js b/src/components/Container.js index cac8d96a2..5d53d4519 100644 --- a/src/components/Container.js +++ b/src/components/Container.js @@ -1,14 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; +import cx from 'classnames'; import './Container.scss'; -const Container = ({ children }) => ( -
    {children}
    +const Container = ({ children, className }) => ( +
    {children}
    ); Container.propTypes = { children: PropTypes.node.isRequired, + className: PropTypes.string, }; export default Container; diff --git a/src/pages/reference.js b/src/pages/reference.js index 7a16e53ac..441065818 100644 --- a/src/pages/reference.js +++ b/src/pages/reference.js @@ -1,5 +1,6 @@ import React from 'react'; +import Container from '../components/Container'; import Layout from '../components/Layout'; import Sidebar from '../components/Sidebar'; @@ -57,12 +58,12 @@ const pages = [ const Reference = () => ( -
    +
    The main page content goes here
    -
    +     ); From 6d7253b8416408544a0813e1acb4cb72fcdac270 Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Mon, 27 Apr 2020 12:12:36 -0700 Subject: [PATCH 09/12] feat: mobile menu --- src/components/Sidebar.js | 23 +++++++++++++++++--- src/components/Sidebar.scss | 42 +++++++++++++++++++++++++++++++----- src/pages/reference.js | 30 ++++++++++++++++---------- src/templates/Reference.scss | 8 +++++++ 4 files changed, 84 insertions(+), 19 deletions(-) diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 557bce74c..d52064b60 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -16,9 +16,20 @@ const renderNav = (page, index) => (
    • ); -const Sidebar = ({ pages }) => ( -