From 4dcccc929da20437ed401166a2d54497448e9b31 Mon Sep 17 00:00:00 2001 From: Neil Dewhurst Date: Wed, 6 Mar 2024 14:56:43 +0000 Subject: [PATCH] Create labels from roles in docs (#211) Usage `[role=label--*]` Can be existing labels eg `[role=label--enterprise-edition]` or action-version labels such as `[role=label--new-5.11]` or `[role=label--deprecated-5.13]` - Roles are converted to labels. - Roles applied to headings and table captions are displayed inline, right-aligned. - Roles on block level elements are displayed before the corresponding block element. --- gulp.d/tasks/rollup.js | 2 + package-lock.json | 119 ++++++++++++++++++--- package.json | 1 + preview-src/docs-roles.adoc | 117 ++++++++++++++++++--- src/css/doc.css | 11 +- src/css/labels.css | 163 ++++++++++++++++++++-------- src/js/60-docs-roles.js | 139 +++++++++++++++++++++--- src/js/data/rolesData.json | 204 ++++++++++++++++++++++++++++++++++++ src/partials/article.hbs | 11 +- 9 files changed, 669 insertions(+), 98 deletions(-) create mode 100644 src/js/data/rolesData.json diff --git a/gulp.d/tasks/rollup.js b/gulp.d/tasks/rollup.js index 28659968..8f4a5210 100644 --- a/gulp.d/tasks/rollup.js +++ b/gulp.d/tasks/rollup.js @@ -5,6 +5,7 @@ const rollupPluginNodeResolve = require('@rollup/plugin-node-resolve').nodeResol const rollupPluginCommonJS = require('@rollup/plugin-commonjs') const rollupPluginBabel = require('@rollup/plugin-babel').babel const rollupPluginTerser = require('rollup-plugin-terser').terser +const rollupPluginJSON = require('@rollup/plugin-json') const toCamel = (s) => { return s.replace(/([-_][a-z])/ig, ($1) => { @@ -35,6 +36,7 @@ async function bundle (vinylFile) { babelHelpers: 'bundled', }), rollupPluginTerser(), + rollupPluginJSON(), ], onwarn: (warning) => { if (warning.code === 'CIRCULAR_DEPENDENCY' && ignoredCircular.some((d) => warning.importer.includes(d))) { diff --git a/package-lock.json b/package-lock.json index 1054485f..bf97235d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@gram-data/gram-d3": "^0.1.2", "@rollup/plugin-babel": "^5.2.3", "@rollup/plugin-commonjs": "^17.1.0", + "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^11.1.1", "asciidoctor.js": "1.5.9", "auth0-js": "^9.14.0", @@ -1061,15 +1062,9 @@ } }, "node_modules/@neo4j-ndl/base": { -<<<<<<< HEAD "version": "2.7.1", "resolved": "https://registry.npmjs.org/@neo4j-ndl/base/-/base-2.7.1.tgz", "integrity": "sha512-jsE4Um+5lnsW2S46FRaCidkNI+Qb7QkIr1hdHQyKXisTcBxRZKC1KsJ4/6LqxqyI5qOsu8AIAzlQyjBe9MvPFw==" -======= - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@neo4j-ndl/base/-/base-2.3.0.tgz", - "integrity": "sha512-kQSZ8QZMP3j8OAzjLKpfvqklgWGLShUe8iflMjs4+W3LbZVg4vXWkG5Z++BuouektcegfXbxV3OD4tq1Tmin6Q==" ->>>>>>> eda4ec8 (Updates to Labs menu) }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.3", @@ -1194,6 +1189,72 @@ "sourcemap-codec": "^1.4.4" } }, + "node_modules/@rollup/plugin-json": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz", + "integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.1.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-json/node_modules/@rollup/pluginutils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", + "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-json/node_modules/@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, + "node_modules/@rollup/plugin-json/node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, + "node_modules/@rollup/plugin-json/node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/@rollup/plugin-node-resolve": { "version": "11.1.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.1.1.tgz", @@ -18387,15 +18448,9 @@ } }, "@neo4j-ndl/base": { -<<<<<<< HEAD "version": "2.7.1", "resolved": "https://registry.npmjs.org/@neo4j-ndl/base/-/base-2.7.1.tgz", "integrity": "sha512-jsE4Um+5lnsW2S46FRaCidkNI+Qb7QkIr1hdHQyKXisTcBxRZKC1KsJ4/6LqxqyI5qOsu8AIAzlQyjBe9MvPFw==" -======= - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@neo4j-ndl/base/-/base-2.3.0.tgz", - "integrity": "sha512-kQSZ8QZMP3j8OAzjLKpfvqklgWGLShUe8iflMjs4+W3LbZVg4vXWkG5Z++BuouektcegfXbxV3OD4tq1Tmin6Q==" ->>>>>>> eda4ec8 (Updates to Labs menu) }, "@nodelib/fs.scandir": { "version": "2.1.3", @@ -18490,6 +18545,46 @@ } } }, + "@rollup/plugin-json": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz", + "integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==", + "dev": true, + "requires": { + "@rollup/pluginutils": "^5.1.0" + }, + "dependencies": { + "@rollup/pluginutils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", + "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", + "dev": true, + "requires": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + } + }, + "@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, + "estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, + "picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true + } + } + }, "@rollup/plugin-node-resolve": { "version": "11.1.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.1.1.tgz", diff --git a/package.json b/package.json index 711d68fc..e147d466 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@gram-data/gram-d3": "^0.1.2", "@rollup/plugin-babel": "^5.2.3", "@rollup/plugin-commonjs": "^17.1.0", + "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^11.1.1", "asciidoctor.js": "1.5.9", "auth0-js": "^9.14.0", diff --git a/preview-src/docs-roles.adoc b/preview-src/docs-roles.adoc index 182fda69..1fb6d250 100644 --- a/preview-src/docs-roles.adoc +++ b/preview-src/docs-roles.adoc @@ -1,5 +1,5 @@ -= Docs `code test` flags -:page-role: not-on-aura += Docs roles with a long title +:page-role: not-on-aura new-5.17 :page-theme: docs :page-banner: warning :page-banner-text: Lorem ipsum dolor sit est. @@ -12,9 +12,96 @@ Flags sections as Not Available on Aura, Aura DB Enterprise, Enterprise Edition, Fabric, and Deprecated -- -Blocks with the appropriate roles have text appended. -[role=not-on-aura] +[role="label--new-5.17 label--enterprise-edition"] +== Relationship property type constraints + +Blocks with the appropriate roles have labels added. + + +[role=label--aura-db-enterprise label--not-on-aura] +=== H3 AuraDB Enterprise AND Not on Aura + +Lorem ipsum dolor sit + +Open blocks can be used to mark multiple paragraphs within a section. + +[role=label--new-5.17] +-- +Lorem ipsum dolor sit amet, consectetur adipiscing elit. +Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. + +Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. +-- + + +This is a normal paragraph. + +The next paragraph has a label, but it's not one we support. + +[role=label--invented-label] +Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +[role=label--enterprise-edition] +Lorem ipsum dolor sit amet, consectetur adipiscing elit. +Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. + +[role=label--deprecated-5.17] +. list with label +. item 2 +. item 3 + +These labels from roles should be used for block elements only. +For inline elements, use a label. + + +=== Code + +Intro para + +[role=label--deprecated-5.17] +.Title +[source, shell] +---- +How does a label look on a code block? +---- + + +=== Examples + +Intro para + +[role=label--new-5.17] +.This is a short one +[example] +==== +Lorem Ipsunm +==== + + +=== Tables + +Intro para + +[[procedure_db_create_setVectorProperty]] +[role=label--admin-only label--deprecated-5.9] +.db.create.setVectorProperty() +[cols="<15s,<85"] +|=== +| Description +a| +Set a vector property on a given node in a more space efficient representation than Cypher’s link:{neo4j-docs-base-uri}/cypher-manual/{page-version}/clauses/set#set-set-a-property[`SET`]. +| Signature +m| db.create.setVectorProperty(node :: NODE, key :: STRING, vector :: LIST) :: (node :: NODE) +| Mode +m|WRITE +| Replaced by +a|xref:reference/procedures.adoc#procedure_db_create_setNodeVectorProperty[`db.create.setNodeVectorProperty()`] +|=== + + + +[role=label--not-on-aura] == Not on `code test` Aura Lorem ipsum dolor `code test` sit @@ -42,13 +129,13 @@ And so does this table |=== -[role=aura-db-enterprise] +[role=label--aura-db-enterprise] == AuraDB Enterprise Lorem ipsum dolor sit -[role=aura-db-enterprise not-on-aura] +[role=label--aura-db-enterprise label--not-on-aura] == H2 AuraDB Enterprise AND Not on Aura Lorem ipsum dolor sit @@ -59,23 +146,23 @@ Lorem ipsum dolor sit Lorem ipsum dolor sit -[role=aura-db-enterprise not-on-aura] +[role=label--aura-db-enterprise label--not-on-aura] === H3 AuraDB Enterprise AND Not on Aura Lorem ipsum dolor sit -[role=aura-db-enterprise not-on-aura] +[role=label--aura-db-enterprise label--not-on-aura] === H4 show roles Lorem ipsum dolor sit -[role=fabric] +[role=label--fabric] == Fabric Heading Lorem ipsum -[role=enterprise-edition] +[role=label--enterprise-edition] == Enterprise Edition content Lorem ipsum @@ -86,7 +173,7 @@ Lorem ipsum ==== H4 inside labeled section -[role=deprecated] +[role=label--deprecated] == Deprecated content Other blocks can have deprecated roles added. @@ -100,13 +187,13 @@ This is a second paragraph in the example. This is the third. ==== -[role=deprecated] +[role=label--deprecated] .Example 2 title ==== Example 2 content - this example is deprecated ==== -[role=alpha] +[role=label--alpha] == Alpha content @@ -120,7 +207,7 @@ For more information on algorithm tiers, see <>. Lorem ipsum -[role=beta] +[role=label--beta] == Beta content @@ -135,7 +222,7 @@ For more information on algorithm tiers, see <>. Lorem ipsum -[role=deprecated] +[role=label--deprecated] == Deprecated content Lorem ipsum diff --git a/src/css/doc.css b/src/css/doc.css index 048be58f..99e56b44 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -68,7 +68,7 @@ body { .doc h4 code, .doc h5 code, .doc h6 code { - padding: 0.125em 0.25em; + padding: 0 0.25em; background: var(--code-background); } @@ -146,6 +146,10 @@ body { font-weight: 600; } + .doc .header-label-container > div.labels { + padding-top: 0; + } + .doc h2:not(.discrete) { font-size: 1.2rem; } @@ -668,6 +672,11 @@ body { text-align: left; } +.doc .tableblock caption { + display: table-caption; + margin-top: 0.25rem; +} + .hide-table-captions .doc .tableblock caption { position: absolute; left: -10000px; diff --git a/src/css/labels.css b/src/css/labels.css index 36c5e7ee..014aa938 100644 --- a/src/css/labels.css +++ b/src/css/labels.css @@ -1,3 +1,78 @@ +.flex-labels-container { + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-direction: row-reverse; +} + +.header-label-container { + display: flex; + flex-wrap: wrap; +} + +.header-label-container > div.labels { + display: flex; + align-self: center; + justify-content: space-between; + gap: 0.25rem; + margin-left: auto; + line-height: var(--doc-line-height); +} + +.sect-header .header-label-container > div.labels { + padding-top: 0.4rem; +} + +.header-label-container > div.labels.wrapped { + margin-left: 0; +} + +.doc > .sect-header > h1.page:first-child:has(> .labels) { + margin-right: 0; +} + +h1 > .header-label { + margin-top: 1.2rem; +} + +.header-label-container > .header-label:first-of-type { + margin-left: auto; +} + +.doc .tableblock caption > .labels { + float: inline-end; + margin-top: -0.25rem; +} + +.listing-block .content-labels, +.example-block .content-labels { + margin-bottom: 0.2rem; +} + +.content-labels { + margin-bottom: 0.2rem; +} + +.has-label { + padding-left: 0.4rem; + border-left: 2px solid rgba(var(--colors-baltic-60)); +} + +.has-label:has(> .labels > .label--new) { + border-left-color: var(--success-color); +} + +.has-label:has(> .labels > .label--deprecated) { + border-left-color: var(--deprecated-color); +} + +h2 > .flex-label { + float: inline-end; + line-height: var(--doc-line-height); + margin-left: 0.2rem; + margin-top: 0.2rem; +} + .label { display: inline-block; padding: 0.2rem 0.8rem; @@ -13,126 +88,126 @@ margin-top: 0.2rem; } -.label--core, -.label--apoc-core { +span.label--core, +span.label--apoc-core { background: rgba(var(--colors-baltic-20)); color: rgba(var(--colors-baltic-70)); } -.label--full, -.label--apoc-full { +span.label--full, +span.label--apoc-full { background: rgba(var(--colors-forest-15)); color: rgba(var(--colors-forest-50)); } -.label--procedure { +span.label--procedure { background: var(--color-indigo-200); color: var(--color-indigo-700); } -.label--function { +span.label--function { background: rgba(var(--colors-lavender-15)); color: rgba(var(--colors-lavender-50)); } -.label--current { +span.label--current { background: rgba(var(--colors-baltic-50)); color: rgba(var(--colors-baltic-10)); } -.label--free, -.label--beginner { +span.label--free, +span.label--beginner { background: var(--colors-blueberry-70); color: var(--color-white); } -.label--not-on-aura { +span.label--not-on-aura { background: var(--warning-color); color: var(--warning-background-color); } -.label--aura-db-enterprise { +span.label--aura-db-enterprise { background: rgba(var(--colors-baltic-50)); color: rgba(var(--colors-baltic-10)); } -.label--aura, -.label--enterprise-only, -.label--professional, -.label--enterprise, -.label--enterprise-edition { +span.label--aura, +span.label--enterprise-only, +span.label--professional, +span.label--enterprise, +span.label--enterprise-edition { background: rgba(var(--colors-baltic-50)); color: rgba(var(--colors-baltic-10)); } -.label--default, -.label--recommended { +span.label--default, +span.label--recommended { background: rgba(var(--theme-light-palette-primary-bg-strong)); color: rgba(var(--theme-light-palette-primary-bg-weak)); } -.label--added, -.label--changed, -.label--new, -.label--renamed, -.label--updated, -.label--yes { +span.label--added, +span.label--changed, +span.label--new, +span.label--renamed, +span.label--updated, +span.label--yes { background: var(--success-color); color: var(--success-background-color); } -.label--alpha, -.label--beta { +span.label--alpha, +span.label--beta { background: var(--alpha-beta-background-color); color: var(--alpha-beta-color); } -.label--na, -.label--no, -.label--removed { +span.label--na, +span.label--no, +span.label--removed { background: var(--warning-color); color: var(--warning-background-color); } -.label--admin-only, -.label--danger, -.label--warning { +span.label--admin-only, +span.label--danger, +span.label--warning { background: var(--warning-color); color: var(--warning-background-color); } -.label--deprecated, -.label--discontinued { +span.label--deprecated, +span.label--discontinued { background: var(--deprecated-color); color: var(--deprecated-background-color); } -.label--unix, -.label--mac-os, -.label--linux, -.label--windows { +span.label--unix, +span.label--mac-os, +span.label--linux, +span.label--windows { background: rgba(var(--colors-baltic-70)); color: rgba(var(--colors-neutral-10)); } -.label--syntax, -.label--functionality, -.label--cypher { +span.label--syntax, +span.label--functionality, +span.label--cypher { background: var(--code-background); color: var(--code-font-color); } -.label--cluster-member-core { +span.label--cluster-member-core { background: rgba(var(--colors-baltic-15)); color: rgba(var(--colors-baltic-50)); } -.label--cluster-member-read-replica { +span.label--cluster-member-read-replica { background: rgba(var(--colors-forest-15)); color: rgba(var(--colors-forest-50)); } -.label--cluster-member-single { +span.label--cluster-member-single { background: rgba(var(--colors-lemon-10)); background: rgba(var(--colors-lemon-60)); } diff --git a/src/js/60-docs-roles.js b/src/js/60-docs-roles.js index 23973b21..8189e7c7 100644 --- a/src/js/60-docs-roles.js +++ b/src/js/60-docs-roles.js @@ -1,27 +1,134 @@ import { createElement } from './modules/dom' +import rolesData from './data/rolesData.json' + +function checkWrapped () { + const labelContainers = document.querySelectorAll('body.docs:not(.docshome) .header-label-container') + for (const container of labelContainers) { + var child = container.querySelector('.labels') + var lineHeight = parseInt(window.getComputedStyle(container).lineHeight, 10) + if (child.offsetTop - container.offsetTop >= lineHeight) { + child.classList.add('wrapped') + } else { + child.classList.remove('wrapped') + } + } +} document.addEventListener('DOMContentLoaded', function () { - const sectionDivs = document.querySelectorAll('body.docs:not(.docshome) div[class^="sect"]:not(.sectionbody,.sect-header)') - sectionDivs.forEach(function (sectionDiv) { - var roles = sectionDiv.classList + var camelCased = function (str) { + return str.split(/-|\./) + .map((text) => text.substr(0, 1).toUpperCase() + text.substr(1)) + .join('') + } + + var getLabelDetails = function (role) { + var label = role.replace('label--', '') + var labelParts = label.split('-') + + // label could be eg label--new-5.19 but in rolesData it's just new + label = rolesData[labelParts[0]] ? labelParts[0] : label + + if (!rolesData[label]) { + return + } + + var labelDetails = { + class: label, + role: label, + text: rolesData[label].displayText || '', + data: { + labelCategory: rolesData[label].labelCategory || '', + product: rolesData[label].product || '', + function: rolesData[label].function || '', + }, + } + + // get version number for version labels + if (rolesData[label].labelCategory === 'version' && labelParts[1]) { + labelDetails.data.version = labelParts[1] + labelDetails.text += ' in ' + labelDetails.data.version + } + + return labelDetails + } + + // convert all label-- roles everywhere to a label + // display a label right-aligned to headings and table captions + // wrap to the left on headings when not enough space for labels + // display a label left-aligned to everything else + // ignore inline labels + + const headings = ['H2', 'H3', 'H4', 'H5', 'H6', 'CAPTION'] + const roleDivs = document.querySelectorAll('body.docs:not(.docshome) *[class*="label--"]') + + roleDivs.forEach(function (roleDiv) { + // ignore spans because they're inline + // we only care about labels on block elements + // DIV or TABLE + if (roleDiv.nodeName === 'SPAN') return + + var roles = roleDiv.classList roles = [...roles].sort().filter(function (c) { - return (!(c.startsWith('sect') || c === 'display')) + return (c.startsWith('label--')) }) if (roles.length === 0) return - var newRolesDiv = createElement('div', 'sect-header') - var head = sectionDiv.querySelector('h2,h3,h4,h5,h6') - - if (roles.length > 0) { - newRolesDiv.append(head) - var insert = createElement('div', 'roles') - roles.forEach(function (role) { - insert.append(createElement('span', `role ${role}`)) - }) - newRolesDiv.append(insert) - sectionDiv.prepend(newRolesDiv) - sectionDiv.classList.add('show-roles') + const labels = [] + + roles.forEach(function (role) { + const labelDetails = getLabelDetails(role) + if (typeof labelDetails === 'undefined') { + return + } + + // create a span element for the label + 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 + + labelSpan.appendChild(document.createTextNode(labelDetails.text)) + + // remove the role from the parent div + roleDiv.classList.remove(role) + + labels.push(labelSpan) + }) + + // we only generate labels from defined roles + // no need to do anything if we found only undefined roles + if (labels.length === 0) return + + const labelsLocation = (roleDiv.firstElementChild && headings.includes(roleDiv.firstElementChild.nodeName)) ? roleDiv.firstElementChild : roleDiv + const labelsDiv = createElement('div', 'labels') + + for (const label of labels) { + if (roleDiv.nodeName === 'H1' || headings.includes(roleDiv.firstElementChild.nodeName)) { + 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 + } + + if (roleDiv.nodeName === 'H1' || headings.includes(roleDiv.firstElementChild.nodeName)) { + labelsLocation.append(labelsDiv) + labelsLocation.classList.add('header-label-container') + } else { + labelsLocation.prepend(labelsDiv) + roleDiv.classList.add('has-label') } }) + + // check whether div containing header labels has wrapped onto new line + // if it has wrapped, we left-align the div + checkWrapped() +}) + +// when the window is resized, check whether labels have wrapped or unwrapped +window.addEventListener('resize', function () { + checkWrapped() }) diff --git a/src/js/data/rolesData.json b/src/js/data/rolesData.json new file mode 100644 index 00000000..176257f3 --- /dev/null +++ b/src/js/data/rolesData.json @@ -0,0 +1,204 @@ +{ + "enterprise":{ + "description": "Function available in Enterprise Edition only", + "labelCategory": "product", + "product": "Enterprise Edition", + "displayText": "Enterprise Edition" + }, + "enterprise-edition":{ + "description": "Function available in Enterprise Edition only", + "labelCategory": "product", + "product": "Enterprise Edition", + "displayText": "Enterprise Edition" + }, + "enterprise-only":{ + "description": "Function available in Enterprise Edition only", + "labelCategory": "product", + "product": "Enterprise Edition", + "displayText": "Enterprise Only" + }, + "free":{ + "description": "Function available in Free version only", + "labelCategory": "product", + "product": "AuraDB Free", + "displayText": "Free" + }, + "full":{ + "description": "Function available in Enterprise Edition only", + "labelCategory": "product", + "product": "Enterprise Edition", + "displayText": "Full" + }, + "professional":{ + "description": "Function or feature is available on AuraDB Professional", + "labelCategory": "product", + "product": "AuraDB Professional", + "displayText": "Only available on AuraDB Professional" + }, + "aura-db-enterprise":{ + "description": "Function available in AuraDB Enterprise", + "labelCategory": "product", + "product": "AuraDB Enterprise", + "displayText": "AuraDB Enterprise" + }, + "not-on-aura":{ + "description": "Function or feature is not available on Aura", + "labelCategory": "product", + "product": "Aura", + "displayText": "Not available on Aura" + }, + "aura":{ + "description": "Function or feature is available on Aura", + "labelCategory": "product", + "product": "Aura", + "displayText": "Available on Aura" + }, + "aura-only":{ + "description": "Function or feature is available on Aura only", + "labelCategory": "product", + "product": "Aura", + "displayText": "Only available on Aura" + }, + "new":{ + "description": "The feature or function was added in the version stated", + "labelCategory": "version", + "displayText": "Introduced", + "altDisplayText": "Added" + }, + "added":{ + "description": "The feature or function was added in the version stated", + "labelCategory": "version", + "displayText": "Introduced", + "altDisplayText": "Added" + }, + "changed":{ + "description": "The feature or function was changed in the version stated", + "labelCategory": "version", + "displayText": "Changed" + }, + "default":{ + "description": "The value shown is the default value", + "labelCategory": "function", + "displayText": "Default" + }, + "discontinued":{ + "description": "The feature is no longer available", + "labelCategory": "version", + "displayText": "Discontinued" + }, + "alpha":{ + "labelCategory": "version", + "displayText": "Alpha" + }, + "beta":{ + "labelCategory": "version", + "displayText": "Beta" + }, + "deprecated":{ + "labelCategory": "version", + "displayText": "Deprecated" + }, + "removed":{ + "labelCategory": "version", + "displayText": "Removed" + }, + "renamed":{ + "labelCategory": "version", + "displayText": "Renamed" + }, + "updated":{ + "description": "The feature or function was updated in the version stated", + "labelCategory": "version", + "displayText": "Updated" + }, + "fabric":{ + "labelCategory": "function", + "function": "Fabric", + "displayText": "Fabric" + }, + "apoc-core":{ + "labelCategory": "function", + "displayText": "APOC Core" + }, + "apoc-full":{ + "labelCategory": "function", + "displayText": "APOC Full" + }, + "recommended":{ + "labelCategory": "admonition", + "displayText": "Recommended" + }, + "danger":{ + "labelCategory": "admonition", + "displayText": "Danger" + }, + "warning":{ + "labelCategory": "admonition", + "displayText": "Warning" + }, + "information":{ + "labelCategory": "admonition", + "displayText": "Information" + }, + "yes":{ + "labelCategory": "admonition", + "displayText": "Yes" + }, + "no":{ + "labelCategory": "admonition", + "displayText": "No" + }, + "admin-only": { + "labelCategory": "function", + "displayText": "Admin Only" + }, + "function":{ + "labelCategory": "function", + "displayText": "Function" + }, + "procedure":{ + "labelCategory": "procedure", + "displayText": "Procedure" + }, + "syntax":{ + "labelCategory": "function", + "displayText": "Syntax" + }, + "beginner":{ + "labelCategory": "persona", + "displayText": "Beginner" + }, + "linux":{ + "labelCategory": "environment", + "displayText": "Linux" + }, + "unix":{ + "labelCategory": "environment", + "displayText": "Unix" + }, + "mac-os":{ + "labelCategory": "environment", + "displayText": "Mac OS" + }, + "windows":{ + "labelCategory": "environment", + "displayText": "Windows" + }, + "cluster-member-core":{ + "labelCategory": "function", + "displayText": "CORE" + }, + "cluster-member-read-replica":{ + "labelCategory": "function", + "displayText": "READ_REPLICA" + }, + "cluster-member-single":{ + "labelCategory": "function", + "displayText": "SINGLE" + }, + "na":{ + "labelCategory": "admonition", + "displayText": "N/A" + } + +} \ No newline at end of file diff --git a/src/partials/article.hbs b/src/partials/article.hbs index 56948f0c..045f62f9 100644 --- a/src/partials/article.hbs +++ b/src/partials/article.hbs @@ -10,16 +10,7 @@ If you typed the URL of this page manually, please double check that you entered {{else}}
-{{#with page.title}} -

{{{this}}}

-{{/with}} -{{#with (or page.attributes.role page.role)}} -
- {{#each (split-string this ' ')}} - - {{/each}} -
-{{/with}} +

{{{ page.title }}}

{{#with (or page.attributes.labels page.labels)}}