port over front page content styles

src/components/atoms/PostContent.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './PostContent.module.scss'
+
+// Remove lead paragraph from content
+const PostContent = ({ post }) => {
+  let content
+  const separator = '<!-- more -->'
+
+  content = post.html
+
+  if (post.frontmatter.type === 'post') {
+    if (content.includes(separator)) {
+      content = content.split(separator)[1]
+    } else {
+      const lead = content.split('\n')[0]
+      content = content.replace(lead, '')
+    }
+  }
+
+  return (
+    <div
+      className={styles.content}
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  )
+}
+
+PostContent.propTypes = {
+  post: PropTypes.object
+}
+
+export default PostContent

src/components/atoms/PostContent.module.scss

@@ -0,0 +1,98 @@
+@import 'variables';
+@import 'mixins';
+
+.content {
+    h1,
+    h2 {
+        @include heading-band();
+    }
+
+    h1 {
+        font-size: $font-size-h2;
+    }
+
+    h2 {
+        font-size: $font-size-h3;
+    }
+
+    h3 {
+        font-size: $font-size-h4;
+    }
+
+    h4 {
+        font-size: $font-size-h5;
+    }
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+
+    .gatsby-resp-image-figure,
+    .gatsby-resp-image-wrapper {
+        margin-bottom: $spacer;
+    }
+
+    figcaption {
+        font-size: $font-size-small;
+        color: $brand-grey;
+        font-style: italic;
+        text-align: center;
+        margin-top: -$spacer / 2;
+    }
+
+    .anchor {
+        margin-top: $spacer / 3;
+    }
+
+    // Quotes
+    /////////////////////////////////////
+
+    q {
+        font-style: italic;
+    }
+
+    cite {
+        font-style: normal;
+        text-transform: uppercase;
+    }
+
+    // stylelint-disable no-descending-specificity
+    blockquote,
+    blockquote > p {
+        font-style: italic;
+        color: $brand-grey-light;
+    }
+    // stylelint-enable no-descending-specificity
+
+    blockquote {
+        margin: 0 0 $spacer;
+        position: relative;
+        padding-left: 20px;
+
+        @media (min-width: $screen-xs) {
+            padding-left: 40px;
+        }
+
+        @media (min-width: $screen-lg) {
+            padding-left: 60px;
+        }
+
+        // quotation marks
+        &::before {
+            content: '“';
+            font-size: 300%;
+            color: lighten($brand-grey-light, 20%);
+            position: absolute;
+            left: -10px;
+            top: -20px;
+
+            @media (min-width: $screen-xs) {
+                left: 0;
+            }
+
+            @media (min-width: $screen-lg) {
+                top: -30px;
+            }
+        }
+    }
+}

src/components/atoms/PostLead.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './PostLead.module.scss'
+
+// Extract lead paragraph from content
+// Grab everything before more tag, or just first paragraph
+const PostLead = ({ post }) => {
+  let lead
+  const content = post.html
+  const separator = '<!-- more -->'
+
+  if (post.frontmatter.type === 'post') {
+    if (content.includes(separator)) {
+      lead = content.split(separator)[0]
+    } else {
+      lead = content.split('\n')[0]
+    }
+  } else {
+    return null
+  }
+
+  return (
+    <div className={styles.lead} dangerouslySetInnerHTML={{ __html: lead }} />
+  )
+}
+
+PostLead.propTypes = {
+  post: PropTypes.object
+}
+
+export default PostLead

src/components/atoms/PostLead.module.scss

@@ -0,0 +1,5 @@
+@import 'mixins';
+
+.lead {
+    @include lead();
+}

src/components/atoms/PostLinkActions.module.scss

@@ -4,7 +4,6 @@
     display: flex;
     justify-content: space-between;
     margin-top: $spacer * 2;
-    margin-bottom: $spacer * 2;
 
     a {
         svg {

src/pages/index.jsx

@@ -1,23 +1,53 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 import Layout from '../components/Layout'
+import Image from '../components/atoms/Image'
+import PostTitle from '../components/atoms/PostTitle'
+import PostLead from '../components/atoms/PostLead'
+import PostContent from '../components/atoms/PostContent'
+import PostLinkActions from '../components/atoms/PostLinkActions'
+import postStyles from '../templates/Post.module.scss'
+import styles from './index.module.scss'
 
 const IndexPage = ({ data, location }) => {
   const edges = data.allMarkdownRemark.edges
-  const Posts = edges
-    // .filter(edge => !!edge.node.frontmatter.date)
-    .map(edge => (
-      <li key={edge.node.id}>
-        <Link to={edge.node.fields.slug}>{edge.node.frontmatter.title}</Link>
-      </li>
-    ))
 
-  return (
-    <Layout location={location}>
-      <ul>{Posts}</ul>
-    </Layout>
-  )
+  const Posts = edges.map(({ node }) => {
+    const { type, linkurl, title, image } = node.frontmatter
+    const { slug } = node.fields
+
+    return (
+      <article className={postStyles.hentry} key={node.id}>
+        <PostTitle type={type} linkurl={linkurl} title={title} />
+
+        {image && (
+          <figure className={styles.hentry__image}>
+            <Link to={slug}>
+              <Image fluid={image.childImageSharp.fluid} alt={title} />
+            </Link>
+          </figure>
+        )}
+
+        <PostLead post={node} />
+
+        {type === 'post' && (
+          <Link className="more-link" to={slug}>
+            Continue Reading
+          </Link>
+        )}
+
+        {type === 'link' && (
+          <Fragment>
+            <PostContent post={node} />
+            <PostLinkActions slug={slug} linkurl={linkurl} />
+          </Fragment>
+        )}
+      </article>
+    )
+  })
+
+  return <Layout location={location}>{Posts}</Layout>
 }
 
 IndexPage.propTypes = {
@@ -33,9 +63,17 @@ export const indexQuery = graphql`
       edges {
         node {
           id
+          html
           excerpt(pruneLength: 250)
           frontmatter {
             title
+            type
+            linkurl
+            image {
+              childImageSharp {
+                ...ImageFluid
+              }
+            }
           }
           fields {
             slug

src/pages/index.module.scss

@@ -0,0 +1,28 @@
+@import 'variables';
+@import 'mixins';
+
+// Post/photo teaser
+/////////////////////////////////////
+
+.hentry__image {
+    @include breakoutviewport();
+
+    max-width: none;
+    display: block;
+    margin-top: $spacer * 1.5;
+    margin-bottom: $spacer * 1.5;
+
+    > div {
+        @include media-frame();
+
+        border-radius: 0;
+
+        @media (min-width: $screen-sm) {
+            border-radius: $border-radius;
+        }
+    }
+
+    img {
+        border-radius: 0;
+    }
+}

src/styles/_content.scss

@@ -1,102 +1,3 @@
-@import 'variables';
-@import 'mixins';
-
-.content {
-    h1,
-    h2 {
-        @include heading-band();
-    }
-
-    h1 {
-        font-size: $font-size-h2;
-    }
-
-    h2 {
-        font-size: $font-size-h3;
-    }
-
-    h3 {
-        font-size: $font-size-h4;
-    }
-
-    h4 {
-        font-size: $font-size-h5;
-    }
-
-    p:last-child {
-        margin-bottom: 0;
-    }
-
-    .gatsby-resp-image-figure,
-    .gatsby-resp-image-wrapper {
-        margin-bottom: $spacer;
-    }
-
-    figcaption {
-        font-size: $font-size-small;
-        color: $brand-grey;
-        font-style: italic;
-        text-align: center;
-        margin-top: -$spacer / 2;
-    }
-
-    .anchor {
-        margin-top: $spacer / 3;
-    }
-
-    // Quotes
-    /////////////////////////////////////
-
-    q {
-        font-style: italic;
-    }
-
-    cite {
-        font-style: normal;
-        text-transform: uppercase;
-    }
-
-    // stylelint-disable no-descending-specificity
-    blockquote,
-    blockquote > p {
-        font-style: italic;
-        color: $brand-grey-light;
-    }
-    // stylelint-enable no-descending-specificity
-
-    blockquote {
-        margin: 0 0 $spacer;
-        position: relative;
-        padding-left: 20px;
-
-        @media (min-width: $screen-xs) {
-            padding-left: 40px;
-        }
-
-        @media (min-width: $screen-lg) {
-            padding-left: 60px;
-        }
-
-        // quotation marks
-        &::before {
-            content: '“';
-            font-size: 300%;
-            color: lighten($brand-grey-light, 20%);
-            position: absolute;
-            left: -10px;
-            top: -20px;
-
-            @media (min-width: $screen-xs) {
-                left: 0;
-            }
-
-            @media (min-width: $screen-lg) {
-                top: -30px;
-            }
-        }
-    }
-}
-
 // Goodies download
 /////////////////////////////////////
 

src/templates/Post.jsx

@@ -5,55 +5,11 @@ import { graphql } from 'gatsby'
 import Layout from '../components/Layout'
 import Image from '../components/atoms/Image'
 import PostTitle from '../components/atoms/PostTitle'
+import PostLead from '../components/atoms/PostLead'
+import PostContent from '../components/atoms/PostContent'
 import PostMeta from '../components/molecules/PostMeta'
 import styles from './Post.module.scss'
 
-const separator = '<!-- more -->'
-
-// Extract lead paragraph from content
-// Grab everything before more tag, or just first paragraph
-const PostLead = ({ post }) => {
-  let lead
-  const content = post.html
-
-  if (post.frontmatter.type === 'post') {
-    if (content.includes(separator)) {
-      lead = content.split(separator)[0]
-    } else {
-      lead = content.split('\n')[0]
-    }
-  } else {
-    return null
-  }
-
-  return (
-    <div
-      className={styles.hentry__lead}
-      dangerouslySetInnerHTML={{ __html: lead }}
-    />
-  )
-}
-
-// Remove lead paragraph from content
-const PostContent = ({ post }) => {
-  let content
-
-  content = post.html
-
-  if (post.frontmatter.type === 'post') {
-    if (content.includes(separator)) {
-      content = content.split(separator)[1]
-    } else {
-      const lead = content.split('\n')[0]
-      content = content.replace(lead, '')
-    }
-  }
-
-  return (
-    <div className="content" dangerouslySetInnerHTML={{ __html: content }} />
-  )
-}
-
 const Post = ({ data, location }) => {
   const { markdownRemark: post } = data
   const { contentYaml: meta } = data

src/templates/Post.module.scss

@@ -2,6 +2,10 @@
 @import 'mixins';
 
 .hentry {
+    @include divider;
+
+    margin-top: 0;
+    margin-bottom: 0;
     padding-top: $spacer * 2;
     padding-bottom: $spacer * 2;
     width: 100%;
@@ -41,10 +45,3 @@
         border-radius: 0;
     }
 }
-
-// Post Content
-/////////////////////////////////////
-
-.hentry__lead {
-    @include lead();
-}