From 8c397b134813cae7ec16b46e09c2e9d3c3e30836 Mon Sep 17 00:00:00 2001 From: atomiks Date: Fri, 5 Oct 2018 14:11:08 +1000 Subject: [PATCH] Add new icon for snippets less than 31 days old (#104) --- package-lock.json | 6 ++++++ package.json | 1 + scripts/build.js | 16 ++++++++++++++++ .../last-item-with-remaining-available-height.md | 1 + snippets/toggle-switch.md | 1 + src/css/components/sidebar.scss | 6 ++++++ src/css/components/snippet.scss | 8 ++++++++ src/img/new.svg | 1 + 8 files changed, 40 insertions(+) create mode 100644 src/img/new.svg 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( + 'New' + ) + ) + link.prepend( + createElement( + 'New' + ) + ) + } + // 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 `