Add new icon for snippets less than 31 days old (#104)

package-lock.json

@@ -2558,6 +2558,12 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz",
+      "integrity": "sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw==",
+      "dev": true
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",

package.json

@@ -21,6 +21,7 @@
     "babel-preset-env": "^1.6.1",
     "babel-preset-stage-2": "^6.24.1",
     "caniuse-db": "^1.0.30000813",
+    "date-fns": "^1.29.0",
     "jsdom": "^11.6.2",
     "marked": "^0.3.16",
     "node-sass": "^4.9.3",

scripts/build.js

@@ -5,6 +5,7 @@ const pretty = require('pretty')
 const caniuseDb = require('caniuse-db/data.json')
 const sass = require('node-sass')
 const { toKebabCase, createElement, template, dom, getCode } = require('../utils/utils.js')
+const { differenceInDays } = require('date-fns')
 
 const SNIPPETS_PATH = './snippets'
 const TAGS = [
@@ -115,6 +116,21 @@ for (const snippetFile of fs.readdirSync(SNIPPETS_PATH)) {
     }</a>`
   )
 
+  // new icon = less than 31 days old
+  const date = (snippetData.match(/<!--\s*date:\s*(.+?)-->/) || [, ''])[1]
+  if (date && differenceInDays(new Date(date), new Date()) < 31) {
+    snippetEl.prepend(
+      createElement(
+        '<img alt="New" draggable="false" class="snippet__new" src="./src/img/new.svg">'
+      )
+    )
+    link.prepend(
+      createElement(
+        '<img alt="New" draggable="false" class="sidebar__new" src="./src/img/new.svg">'
+      )
+    )
+  }
+
   // tags
   const tags = (snippetData.match(/<!--\s*tags:\s*(.+?)-->/) || [, ''])[1]
     .split(/,\s*/)

snippets/last-item-with-remaining-available-height.md

@@ -51,3 +51,4 @@ The parent must have a viewport height. `flex-grow: 1` could be applied to the f
 - https://caniuse.com/#feat=flexbox
 
 <!-- tags: layout -->
+<!-- date: 2018-09-30 -->

snippets/toggle-switch.md

@@ -69,3 +69,4 @@ This effect is styling only the `<label>` element to look like a toggle switch,
 - https://caniuse.com/#feat=transforms2d
 
 <!-- tags: visual, interactivity -->
+<!-- date: 2018-10-03 -->

src/css/components/sidebar.scss

@@ -71,6 +71,12 @@
     color: #e3f5ff;
     margin-bottom: 0.5rem;
   }
+
+  &__new {
+    width: 1.25rem;
+    vertical-align: middle;
+    margin-right: 0.25rem;
+  }
 }
 
 @media (min-width: 992px) {

src/css/components/snippet.scss

@@ -119,6 +119,14 @@
 
   &__tag {
   }
+
+  &__new {
+    position: absolute;
+    top: -1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 3rem;
+  }
 }
 
 .snippet-demo {