(display) start re-structuring the site

moves post previews to index

updates post styles

Author: Zach Lysobey

src/components/blog-post.css

@@ -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;
+}

src/components/layout.js

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

src/pages/index.js

@@ -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
+                    }
+                }
+            }
+        }
+    }
+`

src/templates/blog-post.js

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