Use puppeteer to implement date design

.eleventy.js

@@ -1,10 +1,19 @@
 const dev = require('./docs/config/tasks/dev');
+const dates = require('./docs/config/tasks/date-labels');
 
-module.exports = function (eleventyConfig) {
+module.exports = function async(eleventyConfig) {
   // watch task
-  eleventyConfig.on('beforeWatch', function () {
+  eleventyConfig.on('beforeWatch', () => {
     dev();
   });
+
+  // date labels
+  if (process.env.SITE_ENV === 'workspace') {
+    eleventyConfig.on('afterBuild', () => {
+      dates();
+    });
+  }
+
   eleventyConfig.setQuietMode(true);
   eleventyConfig.addWatchTarget('**/*.scss');
   eleventyConfig.addWatchTarget('./assets/scss/**/*.html');
@@ -21,7 +30,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addFilter('usageKey', (value, usage) => {
     const usageObj = usage[value];
     if (typeof usageObj === 'object') {
-      return usageObj.data
+      return usageObj.data;
     } else {
       return [];
     }

docs/config/tasks/utils.js

@@ -182,6 +182,13 @@ const downloadAsset = async (url, name) => {
   return filepath;
 };
 
+const years = () => {
+  const now = new Date().getUTCFullYear();
+  return Array(now - 1998)
+    .fill('')
+    .map((v, idx) => now - idx);
+};
+
 module.exports = {
   findUsageInfo,
   generateClassName,
@@ -197,4 +204,5 @@ module.exports = {
   buildTokenArr,
   getKeywords,
   downloadAsset,
+  years
 };

docs/src/data/years.js

@@ -0,0 +1,3 @@
+const { years } = require('../../config/tasks/utils');
+
+module.exports = () => years();

docs/src/date-labels.njk

@@ -0,0 +1,26 @@
+---
+layout: base.njk
+---
+<nav class="breadcrumb" aria-label="breadcrumbs">
+  <ul>
+    <li><a href="{{ '/' | url }}">Home</a></li>
+    <li class="is-active"><a href="{{ page.url | url }}">Date Labels</a></li>
+  </ul>
+</nav>
+<div class="date-labels q-container">
+  <section>
+    <h2 class="subtitle">Date labels</h2>
+    {% for year in years %}
+      <div class="has-b-btm-marg">
+        <div class="date-label has-bg-black has-text-white t-weight-bold t-serif t-lh-s">
+          <div class="l-align-center-children">
+            <div class="c-icon has-text-yellow"><svg aria-hidden="true"><use xlink:href="#bug"></use></svg></div>
+            <div class="has-tiny-btm-marg">
+              <span class="t-size-l"><em>from</em></span> <span class="t-size-xxxl">{{ year }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </section>
+</div>

docs/src/scss/_date-labels.scss

@@ -0,0 +1,33 @@
+// used on /date-labels/
+@import '../../../assets/scss/1-settings/all';
+
+.date-labels {
+  gap: 2rem;
+}
+
+.date-label {
+  display: inline-block;
+  padding: 0 $size-xl 0 $size-xxs;
+  span {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  > div {
+    gap: $size-xl;
+  }
+  .c-icon {
+    display: flex;
+    font-size: 2rem;
+    position: relative;
+    &:after {
+      content: '';
+      width: 1px;
+      height: 100%;
+      top: 50%;
+      right: -$size-xl / 2;
+      transform: translateY(-50%);
+      position: absolute;
+      background: #fff;
+    }
+  }
+}

docs/src/scss/queso-docs.scss

@@ -1,4 +1,5 @@
 @import 'code';
+@import 'date-labels';
 
 $navbar-height: 3.25rem;
 $mobile-breakpoint: 768px;

package.json

@@ -14,7 +14,7 @@
     "release": "np --any-branch",
     "compile": "tsc",
     "docs": "npm run compile && SITE_ENV=development node docs/src/data/docs.js",
-    "dates": "npm run compile && node docs/build/config/tasks/date-label.js"
+    "dates": "npm run compile && SITE_ENV=development node docs/config/tasks/build.js && SITE_ENV=workspace eleventy --serve"
   },
   "files": [
     "/assets"
@@ -140,7 +140,8 @@
     "nunjucks": "^3.1.7",
     "ora": "^5.1.0",
     "passes-wcag": "^0.2.1",
-    "prettier": "2.2.1",
+    "prettier": "2.1.2",
+    "puppeteer": "^5.5.0",
     "push-dir": "^0.4.1",
     "stylelint": "^13.0.0",
     "typescript": "^4.0.3"