Mathis
/
namesny-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gatsby-config.js
View File

@ -3,6 +3,8 @@ module.exports = {
title: `Matúš Námešný`, 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: `Matúš Námešný`, author: `Matúš Námešný`,
user: "guest",
hostname: "namesny.com",
email: "matus@namesny.com", email: "matus@namesny.com",
social: [ social: [
{ {

23
src/components/header.js
View File

@ -1,25 +1,24 @@
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" import styles from "../styles/header.module.scss"
const Header = ({ path, social, email }) => ( const Header = ({ user, hostname }) => (
<header className={styles.headerWrapper}> <header className={styles.headerWrapper}>
<div className={styles.header}> <div className={styles.header}>
<div> <div>
<span className={styles.terminal}>~{path} $</span> <Link to="/" className={styles.terminal}>{user}@{hostname} ~ $</Link>
</div> </div>
<nav className={styles.links}> <nav className={styles.links}>
<ul> <ul>
<li key="about"> <li key="about">
<a href='/#about'> <a href='/about'>
<span>About</span> <span>~/about</span>
</a> </a>
</li> </li>
<li key="blog"> <li key="blog">
<a href='/#blog'> <a href='/blog'>
<span>Blog</span> <span>~/blog</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -29,14 +28,8 @@ const Header = ({ path, social, email }) => (
) )
Header.propTypes = { Header.propTypes = {
siteTitle: PropTypes.string, user: PropTypes.string.isRequired,
socials: PropTypes.arrayOf(PropTypes.object), hostname: PropTypes.string.isRequired,
}
Header.defaultProps = {
siteTitle: ``,
social: [],
email: ``,
} }
export default Header export default Header

42
src/components/layout.js
View File

@ -7,42 +7,34 @@ import Footer from "./footer"
import { Helmet } from "react-helmet" import { Helmet } from "react-helmet"
import styles from "../styles/layout.module.scss" import styles from "../styles/layout.module.scss"
const Layout = ({ children, title }) => { const Layout = ({ children, title, author}) => {
const data = useStaticQuery(graphql` const data = useStaticQuery(graphql`
query SiteTitleQuery { query SiteTitleQuery {
site { site {
siteMetadata { siteMetadata {
title user
author hostname
email
social {
name
link
}
}
} }
} }
`) }
`)
return ( return (
<> <div className={styles.flexWrapper}>
<Helmet <Helmet
titleTemplate={`%s | ${data.site.siteMetadata.author}`}> titleTemplate={`%s | ${author}`}>
<html lang="en" amp /> <html lang="en" amp />
<title>{title}</title> <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> </Helmet>
<Header <Header
siteTitle={data.site.siteMetadata.title} user={data.site.siteMetadata.user}
social={data.site.siteMetadata.social} hostname={data.site.siteMetadata.hostname} />
email={data.site.siteMetadata.email} /> <div className={styles.content}>
<div className={styles.flexWrapper}> <main className={styles.main}>{children}</main>
<div className={styles.content}>
<main className={styles.main}>{children}</main>
</div>
<Footer authorName={data.site.siteMetadata.author}/>
</div> </div>
</> <Footer authorName={author}/>
</div>
) )
} }

29
src/pages/index.js
View File

@ -2,37 +2,30 @@ import React from "react"
import { useStaticQuery, graphql } from "gatsby" import { useStaticQuery, graphql } from "gatsby"
import Layout from "../components/layout" import Layout from "../components/layout"
import Blog from "../components/blog"
import "../styles/global.scss" import "../styles/global.scss"
const IndexPage = () => { const IndexPage = () => {
const data = useStaticQuery(graphql` const data = useStaticQuery(graphql`
query { query SiteDataQuery {
allMarkdownRemark( site {
sort: { order: DESC, fields: [frontmatter___date] } siteMetadata {
filter: {frontmatter: {draft: {ne: true}}} title
) { author
edges { email
node { social {
id name
excerpt link
frontmatter {
date
title
}
} }
} }
} }
} }
`) `)
console.log(data.allMarkdownRemark.edges)
return ( return (
<Layout title="Home"> <Layout title="Home" author={data.site.siteMetadata.author} >
<Blog edges={data.allMarkdownRemark.edges}/> <h1>Hello</h1>
</Layout> </Layout>
) )
} }

3
src/styles/global.scss
View File

@ -9,6 +9,9 @@
color: $white; color: $white;
background-color: $backgroundDark; background-color: $backgroundDark;
margin: 0; margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
} }
@for $i from 1 through 6 { @for $i from 1 through 6 {

3
src/styles/header.module.scss
View File

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

5
src/styles/layout.module.scss
View File

@ -3,6 +3,7 @@
.content { .content {
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
flex: 1 auto;
@media only screen and (min-width: $breakLarge) { @media only screen and (min-width: $breakLarge) {
display: flex; display: flex;
@ -12,9 +13,9 @@
.flexWrapper { .flexWrapper {
display: flex; display: flex;
min-height: calc(100vh - 67px);
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: center;
min-height: 100vh;
} }
.main { .main {