Skip to content
Permalink
Browse files

(display) start re-structuring the site

moves post previews to index

updates post styles
  • Loading branch information
Zach Lysobey
Zach Lysobey committed Sep 20, 2019
1 parent 922986b commit f9c37e9d603240a834a646f4222074fa7d8ab71c
Showing with 81 additions and 18 deletions.
  1. +30 −0 src/components/blog-post.css
  2. +1 −0 src/components/layout.js
  3. +49 −17 src/pages/index.js
  4. +1 −1 src/templates/blog-post.js
@@ -0,0 +1,30 @@
.blog-post .date {
display: block;
color: #666;
font-size: .65em;
font-style: italic;
}

.blog-post.preview a {
text-decoration: none;
}
.blog-post.preview a,
.blog-post.preview a:visited {
color: rebeccapurple;
}
.blog-post.preview a:hover {
text-decoration: underline;
}

.blog-post.preview .tag-list {
margin-left: 0;
}
.blog-post.preview .tag-list li {
font-size: .75em;
font-family: monospace;
list-style-type: none;
border: 1px solid #333;
padding: .125em;
margin-right: .125em;
display: inline-block;
}
@@ -6,6 +6,7 @@ import Helmet from 'react-helmet'
import Header from './header'

import './layout.css'
import './blog-post.css'

// import 'prismjs/themes/prism.css'
// import 'prismjs/themes/prism-tomorrow.css'
@@ -3,22 +3,54 @@ import Link from 'gatsby-link'

import Layout from '../components/layout'

export default () => (
<Layout>
<h2>My new home on the Internet</h2>
export default ({ data }) => {
const { edges: posts } = data.allMarkdownRemark
return (
<Layout>
<div className="blog-posts">
{posts
.filter((post) => post.node.frontmatter.title.length > 0)
.map(({ node }) => {
const { frontmatter, id, excerpt } = node
const { date, path, title, tags } = frontmatter
return (
<div className="blog-post preview" key={id}>
<h2>
<small className="date">{date}</small>{' '}
<Link to={path}>{title}</Link>
</h2>

<p>Playing around with creating a new site using Gatsby.js</p>
<p>{excerpt}</p>

<ul>
<li>
<Link to="/music/">Music</Link>
</li>
<li>
<Link to="/programming/">Programming</Link>
</li>
<li>
<Link to="/blog/">Blog</Link>
</li>
</ul>
</Layout>
)
<ul className="tag-list">
<span></span>
{(tags || []).map((tag, i) => (
<li key={i}>#{tag}</li>
))}
</ul>
</div>
)
})}
</div>
</Layout>
)
}

export const pageQuery = graphql`
query IndexQuery {
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
edges {
node {
excerpt(pruneLength: 250)
id
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
path
tags
}
}
}
}
}
`
@@ -11,7 +11,7 @@ export default function Template({ data }) {
<Helmet title={`Zach Lysobey - ${post.frontmatter.title}`} />
<div className="blog-post">
<h2>
<small>{post.frontmatter.date}</small>{' '}
<small className="date">{post.frontmatter.date}</small>{' '}
{post.frontmatter.title}
</h2>
<div

0 comments on commit f9c37e9

Please sign in to comment.
You can’t perform that action at this time.