-
Notifications
You must be signed in to change notification settings - Fork 10.3k
/
layout-with-heading.js
111 lines (94 loc) · 2.85 KB
/
layout-with-heading.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { SkipNavLink } from "@reach/skip-nav"
import { OutboundLink } from "gatsby-plugin-google-analytics"
import styled from "react-emotion"
import Banner from "../banner"
import PageHeading from "./page-heading"
import Navigation from "../navigation"
import MobileNavigation from "../navigation-mobile"
import presets from "../../utils/presets"
// Import Futura PT typeface
import "../../fonts/Webfonts/futurapt_book_macroman/stylesheet.css"
import "../../fonts/Webfonts/futurapt_bookitalic_macroman/stylesheet.css"
import "../../fonts/Webfonts/futurapt_demi_macroman/stylesheet.css"
import "../../fonts/Webfonts/futurapt_demiitalic_macroman/stylesheet.css"
// Other fonts
import "typeface-spectral"
const Content = styled(`div`)`
padding-top: ${presets.bannerHeight};
padding-bottom: 3.5rem;
${presets.Tablet} {
margin-left: ${presets.pageHeadingDesktopWidth};
padding-top: calc(${presets.bannerHeight} + ${presets.headerHeight});
padding-bottom: 0;
}
`
const StyledSkipNavLink = styled(SkipNavLink)`
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
position: absolute;
z-index: 100;
font-size: 0.85rem;
:focus {
padding: 0.9rem;
position: fixed;
top: 10px;
left: 10px;
background: white;
text-decoration: none;
width: auto;
height: auto;
clip: auto;
}
`
const LayoutWithHeading = props => {
const {
children,
location: { pathname },
pageTitle = ``,
pageIcon,
} = props
const isHomepage = pathname === `/`
return (
<div className={` ${isHomepage ? `isHomepage` : ``}`}>
<Helmet>
<title>{pageTitle ? `${pageTitle} | GatsbyJS` : `GatsbyJS`}</title>
<meta name="twitter:site" content="@gatsbyjs" />
<meta name="og:type" content="website" />
<meta name="og:site_name" content="GatsbyJS" />
<link rel="canonical" href={`https://gatsbyjs.org${pathname}`} />
<html lang="en" />
</Helmet>
<StyledSkipNavLink>Skip to main content</StyledSkipNavLink>
<Banner>
<OutboundLink
href="https://www.gatsbyjs.com/behind-the-scenes/"
css={{ color: `#fff`, "&:hover": { color: `#fff` } }}
>
Register now
</OutboundLink>
{`: “Behind the Scenes: What makes Gatsby Great”.`}
</Banner>
<Navigation pathname={props.location.pathname} />
<Content>
{pageTitle && <PageHeading title={pageTitle} icon={pageIcon} />}
{children}
</Content>
<MobileNavigation />
</div>
)
}
LayoutWithHeading.propTypes = {
children: PropTypes.node.isRequired,
location: PropTypes.object.isRequired,
pageTitle: PropTypes.string,
pageIcon: PropTypes.string,
}
export default LayoutWithHeading