use data-subtype to style NPF text blocks

begins the work of splitting NPF element styling from the project to a reusable stylesheet
AprilSylph · Nov 11, 2021 · 847e794 · 847e794
1 parent 96faf0d
commit 847e794
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 40 deletions.
diff --git a/src/lib/npf.css b/src/lib/npf.css
@@ -0,0 +1,26 @@
+[data-subtype="heading2"] {
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+[data-subtype="heading1"] {
+  font-size: 1.625rem;
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+[data-subtype="quote"] {
+  font-family: Calluna, sans-serif;
+  font-size: 1.4375rem;
+}
+
+[data-subtype="chat"] {
+  font-family: Source Code Pro, monospace;
+}
+
+[data-subtype="quirky"] {
+  font-family: Fairwater, serif;
+  font-size: 24px;
+  line-height: 1.3em;
+}
diff --git a/src/lib/npf.js b/src/lib/npf.js
@@ -74,16 +74,8 @@ const blockRenderers = {
       'unordered-list-item': 'li'
     })[subtype] || 'p');
 
-    const className = {
-      quirky: 'npf_quirky',
-      quote: 'npf_quote',
-      chat: 'npf_chat'
-    }[subtype];
+    if (subtype) Object.assign(element.dataset, { subtype });
 
-    if (subtype === 'ordered-list-item') element.dataset.ordered = true;
-    if (subtype === 'unordered-list-item') element.dataset.ordered = false;
-
-    if (className !== undefined) Object.assign(element, { className });
     element.append(...applyFormatting({ text, formatting }));
 
     return element;
@@ -313,14 +305,14 @@ const splitArray = (array, index) => [
 ];
 
 const buildLists = parentNode => {
-  const getFirstListItem = () => [...parentNode.children].find(element => element.matches('li[data-ordered]'));
+  const getFirstListItem = () => [...parentNode.children].find(element => element.matches('li[data-subtype$="list-item"]'));
   while (getFirstListItem() !== undefined) {
     const firstListItem = getFirstListItem();
-    const { ordered } = firstListItem.dataset;
+    const { subtype } = firstListItem.dataset;
 
-    const listElement = document.createElement(ordered === 'true' ? 'ol' : 'ul');
+    const listElement = document.createElement(subtype === 'ordered-list-item' ? 'ol' : 'ul');
     parentNode.insertBefore(listElement, firstListItem);
-    while (listElement.nextElementSibling?.dataset.ordered === ordered) {
+    while (listElement.nextElementSibling?.dataset.subtype === subtype) {
       listElement.append(listElement.nextElementSibling);
     }
   }

diff --git a/src/outbox.css b/src/outbox.css
@@ -420,33 +420,6 @@ article footer button {
 
 /* NPF elements */
 
-article h2 {
-  font-size: 1.25rem;
-  font-weight: 400;
-  line-height: 1.3;
-}
-
-article h1 {
-  font-size: 1.625rem;
-  font-weight: 400;
-  line-height: 1.3;
-}
-
-.npf_quote {
-  font-family: Calluna, sans-serif;
-  font-size: 1.4375rem;
-}
-
-.npf_chat {
-  font-family: Source Code Pro, monospace;
-}
-
-.npf_quirky {
-  font-family: Fairwater, serif;
-  font-size: 24px;
-  line-height: 1.3em;
-}
-
 article figure,
 div.row {
   max-width: none;

diff --git a/src/outbox.html b/src/outbox.html
@@ -5,6 +5,7 @@
     <title>Outbox for Tumblr</title>
     <link rel="icon" href="/icons/16.png" type="image/png">
     <link rel="stylesheet" href="lib/normalize.min.css">
+    <link rel="stylesheet" href="lib/npf.css">
     <link rel="stylesheet" href="outbox.css">
     <link rel="stylesheet" href="https://assets.tumblr.com/fonts/favorit/stylesheet.css">
     <script src="lib/browser-polyfill.min.js"></script>