DS-132 - transform codepen + display color tokens

11ty/lib/transforms/backticks.js

@@ -0,0 +1,13 @@
+module.exports = function(el) {
+  if (el.nodeType == 3) {
+   let value = el.nodeValue.trim();
+    if (value.indexOf('`') > -1) {
+      let oldValue = value;
+      value = value.replace(/`([^`]+)`/g, "<code>$1</code>");
+      el.parentElement.innerHTML = value;
+      if (process.env.DEBUG) {
+        console.log("-- backticks", oldValue, "->", value);
+      }
+    }
+  }
+}

11ty/lib/transforms/codepen.js

@@ -0,0 +1,22 @@
+module.exports = function (el) {
+  if (el.nodeType == 3 && el.parentElement && el.parentElement.tagName == 'P') {
+    let value = el.nodeValue.trim();
+    if (value.match('^https://codepen.io/.*/pen/.*$')) {
+      let oldValue = value;
+      let parentEl = el.parentElement;
+      // we're only replacing 
+      let codepenId = (value.trim().split('/pen/')).pop();
+
+      new_value = `<span>See <a href="${value}">
+  example pen</a> by U-M Library Design System (<a href="https://codepen.io/team/umlibrary-designsystem">@umlibrary-designsystem</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>`;
+
+      parentEl.setAttribute('class', 'codepen');
+      parentEl.dataset.height = '300';
+      parentEl.dataset.defaultTab = 'html,result';
+      parentEl.dataset.slugHash = codepenId;
+      parentEl.dataset.user = 'umlibrary-designsystem';
+      parentEl.innerHTML = new_value;
+    }
+  }
+}

11ty/lib/transforms/docs-color-block.js

@@ -0,0 +1,35 @@
+const tokens = require('../../src/_data/tokens');
+const nunjunks = require('nunjucks');
+
+const template = `
+  {% for key, palette in palettes %}
+    <div class="color-palette">
+      <h3 class="visually-hidden" id="{{key}}">{{key}}</h3>
+      <ol>
+        {% for value, token in palette %}
+          <li id="{{ token.name }}" style="background: var(--{{ token.name }});">
+            <code>var(--{{ token.name }})</code>
+            <code>{{ token.original.value }}</code>
+          </li>
+        {% endfor %}
+      </ol>
+    </div>
+  {% endfor %}
+`;
+
+module.exports = function (el) {
+
+  if (el.nodeType == 1 && 
+      el.tagName == 'PRE' && 
+      el.getAttribute('class') == 'code') {
+
+    let value = decodeURI(el.textContent.trim());
+    if (value == '<docs-color-block></docs-color-bock>') {
+      // build our color tokens display
+      let sectionEl = el.ownerDocument.createElement('section');
+      sectionEl.setAttribute('class', 'color-palettes');
+      sectionEl.innerHTML = nunjunks.renderString(template, { palettes: tokens.color });
+      el.parentElement.replaceChild(sectionEl, el);
+    }
+  }
+}

11ty/lib/update-markup.js

@@ -1,20 +1,19 @@
 const { JSDOM } = require('jsdom');
+const transforms = [];
+transforms.push(require('./transforms/backticks'));
+transforms.push(require('./transforms/codepen'));
+transforms.push(require('./transforms/docs-color-block'));
+
+console.log("-- transforms", transforms);
 
 module.exports = function (eleventyConfig, config = {}) {
 
   const _replaceMarkup = function (node) {
     node.childNodes.forEach((el) => {
-      if (el.nodeType == 3) {
-        let value = el.nodeValue;
-        if (value.trim() && value.indexOf('`') > -1) {
-          let oldValue = value;
-          value = value.replace(/`([^`]+)`/g, "<code>$1</code>");
-          el.parentElement.innerHTML = value;
-          if (process.env.DEBUG) {
-            console.log("-- backticks", oldValue, "->", value);
-          }
-        }
-      } else {
+      transforms.forEach((fn) => {
+        fn(el);
+      })
+      if ( el.nodeType != 3 ) {
         _replaceMarkup(el);
       }
     })
@@ -31,6 +30,14 @@ module.exports = function (eleventyConfig, config = {}) {
 
     _replaceMarkup(mainEl);
 
+    if ( mainEl.querySelector('p.codepen[data-slug-hash]') ) {
+      // add the codepen embed script
+      let scriptEl = dom.window.document.createElement('script');
+      scriptEl.async = true;
+      scriptEl.setAttribute('src', 'https://cpwebassets.codepen.io/assets/embed/ei.js');
+      dom.window.document.body.appendChild(scriptEl);
+    }
+
     return dom.serialize();
   })
 }

11ty/src/scss/_codepen.scss

@@ -0,0 +1,14 @@
+.cp_embed_wrapper {
+  width: calc(min(1280px, 80vw) - 12rem);
+}
+
+.codepen {
+  height: 300px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid;
+  margin: 1em 0;
+  padding: 1em;
+}

11ty/src/scss/_docs-color-block.scss

@@ -0,0 +1,40 @@
+.color-palettes {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: var(--space-medium);
+  // margin-top: var(--space-xx-large);
+  width: calc(min(1280px, 80vw) - 12rem);
+}
+
+.color-palette ol {
+  list-style: none;
+  padding: 0;
+}
+
+.color-palette li {
+  padding: var(--space-medium);
+  margin: 0;
+  display: flex;
+  justify-content: space-between
+}
+
+#color-orange-400 {
+  color: var(--color-neutral-500)
+}
+
+#color-blue-300,
+#color-blue-400,
+#color-blue-500,
+#color-green-500,
+#color-indigo-400,
+#color-indigo-500,
+#color-neutral-300,
+#color-neutral-400,
+#color-neutral-500,
+#color-orange-500,
+#color-pink-400,
+#color-pink-500,
+#color-teal-400,
+#color-teal-500 {
+  color: #fff
+}

11ty/src/scss/style.scss

@@ -10,4 +10,6 @@
 @use 'cards';
 @use 'feedback-banner';
 @use 'pagination';
-@use 'alert';
+@use 'alert';
+@use 'codepen';
+@use 'docs-color-block';