docs: repo status shortcode data

docs/_plugins/cem-shortcodes.cjs

@@ -90,7 +90,7 @@ class Renderers {
      * @see https://github.com/11ty/eleventy/blob/bf7c0c0cce1b2cb01561f57fdd33db001df4cb7e/src/Plugins/RenderPlugin.js#L89-L93
      * @type {DocsPage}
      */
-    this.docsPage = page.ctx._;
+    this.docsPage = page.ctx.doc;
     this.manifest = this.docsPage.manifest;
     Renderers.renderers.set(page, this);
   }

docs/_plugins/rhds.cjs

@@ -189,6 +189,13 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
     return content;
   });
 
+  eleventyConfig.addFilter('getPrettyElementName', function(tagName) {
+    const { pfeconfig } = eleventyConfig?.globalData ?? {};
+    const slug = getTagNameSlug(tagName, pfeconfig);
+    const deslugify = eleventyConfig.getFilter('deslugify');
+    return pfeconfig.aliases[tagName] || deslugify(slug);
+  });
+
   eleventyConfig.addFilter('getTitleFromDocs', function(docs) {
     return docs.find(x => x.docsPage?.title)?.alias
       ?? docs[0]?.alias
@@ -204,7 +211,7 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
      * @see https://github.com/11ty/eleventy/blob/bf7c0c0cce1b2cb01561f57fdd33db001df4cb7e/src/Plugins/RenderPlugin.js#L89-L93
      * @type {import('@patternfly/pfe-tools/11ty/DocsPage.js').DocsPage}
      */
-    const docsPage = this.ctx._;
+    const docsPage = this.ctx.doc;
     return docsPage.description;
   });
 
@@ -303,18 +310,22 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
 
     try {
       const { glob } = await import('glob');
-      /** @type {(import('@patternfly/pfe-tools/11ty/DocsPage').DocsPage & { repoStatus?: any[] })[]} */
-      const elements = await eleventyConfig.globalData?.elements();
+      const { DocsPage } = await import('@patternfly/pfe-tools/11ty/DocsPage.js');
+      const {
+        Manifest,
+      } = await import('@patternfly/pfe-tools/custom-elements-manifest/lib/Manifest.js');
+
+      const customElementsManifestDocsPages = await eleventyConfig.globalData?.elements();
       const filePaths = (await glob(`elements/*/docs/*.md`, { cwd: process.cwd() }))
           .filter(x => x.match(/\d{1,3}-[\w-]+\.md$/)); // only include new style docs
-      const { repoStatus } = collectionApi.items.find(item => item.data?.repoStatus)?.data || [];
+
       return filePaths
           .map(filePath => {
             const props = getProps(filePath);
-            const docsPage = elements.find(x => x.tagName === props.tagName);
-            if (docsPage) {
-              docsPage.repoStatus = repoStatus;
-            }
+            const [manifest] = Manifest.getAll();
+            const docsPage =
+              customElementsManifestDocsPages.find(x => x.tagName === props.tagName)
+              ?? new DocsPage(manifest);
             const tabs = filePaths
                 .filter(x => x.split('/docs/').at(0) === (`elements/${props.tagName}`))
                 .sort()

docs/_plugins/shortcodes/renderCodeDocs.cjs

@@ -9,14 +9,13 @@ const html = (...args) =>
       .map(x => x.replace(/^ {6}/, ''))
       .join('\n');
 
-/** @typedef {import('@patternfly/pfe-tools/11ty/DocsPage').DocsPage} DocsPage */
 module.exports = function(eleventyConfig) {
-  eleventyConfig.addPairedShortcode('renderCodeDocs',
-                                    function renderCodeDocs(content, kwargs = {}) {
-                                      const renderers = new Renderers(this, kwargs);
-                                      return renderers.renderAll(content);
-                                    }
-  );
+  eleventyConfig
+      .addPairedShortcode('renderCodeDocs', function renderCodeDocs(content, kwargs = {}) {
+        const page = this.context?.doc ?? this.ctx;
+        const renderers = new Renderers(page, kwargs);
+        return renderers.renderAll(content);
+      });
 };
 
 function innerMD(content = '') {
@@ -49,9 +48,8 @@ class Renderers {
      * NB: since the data for this shortcode is no a POJO,
      * but a DocsPage instance, 11ty assigns it to this.ctx._
      * @see https://github.com/11ty/eleventy/blob/bf7c0c0cce1b2cb01561f57fdd33db001df4cb7e/src/Plugins/RenderPlugin.js#L89-L93
-     * @type {DocsPage}
      */
-    this.docsPage = page.ctx._;
+    this.docsPage = page.doc.docsPage;
     this.manifest = this.docsPage.manifest;
     this.kwargs = kwargs;
   }

docs/_plugins/shortcodes/renderInstallation.cjs

@@ -13,7 +13,7 @@ function renderInstall(content, {
    * @see https://github.com/11ty/eleventy/blob/bf7c0c0cce1b2cb01561f57fdd33db001df4cb7e/src/Plugins/RenderPlugin.js#L89-L93
    * @type {DocsPage}
    */
-  const docsPage = this.ctx._;
+  const docsPage = this.ctx.doc;
 
   const lightdomcssblock = /* md */`
 ### Lightdom CSS

docs/_plugins/shortcodes/repoStatus.cjs

@@ -70,38 +70,31 @@ const STATUS_CHECKLIST = {
     'Deprecated': 'Component is no longer available in the RH Elements repo',
     'N/A': 'Not planned, not available, or does not apply',
   },
-  'WebRH': {
-    'Ready': 'Component is available in the WebRH repo',
-    'In progress': 'Component will be added to the WebRH repo when finished',
-    'Planned': 'Component should be added to the WebRH repo at a later date',
-    'Deprecated': 'Component is no longer available in the WebRH repo',
+  'RH Shared Libs': {
+    'Ready': 'Component is available in the RH Shared Libs repo',
+    'In progress': 'Component will be added to the RH Shared Libs repo when finished',
+    'Planned': 'Component should be added to the RH Shared Libs repo at a later date',
+    'Deprecated': 'Component is no longer available in the RH Shared Libs repo',
     'N/A': 'Not planned, not available, or does not apply',
   },
 };
 
-/**
- * Reads repo status data from global data and outputs an array with component keys
- */
-function getRepoData() {
-  const docsPage = this.ctx._;
-  const allStatuses = this.ctx.repoStatus ?? docsPage?.repoStatus ?? [];
-  const title = this.ctx.title ?? docsPage?.title;
-  return allStatuses.find(
-    component => component.name === title && component.type === 'Element'
-  )?.libraries;
-}
-
 /**
  * Calls getRepoData function and outputs a definition list for each component
  * @param {object} [options] list heading render options
  * @param {string} [options.heading] heading text
  * @param {number} [options.level] heading level
  */
-function repoStatusList({ heading = 'Status', level = 2 } = {}) {
+function repoStatusList({ repoStatus, heading = 'Status', level = 2 } = {}) {
   // Removing Documentation status from the repoStatusList
-  const statusList = getRepoData.call(this)?.filter(repo => repo.name !== 'Documentation');
+  const librariesList = this.ctx.doc ?
+    repoStatus.find(x => x.tagName === this.ctx.doc.tagName)
+        ?.libraries?.filter(repo =>
+          repo.name !== 'Documentation')
+      : repoStatus.flatMap(x => x.libraries) ?? [];
 
-  if (!Array.isArray(statusList) || !statusList.length) {
+
+  if (!Array.isArray(librariesList) || !librariesList.length) {
     return '';
   } else {
     return html`
@@ -112,7 +105,7 @@ function repoStatusList({ heading = 'Status', level = 2 } = {}) {
     </h${level}>
   </uxdot-copy-permalink>
   <a href="#status-checklist" slot="checklist">What do these mean?</a>
-  <dl>${statusList.map(listItem => html`
+  <dl>${librariesList.map(listItem => html`
     <div>
       <dt>${listItem.name}:</dt>
       <dd>
@@ -129,14 +122,8 @@ function repoStatusList({ heading = 'Status', level = 2 } = {}) {
 /**
  * Reads component status data from global data (see above) and outputs a table for Design/Code status page
  */
-function repoStatusTable() {
-  const docsPage = this.ctx._;
-  const allStatuses = this.ctx.repoStatus ?? docsPage?.repoStatus ?? [];
-  // Filtering out 'Responsive' status from all the libraries
-  const elementsList = allStatuses.map(item => ({
-    ...item,
-    libraries: item.libraries.filter(lib => lib.name !== 'Responsive'),
-  }));
+function repoStatusTable({ repoStatus }) {
+  const elementsList = repoStatus;
 
   if (!Array.isArray(elementsList) || !elementsList.length) {
     return '';
@@ -157,7 +144,7 @@ function repoStatusTable() {
         <th scope="col" data-label="Name">Name</th>
         <th scope="col" data-label="Figma library">Figma library</th>
         <th scope="col" data-label="RH Elements">RH Elements</th>
-        <th scope="col" data-label="webRH">WebRH</th>
+        <th scope="col" data-label="RH Shared Libs">RH Shared Libs</th>
         <th scope="col" data-label="Documentation">Documentation</th>
       </tr>
     </thead>
@@ -188,8 +175,14 @@ function repoStatusTable() {
  * @param {string} [options.heading] heading text
  * @param {number} [options.level] heading level
  */
-function repoStatusChecklist({ heading = 'Status checklist', level = 2 } = {}) {
-  const statusList = getRepoData.call(this)?.filter(repo => repo.name !== 'Documentation');
+function repoStatusChecklist({ repoStatus, heading = 'Status checklist', level = 2 } = {}) {
+  // is repoStatus returning undefined ?
+  const statusList = this.ctx.doc ?
+    repoStatus.find(x => x.tagName === this.ctx.doc.tagName)
+        ?.libraries?.filter(repo =>
+          repo.name !== 'Documentation')
+    : repoStatus.flatMap(x => x.libraries) ?? [];
+
   if (!Array.isArray(statusList) || !statusList.length) {
     return '';
   } else {

docs/design-code-status/index.md

@@ -123,7 +123,7 @@ A detailed synopsis of our web components and their implementation status.
 
 ## Web component status
 
-{% repoStatusTable %}
+{% repoStatusTable repoStatus=repoStatus %}
 
 </section>
 

docs/elements/elements.html

@@ -1,11 +1,19 @@
+---js
+{
+  templateEngineOverride: 'njk',
+  hasToc: true,
+  layout: 'layouts/pages/elements.njk',
+  permalink: '{{ doc.permalink }}',
+  pagination: {
+    data: 'collections.elementDocs',
+    alias: 'doc',
+    size: 1,
+  },
+  eleventyComputed: {
+    context(data) {
+      return data;
+    },
+  },
+}
 ---
-templateEngineOverride: njk
-hasToc: true
-layout: layouts/pages/elements.njk
-permalink: "{{ doc.permalink }}"
-pagination:
-  data: collections.elementDocs
-  alias: doc
-  size: 1
----
-{% renderFile doc.filePath, doc.docsPage %}
+{% renderFile doc.filePath, context %}

docs/elements/index.njk

@@ -38,7 +38,7 @@ importElements:
   {%- for tagName, docs in collections.elementDocs | groupby('tagName') -%}
     {%- set doc = docs[0] -%}
     {%- set slug = doc.slug -%}
-    {%- set title = docs | getTitleFromDocs | makeSentenceCase -%}
+    {%- set title = tagName | getPrettyElementName | makeSentenceCase -%}
     {%- set comingSoon = tagName in comingSoonItems  -%}
     {%- set summary = doc.docsPage.summary -%}
     {% if not summary %}

elements/rh-accordion/docs/00-overview.md

@@ -5,7 +5,7 @@
   <img src="./accordion-sample-element.png" alt="An accordion with four collapsed panels and one expanded panel">
 </uxdot-example>
 
-{% repoStatusList %}
+{% repoStatusList repoStatus=repoStatus %}
 
 ## Sample element
 
@@ -68,4 +68,4 @@
   - When you need to condense a large amount of related information into sections
   - When you need a way for users to read or compare sections of content simultaneously
 
-{% repoStatusChecklist %}
+{% repoStatusChecklist repoStatus=repoStatus %}

elements/rh-alert/docs/00-overview.md

@@ -2,7 +2,7 @@
 
 {{ tagName | getElementDescription }}
 
-{% repoStatusList %}
+{% repoStatusList repoStatus=repoStatus %}
 
 
 ## Sample element
@@ -20,4 +20,4 @@
 
 [img-sample]: {{ './alert-sample.svg' | url }}
 
-{% repoStatusChecklist %}
+{% repoStatusChecklist repoStatus=repoStatus %}

elements/rh-audio-player/docs/00-overview.md

@@ -2,7 +2,7 @@
 
 {{ tagName | getElementDescription }}
 
-{% repoStatusList %}
+{% repoStatusList repoStatus=repoStatus %}
 
 ## Sample element
 
@@ -2637,4 +2637,4 @@
 - When you want to feature audio content without directing users to other pages
 - When you want to offer users with reduced hearing abilities a listening alternative using a transcript
 
-{% repoStatusChecklist %}
+{% repoStatusChecklist repoStatus=repoStatus %}

elements/rh-avatar/docs/00-overview.md

@@ -6,7 +6,7 @@
   <img src="{{ './avatar-sample.png' | url }}" alt="Image of an avatar group with a photo of a woman and text">
 </uxdot-example>
 
-{% repoStatusList %}
+{% repoStatusList repoStatus=repoStatus %}
 
 
 ## Sample element
@@ -17,5 +17,5 @@
 
   - When you need to represent a user who has not provided a photo or image
 
-{% repoStatusChecklist %}
+{% repoStatusChecklist repoStatus=repoStatus %}
 

elements/rh-back-to-top/docs/00-overview.md

@@ -7,7 +7,7 @@
 </uxdot-example>
 
 
-{% repoStatusList %}
+{% repoStatusList repoStatus=repoStatus %}
 
 
 ## Sample
@@ -19,4 +19,4 @@ View the [demos](demos/).
   - When content fills up more than two screens in length at medium and large breakpoints
   - When content fills up more than four screens in length at small breakpoints
 
-{% repoStatusChecklist %}
+{% repoStatusChecklist repoStatus=repoStatus %}

elements/rh-badge/docs/00-overview.md

@@ -6,7 +6,7 @@
   <img src="./badge-sample-element.png" alt="Two badges; from left to right, one badge has a light gray background with a dark gray counter number and the other badge has a blue background with a white counter number">
 </uxdot-example>
 
-{% repoStatusList %}
+{% repoStatusList repoStatus=repoStatus %}
 
 
 ## Sample element
@@ -23,4 +23,4 @@
   - When you need to reflect counts like number of objects, events, or unread items
 
 
-{% repoStatusChecklist %}
+{% repoStatusChecklist repoStatus=repoStatus %}

elements/rh-blockquote/docs/00-overview.md

@@ -2,7 +2,7 @@
 
 A blockquote is a styled quotation and citation offset from other text styles on the page.
 
-{% repoStatusList %}
+{% repoStatusList repoStatus=repoStatus %}
 
 
 ## Sample element
@@ -34,5 +34,5 @@ View a live version of this component and see how it can be customized.
   - When you need to break up large portions of text
 
 
-{% repoStatusChecklist %}
+{% repoStatusChecklist repoStatus=repoStatus %}
 

elements/rh-breadcrumb/docs/00-overview.md

@@ -8,7 +8,7 @@
   <img src="{{  'breadcrumb-sample-element.svg' | url }}" alt="Three placeholder breadcrumb links and a current page breadcrumb">
 </uxdot-example>
 
-{% repoStatusList %}
+{% repoStatusList repoStatus=repoStatus %}
 
 ## Sample element
 
@@ -28,4 +28,4 @@
 - When you want to help orient a user and and show where they are in the page hierarchy
 - When you want to provide a secondary method for navigating to parent pages of the current page
 
-{% repoStatusChecklist %}
+{% repoStatusChecklist repoStatus=repoStatus %}

elements/rh-button/docs/00-overview.md

@@ -6,7 +6,7 @@
   <img src="{{ './button-sample.png' | url }}" alt="Image of Danger, Primary, Secondary, Tertiary, and Link buttons in the first row and Play and Close buttons in the second row">
 </uxdot-example>
 
-{% repoStatusList %}
+{% repoStatusList repoStatus=repoStatus %}
 
 
 ## Sample element
@@ -19,4 +19,4 @@
   - When you need to communicate actions users can take
   - When you need to draw attention to the highest priority action
 
-{% repoStatusChecklist %}
+{% repoStatusChecklist repoStatus=repoStatus %}