Create initial layout
This commit is contained in:
parent
7f93846c0c
commit
9e665f6673
|
|
@ -1,8 +1,17 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
siteMetadata: {
|
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.`,
|
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: [
|
plugins: [
|
||||||
`gatsby-plugin-react-helmet`,
|
`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 { Link } from "gatsby"
|
||||||
|
import Social from "./social"
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types"
|
||||||
import React from "react"
|
import React from "react"
|
||||||
|
import styles from "../styles/header.module.scss"
|
||||||
|
|
||||||
const Header = ({ siteTitle }) => (
|
const Header = ({ siteTitle, socialNames, socialLinks, email }) => (
|
||||||
<header
|
<header className={styles.header}>
|
||||||
style={{
|
<nav className={styles.links}>
|
||||||
background: `rebeccapurple`,
|
<ul>
|
||||||
marginBottom: `1.45rem`,
|
<li key="home">
|
||||||
}}
|
<Link to="/" className={styles.nameLink}>{siteTitle} |</Link>
|
||||||
>
|
</li>
|
||||||
<div
|
<li key="about">
|
||||||
style={{
|
<a href='/#about'>
|
||||||
margin: `0 auto`,
|
<span>About</span>
|
||||||
maxWidth: 960,
|
</a>
|
||||||
padding: `1.45rem 1.0875rem`,
|
</li>
|
||||||
}}
|
<li key="blog">
|
||||||
>
|
<a href='/#blog'>
|
||||||
<h1 style={{ margin: 0 }}>
|
<span>Blog</span>
|
||||||
<Link
|
</a>
|
||||||
to="/"
|
</li>
|
||||||
style={{
|
</ul>
|
||||||
color: `white`,
|
</nav>
|
||||||
textDecoration: `none`,
|
<Social links={ socialLinks } names={ socialNames } email={ email }/>
|
||||||
}}
|
|
||||||
>
|
|
||||||
{siteTitle}
|
|
||||||
</Link>
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
|
|
||||||
Header.propTypes = {
|
Header.propTypes = {
|
||||||
siteTitle: PropTypes.string,
|
siteTitle: PropTypes.string,
|
||||||
|
socialNames: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
socialLinks: PropTypes.arrayOf(PropTypes.string),
|
||||||
}
|
}
|
||||||
|
|
||||||
Header.defaultProps = {
|
Header.defaultProps = {
|
||||||
siteTitle: ``,
|
siteTitle: ``,
|
||||||
|
socialNames: [],
|
||||||
|
socialLinks: [],
|
||||||
|
email: ``,
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Header
|
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 React from "react"
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types"
|
||||||
import { useStaticQuery, graphql } from "gatsby"
|
import { useStaticQuery, graphql } from "gatsby"
|
||||||
|
|
||||||
import Header from "./header"
|
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`
|
const data = useStaticQuery(graphql`
|
||||||
query SiteTitleQuery {
|
query SiteTitleQuery {
|
||||||
site {
|
site {
|
||||||
siteMetadata {
|
siteMetadata {
|
||||||
title
|
title
|
||||||
|
author
|
||||||
|
email
|
||||||
|
social {
|
||||||
|
names
|
||||||
|
links
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -24,21 +26,21 @@ const Layout = ({ children }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header siteTitle={data.site.siteMetadata.title} />
|
<Helmet
|
||||||
<div
|
titleTemplate={`%s | ${data.site.siteMetadata.author}`}>
|
||||||
style={{
|
<html lang="en" amp />
|
||||||
margin: `0 auto`,
|
<title>{title}</title>
|
||||||
maxWidth: 960,
|
<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>
|
||||||
padding: `0 1.0875rem 1.45rem`,
|
</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>
|
<main>{children}</main>
|
||||||
<footer>
|
|
||||||
© {new Date().getFullYear()}, Built with
|
|
||||||
{` `}
|
|
||||||
<a href="https://www.gatsbyjs.org">Gatsby</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</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 React from "react"
|
||||||
|
|
||||||
import Layout from "../components/layout"
|
import Layout from "../components/layout"
|
||||||
import SEO from "../components/seo"
|
|
||||||
|
|
||||||
const NotFoundPage = () => (
|
const NotFoundPage = () => (
|
||||||
<Layout>
|
<Layout title="404: Not found" >
|
||||||
<SEO title="404: Not found" />
|
|
||||||
<h1>NOT FOUND</h1>
|
<h1>NOT FOUND</h1>
|
||||||
<p>You just hit a route that doesn't exist... the sadness.</p>
|
<p>You just hit a route that doesn't exist... the sadness.</p>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,14 @@
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import { Link } from "gatsby"
|
|
||||||
|
|
||||||
import Layout from "../components/layout"
|
import Layout from "../components/layout"
|
||||||
import Image from "../components/image"
|
|
||||||
import SEO from "../components/seo"
|
|
||||||
|
|
||||||
import "../styles/global.scss"
|
import "../styles/global.scss"
|
||||||
|
|
||||||
const IndexPage = () => (
|
const IndexPage = () => (
|
||||||
<Layout>
|
<Layout title="Home">
|
||||||
<SEO title="Home" />
|
|
||||||
<h1>Hi people</h1>
|
<h1>Hi people</h1>
|
||||||
<p>Welcome to your new Gatsby site.</p>
|
<p>Welcome to your new Gatsby site.</p>
|
||||||
<p>Now go build something great.</p>
|
<p>Now go build something great.</p>
|
||||||
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
|
|
||||||
<Image />
|
|
||||||
</div>
|
|
||||||
</Layout>
|
</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
|
// Colors
|
||||||
$blackRussian: #222129;
|
$blackRussian: #222129;
|
||||||
$white: #f8f8ff;
|
$white: #f8f8ff;
|
||||||
|
$black: #2f2f2f;
|
||||||
$blue: #0f52bf;
|
$blue: #0f52bf;
|
||||||
|
|
||||||
//Fonts
|
//Fonts
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue