Implement Post page

gatsby-node.js

@@ -11,13 +11,11 @@ exports.createPages = async ({ graphql, actions }) => {
 
   const result = await graphql(`
     {
-      allGhostPost(
-        sort: { order: ASC, fields: published_at }
-        filter: { featured: { eq: false } }
-      ) {
+      allGhostPost(sort: { order: ASC, fields: published_at }) {
         edges {
           node {
             slug
+            featured
           }
         }
       }
@@ -138,7 +136,7 @@ exports.createPages = async ({ graphql, actions }) => {
   // Create Index pagination
   paginate({
     createPage,
-    items: posts,
+    items: posts.filter(({ node }) => node.featured),
     itemsPerPage: postsPerPage,
     component: indexTemplate,
     pathPrefix: ({ pageNumber }) => {
@@ -153,7 +151,7 @@ exports.createPages = async ({ graphql, actions }) => {
   // Create Writings pagination
   paginate({
     createPage,
-    items: posts,
+    items: posts.filter(({ node }) => !node.featured),
     itemsPerPage: postsPerPage,
     component: writingsTemplate,
     pathPrefix: ({ pageNumber }) => {

src/components/common/Button.js

@@ -1,19 +1,34 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Link } from 'gatsby'
 import styled from 'styled-components'
 import { mediaQueries } from '../../utils/mediaQueries'
 
-const Button = ({ url, disableKeyboardNavigation, children }) => (
-  <Link
-    href={url}
-    aria-hidden={disableKeyboardNavigation}
-    tabIndex={disableKeyboardNavigation ? `-1` : `0`}
-  >
-    <Label>{children}</Label>
-  </Link>
-)
+const Button = ({ url, isExternal, disableKeyboardNavigation, children }) => {
+  if (isExternal) {
+    return (
+      <ExternalLink
+        href={url}
+        aria-hidden={disableKeyboardNavigation}
+        tabIndex={disableKeyboardNavigation ? `-1` : `0`}
+      >
+        <Label>{children}</Label>
+      </ExternalLink>
+    )
+  }
+
+  return (
+    <InternalLink
+      to={url}
+      aria-hidden={disableKeyboardNavigation}
+      tabIndex={disableKeyboardNavigation ? `-1` : `0`}
+    >
+      <Label>{children}</Label>
+    </InternalLink>
+  )
+}
 
-const Link = styled.a`
+const buttonStyles = `
   display: inline-block;
   position: relative;
   text-align: center;
@@ -67,6 +82,14 @@ const Link = styled.a`
   }
 `
 
+const InternalLink = styled(Link)`
+  ${buttonStyles}
+`
+
+const ExternalLink = styled.a`
+  ${buttonStyles}
+`
+
 const Label = styled.span`
   position: relative;
   color: var(--color-background);
@@ -78,6 +101,7 @@ const Label = styled.span`
 
 Button.propTypes = {
   url: PropTypes.string.isRequired,
+  isExternal: PropTypes.bool,
   disableKeyboardNavigation: PropTypes.bool,
 }
 

src/components/common/MetaContainer.js

@@ -7,7 +7,8 @@ import { mediaQueries } from '../../utils/mediaQueries'
 const MetaContainer = ({ tag, publishedDate }) => (
   <Container>
     {tag && <Tag to={`/tag/${tag.slug}`}>{tag.name}</Tag>}
-    <DateLabel>— {publishedDate}</DateLabel>
+    {tag && <Label>— &nbsp;</Label>}
+    <Label>{publishedDate}</Label>
   </Container>
 )
 
@@ -36,7 +37,7 @@ const Tag = styled(Link)`
   }
 `
 
-const DateLabel = styled.span`
+const Label = styled.span`
   display: inline-block;
   color: var(--color-text);
   line-height: 1.3;

src/components/common/Subheading.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { mediaQueries } from '../../utils/mediaQueries'
 
-const Heading = ({ centered, bigger, children }) => (
-  <Text centered={centered} bigger={bigger}>
+const Heading = ({ centered, bigger, inPost, children }) => (
+  <Text centered={centered} bigger={bigger} inPost={inPost}>
     {children}
   </Text>
 )
@@ -16,7 +16,7 @@ const Text = styled.p`
   font-size: ${props => (props.bigger ? `1.125rem` : `1rem`)};
   font-weight: 500;
   max-width: 32.5rem;
-  margin: 0;
+  margin: ${props => (props.inPost ? `0 0 1.5625rem` : `0`)};
 
   @media ${mediaQueries.medium} {
     line-height: 1.6;
@@ -28,6 +28,7 @@ const Text = styled.p`
 Heading.propTypes = {
   centered: PropTypes.bool,
   bigger: PropTypes.bool,
+  inPost: PropTypes.bool,
 }
 
 export default Heading

src/components/home/WorkEntry.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
+import { Link } from 'gatsby'
 import { Button, LazyImage } from '../common'
 import { mediaQueries } from '../../utils/mediaQueries'
 
@@ -9,10 +10,7 @@ const WorkEntry = ({ entry, isOdd }) => {
   const imageUrl = entry.feature_image
   const srcSet = []
 
-  if (
-    entry.feature_image &&
-    entry.feature_image.indexOf(`/content/images/`) > -1
-  ) {
+  if (imageUrl && imageUrl.indexOf(`/content/images/`) > -1) {
     srcSet[0] = imageUrl.replace(
       `/content/images/`,
       `/content/images/size/w600/`
@@ -27,7 +25,7 @@ const WorkEntry = ({ entry, isOdd }) => {
     <Article>
       {entry.feature_image && (
         <ImageContainer isOdd={isOdd}>
-          <ImageLink href={url} aria-hidden="true" tabIndex="-1">
+          <ImageLink to={url} aria-hidden="true" tabIndex="-1">
             <Image
               sizes="(max-width: 48rem) 37.5rem, 62.5rem"
               srcset={
@@ -42,7 +40,7 @@ const WorkEntry = ({ entry, isOdd }) => {
         </ImageContainer>
       )}
       <InfoContainer isOdd={isOdd}>
-        <TitleLink href={url}>
+        <TitleLink to={url}>
           <Title>{entry.title}</Title>
         </TitleLink>
         <Excerpt>{entry.custom_excerpt}</Excerpt>
@@ -100,7 +98,7 @@ const ImageContainer = styled.div`
   }
 `
 
-const ImageLink = styled.a`
+const ImageLink = styled(Link)`
   display: block;
   position: relative;
   padding: 0.3125rem;
@@ -128,7 +126,7 @@ const InfoContainer = styled.div`
   }
 `
 
-const TitleLink = styled.a`
+const TitleLink = styled(Link)`
   display: inline-block;
   text-decoration: none;
   margin-bottom: 1.5625rem;

src/components/post/PostContent.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const PostContent = ({ html }) => (
+  <section className="post-full-content">
+    <div
+      className="content-body load-external-scripts"
+      dangerouslySetInnerHTML={{ __html: html }}
+    ></div>
+  </section>
+)
+
+PostContent.propTypes = {
+  html: PropTypes.string.isRequired,
+}
+
+export default PostContent

src/components/post/PostHeader.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import styled from 'styled-components'
+import { mediaQueries } from '../../utils/mediaQueries'
+
+const PostHeader = ({ children }) => <Container>{children}</Container>
+
+const Container = styled.header`
+  margin-bottom: 2.5rem;
+
+  @media ${mediaQueries.medium} {
+    margin-bottom: 3.125rem;
+  }
+`
+
+export default PostHeader

src/components/post/PostImage.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { mediaQueries } from '../../utils/mediaQueries'
+import { LazyImage } from '../common'
+
+const PostImage = ({ featureImage }) => {
+  const srcSet = []
+
+  if (featureImage.indexOf(`/content/images/`) > -1) {
+    srcSet[0] = featureImage.replace(
+      `/content/images/`,
+      `/content/images/size/w600/`
+    )
+    srcSet[1] = featureImage.replace(
+      `/content/images/`,
+      `/content/images/size/w1000/`
+    )
+  }
+
+  return (
+    <Image
+      sizes="(max-width: 48rem) 37.5rem, 62.5rem"
+      srcset={srcSet.length > 0 ? `${srcSet[0]} 600w, ${srcSet[1]} 1000w` : ``}
+      src={srcSet.length > 0 ? srcSet[0] : featureImage}
+      alt=""
+      width="600"
+      height="420"
+    />
+  )
+}
+
+const Image = styled(LazyImage)`
+  width: calc(100% + 2.5rem);
+  height: auto;
+  margin: 0 -1.25rem 2.5rem;
+
+  @media ${mediaQueries.medium} {
+    width: 100%;
+    margin: 0 0 3.125rem;
+  }
+`
+
+PostImage.propTypes = {
+  featureImage: PropTypes.string.isRequired,
+}
+
+export default PostImage

src/components/post/PostTitle.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import styled from 'styled-components'
+import { mediaQueries } from '../../utils/mediaQueries'
+
+const PostTitle = ({ children }) => <Title>{children}</Title>
+
+const Title = styled.h1`
+  color: var(--color-foreground);
+  line-height: 1.3;
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 1.25rem;
+
+  @media ${mediaQueries.medium} {
+    margin-bottom: 1.5625rem;
+  }
+`
+
+export default PostTitle

src/components/post/index.js

@@ -0,0 +1,4 @@
+export { default as PostHeader } from './PostHeader'
+export { default as PostTitle } from './PostTitle'
+export { default as PostImage } from './PostImage'
+export { default as PostContent } from './PostContent'