Update index layout

This commit is contained in:
LordMathis 2020-10-02 15:30:55 +02:00
parent ce56d23cc0
commit 2ea1416b2e
7 changed files with 46 additions and 61 deletions

View File

@ -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: [
{

View File

@ -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

View File

@ -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>
</>
)
}

View File

@ -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>
)
}

View File

@ -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 {

View File

@ -37,5 +37,6 @@
}
.terminal {
font-size: 1.4em;
color: $white;
text-decoration: none;
}

View File

@ -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 {