Merge branch 'release/1.0.2'

src/components/Layout/footer/Footer.js

@@ -252,7 +252,7 @@ const Footer = () => (
         </ul>
       </OpenSource>
       <Updated>
-        <p>Site last updated on: 31 / 01 / 2019</p>
+        <p>Site last updated on: 1 / 02 / 2019</p>
       </Updated>
       <FootNotes>
         <p>Designed and built using <a href="https://dvanc.co/skh">Sketch</a> and <a href="https://dvanc.co/gby">Gatsby</a>.</p>

src/components/Shared/ListPostsSquareOffset.js

@@ -109,34 +109,37 @@ const NoPosts = styled.p`
 
 const ListPostsSquare = (props) => {
 
-  const foundPosts = () => (
-    <>
-      {props.notes.map( ({node: note }) => (
-        <Note key={note.id}>
-          <NoteImage>
-            <Media query="(min-width: 768px)">
-              <Link to={note.fields.slug} className="img-link">
-                <BlogThumb sizes={note.frontmatter.image.childImageSharp.sizes} />
-              </Link>
-            </Media>
-            <header>
-              <NoteHeading><Link to={note.fields.slug}>{note.frontmatter.title}</Link></NoteHeading>
-            </header>
-            <p>{note.frontmatter.date}</p>
-          </NoteImage>
-        </Note>
-      ))}
-    </>
-  )
-
+  const foundPosts = () => {
+    let filteredArray = [...props.notes].splice(1, 1);
+    return (
+      <>
+        {filteredArray.map(({ node: note }) => (
+          <Note key={note.id}>
+            <NoteImage>
+              <Media query="(min-width: 768px)">
+                <Link to={note.fields.slug} className="img-link">
+                  <BlogThumb sizes={note.frontmatter.image.childImageSharp.sizes} />
+                </Link>
+              </Media>
+              <header>
+                <NoteHeading><Link to={note.fields.slug}>{note.frontmatter.title}</Link></NoteHeading>
+              </header>
+              <p>{note.frontmatter.date}</p>
+            </NoteImage>
+          </Note>
+        ))}
+      </>
+    )
+  }
+
   const noPosts = () => <NoPosts>No other posts have been made, yet.</NoPosts>
 
   return (
     <>
       <NotesLatest>
         <h3 className="heading">Previously</h3>
         <NotesLatestContainer>
-          {props.total > 2 ? foundPosts() : noPosts()}
+          {props.total >= 2 ? foundPosts() : noPosts()}
         </NotesLatestContainer>
       </NotesLatest>
     </>

src/components/Shared/PreviousPosts.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import styled from 'styled-components'
+import ListPosts from './ListPostsSquareOffset'
+import AllCategories from './ListCategories'
+
+const Posts = styled.section`
+  grid-column: 3 / 15;
+  grid-row: 4 / 5;
+
+  @media screen and (min-width: 48em) {
+    display: grid;
+    grid-template-columns: 2fr 8fr;
+    padding:6.250em 0;
+  }
+  @media screen and (min-width: 75em) {
+    padding:9.375em 0 6.250em 0;
+  }
+
+  .heading {
+    font-size: var(--font-size);
+    font-weight: 200;;
+    text-transform: uppercase;
+    position: relative;
+    padding-left: 1.5em;
+    &:after {
+      border: 0;
+      @media screen and (min-width: 48em) {
+        border-bottom:1px solid var(--color-borders);
+      }
+    }
+    @media screen and (min-width: 48em) {
+      font-weight: 800;
+      padding-left:0;
+    }
+  }
+`
+
+const PreviousNotes = (props) => (
+  <Posts>
+    <AllCategories tags={props.tags} />
+    <ListPosts notes={props.notes} total={props.tot} isTags={props.isTags} />
+  </Posts>
+)
+
+export default PreviousNotes;

src/pages/notes.js

@@ -1,52 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {graphql} from 'gatsby'
-import styled from 'styled-components'
+// import styled from 'styled-components'
 import TitleAndMetas from '../components/Layout/TitleAndMetas'
 import Layout from '../components/Layout'
 import SubMast from '../components/Shared/SubMast'
 import LatestBlock from '../components/Specifics/Notes/LatestBlock'
-import ListPosts from '../components/Shared/ListPostsSquareOffset'
-import AllCategories from '../components/Shared/ListCategories'
-
-const PreviousPosts = styled.section`
-  grid-column: 3 / 15;
-  grid-row: 4 / 5;
-
-  @media screen and (min-width: 48em) {
-    display: grid;
-    grid-template-columns: 2fr 8fr;
-    padding:6.250em 0;
-  }
-  @media screen and (min-width: 75em) {
-    padding:9.375em 0 6.250em 0;
-  }
-
-  .heading {
-    font-size: var(--font-size);
-    font-weight: 200;;
-    text-transform: uppercase;
-    position: relative;
-    padding-left: 1.5em;
-    &:after {
-      border: 0;
-      @media screen and (min-width: 48em) {
-        border-bottom:1px solid var(--color-borders);
-      }
-    }
-    @media screen and (min-width: 48em) {
-      font-weight: 800;
-      padding-left:0;
-    }
-  }
-`
+// import ListPosts from '../components/Shared/ListPostsSquareOffset'
+// import AllCategories from '../components/Shared/ListCategories'
+import PreviousPosts from '../components/Shared/PreviousPosts'
 
 const NotesIndexPage = ( {data}) => {
   const page = 'sub';
   const {edges: notesLatest } = data.latest
-  const {edges: notesPrevious } = data.previous || 0
+  const notesPrevious = data.allNotes
   const {group: getTags } = data.allTags
-  const { totalCount } = data.previous || 0
   return (
     <>
       <TitleAndMetas 
@@ -57,10 +25,10 @@ const NotesIndexPage = ( {data}) => {
       <Layout pageLayout={page}>
         <SubMast title="Notes" description="The Web, Technology, Life and Site related updates." />
         <LatestBlock note={notesLatest} />
-        <PreviousPosts>
-          <AllCategories tags={getTags} />
+        <PreviousPosts notes={notesPrevious.edges} tot={notesPrevious.totalCount} tags={getTags} isTags={false} />
+          {/* <AllCategories tags={getTags} />
           <ListPosts notes={notesPrevious} total={totalCount} />
-        </PreviousPosts>
+        </PreviousPosts> */}
       </Layout>
     </>
   )
@@ -107,8 +75,7 @@ export const query = graphql `
       }
     },
 
-    previous: allMarkdownRemark(
-      skip: 1,
+    allNotes: allMarkdownRemark(
       sort: { fields:[frontmatter___date], order: DESC },
       filter: { frontmatter: { contentType: { eq: "notes" } }})
     {