layout.js (1146B)
1 import React from 'react'; 2 import PropTypes from 'prop-types'; 3 import { graphql, useStaticQuery } from 'gatsby'; 4 5 import Header from './header'; 6 import Footer from './footer'; 7 8 function Layout({ 9 children, 10 heading = undefined, 11 link, 12 showHeader = true, 13 slug = undefined, 14 }) { 15 const data = useStaticQuery(graphql` 16 query SiteTitleQuery { 17 site { 18 siteMetadata { 19 author 20 description 21 email 22 username 23 title 24 } 25 } 26 } 27 `); 28 const { 29 author, 30 description, 31 email, 32 title, 33 username, 34 } = data.site.siteMetadata; 35 36 return ( 37 <div className="site"> 38 <a href="#main" className="screen-reader"> 39 Skip to Content 40 </a> 41 <Header 42 description={description} 43 link={link} 44 showHeader={showHeader} 45 siteTitle={heading || title} 46 slug={slug} 47 /> 48 <main className="main" id="main"> 49 {children} 50 </main> 51 <Footer author={author} email={email} username={username} /> 52 </div> 53 ); 54 } 55 56 Layout.propTypes = { 57 children: PropTypes.node.isRequired, 58 }; 59 60 export default Layout;