Create initial layout
This commit is contained in:
parent
7f93846c0c
commit
9e665f6673
|
|
@ -1,8 +1,17 @@
|
|||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: `Gatsby Default Starter`,
|
||||
title: `Matúš Námešný`,
|
||||
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
|
||||
author: `@gatsbyjs`,
|
||||
author: `Matúš Námešný`,
|
||||
email: "matus@namesny.com",
|
||||
social: {
|
||||
names: ["github", "codepen", "linkedin"],
|
||||
links: [
|
||||
"https://github.com/LordMathis",
|
||||
"https://codepen.io/LordMathis/",
|
||||
"https://www.linkedin.com/in/mat%C3%BA%C5%A1-n%C3%A1me%C5%A1n%C3%BD-3903b6128/",
|
||||
]
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
`gatsby-plugin-react-helmet`,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import React from "react"
|
||||
import styles from '../styles/footer.module.scss'
|
||||
|
||||
const Footer = ({authorName}) => (
|
||||
<footer className={styles.footer}>
|
||||
© {new Date().getFullYear()} {authorName}, Built with
|
||||
{` `}
|
||||
<a href="https://www.gatsbyjs.org" className={styles.link}>Gatsby</a>
|
||||
</footer>
|
||||
)
|
||||
|
||||
export default Footer
|
||||
|
|
@ -1,42 +1,43 @@
|
|||
import { Link } from "gatsby"
|
||||
import Social from "./social"
|
||||
import PropTypes from "prop-types"
|
||||
import React from "react"
|
||||
import styles from "../styles/header.module.scss"
|
||||
|
||||
const Header = ({ siteTitle }) => (
|
||||
<header
|
||||
style={{
|
||||
background: `rebeccapurple`,
|
||||
marginBottom: `1.45rem`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
margin: `0 auto`,
|
||||
maxWidth: 960,
|
||||
padding: `1.45rem 1.0875rem`,
|
||||
}}
|
||||
>
|
||||
<h1 style={{ margin: 0 }}>
|
||||
<Link
|
||||
to="/"
|
||||
style={{
|
||||
color: `white`,
|
||||
textDecoration: `none`,
|
||||
}}
|
||||
>
|
||||
{siteTitle}
|
||||
</Link>
|
||||
</h1>
|
||||
</div>
|
||||
const Header = ({ siteTitle, socialNames, socialLinks, email }) => (
|
||||
<header className={styles.header}>
|
||||
<nav className={styles.links}>
|
||||
<ul>
|
||||
<li key="home">
|
||||
<Link to="/" className={styles.nameLink}>{siteTitle} |</Link>
|
||||
</li>
|
||||
<li key="about">
|
||||
<a href='/#about'>
|
||||
<span>About</span>
|
||||
</a>
|
||||
</li>
|
||||
<li key="blog">
|
||||
<a href='/#blog'>
|
||||
<span>Blog</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<Social links={ socialLinks } names={ socialNames } email={ email }/>
|
||||
</header>
|
||||
)
|
||||
|
||||
Header.propTypes = {
|
||||
siteTitle: PropTypes.string,
|
||||
socialNames: PropTypes.arrayOf(PropTypes.string),
|
||||
socialLinks: PropTypes.arrayOf(PropTypes.string),
|
||||
}
|
||||
|
||||
Header.defaultProps = {
|
||||
siteTitle: ``,
|
||||
socialNames: [],
|
||||
socialLinks: [],
|
||||
email: ``,
|
||||
}
|
||||
|
||||
export default Header
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
/**
|
||||
* Layout component that queries for data
|
||||
* with Gatsby's useStaticQuery component
|
||||
*
|
||||
* See: https://www.gatsbyjs.org/docs/use-static-query/
|
||||
*/
|
||||
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import { useStaticQuery, graphql } from "gatsby"
|
||||
|
||||
import Header from "./header"
|
||||
import Footer from "./footer"
|
||||
import { Helmet } from "react-helmet"
|
||||
import styles from "../styles/layout.module.scss"
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
const Layout = ({ children, title }) => {
|
||||
const data = useStaticQuery(graphql`
|
||||
query SiteTitleQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
author
|
||||
email
|
||||
social {
|
||||
names
|
||||
links
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -24,21 +26,21 @@ const Layout = ({ children }) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Header siteTitle={data.site.siteMetadata.title} />
|
||||
<div
|
||||
style={{
|
||||
margin: `0 auto`,
|
||||
maxWidth: 960,
|
||||
padding: `0 1.0875rem 1.45rem`,
|
||||
}}
|
||||
>
|
||||
<Helmet
|
||||
titleTemplate={`%s | ${data.site.siteMetadata.author}`}>
|
||||
<html lang="en" amp />
|
||||
<title>{title}</title>
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" rel="preload" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"></link>
|
||||
</Helmet>
|
||||
<Header
|
||||
siteTitle={data.site.siteMetadata.title}
|
||||
socialNames={data.site.siteMetadata.social.names}
|
||||
socialLinks={data.site.siteMetadata.social.links}
|
||||
email={data.site.siteMetadata.email} />
|
||||
<div className={styles.content}>
|
||||
<main>{children}</main>
|
||||
<footer>
|
||||
© {new Date().getFullYear()}, Built with
|
||||
{` `}
|
||||
<a href="https://www.gatsbyjs.org">Gatsby</a>
|
||||
</footer>
|
||||
</div>
|
||||
<Footer authorName={data.site.siteMetadata.author}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,88 +0,0 @@
|
|||
/**
|
||||
* SEO component that queries for data with
|
||||
* Gatsby's useStaticQuery React hook
|
||||
*
|
||||
* See: https://www.gatsbyjs.org/docs/use-static-query/
|
||||
*/
|
||||
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import { Helmet } from "react-helmet"
|
||||
import { useStaticQuery, graphql } from "gatsby"
|
||||
|
||||
function SEO({ description, lang, meta, title }) {
|
||||
const { site } = useStaticQuery(
|
||||
graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
description
|
||||
author
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
)
|
||||
|
||||
const metaDescription = description || site.siteMetadata.description
|
||||
|
||||
return (
|
||||
<Helmet
|
||||
htmlAttributes={{
|
||||
lang,
|
||||
}}
|
||||
title={title}
|
||||
titleTemplate={`%s | ${site.siteMetadata.title}`}
|
||||
meta={[
|
||||
{
|
||||
name: `description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
property: `og:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:type`,
|
||||
content: `website`,
|
||||
},
|
||||
{
|
||||
name: `twitter:card`,
|
||||
content: `summary`,
|
||||
},
|
||||
{
|
||||
name: `twitter:creator`,
|
||||
content: site.siteMetadata.author,
|
||||
},
|
||||
{
|
||||
name: `twitter:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
name: `twitter:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
].concat(meta)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
SEO.defaultProps = {
|
||||
lang: `en`,
|
||||
meta: [],
|
||||
description: ``,
|
||||
}
|
||||
|
||||
SEO.propTypes = {
|
||||
description: PropTypes.string,
|
||||
lang: PropTypes.string,
|
||||
meta: PropTypes.arrayOf(PropTypes.object),
|
||||
title: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
export default SEO
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from '../styles/social.module.scss'
|
||||
|
||||
export default class Social extends Component {
|
||||
static propTypes = {
|
||||
links: PropTypes.arrayOf(PropTypes.string),
|
||||
names: PropTypes.arrayOf(PropTypes.string),
|
||||
email: PropTypes.string
|
||||
}
|
||||
|
||||
render () {
|
||||
let key = 0
|
||||
const names = this.props.names
|
||||
const links = this.props.links
|
||||
|
||||
const zipped = names.map(function(e, i) {
|
||||
return [e, links[i]];
|
||||
});
|
||||
|
||||
const socialLinks = zipped.map((val) => {
|
||||
const link = (
|
||||
<li key={key}>
|
||||
<a href={val[1]} role="link">
|
||||
{val[0]}
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
key += 1
|
||||
return link
|
||||
})
|
||||
|
||||
socialLinks.push(
|
||||
<li key={key}>
|
||||
<a href={`mailto:${this.props.email}`} role="link">
|
||||
e-mail
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={styles.socialNavbar} role="list">
|
||||
<ul>
|
||||
{socialLinks}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
import React from "react"
|
||||
|
||||
import Layout from "../components/layout"
|
||||
import SEO from "../components/seo"
|
||||
|
||||
const NotFoundPage = () => (
|
||||
<Layout>
|
||||
<SEO title="404: Not found" />
|
||||
<Layout title="404: Not found" >
|
||||
<h1>NOT FOUND</h1>
|
||||
<p>You just hit a route that doesn't exist... the sadness.</p>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,14 @@
|
|||
import React from "react"
|
||||
import { Link } from "gatsby"
|
||||
|
||||
import Layout from "../components/layout"
|
||||
import Image from "../components/image"
|
||||
import SEO from "../components/seo"
|
||||
|
||||
import "../styles/global.scss"
|
||||
|
||||
const IndexPage = () => (
|
||||
<Layout>
|
||||
<SEO title="Home" />
|
||||
<Layout title="Home">
|
||||
<h1>Hi people</h1>
|
||||
<p>Welcome to your new Gatsby site.</p>
|
||||
<p>Now go build something great.</p>
|
||||
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
|
||||
<Image />
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
@import "./variables.scss";
|
||||
|
||||
.footer {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: $white;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
@import "./variables.scss";
|
||||
|
||||
.header {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.links {
|
||||
float: left;
|
||||
ul {
|
||||
list-style: none;
|
||||
li {
|
||||
display: inline;
|
||||
margin: 5px;
|
||||
a {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nameLink {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import "./variables.scss";
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
|
||||
@media only screen and (min-width: $breakLarge) {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
@import "./variables.scss";
|
||||
|
||||
|
||||
.socialNavbar {
|
||||
|
||||
float: right;
|
||||
vertical-align: bottom;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $white;
|
||||
text-shadow: $black 0px 0px 2px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
// Colors
|
||||
$blackRussian: #222129;
|
||||
$white: #f8f8ff;
|
||||
$black: #2f2f2f;
|
||||
$blue: #0f52bf;
|
||||
|
||||
//Fonts
|
||||
|
|
|
|||
Loading…
Reference in New Issue