diff --git a/package-lock.json b/package-lock.json
index 3dbf99b61..e78f2244d 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index f2ea12b64..0d65713ab 100644
--- a/package.json
+++ b/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",
diff --git a/scripts/build.js b/scripts/build.js
index 85b407fa1..a8ec3d088 100644
--- a/scripts/build.js
+++ b/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)) {
}`
)
+ // new icon = less than 31 days old
+ const date = (snippetData.match(//) || [, ''])[1]
+ if (date && differenceInDays(new Date(date), new Date()) < 31) {
+ snippetEl.prepend(
+ createElement(
+ '
'
+ )
+ )
+ link.prepend(
+ createElement(
+ ''
+ )
+ )
+ }
+
// tags
const tags = (snippetData.match(//) || [, ''])[1]
.split(/,\s*/)
diff --git a/snippets/last-item-with-remaining-available-height.md b/snippets/last-item-with-remaining-available-height.md
index 3f6d35f9c..0aab7f353 100644
--- a/snippets/last-item-with-remaining-available-height.md
+++ b/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
+
diff --git a/snippets/toggle-switch.md b/snippets/toggle-switch.md
index eaf49e326..d25a05db2 100644
--- a/snippets/toggle-switch.md
+++ b/snippets/toggle-switch.md
@@ -69,3 +69,4 @@ This effect is styling only the `