2020-01-08 18:11:15 +00:00
|
|
|
import React, { useEffect, useState, useRef } from 'react';
|
2020-01-07 20:23:53 +00:00
|
|
|
import { Link } from 'gatsby';
|
|
|
|
|
import PropTypes from 'prop-types';
|
2020-01-07 21:38:31 +00:00
|
|
|
import Helmet from 'react-helmet';
|
2020-01-07 22:58:15 +00:00
|
|
|
import styled from 'styled-components';
|
2020-01-08 18:11:15 +00:00
|
|
|
import FavIcon from './FavIcon';
|
2020-01-07 20:23:53 +00:00
|
|
|
|
2020-01-10 18:03:24 +00:00
|
|
|
function Header({ siteTitle, siteDescription, siteUrl }) {
|
2020-01-08 18:11:15 +00:00
|
|
|
return (
|
|
|
|
|
<HeaderWrapper className="header">
|
|
|
|
|
<FavIcon />
|
|
|
|
|
<Helmet>
|
2020-01-10 18:02:15 +00:00
|
|
|
<html lang="en" amp />
|
2020-01-08 18:11:15 +00:00
|
|
|
<title>{siteTitle}</title>
|
2020-01-10 18:02:15 +00:00
|
|
|
<meta name="description" content={siteDescription} />
|
|
|
|
|
<link rel="canonical" href={siteUrl} />
|
|
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
|
|
|
<meta name="twitter:creator" content="@wesbos" />
|
|
|
|
|
<meta name="twitter:title" content={siteTitle} />
|
|
|
|
|
<meta name="twitter:description" content={siteDescription} />
|
|
|
|
|
<meta name="twitter:image" content={`${siteUrl}/twitter-card.png`} />
|
2020-01-08 18:11:15 +00:00
|
|
|
</Helmet>
|
|
|
|
|
<div>
|
|
|
|
|
<h1>
|
|
|
|
|
<Link to="/">/uses</Link>
|
|
|
|
|
</h1>
|
|
|
|
|
<p>
|
|
|
|
|
A list of <code>/uses</code> pages detailing developer setups, gear,
|
|
|
|
|
software and configs.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</HeaderWrapper>
|
|
|
|
|
);
|
|
|
|
|
}
|
2020-01-07 20:23:53 +00:00
|
|
|
Header.propTypes = {
|
|
|
|
|
siteTitle: PropTypes.string,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Header.defaultProps = {
|
|
|
|
|
siteTitle: ``,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default Header;
|
2020-01-07 22:58:15 +00:00
|
|
|
|
|
|
|
|
// Component Styles
|
|
|
|
|
const HeaderWrapper = styled.header`
|
|
|
|
|
text-align: center;
|
|
|
|
|
h1 {
|
|
|
|
|
font-size: 6rem;
|
|
|
|
|
}
|
|
|
|
|
`;
|
