Full role handling (#261)

Properly handles roles with product names and versions

- `label--beta-until-bolt-1.0`
- `label--beta-until-1.0`

Also allows for `page-product` attribute to be used in labels.

If `:page-product: Neo4j`, for example, `label--new-5.22` is displayed
as 'New in Neo4j 5.22'

Author: recrwplay

preview-src/docs-roles.adoc

@@ -5,13 +5,36 @@
 :page-banner-text: Lorem ipsum dolor sit est.
 :page-banner-link: https://neo4j.com/docs
 :page-banner-link-text: Link text
+:page-product: Neo4j
 // :page-labels: fabric enterprise-edition alpha test
 
 [abstract]
 --
 Flags sections as Not Available on Aura, Aura DB Enterprise, Enterprise Edition, Fabric, and Deprecated
 --
 
+This page has the `:page-product:` attribute set to `Neo4j`.
+By default, labels that related to a version of a product have `Neo4j` prepended to the version number.
+
+For example, `label--beta-until-5.12` is displayed as `Beta until Neo4j 5.12`.
+
+To override this value, include the product name in the label.
+For example, `label--beta-until-bolt-1.0` is displayed as `Beta until Bolt 1.0`.
+
+[role=test-role]
+Paragraph with non-label role.
+
+
+[role=label--beta-until-bolt-1.0 label--removed-2.0]
+== Adding a product name to versioned labels
+
+
+[role=label--beta-until-1.0 label--dynamic-5.22 label--dynamic]
+[[messages-ack-failure]]
+=== Request message `ACK_FAILURE`
+
+The request message `ACK_FAILURE` signals to the server that the client has acknowledged a previous failure and should return to a `READY` state.
+
 
 [role=label--new-5.11 label--beta-until-5.12]
 == Beta until

src/js/60-docs-roles.js

@@ -15,6 +15,8 @@ function checkWrapped () {
 }
 
 document.addEventListener('DOMContentLoaded', function () {
+  const contentDataset = document.querySelector('article.doc').dataset
+
   var camelCased = function (str) {
     return str.split(/-|\./)
       .map((text) => text.substr(0, 1).toUpperCase() + text.substr(1))
@@ -34,32 +36,53 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // so if the role is a single word, we use the role as is - ie deprecated
     // if it is longer we test to see if it is a 'versionable' roke - ie deprecated-5.20
-    // if it is a versionable role, and a veresion is specified, we remove the version and use the remaining text as the label class
-    if (labelParts.length > 1) {
-      label = (rolesData[label] && rolesData[label].labelCategory !== 'version') ? label : labelParts.slice(0, -1).join('-')
+    // if it is a versionable role, and a version is specified, we remove the version and use the remaining text as the label class
+    // if (labelParts.length > 1) {
+    //   label = (rolesData[label] && rolesData[label].labelCategory !== 'version') ? label : labelParts.slice(0, -1).join('-')
+    // }
+
+    let dataLabel, dataProduct, dataVersion
+    const dataExtras = []
+
+    // what about roles like new-bolt-5.20 if we want to use a product name in the label?
+    while (!dataLabel && labelParts.length > 0) {
+      const labelCandidate = labelParts.join('-')
+      if (rolesData[labelCandidate]) {
+        dataLabel = labelCandidate
+      } else {
+        dataExtras.push(labelParts.pop())
+      }
     }
 
     // ignore labels that are not defined in rolesData
-    if (!rolesData[label]) {
+    if (!dataLabel) {
       return
     }
 
+    if (dataExtras.length > 0) {
+      dataVersion = dataExtras.shift()
+    }
+
+    if (dataExtras.length > 0) {
+      dataProduct = camelCased(dataExtras.join(' '))
+    }
+
     var labelDetails = {
-      class: label,
-      role: label,
-      text: rolesData[label].displayText || '',
+      class: dataLabel,
+      role: dataLabel,
+      text: rolesData[dataLabel].displayText || '',
+      joinText: dataVersion ? rolesData[dataLabel].joinText || 'in' : '',
       data: {
-        labelCategory: rolesData[label].labelCategory || '',
-        product: rolesData[label].product || '',
-        function: rolesData[label].function || '',
+        product: dataVersion ? dataProduct || rolesData[dataLabel].product || contentDataset.product || '' : '',
+        version: dataVersion || '',
+        function: rolesData[dataLabel].function || '',
+        event: rolesData[dataLabel].labelCategory === 'version' ? dataLabel : '',
       },
     }
 
-    // get version number for version labels
-    if ((rolesData[label].labelCategory === 'version' || rolesData[label].versionText) && labelParts[1]) {
-      labelDetails.data.version = labelParts.pop()
-      const joinText = rolesData[label].versionText ? rolesData[label].versionText : 'in'
-      labelDetails.text = [labelDetails.text, joinText, labelDetails.data.version].join(' ')
+    // update label text for versioned labels
+    if ((rolesData[dataLabel].labelCategory === 'version' || (rolesData[dataLabel].joinText && dataVersion))) {
+      labelDetails.text = [labelDetails.text, labelDetails.joinText, labelDetails.data.product, labelDetails.data.version].join(' ')
     }
 
     return labelDetails
@@ -104,9 +127,9 @@ document.addEventListener('DOMContentLoaded', function () {
       const labelSpan = createElement('span', `label content-label label--${labelDetails.class}`)
 
       // add dataset to the label
-      if (labelDetails.data.version) labelSpan.dataset.version = labelDetails.data.version
-      if (labelDetails.data.product !== '') labelSpan.dataset.product = labelDetails.data.product
-      if (labelDetails.data.function !== '') labelSpan.dataset.function = labelDetails.data.function
+      for (var d in labelDetails.data) {
+        if (labelDetails.data[d] !== '') labelSpan.dataset[d] = labelDetails.data[d]
+      }
 
       labelSpan.appendChild(document.createTextNode(labelDetails.text))
 
@@ -125,8 +148,10 @@ document.addEventListener('DOMContentLoaded', function () {
         label.classList.add('header-label')
       }
       labelsDiv.append(label)
-      const contentLabel = Array.from(label.classList).find((c) => c.startsWith('label--')).replace('label--', '')
-      roleDiv.dataset[camelCased(contentLabel)] = contentLabel
+
+      for (var d in label.dataset) {
+        roleDiv.dataset[d] = label.dataset[d]
+      }
     }
 
     if (roleDiv.nodeName === 'H1' || headings.includes(roleDiv.firstElementChild.nodeName)) {

src/js/data/rolesData.json

@@ -130,7 +130,7 @@
     "dynamic":{
         "labelCategory": "function",
         "displayText": "Dynamic",
-        "versionText": "since"
+        "joinText": "since"
     },
     "alpha":{
         "labelCategory": "version",
@@ -144,7 +144,7 @@
         "description": "The feature or function was in beta until the version specified",
         "labelCategory": "version",
         "displayText": "Beta",
-        "versionText": "until"
+        "joinText": "until"
     },
     "deprecated":{
         "labelCategory": "version",

src/partials/article.hbs

@@ -1,5 +1,5 @@
 <div id="skip-to-content"></div>
-<article class="doc">
+<article class="doc"{{#with page.attributes.product}} data-product="{{this}}"{{/with}}>
 {{#if (eq page.layout '404')}}
 <h1 class="page">{{{or page.title 'Page Not Found'}}}</h1>
 <div class="paragraph">