Simplified query/sort in projects list

Added role to projects Added will-change to prevent flickering
muuvmuuv · Jan 16, 2020 · 6c2b71f · 6c2b71f
1 parent e0af04f
commit 6c2b71f
Show file tree

Hide file tree

Showing 10 changed files with 422 additions and 142 deletions.
diff --git a/content/projects/__demo__/index.md b/content/projects/__demo__/index.md
@@ -10,6 +10,11 @@ ended: null
 
 status: wip
 website: https://marvin.digital/
+role:
+  - design
+  - development
+  - ux
+  - ui
 team:
   - name: Marvin Heilemann
     link: https://github.com/muuvmuuv/portfolio

diff --git a/content/projects/additive/index.md b/content/projects/additive/index.md
@@ -4,7 +4,7 @@ subtitle: Giving ADDITIVE a new face and modern interface
 image: additive-preview.jpg
 thumb: additive-preview.jpg
 
-started: null
+started: 2018-07-11
 ended: 2019-01-10
 
 status: finished

diff --git a/gatsby/node/onCreateNode.js b/gatsby/node/onCreateNode.js
@@ -7,6 +7,10 @@ module.exports = async ({ node, getNode, actions }) => {
   if (node.internal.type === 'MarkdownRemark') {
     const nodeFrontmatterDefault = {
       published: true,
+      status: 'wip',
+      website: '',
+      role: [],
+      team: [],
     }
 
     node.frontmatter = Object.assign(
@@ -15,6 +19,8 @@ module.exports = async ({ node, getNode, actions }) => {
       node.frontmatter
     )
 
+    console.log(node.frontmatter)
+
     const fileNode = getNode(node.parent)
     const source = fileNode.sourceInstanceName
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,8 +39,8 @@
   },
   "dependencies": {
     "@ibm/plex": "^4.0.2",
-    "@mdx-js/mdx": "^1.5.3",
-    "@mdx-js/react": "^1.5.3",
+    "@mdx-js/mdx": "^1.5.4",
+    "@mdx-js/react": "^1.5.4",
     "dayjs": "^1.8.19",
     "gatsby": "^2.18.22",
     "gatsby-image": "^2.2.38",

diff --git a/src/components/HeroProjects.jsx b/src/components/HeroProjects.jsx
@@ -36,6 +36,7 @@ const HeroProjects = ({ item }) => (
                 target="_blank"
                 rel="noopener noreferrer"
                 className="link"
+                title={`Link to website: ${item.website}`}
               >
                 {item.website}
               </a>
@@ -47,6 +48,15 @@ const HeroProjects = ({ item }) => (
             <span className="pre">Team:</span>{' '}
             <Members list={item.team}></Members>
           </li>
+          <li>
+            <span className="pre">Role:</span>{' '}
+            {item.role.map((r, i) => (
+              <span>
+                {r}
+                {i < item.role.length - 1 && ', '}
+              </span>
+            ))}
+          </li>
         </ul>
       </div>
     </div>

diff --git a/src/components/member.jsx b/src/components/member.jsx
@@ -4,7 +4,7 @@ const Member = ({ item }) => {
   return item.link ? (
     <a
       href={item.link}
-      title={item.name}
+      title={`Link to ${item.name} website: ${item.link}`}
       target="_blank"
       rel="noopener noreferrer"
       className="link"

diff --git a/src/pages/projects.jsx b/src/pages/projects.jsx
@@ -6,11 +6,9 @@ import { isDev } from '../environment'
 import SEO from '../components/SEO'
 import Portfolio from '../components/Portfolio'
 import { History } from '../store'
+import dayjs from 'dayjs'
 
-const Page = ({
-  pageContext: { breadcrumb },
-  data: { withDates, withoutStartDate, withoutEndDate },
-}) => {
+const Page = ({ pageContext: { breadcrumb }, data: { projects } }) => {
   const pageName = 'Projects'
   const historyDispatch = useContext(History.Dispatch)
 
@@ -22,17 +20,26 @@ const Page = ({
     })
   })
 
-  // weird sort function, but works
-  const idList = new Set(withoutStartDate.edges.map((x) => x.node.id))
-  const items = [
-    ...withDates.edges,
-    ...withoutStartDate.edges,
-    ...withoutEndDate.edges.filter((d) => !idList.has(d.node.id)),
-  ].sort((starting, ending) => {
-    return (
-      new Date(ending.node.frontmatter.ended) -
-      new Date(starting.node.frontmatter.ended)
-    )
+  const items = projects.edges.sort((nodeA, nodeB) => {
+    const AF = nodeA.node.frontmatter
+    const BF = nodeB.node.frontmatter
+
+    const future = dayjs().add(10, 'y')
+    const present = dayjs().add(-10, 'y')
+    const AEnded = AF.ended ? dayjs(AF.ended) : future
+    const BEnded = BF.ended ? dayjs(BF.ended) : future
+    const diffEnded = BEnded.diff(AEnded)
+    const AStarted = AF.started ? dayjs(AF.started) : present
+    const BStarted = BF.started ? dayjs(BF.started) : present
+    const diffStarted = AStarted.diff(BStarted)
+
+    if (!BF.started && !BF.ended) {
+      return -1
+    } else if (!AF.started && !AF.ended) {
+      return 1
+    }
+
+    return diffEnded - diffStarted
   })
 
   if (isDev) {
@@ -65,70 +72,35 @@ const Page = ({
 
 // NOTE: this query could be simplified (https://github.com/gatsbyjs/gatsby/issues/17953)
 export const pageQuery = graphql`
-  fragment ProjectsNodes on MarkdownRemark {
-    frontmatter {
-      title
-      subtitle
-      image {
-        childImageSharp {
-          fluid(maxWidth: 1600) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-      thumb {
-        childImageSharp {
-          fluid(maxWidth: 300) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-    fields {
-      slug
-    }
-  }
-
-  query DevelopmentQuery {
-    withDates: allMarkdownRemark(
-      filter: {
-        fields: { source: { eq: "projects" } }
-        frontmatter: { started: { ne: null }, ended: { ne: null } }
-      }
-      sort: {
-        fields: [frontmatter___ended, frontmatter___started]
-        order: DESC
-      }
+  query ProjectsQuery {
+    projects: allMarkdownRemark(
+      filter: { fields: { source: { eq: "projects" } } }
     ) {
       edges {
         node {
-          ...ProjectsNodes
-        }
-      }
-    }
-    withoutStartDate: allMarkdownRemark(
-      filter: {
-        fields: { source: { eq: "projects" } }
-        frontmatter: { started: { eq: null } }
-      }
-      sort: { fields: frontmatter___ended, order: DESC }
-    ) {
-      edges {
-        node {
-          ...ProjectsNodes
-        }
-      }
-    }
-    withoutEndDate: allMarkdownRemark(
-      filter: {
-        fields: { source: { eq: "projects" } }
-        frontmatter: { ended: { eq: null } }
-      }
-      sort: { fields: frontmatter___started, order: DESC }
-    ) {
-      edges {
-        node {
-          ...ProjectsNodes
+          frontmatter {
+            title
+            subtitle
+            image {
+              childImageSharp {
+                fluid(maxWidth: 1600) {
+                  ...GatsbyImageSharpFluid
+                }
+              }
+            }
+            thumb {
+              childImageSharp {
+                fluid(maxWidth: 300) {
+                  ...GatsbyImageSharpFluid
+                }
+              }
+            }
+            started
+            ended
+          }
+          fields {
+            slug
+          }
         }
       }
     }

diff --git a/src/styles/layouts/_header.scss b/src/styles/layouts/_header.scss
@@ -1,4 +1,5 @@
 #header {
+  will-change: padding position background;
   position: relative;
   top: 0;
   width: 100%;

diff --git a/src/templates/ProjectsSingle.jsx b/src/templates/ProjectsSingle.jsx
@@ -101,6 +101,7 @@ export const pageQuery = graphql`
           name
           link
         }
+        role
         website
         keywords
         categories