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 = { module.exports = {
siteMetadata: { 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ý`, author: `Matúš Námešný`,
user: "guest", user: "guest",
hostname: "namesny.com", hostname: "namesny.com",

13
src/components/blog.js
View File

@ -1,10 +1,21 @@
import React from "react" import React from "react"
import PostLink from "./post-link" import PostLink from "./post-link"
import styles from "../styles/blog.module.scss"
const Blog = ({ edges }) => { const Blog = ({ edges }) => {
const Posts = edges const Posts = edges
.map(edge => <PostLink key={edge.node.id} post={edge.node} />) .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 export default Blog

7
src/components/layout.js
View File

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

2
src/pages/blog.js
View File

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

3
src/pages/index.js
View File

@ -12,7 +12,6 @@ const IndexPage = () => {
query SiteDataQuery { query SiteDataQuery {
site { site {
siteMetadata { siteMetadata {
title
author author
email email
social { social {
@ -25,7 +24,7 @@ const IndexPage = () => {
`) `)
return ( 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}/> <Index author={data.site.siteMetadata.author} social={data.site.siteMetadata.social} email={data.site.siteMetadata.email}/>
</Layout> </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; text-align: center;
margin: 0 auto; margin: 0 auto;
flex: 1 auto; flex: 1 auto;
padding: 20px;
@media only screen and (min-width: $breakLarge) { @media only screen and (min-width: $breakLarge) {
display: flex; display: flex;

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

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