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/README.md b/README.md index 0afd54a..e490292 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,6 @@

-

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 @@ + + + diff --git a/src/pages/index.jsx b/src/pages/index.jsx index dd1b4ad..22e3917 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -2,21 +2,46 @@ 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 = (images, slug) => { + let array = [] + let slugWithoutSlashes = slug.replace(/\//g, '') + + images.map(({ node }) => { + if (node.name.includes(slugWithoutSlashes)) { + array.push(node) + } + }) + + return array.length +} + const Home = ({ data }) => { const projects = data.allProjectsYaml.edges + const images = data.projectImageFiles.edges return (
{projects.map(({ node }) => { const { slug, title, img } = node + const imageCount = getImageCount(images, slug) return (

{title}

+ + {imageCount > 1 && ( + + {imageCount} + + )}
) @@ -49,5 +74,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..b2691d6 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -57,6 +57,29 @@ color: #fff; transform: translate3d(0, 0, 0); } + + .imageCount { + opacity: 1; + transform: translate3d(0, 0, 0); + } } } } + +.imageCount { + position: absolute; + bottom: 10%; + right: 0; + color: $brand-grey-dimmed; + font-size: $font-size-mini; + 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-grey-dimmed; + } +}