#34 Add tags component

jcmnunes · Jul 31, 2018 · 6de6903 · 6de6903
1 parent e7c5d2d
commit 6de6903
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 41 deletions.
diff --git a/src/templates/WorkSingle.js b/src/templates/WorkSingle.js
@@ -11,7 +11,7 @@ export default class WorkSingle extends Component {
     const { data, location } = this.props;
     const { heroImage } = data.markdownRemark.fields;
     return (
-      <div>
+      <div className={styles.root}>
         <Navbar pathname={location.pathname} />
         <div className={styles.headerImage}>
           <Img
@@ -26,6 +26,14 @@ export default class WorkSingle extends Component {
           />
           <div className={styles.backdrop} />
         </div>
+        <div className="section-wrapper">
+          <div className={styles.tags}>
+            {data.markdownRemark.frontmatter.tags.map(({ tag }) => (
+              <span className={styles.tag} key={tag}>{tag}</span>
+            ))}
+          </div>
+          <h1>{data.markdownRemark.frontmatter.title}</h1>
+        </div>
         <div 
           className={`section-wrapper ${styles.postBody}`}
           dangerouslySetInnerHTML={{
@@ -44,6 +52,9 @@ export const query = graphql`
       frontmatter {
         title
         date(formatString: "MMMM DD YYYY")
+        tags {
+          tag
+        }
       }
       fields {
         heroImage {

diff --git a/src/templates/WorkSingle.module.css b/src/templates/WorkSingle.module.css
@@ -1,64 +1,95 @@
 @import "../assets/styles/config.css";
 
-.headerImage {
-  height: 150px;
-  position: relative;
-  overflow: hidden;
-  margin-top: 60px;
-}
+.root {
+  & .headerImage {
+    height: 150px;
+    position: relative;
+    overflow: hidden;
+    margin-top: 60px;
+  }
 
-.backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: color(var(--blue) alpha(0.28));
-}
+  & .backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: color(var(--blue) alpha(0.28));
+  }
 
-.postBody {
   & h1 {
-    font-size: 2rem;
     color: color(var(--text) tint(20%));
+    font-size: 36px;
+    font-weight: 600;
     text-transform: none;
     border-bottom: none;
     padding-bottom: 0;
-    margin-top: 3rem;
-    margin-bottom: 2rem;
+    margin-top: 2rem;
   }
 
-  & h2 {
-    font-size: 1.75rem;
-  }
+  & .postBody {
+    & h1 {
+      font-size: 2rem;
+      color: color(var(--text) tint(20%));
+      text-transform: none;
+      border-bottom: none;
+      padding-bottom: 0;
+      margin-top: 3rem;
+      margin-bottom: 2rem;
+    }
 
-  & h3 {
-    font-size: 1.5rem;
-    text-transform: none;
-    font-weight: 700;
+    & h2 {
+      font-size: 1.75rem;
+    }
+
+    & h3 {
+      font-size: 1.5rem;
+      text-transform: none;
+      font-weight: 700;
+    }
+
+    & a {
+      color: var(--blue);
+      text-decoration: none;
+
+      &:hover {
+        color: color(var(--blue) shade(20%));
+      }
+    }
   }
 
-  & a {
-    color: var(--blue);
-    text-decoration: none;
+  & .tags {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 50px;
 
-    &:hover {
-      color: color(var(--blue) shade(20%));
+    & .tag {
+      background: var(--blue);
+      border-radius: 1000px;
+      color: var(--white);
+      font-size: 14px;
+      font-weight: 600;
+      margin-right: 2rem;
+      margin-bottom: 1rem;
+      padding: 0.5rem 1rem;
     }
   }
 }
 
 @media (--tiny-viewport) {
-  .postBody {
-    & h1 {
-      font-size: 3rem;
-    }
+  .root {
+    & .postBody {
+      & h1 {
+        font-size: 3rem;
+      }
 
-    & h2 {
-      font-size: 2.5rem;
-    }
+      & h2 {
+        font-size: 2.5rem;
+      }
 
-    & h3 {
-      font-size: 2rem;
+      & h3 {
+        font-size: 2rem;
+      }
     }
   }
-}
+}
diff --git a/src/works/2018-07-17-cras-justo-odio-dapibus-ac-facilisis-in-egestas-eget-quam.md b/src/works/2018-07-17-cras-justo-odio-dapibus-ac-facilisis-in-egestas-eget-quam.md
@@ -9,6 +9,16 @@ images:
   - image: /assets/img1.jpg
   - image: /assets/img2.jpg
   - image: /assets/img3.jpg
+tags:
+  - tag: particles
+  - tag: nanotechnology
+  - tag: microbiology
+  - tag: particles
+  - tag: nanotechnology
+  - tag: microbiology
+  - tag: particles
+  - tag: nanotechnology
+  - tag: microbiology
 ---
 # Omnis temptat alis pererrat illo vincemur candida
 

diff --git a/src/works/2018-07-17-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit.md b/src/works/2018-07-17-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit.md
@@ -8,6 +8,10 @@ relpath: ../../static
 images:
   - image: /assets/adidasshoes.jpg
   - image: /assets/adi.png
+tags:
+  - tag: particles
+  - tag: nanotechnology
+  - tag: microbiology
 ---
 # Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 

diff --git a/src/works/2018-07-17-maecenas-faucibus-mollis-interdum.md b/src/works/2018-07-17-maecenas-faucibus-mollis-interdum.md
@@ -9,6 +9,10 @@ images:
   - image: /assets/img1.jpg
   - image: /assets/img2.jpg
   - image: /assets/img3.jpg
+tags:
+  - tag: particles
+  - tag: nanotechnology
+  - tag: microbiology
 ---
 # Omnis temptat alis pererrat illo vincemur candida
 

diff --git a/src/works/work1.md b/src/works/work1.md
@@ -8,6 +8,10 @@ images:
   - image: /assets/img1-thumb.jpg
   - image: /assets/img2-thumb.jpg
   - image: /assets/img3-thumb.jpg
+tags:
+  - tag: particles
+  - tag: nanotechnology
+  - tag: microbiology
 ---
 
 # This is a heading h1

diff --git a/src/works/work2.md b/src/works/work2.md
@@ -8,6 +8,10 @@ images:
   - image: /assets/img1-thumb.jpg
   - image: /assets/img2-thumb.jpg
   - image: /assets/img3-thumb.jpg
+tags:
+  - tag: particles
+  - tag: nanotechnology
+  - tag: microbiology
 ---
 
 Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

diff --git a/src/works/work3.md b/src/works/work3.md
@@ -8,6 +8,10 @@ images:
   - image: /assets/img1-thumb.jpg
   - image: /assets/img2-thumb.jpg
   - image: /assets/img3-thumb.jpg
+tags:
+  - tag: particles
+  - tag: nanotechnology
+  - tag: microbiology
 ---
 
 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue.