feat(www): use blog post preview component on tags pages (#11501)

gatsbyjs · Feb 5, 2019 · 9168d1f · 9168d1f
1 parent 42e61d4
commit 9168d1f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 42 deletions.
diff --git a/docs/blog/2019-01-31-why-themes/index.md b/docs/blog/2019-01-31-why-themes/index.md
@@ -1,6 +1,6 @@
 ---
 title: "Why Themes?"
-date: "2019-01-31"
+date: 2019-01-31
 author: "Kyle Mathews"
 tags: ["themes"]
 ---

diff --git a/www/package.json b/www/package.json
@@ -93,7 +93,7 @@
   "scripts": {
     "build": "gatsby build",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public",
-    "develop": "gatsby develop",
+    "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop",
     "start": "npm run develop",
     "serve": "gatsby serve",
     "test": "echo \"Error: no test specified\" && exit 1",

diff --git a/www/src/templates/tags.js b/www/src/templates/tags.js
@@ -1,9 +1,10 @@
 import React from "react"
-import PropTypes from "prop-types"
 import { Link, graphql } from "gatsby"
 
+import BlogPostPreviewItem from "../components/blog-post-preview-item"
 import Container from "../components/container"
 import Layout from "../components/layout"
+import { rhythm } from "../utils/typography"
 
 const Tags = ({ pageContext, data, location }) => {
   const { tag } = pageContext
@@ -16,45 +17,19 @@ const Tags = ({ pageContext, data, location }) => {
     <Layout location={location}>
       <Container>
         <h1>{tagHeader}</h1>
-        <ul>
-          {edges.map(({ node }) => {
-            const {
-              frontmatter: { title },
-              fields: { slug },
-            } = node
-            return (
-              <li key={slug}>
-                <Link to={slug}>{title}</Link>
-              </li>
-            )
-          })}
-        </ul>
+        {edges.map(({ node }) => (
+          <BlogPostPreviewItem
+            post={node}
+            key={node.fields.slug}
+            css={{ marginBottom: rhythm(2) }}
+          />
+        ))}
         <Link to="/blog/tags">All tags</Link>
       </Container>
     </Layout>
   )
 }
 
-Tags.propTypes = {
-  pageContext: PropTypes.shape({
-    tag: PropTypes.string.isRequired,
-  }),
-  data: PropTypes.shape({
-    allMarkdownRemark: PropTypes.shape({
-      totalCount: PropTypes.number.isRequired,
-      edges: PropTypes.arrayOf(
-        PropTypes.shape({
-          node: PropTypes.shape({
-            frontmatter: PropTypes.shape({
-              title: PropTypes.string.isRequired,
-            }),
-          }),
-        }).isRequired
-      ),
-    }),
-  }),
-}
-
 export default Tags
 
 export const pageQuery = graphql`
@@ -71,12 +46,7 @@ export const pageQuery = graphql`
       totalCount
       edges {
         node {
-          fields {
-            slug
-          }
-          frontmatter {
-            title
-          }
+          ...BlogPostPreview_item
         }
       }
     }