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

Update post list layout

This commit is contained in:
LordMathis 2020-10-03 18:40:22 +02:00
parent a6d6a680fa
commit 0aede99fd8
8 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gatsby-config.js
View File

@ -1,7 +1,5 @@
module.exports = {
siteMetadata: {
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",

13
src/components/blog.js
View File

@ -1,10 +1,21 @@
import React from "react"
import PostLink from "./post-link"
import styles from "../styles/blog.module.scss"
const Blog = ({ edges }) => {
const Posts = edges
.map(edge => <PostLink key={edge.node.id} post={edge.node} />)
return <div>{Posts}</div>
return (
<div>
<div className={styles.header}>
<h1>Blog</h1>
</div>
<div>
{Posts}
</div>
</div>
)
}
export default Blog

7
src/components/layout.js
View File

@ -7,12 +7,13 @@ import Footer from "./footer"
import { Helmet } from "react-helmet"
import styles from "../styles/layout.module.scss"
const Layout = ({ children, title, author, vertical}) => {
const Layout = ({ children, title, vertical}) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
author
user
hostname
}
@ -24,7 +25,7 @@ const Layout = ({ children, title, author, vertical}) => {
return (
<div className={styles.flexWrapper}>
<Helmet
titleTemplate={`%s | ${author}`}>
titleTemplate={`%s | ${data.site.siteMetadata.author}`}>
<html lang="en" amp />
<title>{title}</title>
</Helmet>
@ -34,7 +35,7 @@ const Layout = ({ children, title, author, vertical}) => {
<div className={classes}>
<main className={styles.main}>{children}</main>
</div>
<Footer authorName={author}/>
<Footer authorName={data.site.siteMetadata.author}/>
</div>
)
}

2
src/pages/blog.js
View File

@ -31,7 +31,7 @@ const IndexPage = () => {
console.log(data.allMarkdownRemark.edges)
return (
<Layout title="Home">
<Layout title="Blog">
<Blog edges={data.allMarkdownRemark.edges}/>
</Layout>
)

3
src/pages/index.js
View File

@ -12,7 +12,6 @@ const IndexPage = () => {
query SiteDataQuery {
site {
siteMetadata {
title
author
email
social {
@ -25,7 +24,7 @@ const IndexPage = () => {
`)
return (
<Layout title="Home" author={data.site.siteMetadata.author} vertical={true} >
<Layout title="Home" vertical={true} >
<Index author={data.site.siteMetadata.author} social={data.site.siteMetadata.social} email={data.site.siteMetadata.email}/>
</Layout>
)

5
src/styles/blog.module.scss Normal file
View File

@ -0,0 +1,5 @@
@import "./variables.scss";
.header {
text-align: left;
}

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

@ -4,6 +4,7 @@
text-align: center;
margin: 0 auto;
flex: 1 auto;
padding: 20px;
@media only screen and (min-width: $breakLarge) {
display: flex;

4
src/styles/post-link.module.scss
View File

@ -22,7 +22,9 @@
}
.postListItem {
border-bottom: 1px solid $blue;
padding: 20px;
background-color: $black;
margin-bottom: 20px;
}
.postExcerpt {