Merge branch 'development'

gatsby-node.js

@@ -75,7 +75,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
  // Create blog list pages
  const posts = result.data.allMarkdownRemark.edges
- const postsPerPage = 1 // Change for number posts to display per page
+ const postsPerPage = 10 // Change for number posts to display per page
  const numPages = Math.ceil(posts.length / postsPerPage)
  Array.from({ length: numPages }).forEach((_, i) => {
  createPage({
@@ -92,20 +92,13 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
  // Make Tag Pages
  const tags = result.data.tagsGroup.group
- const tagPostsPerPage = 1
 
  tags.forEach((tag, i) => {
- const tagCount = tag.totalCount
- const numTagPages = Math.ceil(tagCount / tagPostsPerPage)
  createPage({
  path: `/tags/${_.kebabCase(tag.fieldValue)}`,
  component: tagTemplate,
  context: {
- limit: postsPerPage,
  tag: tag.fieldValue,
- numTagPages,
- skip: i * postsPerPage,
- currentPage: i + 1,
  },
  })
  })

src/components/Blog/blog-item.js

@@ -87,7 +87,7 @@ const BlogContent = styled.div`
  }
 `
 
-const BlogList = ({ key, fluid, title, excerpt, path, date, alt, tag }) => {
+const BlogList = ({ key, fluid, title, excerpt, path, date, alt }) => {
  return (
  <BlogItem key={key}>
  <BlogImage>
@@ -109,13 +109,6 @@ const BlogList = ({ key, fluid, title, excerpt, path, date, alt, tag }) => {
  <Button />
  </Link>
  <h4>{date}</h4>
- {tag.map((tagName, index) => {
- return (
- <Link to={`/tags/${tagName}`} key={index}>
- {tagName}
- </Link>
- )
- })}
  </BlogMeta>
  </BlogContent>
  </BlogItem>

src/components/Share/share-container.js

@@ -0,0 +1,41 @@
+import React from "react"
+import { FaTwitter, FaLinkedin, FaFacebook } from "react-icons/fa"
+import ShareIcon from "../Share/share-icon"
+import styled from "styled-components"
+
+const ShareArea = styled.div`
+ svg {
+ width: 30px;
+ height: 30px;
+ margin-right: var(--spacing);
+ }
+`
+
+const ShareCont = ({ facebook, twitter, linkedin, href }) => {
+ return (
+ <ShareArea>
+ <h4>Share This</h4>
+ {twitter && (
+ <ShareIcon shareUrl={`https://twitter.com/intent/tweet?url=${href}`}>
+ <FaTwitter />
+ </ShareIcon>
+ )}
+ {facebook && (
+ <ShareIcon
+ shareUrl={`https://www.facebook.com/sharer.php?u=${href}%2F`}
+ >
+ <FaFacebook />
+ </ShareIcon>
+ )}
+ {linkedin && (
+ <ShareIcon
+ shareUrl={`https://www.linkedin.com/sharing/share-offsite/?url=${href}`}
+ >
+ <FaLinkedin />
+ </ShareIcon>
+ )}
+ </ShareArea>
+ )
+}
+
+export default ShareCont

src/components/Share/share-icon.js

@@ -0,0 +1,12 @@
+import React from "react"
+import { Link } from "gatsby"
+
+const ShareIcon = ({ shareUrl, children }) => {
+ return (
+ <Link to={shareUrl} target="_blank" rel="noopenner noreferrer">
+ {children}
+ </Link>
+ )
+}
+
+export default ShareIcon

src/content/etiam-congue-orci-vel.md

@@ -3,10 +3,16 @@ title: Etiam congue orci vel
 description: Pellentesque euismod dapibus ligula, ac tempor quam dapibus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 date: 2019-08-26
 path: /etiam-congue-orci-vel
-featuredImage: ./images/dark-design.jpg
+featuredImage: ./images/dark-sky.jpg
 featuredImageAlt: "Dark abstract shapes"
 tags: ["data", "CMS"]
 author: Morgan Baker
 ---
 
-Standard page content that can be used with this starter.
+Sed eu aliquet dolor. Nullam vitae tempor tellus. Vivamus eget elementum leo. Etiam dolor erat, tincidunt ut erat et, hendrerit tincidunt dolor. Vivamus pretium luctus nisi, quis sodales diam varius ac. Etiam mattis velit in dui gravida, ut rutrum urna accumsan. Aliquam facilisis in orci eu mollis. Morbi vel nisi pulvinar mi tincidunt aliquet. Donec at dictum eros. Sed ac consectetur ex.
+
+Nullam egestas efficitur mi at dapibus. Maecenas consequat neque quis elit euismod aliquam. In eros nisi, finibus eget cursus eu, varius sit amet nisi. Pellentesque commodo venenatis est sit amet mollis. Duis venenatis pretium lorem sit amet sollicitudin. Sed malesuada, nunc imperdiet scelerisque faucibus, odio augue aliquet ipsum, quis vehicula ex elit at mi. Donec rhoncus varius arcu a facilisis. Integer aliquam maximus ligula, a imperdiet magna accumsan et. Aliquam erat volutpat. Suspendisse potenti. Aenean eget tellus neque.
+
+Duis est turpis, convallis in pellentesque id, sollicitudin ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin purus lacus, porta sed ante ut, blandit ultrices ligula. Praesent massa diam, hendrerit in scelerisque eget, efficitur eu nisi. Proin turpis risus, fringilla eu interdum eget, blandit non eros. Nullam condimentum eu nunc sit amet pretium. Suspendisse vulputate congue odio, interdum feugiat nulla commodo quis. Nulla est purus, auctor a pellentesque sit amet, consequat eget massa. Praesent non mattis erat. Ut tincidunt lacinia metus, vitae vulputate augue vehicula ut.
+
+Morbi elit leo, auctor sed lectus sed, maximus condimentum enim. Vivamus vel tellus sit amet odio dignissim sagittis ac ut est. Sed ante justo, pharetra in tincidunt ut, feugiat eu ex. Maecenas vel ante velit. Duis dignissim lobortis ante vel porta. Donec suscipit lobortis blandit. Ut sagittis sed augue quis porta. Donec nec lorem tincidunt, sagittis urna vel, tristique justo. Ut dapibus congue facilisis. Ut eget consequat lorem. Donec leo tellus, bibendum in arcu at, finibus rutrum velit.

src/content/standard-content.md

@@ -1,9 +1,9 @@
 ---
-title: Standard Content
-description: This is some of the basic content that can be added to this theme
+title: Morbi elit leo, auctor sed lectus
+description: Duis venenatis pretium lorem sit amet sollicitudin. Sed malesuada, nunc imperdiet
 date: 2019-08-26
-path: /standard-content
-featuredImage: ./images/dark-design.jpg
+path: /morbi-elit-leo
+featuredImage: ./images/dog.jpg
 tags: ["data"]
 author: Morgan Baker
 ---

src/content/tesla.md

@@ -1,11 +1,17 @@
 ---
-title: Tesla Roadster
-description: Some information about the Tesla can be found here
+title: Duis convallis eget elit eget efficitur
+description: Aliquam erat volutpat. Suspendisse potenti. Aenean eget tellus neque
 date: 2019-08-26
-path: /tesla-roadster
-featuredImage: ./images/dark-design.jpg
+path: /duis-convallis-eget
+featuredImage: ./images/trees.jpg
 tags: ["data", "seo"]
 author: Morgan Baker
 ---
 
-Standard page content that can be used with this starter.
+Quisque sit amet mi sapien. Aenean at magna vel turpis fringilla lacinia. Sed vulputate neque vitae augue posuere tempor. Praesent ut sagittis ipsum. Nulla volutpat at augue a vulputate. Etiam molestie est vel pretium imperdiet. Duis a sem tristique, dapibus sapien a, rutrum dui. Nunc non lectus quis urna iaculis feugiat in eu orci. Vestibulum pretium luctus justo, non convallis ante dignissim vel. Nam tristique ante vitae vehicula tincidunt. Proin vel nibh eu nunc porta laoreet at a velit. Proin blandit tincidunt eros nec placerat.
+
+Aenean eros sem, mollis nec tempus eu, semper quis tellus. Etiam vel porta massa. Morbi ac congue sapien, a auctor magna. Nunc vel viverra quam. Sed semper hendrerit lacus laoreet scelerisque. Morbi elit leo, auctor sed lectus sed, maximus condimentum enim. Vivamus vel tellus sit amet odio dignissim sagittis ac ut est. Sed ante justo, pharetra in tincidunt ut, feugiat eu ex. Maecenas vel ante velit. Duis dignissim lobortis ante vel porta. Donec suscipit lobortis blandit. Ut sagittis sed augue quis porta. Donec nec lorem tincidunt, sagittis urna vel, tristique justo. Ut dapibus congue facilisis. Ut eget consequat lorem. Donec leo tellus, bibendum in arcu at, finibus rutrum velit.
+
+Maecenas vel volutpat velit. Duis convallis eget elit eget efficitur. Duis est turpis, convallis in pellentesque id, sollicitudin ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin purus lacus, porta sed ante ut, blandit ultrices ligula. Praesent massa diam, hendrerit in scelerisque eget, efficitur eu nisi. Proin turpis risus, fringilla eu interdum eget, blandit non eros. Nullam condimentum eu nunc sit amet pretium. Suspendisse vulputate congue odio, interdum feugiat nulla commodo quis. Nulla est purus, auctor a pellentesque sit amet, consequat eget massa. Praesent non mattis erat. Ut tincidunt lacinia metus, vitae vulputate augue vehicula ut.
+
+Sed eu aliquet dolor. Nullam vitae tempor tellus. Vivamus eget elementum leo. Etiam dolor erat, tincidunt ut erat et, hendrerit tincidunt dolor. Vivamus pretium luctus nisi, quis sodales diam varius ac. Etiam mattis velit in dui gravida, ut rutrum urna accumsan. Aliquam facilisis in orci eu mollis. Morbi vel nisi pulvinar mi tincidunt aliquet. Donec at dictum eros. Sed ac consectetur ex.

src/scss/_content.scss

@@ -94,7 +94,7 @@ blockquote {
 
 hr {
  border: 0.1rem solid var(--primaryColor);
- opacity: 0.25;
+ opacity: 0.15;
 }
 
 ul,

src/templates/post.js

@@ -4,9 +4,9 @@ import { Link, graphql } from "gatsby"
 import Layout from "../components/layout"
 import Seo from "../components/SEO"
 import Img from "gatsby-image"
-import "../scss/main.scss"
 import styled from "styled-components"
-import { FaFacebook, FaTwitter, FaLinkedin } from "react-icons/fa"
+import Share from "../components/Share/share-container"
+import Button from "../components/Button/button"
 
 const PostMeta = styled.aside`
  h2 {
@@ -62,14 +62,6 @@ const PostedTitle = styled.h4`
  }
 `
 
-const ShareArea = styled.div`
- svg {
- width: 30px;
- height: 30px;
- margin-right: var(--spacing);
- }
-`
-
 export default function Template({ data }) {
  let location = useLocation()
  const { markdownRemark } = data // Object destructuring
@@ -82,48 +74,53 @@ export default function Template({ data }) {
  <Seo title={frontmatter.title} description={frontmatter.description} />
  <div className="blog-post">
  <h1>{frontmatter.title}</h1>
- <PostMeta>
- <h2>
- Posted / {frontmatter.date} / {frontmatter.author}
- </h2>
- </PostMeta>
- <PostImage>
- <Img fluid={featuredImgFluid} />
- </PostImage>
+
+ {/* Check if date or author has been declared in MD file
+ If so, render the meta */}
+ {(frontmatter.date || frontmatter.author) && (
+ <PostMeta>
+ <h2>
+ {/* If there is date, display it */}
+ Posted {frontmatter.date && `/ ${frontmatter.date}`}{" "}
+ {/* If there is author, display it */}
+ {frontmatter.author && `/ ${frontmatter.author}`}
+ </h2>
+ </PostMeta>
+ )}
+
+ {/* If featured image is present, render featured image */}
+ {featuredImgFluid && (
+ <PostImage>
+ <Img fluid={featuredImgFluid} />
+ </PostImage>
+ )}
  <div
  className="blog-post-content"
  dangerouslySetInnerHTML={{ __html: html }}
  />
  <hr />
- <PostedTitle>
- Posted under /{" "}
- {frontmatter.tags.map((tagName, index) => {
- return (
- <Link to={`/tags/${tagName}`} key={index}>
- {tagName}
- </Link>
- )
- })}
- </PostedTitle>
+ <Link to="/journal" className="btn-link">
+ <Button text="Return to Journal Home" />
+ </Link>
+
+ {/* If there are tags for the post, render this section */}
+ {frontmatter.tags && (
+ <>
+ <hr />
+ <PostedTitle>
+ Posted under /{" "}
+ {frontmatter.tags.map((tagName, index) => {
+ return (
+ <Link to={`/tags/${tagName}`} key={index}>
+ {tagName}
+ </Link>
+ )
+ })}
+ </PostedTitle>
+ </>
+ )}
  <hr />
- <ShareArea>
- <h4>Share This</h4>
- <Link
- to={`https://www.facebook.com/sharer.php?u=http%3A%2F%2F${location.host}${location.pathname}%2F`}
- >
- <FaFacebook />
- </Link>
- <Link
- to={`https://twitter.com/intent/tweet?url=http%3A%2F%2F${location.host}${location.pathname}`}
- >
- <FaTwitter />
- </Link>
- <Link
- to={`https://www.linkedin.com/sharing/share-offsite/?url=${location.href}`}
- >
- <FaLinkedin />
- </Link>
- </ShareArea>
+ <Share facebook twitter linkedin href={location.href} />
  </div>
  </Layout>
  )
@@ -141,7 +138,7 @@ export const pageQuery = graphql`
  author
  featuredImage {
  childImageSharp {
- fluid(maxWidth: 800) {
+ fluid(maxWidth: 1000) {
  ...GatsbyImageSharpFluid
  }
  }