Skip to content

Commit 7c0fcda

Browse files
jerelmillerjerelmiller
authored
Merge pull request #993 from newrelic/jerel/layout-updates
Update layout with new layout components
2 parents cccaf4d + ac02f01 commit 7c0fcda

File tree

7 files changed

+75
-207
lines changed

7 files changed

+75
-207
lines changed

‎src/components/PageLayout/Content.js

-7
This file was deleted.

‎src/components/PageLayout/MarkdownContent.js

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
1-
import styled from '@emotion/styled';
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
23
import MDXContainer from '../MDXContainer';
4+
import { Layout } from '@newrelic/gatsby-theme-newrelic';
35

4-
const MarkdownContent = styled(MDXContainer)`
5-
grid-area: content;
6-
`;
6+
const MarkdownContent = ({ children }) => (
7+
<Layout.Content>
8+
<MDXContainer>{children}</MDXContainer>
9+
</Layout.Content>
10+
);
11+
12+
MarkdownContent.propTypes = {
13+
children: PropTypes.node,
14+
};
715

816
export default MarkdownContent;

‎src/components/PageLayout/PageLayout.js

+6-17
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { css } from '@emotion/core';
4-
import { graphql, useStaticQuery } from 'gatsby';
5-
import Content from './Content';
64
import Header from './Header';
75
import MarkdownContent from './MarkdownContent';
86
import Context from './Context';
7+
import { Layout, useLayout } from '@newrelic/gatsby-theme-newrelic';
98

109
const TYPES = {
1110
SINGLE_COLUMN: 'SINGLE_COLUMN',
@@ -16,15 +15,15 @@ const LAYOUTS = {
1615
[TYPES.RELATED_CONTENT]: css`
1716
grid-template-areas:
1817
'page-header page-header'
19-
'content related-content';
18+
'content page-tools';
2019
grid-template-columns: minmax(0, 1fr) 320px;
2120
grid-gap: 2rem;
2221
2322
@media (max-width: 1240px) {
2423
grid-template-areas:
2524
'page-header'
2625
'content'
27-
'related-content';
26+
'page-tools';
2827
grid-template-columns: minmax(0, 1fr);
2928
}
3029
`,
@@ -37,23 +36,13 @@ const LAYOUTS = {
3736
};
3837

3938
const PageLayout = ({ children, type }) => {
40-
const {
41-
site: { layout },
42-
} = useStaticQuery(graphql`
43-
query {
44-
site {
45-
layout {
46-
contentPadding
47-
}
48-
}
49-
}
50-
`);
39+
const { contentPadding } = useLayout();
5140

5241
return (
5342
<div
5443
css={css`
5544
display: grid;
56-
grid-gap: ${layout.contentPadding};
45+
grid-gap: ${contentPadding};
5746
5847
${LAYOUTS[type]};
5948
`}
@@ -70,7 +59,7 @@ PageLayout.propTypes = {
7059

7160
PageLayout.TYPE = TYPES;
7261

73-
PageLayout.Content = Content;
62+
PageLayout.Content = Layout.Content;
7463
PageLayout.Context = Context;
7564
PageLayout.Header = Header;
7665
PageLayout.MarkdownContent = MarkdownContent;

‎src/components/Sidebar.js

-69
This file was deleted.

‎src/layouts/MainLayout.js

+53-102
Original file line numberDiff line numberDiff line change
@@ -4,68 +4,29 @@ import { css } from '@emotion/core';
44
import {
55
CookieConsentDialog,
66
GlobalHeader,
7-
GlobalFooter,
7+
Layout,
8+
Logo,
9+
SearchInput,
810
} from '@newrelic/gatsby-theme-newrelic';
9-
import { graphql, useStaticQuery } from 'gatsby';
1011
import MobileHeader from '../components/MobileHeader';
11-
import Sidebar from '../components/Sidebar';
12+
import { Link } from 'gatsby';
13+
import Navigation from '../components/Navigation';
1214
import '../components/styles.scss';
13-
import usePageContext from '../hooks/usePageContext';
1415
import { useLocation } from '@reach/router';
15-
import { useMeasure } from 'react-use';
16-
17-
const MainLayout = ({ children }) => {
18-
const {
19-
site: { layout, siteMetadata },
20-
} = useStaticQuery(graphql`
21-
query {
22-
site {
23-
layout {
24-
contentPadding
25-
maxWidth
26-
}
27-
siteMetadata {
28-
repository
29-
}
30-
}
31-
}
32-
`);
3316

17+
const MainLayout = ({ children, pageContext }) => {
3418
const location = useLocation();
35-
const { fileRelativePath } = usePageContext();
36-
const [headerRef, { height }] = useMeasure();
19+
const [searchTerm, setSearchTerm] = useState('');
20+
const { fileRelativePath } = pageContext;
3721
const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
38-
const isComponentDoc = fileRelativePath.includes(
39-
'src/markdown-pages/components'
40-
);
41-
const editUrl = isComponentDoc
42-
? null
43-
: `${siteMetadata.repository}/blob/main/${fileRelativePath}`;
4422

4523
useEffect(() => {
4624
setIsMobileNavOpen(false);
4725
}, [location.pathname]);
4826

4927
return (
50-
<div
51-
css={css`
52-
--sidebar-width: 300px;
53-
54-
min-height: 100vh;
55-
display: grid;
56-
grid-template-rows: auto 1fr;
57-
`}
58-
>
59-
<div
60-
ref={headerRef}
61-
css={css`
62-
position: sticky;
63-
z-index: 99;
64-
top: 0;
65-
`}
66-
>
67-
<GlobalHeader editUrl={editUrl} />
68-
</div>
28+
<>
29+
<GlobalHeader />
6930
<MobileHeader
7031
css={css`
7132
@media (min-width: 761px) {
@@ -75,70 +36,60 @@ const MainLayout = ({ children }) => {
7536
isOpen={isMobileNavOpen}
7637
toggle={() => setIsMobileNavOpen(!isMobileNavOpen)}
7738
/>
78-
<div
39+
<Layout
7940
css={css`
80-
--global-header-height: ${height}px;
81-
8241
display: ${isMobileNavOpen ? 'none' : 'grid'};
83-
grid-template-areas:
84-
'sidebar content'
85-
'sidebar footer';
86-
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
87-
grid-template-rows: 1fr auto;
88-
grid-gap: ${layout.contentPadding};
89-
width: 100%;
90-
max-width: ${layout.maxWidth};
91-
margin: 0 auto;
92-
93-
@media screen and (max-width: 760px) {
94-
grid-template-columns: minmax(0, 1fr);
95-
}
9642
`}
9743
>
98-
<Sidebar
99-
css={css`
100-
position: fixed;
101-
top: var(--global-header-height);
102-
width: var(--sidebar-width);
103-
height: calc(100vh - var(--global-header-height));
104-
overflow: auto;
44+
<Layout.Sidebar>
45+
<div
46+
css={css`
47+
background: var(--primary-background-color);
48+
position: sticky;
49+
top: -2rem;
50+
z-index: 10;
51+
margin: -2rem -0.5rem 1rem;
52+
padding: 1rem 0.5rem;
53+
`}
54+
>
55+
<Link
56+
css={css`
57+
display: block;
58+
margin-bottom: 1rem;
59+
`}
60+
to="/"
61+
>
62+
<Logo
63+
css={css`
64+
display: block;
65+
width: 150px;
10566
106-
@media (max-width: 760px) {
107-
display: none;
108-
}
109-
`}
110-
/>
111-
<div
112-
css={css`
113-
grid-area: sidebar;
114-
`}
115-
/>
116-
<article
117-
data-swiftype-name="body"
118-
data-swiftype-type="text"
119-
css={css`
120-
grid-area: content;
121-
padding-top: ${layout.contentPadding};
122-
padding-right: ${layout.contentPadding};
123-
`}
124-
>
125-
{children}
126-
</article>
127-
<GlobalFooter
128-
fileRelativePath={fileRelativePath}
129-
css={css`
130-
grid-area: footer;
131-
margin-left: -${layout.contentPadding};
132-
`}
133-
/>
134-
</div>
67+
@media screen and (max-width: 760px) {
68+
width: 160px;
69+
}
70+
`}
71+
/>
72+
</Link>
73+
<SearchInput
74+
placeholder="Filter navigation"
75+
onClear={() => setSearchTerm('')}
76+
onChange={(e) => setSearchTerm(e.target.value)}
77+
value={searchTerm}
78+
/>
79+
</div>
80+
<Navigation searchTerm={searchTerm} />
81+
</Layout.Sidebar>
82+
<Layout.Main>{children}</Layout.Main>
83+
<Layout.Footer fileRelativePath={fileRelativePath} />
84+
</Layout>
13585
<CookieConsentDialog />
136-
</div>
86+
</>
13787
);
13888
};
13989

14090
MainLayout.propTypes = {
14191
children: PropTypes.node.isRequired,
92+
pageContext: PropTypes.object.isRequired,
14293
};
14394

14495
export default MainLayout;

‎src/layouts/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const Layout = ({ children, pageContext }) => {
66
if (pageContext.fileRelativePath.match(/404/)) {
77
return children;
88
}
9-
return <MainLayout>{children}</MainLayout>;
9+
return <MainLayout pageContext={pageContext}>{children}</MainLayout>;
1010
};
1111

1212
Layout.propTypes = {

‎src/templates/GuideTemplate.js

+3-7
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import FeatherIcon from '../components/FeatherIcon';
99
import SEO from '../components/Seo';
1010
import {
1111
ContributingGuidelines,
12-
PageTools,
12+
Layout,
1313
} from '@newrelic/gatsby-theme-newrelic';
1414

1515
const GuideTemplate = ({ data }) => {
@@ -46,15 +46,11 @@ const GuideTemplate = ({ data }) => {
4646
)}
4747
</PageLayout.Header>
4848
<PageLayout.MarkdownContent>{body}</PageLayout.MarkdownContent>
49-
<PageTools
50-
css={css`
51-
grid-area: related-content;
52-
`}
53-
>
49+
<Layout.PageTools>
5450
<ContributingGuidelines fileRelativePath={fileRelativePath} />
5551
<Resources page={mdx} />
5652
<PageUpdated page={mdx} />
57-
</PageTools>
53+
</Layout.PageTools>
5854
</PageLayout>
5955
</>
6056
);

0 commit comments

Comments
 (0)