add tags using handlebars, update styles (#37)

* add tags using handlebards, update styles

* fix split helper

* add tag class, add char to split helper

Author: josuebran

preview-src/examples/quickstart.adoc

@@ -7,6 +7,7 @@
 :astra-link: https://astra.datastax.com
 :astra-nodejs-link: https://docs.datastax.com/en/astra-serverless/docs/develop/sdks/rest-nodejs-client.html
 :astra-json-link: https://docs.datastax.com/en/astra-serverless/docs/develop/dev-with-json.html
+:page-tags: Machine Learning Frameworks, Embeding Services, Astra, SDK
 :keywords: Machine Learning Frameworks, Embeding Services, Astra, SDK
 
 == Objective

src/css/toc.css

@@ -14,8 +14,8 @@
   color: var(--toc-heading-font-color);
   font-size: calc(16 / var(--rem-base) * 1rem);
   font-weight: var(--body-font-weight-bold);
-  line-height: 1.3;
-  margin: 0 -0.5px;
+  line-height: 1.5;
+  margin: 0;
   padding-bottom: var(--ds-space-2);
 }
 
@@ -103,7 +103,7 @@
 
 .toc .toc-menu a.is-active {
   border-left-color: var(--link-font-color);
-  color: var(--doc-font-color);
+  color: var(--link-font-color);
 }
 
 .sidebar.toc .toc-menu a:focus {
@@ -131,7 +131,8 @@
   flex-wrap: wrap;
 }
 
-.toc .toc-tags span,
+.toc .toc-tags .tag,
+.tags-container .tag,
 .tags-container span {
   display: flex;
   padding: var(--ds-space-q) var(--ds-space-1h);

src/css/vars.css

@@ -95,7 +95,8 @@
   --table-footer-background: linear-gradient(to bottom, var(--ds-background-level1) 0%, var(--ds-background-body) 100%);
   /* toc */
   --toc-font-color: var(--ds-text-secondary);
-  --toc-heading-font-color: var(--doc-font-color);
+  --toc-menu-font-weight: var(--body-font-weight-bold);
+  --toc-heading-font-color: var(--ds-text-primary);
   --toc-border-color: var(--ds-divider);
   --toc-line-height: 1.5;
   /* footer */

src/helpers/split.js

@@ -0,0 +1,10 @@
+'use strict'
+
+module.exports = (val, char) => {
+  if (typeof val === 'string') {
+    const arr = val.split(char)
+    return arr
+  } else {
+    throw new Error('{{split}} helper expects a string argument')
+  }
+}

src/js/08-toc-rail.js

@@ -1,28 +1,7 @@
-;(function () {
-  'use strict'
+/* content rail */
 
-  /* toc container */
-  var toc = document.querySelector('aside.toc.sidebar')
-
-  if (toc) {
-    tags(toc)
-  }
-
-  function tags (toc) {
-    var tagList = document.getElementsByTagName('meta').keywords
-    if (tagList) {
-      var title = document.createElement('h3')
-      title.textContent = 'Tags'
-      var list = tagList.content.split(',')
-      var container = toc.querySelector('.toc-tags')
-      var tags = document.createElement('div')
-      list.forEach((s) => {
-        var el = document.createElement('span')
-        el.textContent = s
-        tags.appendChild(el)
-      })
-      container.appendChild(title)
-      container.appendChild(tags)
-    }
-  }
-})()
+// ;(function () {
+//   'use strict'
+//  // content
+//
+// })()

src/partials/toc.hbs

@@ -1,7 +1,16 @@
 <aside class="toc sidebar" data-title="{{{or page.attributes.toctitle 'Contents'}}}" data-levels="{{{or page.attributes.toclevels 2}}}">
   <div class="toc-menu-container">
     <div class="toc-menu"></div>
-    <div class="toc-menu toc-tags"></div>
+    <div class="toc-menu toc-tags">
+      {{#if page.attributes.tags}}
+      <h3>Tags</h3>
+      <div>
+      {{#each (split page.attributes.tags ", ") }}
+        <span class="tag">{{this}}</span>
+      {{/each}}
+      </div>
+      {{/if}}
+    </div>
     <div class="toc-menu toc-dev">
     {{#if page.versions}}
     <h3>Developer Resources</h3>