Update index layout
This commit is contained in:
parent
ce56d23cc0
commit
2ea1416b2e
|
|
@ -3,6 +3,8 @@ module.exports = {
|
|||
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: `Matúš Námešný`,
|
||||
user: "guest",
|
||||
hostname: "namesny.com",
|
||||
email: "matus@namesny.com",
|
||||
social: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,25 +1,24 @@
|
|||
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 = ({ path, social, email }) => (
|
||||
const Header = ({ user, hostname }) => (
|
||||
<header className={styles.headerWrapper}>
|
||||
<div className={styles.header}>
|
||||
<div>
|
||||
<span className={styles.terminal}>~{path} $</span>
|
||||
<Link to="/" className={styles.terminal}>{user}@{hostname} ~ $</Link>
|
||||
</div>
|
||||
<nav className={styles.links}>
|
||||
<ul>
|
||||
<li key="about">
|
||||
<a href='/#about'>
|
||||
<span>About</span>
|
||||
<a href='/about'>
|
||||
<span>~/about</span>
|
||||
</a>
|
||||
</li>
|
||||
<li key="blog">
|
||||
<a href='/#blog'>
|
||||
<span>Blog</span>
|
||||
<a href='/blog'>
|
||||
<span>~/blog</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -29,14 +28,8 @@ const Header = ({ path, social, email }) => (
|
|||
)
|
||||
|
||||
Header.propTypes = {
|
||||
siteTitle: PropTypes.string,
|
||||
socials: PropTypes.arrayOf(PropTypes.object),
|
||||
}
|
||||
|
||||
Header.defaultProps = {
|
||||
siteTitle: ``,
|
||||
social: [],
|
||||
email: ``,
|
||||
user: PropTypes.string.isRequired,
|
||||
hostname: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
export default Header
|
||||
|
|
|
|||
|
|
@ -7,42 +7,34 @@ import Footer from "./footer"
|
|||
import { Helmet } from "react-helmet"
|
||||
import styles from "../styles/layout.module.scss"
|
||||
|
||||
const Layout = ({ children, title }) => {
|
||||
const Layout = ({ children, title, author}) => {
|
||||
|
||||
const data = useStaticQuery(graphql`
|
||||
query SiteTitleQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
author
|
||||
email
|
||||
social {
|
||||
name
|
||||
link
|
||||
}
|
||||
user
|
||||
hostname
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.flexWrapper}>
|
||||
<Helmet
|
||||
titleTemplate={`%s | ${data.site.siteMetadata.author}`}>
|
||||
titleTemplate={`%s | ${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}
|
||||
social={data.site.siteMetadata.social}
|
||||
email={data.site.siteMetadata.email} />
|
||||
<div className={styles.flexWrapper}>
|
||||
user={data.site.siteMetadata.user}
|
||||
hostname={data.site.siteMetadata.hostname} />
|
||||
<div className={styles.content}>
|
||||
<main className={styles.main}>{children}</main>
|
||||
</div>
|
||||
<Footer authorName={data.site.siteMetadata.author}/>
|
||||
<Footer authorName={author}/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,37 +2,30 @@ import React from "react"
|
|||
import { useStaticQuery, graphql } from "gatsby"
|
||||
|
||||
import Layout from "../components/layout"
|
||||
import Blog from "../components/blog"
|
||||
|
||||
import "../styles/global.scss"
|
||||
|
||||
const IndexPage = () => {
|
||||
|
||||
const data = useStaticQuery(graphql`
|
||||
query {
|
||||
allMarkdownRemark(
|
||||
sort: { order: DESC, fields: [frontmatter___date] }
|
||||
filter: {frontmatter: {draft: {ne: true}}}
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
excerpt
|
||||
frontmatter {
|
||||
date
|
||||
query SiteDataQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
}
|
||||
author
|
||||
email
|
||||
social {
|
||||
name
|
||||
link
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
console.log(data.allMarkdownRemark.edges)
|
||||
|
||||
return (
|
||||
<Layout title="Home">
|
||||
<Blog edges={data.allMarkdownRemark.edges}/>
|
||||
<Layout title="Home" author={data.site.siteMetadata.author} >
|
||||
<h1>Hello</h1>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@
|
|||
color: $white;
|
||||
background-color: $backgroundDark;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@for $i from 1 through 6 {
|
||||
|
|
|
|||
|
|
@ -37,5 +37,6 @@
|
|||
}
|
||||
|
||||
.terminal {
|
||||
font-size: 1.4em;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
.content {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
flex: 1 auto;
|
||||
|
||||
@media only screen and (min-width: $breakLarge) {
|
||||
display: flex;
|
||||
|
|
@ -12,9 +13,9 @@
|
|||
|
||||
.flexWrapper {
|
||||
display: flex;
|
||||
min-height: calc(100vh - 67px);
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.main {
|
||||
|
|
|
|||
Loading…
Reference in New Issue