From 57895632421ccbddcb12859da06b77997ffee11c Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 24 Nov 2018 16:28:25 +0100
Subject: [PATCH 1/3] concept for showing project images count

---
 src/images/images.svg       |  3 +++
 src/pages/index.jsx         | 32 ++++++++++++++++++++++++++++++++
 src/pages/index.module.scss | 13 +++++++++++++
 3 files changed, 48 insertions(+)
 create mode 100644 src/images/images.svg

diff --git a/src/images/images.svg b/src/images/images.svg
new file mode 100644
index 0000000..5c008cc
--- /dev/null
+++ b/src/images/images.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <path fill="#000000" d="M17.1250778,6.17151499 L15.0790778,0.536514988 C14.9280778,0.120514988 14.4840778,-0.100485012 14.0900778,0.0445149878 L0.492077822,5.00751499 C0.0980778217,5.15151499 -0.100922178,5.60451499 0.0510778217,6.02051499 L2.20707782,11.961515 L2.20707782,8.77851499 C2.20707782,7.34051499 3.35507782,6.17151499 4.76707782,6.17151499 L8.36007782,6.17151499 L12.6450778,3.16351499 L15.1240778,6.17151499 L17.1250778,6.17151499 Z M19.2380778,8.00151499 L4.76707782,8.00151499 C4.34707782,8.00151499 4.00507782,8.33551499 4.00507782,8.77851499 L4.00507782,18.198515 C4.00607782,18.642515 4.34807782,19.001515 4.76707782,19.001515 L19.2380778,19.001515 C19.6580778,19.001515 20.0000778,18.642515 20.0000778,18.198515 L20.0000778,8.77851499 C20.0000778,8.33551499 19.6580778,8.00151499 19.2380778,8.00151499 Z M18.0000778,17.001515 L6.00007782,17.001515 L6.00007782,15.001515 L7.98407782,10.983515 L10.7520778,14.419515 L13.3500778,11.757515 L16.6880778,10.552515 L18.0000778,14.001515 L18.0000778,17.001515 Z"/>
+</svg>
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index dd1b4ad..73890fe 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -2,21 +2,45 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 import ProjectImage from '../components/molecules/ProjectImage'
+import { ReactComponent as Images } from '../images/images.svg'
 import styles from './index.module.scss'
 
+const getImageCount = (imageEdges, slug) => {
+  let array = []
+
+  imageEdges.map(({ node }) => {
+    if (node.name.includes(slug.replace(/\//g, ''))) {
+      array.push(node)
+    }
+  })
+
+  return array
+}
+
 const Home = ({ data }) => {
   const projects = data.allProjectsYaml.edges
+  const imageEdges = data.projectImageFiles.edges
 
   return (
     <div className={styles.projects}>
       {projects.map(({ node }) => {
         const { slug, title, img } = node
+        const imageCount = getImageCount(imageEdges, slug).length
 
         return (
           <article className={styles.project} key={slug}>
             <Link to={slug}>
               <h1 className={styles.title}>{title}</h1>
               <ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
+
+              {imageCount > 0 && (
+                <small
+                  className={styles.imageCount}
+                  title={`${imageCount} project images`}
+                >
+                  <Images /> {imageCount}
+                </small>
+              )}
             </Link>
           </article>
         )
@@ -49,5 +73,13 @@ export const IndexQuery = graphql`
         }
       }
     }
+
+    projectImageFiles: allFile(filter: { name: { regex: "/portfolio/" } }) {
+      edges {
+        node {
+          name
+        }
+      }
+    }
   }
 `
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 558b240..4d39f43 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -60,3 +60,16 @@
         }
     }
 }
+
+.imageCount {
+    position: absolute;
+    bottom: $spacer / 4;
+    right: $spacer / 2;
+    color: $brand-light;
+    font-size: $font-size-mini;
+    opacity: .85;
+
+    svg {
+        fill: $brand-light;
+    }
+}

From 9ce80bd75be8955c5366f5ec084ddce0867193e9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 24 Nov 2018 17:36:16 +0100
Subject: [PATCH 2/3] tweaks

---
 .stylelintrc                |  3 ++-
 src/pages/index.jsx         | 15 ++++++++-------
 src/pages/index.module.scss | 20 +++++++++++++++-----
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/.stylelintrc b/.stylelintrc
index 54edb73..36225c9 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -7,6 +7,7 @@
   "syntax": "scss",
   "rules": {
       "indentation": 4,
-      "number-leading-zero": "never"
+      "number-leading-zero": "never",
+      "no-descending-specificity": null
   }
 }
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 73890fe..22e3917 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -5,27 +5,28 @@ import ProjectImage from '../components/molecules/ProjectImage'
 import { ReactComponent as Images } from '../images/images.svg'
 import styles from './index.module.scss'
 
-const getImageCount = (imageEdges, slug) => {
+const getImageCount = (images, slug) => {
   let array = []
+  let slugWithoutSlashes = slug.replace(/\//g, '')
 
-  imageEdges.map(({ node }) => {
-    if (node.name.includes(slug.replace(/\//g, ''))) {
+  images.map(({ node }) => {
+    if (node.name.includes(slugWithoutSlashes)) {
       array.push(node)
     }
   })
 
-  return array
+  return array.length
 }
 
 const Home = ({ data }) => {
   const projects = data.allProjectsYaml.edges
-  const imageEdges = data.projectImageFiles.edges
+  const images = data.projectImageFiles.edges
 
   return (
     <div className={styles.projects}>
       {projects.map(({ node }) => {
         const { slug, title, img } = node
-        const imageCount = getImageCount(imageEdges, slug).length
+        const imageCount = getImageCount(images, slug)
 
         return (
           <article className={styles.project} key={slug}>
@@ -33,7 +34,7 @@ const Home = ({ data }) => {
               <h1 className={styles.title}>{title}</h1>
               <ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
 
-              {imageCount > 0 && (
+              {imageCount > 1 && (
                 <small
                   className={styles.imageCount}
                   title={`${imageCount} project images`}
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 4d39f43..b2691d6 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -57,19 +57,29 @@
                 color: #fff;
                 transform: translate3d(0, 0, 0);
             }
+
+            .imageCount {
+                opacity: 1;
+                transform: translate3d(0, 0, 0);
+            }
         }
     }
 }
 
 .imageCount {
     position: absolute;
-    bottom: $spacer / 4;
-    right: $spacer / 2;
-    color: $brand-light;
+    bottom: 10%;
+    right: 0;
+    color: $brand-grey-dimmed;
     font-size: $font-size-mini;
-    opacity: .85;
+    padding: $spacer / 6 $spacer / 2;
+    background: rgba($brand-cyan, .9);
+    z-index: 10;
+    opacity: 0;
+    transform: translate3d(0, $spacer / 2, 0);
+    transition: transform .25s ease-out;
 
     svg {
-        fill: $brand-light;
+        fill: $brand-grey-dimmed;
     }
 }

From f8dba5af7f79c9669c9c1d42cca410427e454662 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 24 Nov 2018 18:18:43 +0100
Subject: [PATCH 3/3] remove codacy

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index 0afd54a..e490292 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,6 @@
 <p align="center">
   <a href="https://travis-ci.com/kremalicious/portfolio"><img src="https://travis-ci.com/kremalicious/portfolio.svg?branch=master" /></a>
   <a href="https://codeclimate.com/github/kremalicious/portfolio/maintainability"><img src="https://api.codeclimate.com/v1/badges/8f561ec93e0f8c6b15d9/maintainability" /></a>
-  <a href="https://www.codacy.com/app/kremalicious/portfolio?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=kremalicious/portfolio&amp;utm_campaign=Badge_Grade"><img src="https://api.codacy.com/project/badge/Grade/c3bccea20dfd49c59b3956afd60998d8"/></a>
   <a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/kremalicious/portfolio.svg" /></a>
 </p>