From 5123961c301525efb20d56b89edeb8e23d452c2b Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 9 Oct 2024 19:11:20 +0300 Subject: [PATCH] Revert "docs: installation tabs code tabs (#1941)" This reverts commit 46af12adf9e790e3e8cb688e1a7b74b8752a962d. --- docs/_includes/layouts/base.njk | 9 + docs/_includes/layouts/pages/elements.njk | 93 +++ docs/_includes/layouts/pages/has-toc.njk | 39 - docs/_includes/layouts/pages/pattern.njk | 42 +- .../partials/component/feedback.html | 4 - docs/_includes/partials/component/footer.njk | 5 - docs/_includes/partials/component/header.njk | 49 +- docs/_includes/partials/component/sidenav.njk | 2 +- .../partials/component/token-search.html | 10 - .../_includes/partials/javascript/global.html | 6 + docs/_plugins/markdown-it.cjs | 1 - docs/_plugins/rhds.cjs | 85 +- docs/_plugins/shortcodes.cjs | 6 + docs/_plugins/shortcodes/renderCodeDocs.cjs | 558 ++++++++++++++ .../shortcodes/renderInstallation.cjs | 129 ++++ docs/_plugins/shortcodes/renderLightDom.cjs | 64 ++ .../elements/uxdot-installation-tabs.ts | 9 + docs/elements/demos.html | 140 +--- docs/elements/elements.11ty.cjs | 729 ------------------ docs/elements/elements.html | 19 + docs/patterns/card/examples.md | 1 + docs/patterns/card/guidelines.md | 3 +- docs/patterns/card/index.md | 1 + docs/patterns/logo-wall/examples.md | 1 + docs/patterns/logo-wall/guidelines.md | 1 + docs/patterns/logo-wall/index.md | 1 + docs/patterns/logo-wall/style.md | 1 + docs/patterns/tile/examples.md | 1 + docs/patterns/tile/index.md | 1 + docs/styles/rh-code-block-lightdom.css | 4 +- elements/rh-accordion/docs/30-code.md | 26 + elements/rh-alert/docs/30-code.md | 3 + elements/rh-audio-player/docs/40-code.md | 14 + elements/rh-avatar/docs/30-code.md | 9 + elements/rh-back-to-top/docs/30-code.md | 3 + elements/rh-badge/docs/30-code.md | 9 + elements/rh-blockquote/docs/30-code.md | 13 + elements/rh-breadcrumb/docs/30-code.md | 20 + elements/rh-button/docs/30-code.md | 5 + elements/rh-card/docs/30-code.md | 3 + elements/rh-code-block/docs/30-code.md | 18 +- elements/rh-code-block/rh-code-block.ts | 4 +- elements/rh-cta/docs/30-code.md | 11 + elements/rh-dialog/docs/30-code.md | 15 + elements/rh-footer/docs/30-code.md | 16 + elements/rh-health-index/docs/30-code.md | 3 + elements/rh-icon/docs/30-code.md | 16 +- elements/rh-menu/docs/rh-menu.md | 16 + .../rh-navigation-secondary/docs/30-code.md | 32 +- elements/rh-pagination/docs/30-code.md | 19 + elements/rh-site-status/docs/30-code.md | 9 + elements/rh-skip-link/docs/30-code.md | 12 + elements/rh-spinner/docs/30-code.md | 5 +- elements/rh-stat/docs/30-code.md | 13 + elements/rh-subnav/docs/30-code.md | 5 + elements/rh-surface/docs/30-code.md | 3 + elements/rh-switch/docs/30-code.md | 13 + elements/rh-table/docs/30-code.md | 76 +- elements/rh-tabs/docs/30-code.md | 21 + elements/rh-tag/docs/30-code.md | 9 + elements/rh-tile/docs/30-code.md | 14 + elements/rh-timestamp/docs/30-code.md | 10 + elements/rh-tooltip/docs/30-code.md | 5 + elements/rh-video-embed/docs/30-code.md | 15 + eleventy.config.cjs | 13 +- 65 files changed, 1455 insertions(+), 1037 deletions(-) create mode 100644 docs/_includes/layouts/pages/elements.njk delete mode 100755 docs/_includes/layouts/pages/has-toc.njk delete mode 100644 docs/_includes/partials/component/token-search.html create mode 100644 docs/_plugins/shortcodes/renderCodeDocs.cjs create mode 100644 docs/_plugins/shortcodes/renderInstallation.cjs create mode 100644 docs/_plugins/shortcodes/renderLightDom.cjs delete mode 100644 docs/elements/elements.11ty.cjs create mode 100644 docs/elements/elements.html create mode 100644 elements/rh-accordion/docs/30-code.md create mode 100644 elements/rh-alert/docs/30-code.md create mode 100644 elements/rh-audio-player/docs/40-code.md create mode 100644 elements/rh-avatar/docs/30-code.md create mode 100644 elements/rh-back-to-top/docs/30-code.md create mode 100644 elements/rh-badge/docs/30-code.md create mode 100644 elements/rh-blockquote/docs/30-code.md create mode 100644 elements/rh-breadcrumb/docs/30-code.md create mode 100644 elements/rh-button/docs/30-code.md create mode 100644 elements/rh-card/docs/30-code.md create mode 100644 elements/rh-cta/docs/30-code.md create mode 100644 elements/rh-dialog/docs/30-code.md create mode 100644 elements/rh-footer/docs/30-code.md create mode 100644 elements/rh-health-index/docs/30-code.md create mode 100644 elements/rh-menu/docs/rh-menu.md create mode 100644 elements/rh-pagination/docs/30-code.md create mode 100644 elements/rh-site-status/docs/30-code.md create mode 100644 elements/rh-skip-link/docs/30-code.md create mode 100644 elements/rh-stat/docs/30-code.md create mode 100644 elements/rh-subnav/docs/30-code.md create mode 100644 elements/rh-surface/docs/30-code.md create mode 100644 elements/rh-switch/docs/30-code.md create mode 100644 elements/rh-tabs/docs/30-code.md create mode 100644 elements/rh-tag/docs/30-code.md create mode 100644 elements/rh-tile/docs/30-code.md create mode 100644 elements/rh-timestamp/docs/30-code.md create mode 100644 elements/rh-tooltip/docs/30-code.md create mode 100644 elements/rh-video-embed/docs/30-code.md diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk index 2545842c50..0867aad340 100644 --- a/docs/_includes/layouts/base.njk +++ b/docs/_includes/layouts/base.njk @@ -1,3 +1,12 @@ +---js +{ + isPlanned: function(repoStatus, name) { + const element = repoStatus.find(element => element.name === name); + return element && element.libraries.find(library => library.name === 'RH Elements').status === "Planned"; + } +} +--- + {%- set extraPageClasses = bodyClasses or "" -%} {%- if title -%} {% set extraPageClasses = extraPageClasses + ' page-' + title | slug -%} diff --git a/docs/_includes/layouts/pages/elements.njk b/docs/_includes/layouts/pages/elements.njk new file mode 100644 index 0000000000..39b54829b1 --- /dev/null +++ b/docs/_includes/layouts/pages/elements.njk @@ -0,0 +1,93 @@ +--- +layout: layouts/base.njk +eleventyComputed: + slug: '{{ doc.slug or element.slug }}' + title: "{{ doc.pageTitle }} | {{ slug | deslugify }}" +--- +{%- set inProgress = doc.docsPage.manifest -%} +{%- set prettyName -%}{{ (doc.alias or doc.slug or element.slug) | deslugify }}{% endset %} +{%- set planned = isPlanned(repoStatus, prettyName) %} +{%- set manifest = doc.docsPage.manifest -%} +{%- set tagName = doc.tagName or element.tagName -%} +{%- set demos = manifest and manifest.getDemos(doc.docsPage.tagName) -%} +{%- set demosUrl -%}/elements/{{ slug }}/demos/{%- endset -%} + +{% if doc.pageTitle == 'Code' %} + +{% endif %} + +{%- if slug == 'audio-player' %} + + +{%- endif %} +{%- if slug == 'pagination' %} + +{%- endif %} +{%- if slug == 'tile' %} + +{%- endif %} + + + + + +{% if not planned %} + +{% endif %} + +{% include 'partials/component/masthead.njk' %} +{% include 'partials/component/sidenav.njk' %} + +
0 %}class="has-toc"{% endif %}> + +

{{ prettyName }}{% if planned %} Planned{% endif %}

+ {% for tab in doc.tabs %}{% if loop.last and demos.length %} + Demos{% endif %} + + {{- tab.pageTitle | capitalize -}} + {% endfor %} + + + + {% if hasToc and (content | toc).length > 0 %} +
+ + {{ content | toc | safe }} + +
+ {% endif %} + +
+ {{ content | safe }} + {% include "partials/component/feedback.html" %} + {% include "partials/component/edit-this-page.njk" %} +
+ +
+ {% include "partials/component/back-to-top.njk" %} + +{% include 'partials/component/footer.njk' %} diff --git a/docs/_includes/layouts/pages/has-toc.njk b/docs/_includes/layouts/pages/has-toc.njk deleted file mode 100755 index 2305aad41b..0000000000 --- a/docs/_includes/layouts/pages/has-toc.njk +++ /dev/null @@ -1,39 +0,0 @@ ---- -layout: layouts/base.njk ---- -{%- set tagsForThisPageToc = tocTags or ['h2'] -%} -{%- set table = content | toc(tags=tagsForThisPageToc) -%} - - - - - - -{% include 'partials/component/masthead.njk' %} -{% include 'partials/component/sidenav.njk' %} - -
- {% include 'partials/component/header.njk' %} - {% if table.length > 0 %} -
- - {{ table | safe }} - -
- {% endif %} -
- {{ content | safe }} - {% include "partials/component/edit-this-page.njk" %} -
-
- {% include "partials/component/back-to-top.njk" %} - -{% include 'partials/component/footer.njk' %} diff --git a/docs/_includes/layouts/pages/pattern.njk b/docs/_includes/layouts/pages/pattern.njk index 0a674c97b6..807d933e24 100755 --- a/docs/_includes/layouts/pages/pattern.njk +++ b/docs/_includes/layouts/pages/pattern.njk @@ -1,14 +1,52 @@ --- -layout: layouts/pages/has-toc.njk +layout: layouts/base.njk --- + +{% if tokenSearch %} + + +{% endif %} +{% include 'partials/component/masthead.njk' %} +{% include 'partials/component/sidenav.njk' %} +{%- if hasToc -%} + {%- set tagsForThisPageToc = tocTags or ['h2'] -%} + {%- set table = content | toc(tags=tagsForThisPageToc) -%} +{%- endif -%} + +
0 }}> + {% include 'partials/component/header.njk' %} + {% if table.length > 0 %} +
+ + {{ table | safe }} + +
+ {% endif %} +
+ {{ content | safe }} + {% include "partials/component/edit-this-page.njk" %} +
-{{ content | safe }} +
+ {% include "partials/component/back-to-top.njk" %} + +{% include 'partials/component/footer.njk' %} diff --git a/docs/_includes/partials/component/feedback.html b/docs/_includes/partials/component/feedback.html index 2b23d31f8f..e555135f5a 100644 --- a/docs/_includes/partials/component/feedback.html +++ b/docs/_includes/partials/component/feedback.html @@ -1,9 +1,5 @@ {% set related = (doc.tagName if doc.tagName else (title | slug)) | relatedItems %} - - {% if related.length %}

Related elements or patterns

diff --git a/docs/_includes/partials/component/footer.njk b/docs/_includes/partials/component/footer.njk index 358b85c803..a90a4e0cc0 100755 --- a/docs/_includes/partials/component/footer.njk +++ b/docs/_includes/partials/component/footer.njk @@ -1,8 +1,3 @@ - -
    diff --git a/docs/_includes/partials/component/header.njk b/docs/_includes/partials/component/header.njk index 15d9dc2439..e8aeb5b30f 100644 --- a/docs/_includes/partials/component/header.njk +++ b/docs/_includes/partials/component/header.njk @@ -1,38 +1,25 @@ -{%- set headingId = (heading if heading else title) | lower | slug -%} -{%- set headingContent = heading or title -%} -{%- set manifest = doc and doc.docsPage and doc.docsPage.manifest -%} -{%- if subnav.collection -%} - {% set tabs = collections[subnav.collection] | sort(attribute="data.subnav.order") %} -{%- endif -%} -{%- if manifest -%} - {% set tabs = doc.tabs %} - {% set demos = manifest.getDemos(doc.docsPage.tagName) %} - {% set planned = repoStatus | isPlanned(prettyName) %} - {% set prettyName -%}{{ (doc.alias or doc.slug or element.slug) | deslugify }}{% endset %} - {% set headingContent -%} - {{ prettyName }} - {% if planned %} - Planned - {% endif %} - {% endset %} -{%- endif -%} - -

    {{ headingContent }}

    - {% if tokenSearch %}{% include 'partials/component/token-search.html' %}{% endif %} - {% if tabs %} - - {% for tab in tabs %} - {%- set href = tab.url or tab.href -%} - {%- set pageUrl = (doc and doc.permalink | replace('index.html', '')) or page.url -%} - {%- set title = tab.data.title or tab.pageTitle -%} - {%- set active = href == pageUrl -%} - {{ title | capitalize }} - {%- endfor -%} - +

    {{ heading if heading else title }}

    + + {% if tokenSearch %} +
    + +
    + {% endif %} + + {% if subnav.collection %} + {% for tab in collections[subnav.collection] | sort(attribute="data.subnav.order") %} + + {{ tab.data.title }} + {% endfor %} + {% endif %}     diff --git a/docs/_includes/partials/component/sidenav.njk b/docs/_includes/partials/component/sidenav.njk index ab9f0b7d97..b60ac2b358 100644 --- a/docs/_includes/partials/component/sidenav.njk +++ b/docs/_includes/partials/component/sidenav.njk @@ -22,7 +22,7 @@ {%- set href = '/elements/' + slug + '/' -%} {%- set active = href === page.url -%} {%- set name = (fst.alias) or (slug | deslugify) %} - {%- set planned = repoStatus | isPlanned(name) %} + {%- set planned = isPlanned(repoStatus, name) %} {% if not (tagName in comingSoonItems) %} {{- fst.alias or (slug | deslugify) -}} diff --git a/docs/_includes/partials/component/token-search.html b/docs/_includes/partials/component/token-search.html deleted file mode 100644 index bbf9871e78..0000000000 --- a/docs/_includes/partials/component/token-search.html +++ /dev/null @@ -1,10 +0,0 @@ - - -
    - -
    diff --git a/docs/_includes/partials/javascript/global.html b/docs/_includes/partials/javascript/global.html index daaed9acba..914ac5ffec 100644 --- a/docs/_includes/partials/javascript/global.html +++ b/docs/_includes/partials/javascript/global.html @@ -17,11 +17,17 @@ {# only load components that need hydrated (aka interactivity) #} + {%- if hasToc %} + + + {%- endif %} + diff --git a/docs/_plugins/markdown-it.cjs b/docs/_plugins/markdown-it.cjs index 7b19288406..7d74508ddd 100644 --- a/docs/_plugins/markdown-it.cjs +++ b/docs/_plugins/markdown-it.cjs @@ -54,7 +54,6 @@ function rhdsCodeBlock(md) { return html` ${rendered}`.trim(); } else { diff --git a/docs/_plugins/rhds.cjs b/docs/_plugins/rhds.cjs index 131843c4f9..d5c8223ef2 100644 --- a/docs/_plugins/rhds.cjs +++ b/docs/_plugins/rhds.cjs @@ -13,18 +13,6 @@ const RHDSAlphabetizeTagsPlugin = require('./alphabetize-tags.cjs'); const RHDSShortcodesPlugin = require('./shortcodes.cjs'); const { parse } = require('async-csv'); -const exists = async path => { - const { stat } = await import('node:fs/promises'); - try { - await stat(path); - return true; - } catch { - return false; - } -}; - -const cwd = process.cwd(); - /** * EleventyTransformContext the `this` binding for transform functions * outputPath the path the page will be written to @@ -121,7 +109,7 @@ const COPY_CONTENT_EXTENSIONS = [ */ function getFilesToCopy() { // Copy element demo files - const repoRoot = cwd; + const repoRoot = process.cwd(); const tagNames = fs.readdirSync(path.join(repoRoot, 'elements'), { withFileTypes: true }) .filter(ent => ent.isDirectory()) .map(ent => ent.name); @@ -225,11 +213,6 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) { return pfeconfig.aliases[tagName] || deslugify(slug); }); - eleventyConfig.addFilter('isPlanned', function isPlanned(repoStatus, name) { - const element = repoStatus.find(element => element.name === name); - return element?.libraries.find(library => library.name === 'RH Elements')?.status === 'Planned'; - }); - eleventyConfig.addFilter('getTitleFromDocs', function(docs) { return docs.find(x => x.docsPage?.title)?.alias ?? docs[0]?.alias @@ -320,9 +303,9 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) { /** * @param {string} filePath */ - async function getProps(filePath) { + function getProps(filePath) { const [, tagName] = filePath.split(path.sep); - const absPath = path.join(cwd, filePath); + const absPath = path.join(process.cwd(), filePath); /** configured alias for this element e.g. `Call to Action` for `rh-cta` */ const alias = pfeconfig.aliases[tagName]; /** e.g. `footer` for `rh-footer` or `call-to-action` for `rh-cta` */ @@ -337,26 +320,11 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) { pageSlug === 'overview' ? `/elements/${slug}/index.html` : `/elements/${slug}/${pageSlug}/index.html`; const href = permalink.replace('index.html', ''); - const fileExists = await exists(absPath); - const elDir = path.join(cwd, 'elements', tagName); - const hasLightdom = await exists(path.join(elDir, `${tagName}-lightdom.css`)); - const hasLightdomShim = await exists(path.join(elDir, `${tagName}-lightdom-shim.css`)); - const siblingElements = (await Array.fromAsync(glob(`elements/${tagName}/*.ts`, { cwd }))) - .map(x => x.split('/').pop()) - .filter(x => x && x.startsWith('rh-') && !x.endsWith('.d.ts')) - .map(x => x?.split('.').shift()) - .filter(x => x !== tagName ); - const isCodePage = pageSlug === 'code'; const screenshotPath = `/elements/${slug}/screenshot.png`; /** urls for related links */ return { tagName, filePath, - fileExists, - hasLightdom, - hasLightdomShim, - isCodePage, - siblingElements, absPath, alias, slug, @@ -378,44 +346,20 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) { ); const customElementsManifestDocsPages = await eleventyConfig.globalData?.elements(); - const filePaths = (await Array.fromAsync(glob(`elements/*/docs/*.md`, { cwd }))) + const filePaths = (await Array.fromAsync(glob(`elements/*/docs/*.md`, { cwd: process.cwd() }))) .filter(x => x.match(/\d{1,3}-[\w-]+\.md$/)); // only include new style docs - const elementDocFilePaths = - Array.from(new Set([ - ...filePaths, - // TODO: adding the code file in the next line is a temporary hack to add in a virtual - // `XX-code.md` if one doesn't already exist. At a later date, this entire function - // (elementDocs) should be refactored, and the elements/*/docs/*.md files should be used - // only for markdown content, but the code and demos tabs should be fully generated, with - // the XX-code.md content interjected, if any. - ...await Array.fromAsync(glob('elements/*', { cwd }), x => `${x}/docs/30-code.md` - ), - ])); - - const elementDocs = await Promise.all(elementDocFilePaths.map(async filePath => { - const props = await getProps(filePath); + return filePaths.map(filePath => { + const props = getProps(filePath); const [manifest] = getAllManifests(); const docsPage = - customElementsManifestDocsPages.find(x => x.tagName === props.tagName) - ?? new DocsPage(manifest); - - const demosUrl = `/elements/${props.slug}/demos/`; - const tabs = await Promise.all(elementDocFilePaths + customElementsManifestDocsPages.find(x => x.tagName === props.tagName) + ?? new DocsPage(manifest); + const tabs = filePaths .filter(x => x.split('/docs/').at(0) === (`elements/${props.tagName}`)) .sort() - // todo: avoid calling getProps twice, it's expensive - .map(x => getProps(x))); - if (!tabs.some(x => x.pageTitle === 'Demos')) { - tabs.splice(-1, 0, { - ...props, - pageTitle: 'Demos', - href: demosUrl, - }); - } + .map(x => getProps(x)); return { docsPage, tabs, ...props }; - })); - elementDocs.sort(alphabeticallyBySlug); - return elementDocs; + }).sort(alphabeticallyBySlug); } catch (e) { // it's important to surface this // eslint-disable-next-line no-console @@ -424,11 +368,8 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) { } }); - eleventyConfig.addWatchTarget('docs/patterns/**/patterns/*.html'); - eleventyConfig.addWatchTarget('docs/theming/**/patterns/*.html'); - - for (const tagName of fs.readdirSync(path.join(cwd, './elements/'))) { - const dir = path.join(cwd, './elements/', tagName, 'docs/'); + for (const tagName of fs.readdirSync(path.join(process.cwd(), './elements/'))) { + const dir = path.join(process.cwd(), './elements/', tagName, 'docs/'); eleventyConfig.addWatchTarget(dir); } diff --git a/docs/_plugins/shortcodes.cjs b/docs/_plugins/shortcodes.cjs index 29e3302938..85c70347a2 100644 --- a/docs/_plugins/shortcodes.cjs +++ b/docs/_plugins/shortcodes.cjs @@ -3,11 +3,17 @@ const { RepoStatusChecklist, RepoStatusTable, } = require('./shortcodes/repoStatus.cjs'); +const RenderInstallation = require('./shortcodes/renderInstallation.cjs'); +const RenderLightDom = require('./shortcodes/renderLightDom.cjs'); +const RenderCodeDocs = require('./shortcodes/renderCodeDocs.cjs'); const SpacerTokensTable = require('./shortcodes/spacerTokensTable.cjs'); module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(RepoStatusList); eleventyConfig.addPlugin(RepoStatusChecklist); eleventyConfig.addPlugin(RepoStatusTable); + eleventyConfig.addPlugin(RenderInstallation); + eleventyConfig.addPlugin(RenderLightDom); eleventyConfig.addPlugin(SpacerTokensTable); + eleventyConfig.addPlugin(RenderCodeDocs); }; diff --git a/docs/_plugins/shortcodes/renderCodeDocs.cjs b/docs/_plugins/shortcodes/renderCodeDocs.cjs new file mode 100644 index 0000000000..24c4d0705f --- /dev/null +++ b/docs/_plugins/shortcodes/renderCodeDocs.cjs @@ -0,0 +1,558 @@ +import('@patternfly/pfe-tools/11ty/DocsPage.js'); +const { tokens } = require('@rhds/tokens'); +const { copyCell, getTokenHref, dedent } = require('../tokensHelpers.cjs'); + +/** quick and dirty dedent, also provides in-editor syntax highlighting */ +const html = (...args) => + String.raw(...args) + .split('\n') + .map(x => x.replace(/^ {6}/, '')) + .join('\n'); + +module.exports = function(eleventyConfig) { + eleventyConfig + .addPairedShortcode('renderCodeDocs', async function renderCodeDocs(content, kwargs = {}) { + const page = this.context?.doc ?? this.ctx; + const renderers = new Renderers(page, { + ...kwargs, + renderTemplate: eleventyConfig.javascriptFunctions.renderTemplate, + }); + return renderers.renderAll(content); + }); +}; + +function mdHeading(content, { level = 2 }) { + // Following code does not work the 2nd line fixes, however I don't think + // this is what we want any more as we are only using this on depreciated + // summary headings. This should be just plain text not a formatted heading. + // would be better just to apply styling to that text. + // const hashes = Array.from({ length }, () => '#').join(''); + // const hashes = Array(level).fill('#').join(''); + return content; +} + +function type(content = '', { lang = 'ts' } = {}) { + return content.trim() && `\n\n\`\`\`${lang}\n${content.trim()}\n\n\`\`\`\n\n`; +} + +function stringifyParams(method) { + return method.parameters?.map?.(p => + `${p.name}: ${p.type?.text ?? 'unknown'}`).join(', ') ?? ''; +} + +class Renderers { + constructor(page, kwargs) { + /** + * 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 + */ + this.docsPage = page.doc.docsPage; + this.manifest = this.docsPage.manifest; + this.kwargs = kwargs; + } + + async innerMD(content = '') { + return (await this.kwargs.renderTemplate(content.trim(), 'md')).trim(); + } + + packageTagName(kwargs) { + if (kwargs.for && !kwargs.for.match(/@/)) { + return kwargs.for; + } else { + const [, tagName = this.tagName] = (kwargs?.for ?? '').match(/@[-\w]+\/(.*)/) ?? []; + return tagName; + } + } + + async renderAll(content = '') { + const length = this.kwargs.level ?? 2; + const level = length + 1; + const component = this.kwargs.for ?? this.docsPage.tagName; + const description = this.manifest.getDescription(component); + + const allSlots = + this.docsPage.manifest.getSlots(this.packageTagName({ level, for: component })) ?? []; + const slotCount = allSlots.filter(x => !x.deprecated).length; + const deprecatedSlotCount = allSlots.filter(x => x.deprecated).length; + + const allAttr = + this.manifest.getAttributes(this.packageTagName({ level, for: component })) ?? []; + const attrCount = allAttr.filter(x => !x.deprecated).length; + const deprecatedAttrCount = allAttr.filter(x => x.deprecated).length; + + const allMethods = + this.manifest.getMethods(this.packageTagName({ level, for: component })) ?? []; + const methodsCount = allMethods.filter(x => !x.deprecated).length; + const deprecatedMethodsCount = allMethods.filter(x => x.deprecated).length; + + const allEvents = this.manifest.getEvents(this.packageTagName({ level, for: component })) ?? []; + const eventsCount = allEvents.filter(x => !x.deprecated).length; + const deprecatedEventsCount = allEvents.filter(x => x.deprecated).length; + + const allCssParts = + this.manifest.getCssParts(this.packageTagName({ level, for: component })) ?? []; + const cssPartsCount = allCssParts.filter(x => !x.deprecated).length; + const deprecatedCssPartsCount = allCssParts.filter(x => x.deprecated).length; + + const allCssProperties = + this.manifest.getCssCustomProperties(this.packageTagName({ level, for: component })) ?? []; + const cssPropertiesCount = + allCssProperties.filter(x => !x.deprecated && !tokens.has(x.name)).length; + const deprecatedCssPropertiesCount = + allCssProperties.filter(x => x.deprecated && !tokens.has(x.name)).length; + + const allDesignTokens = + this.manifest.getCssCustomProperties(this.packageTagName({ level, for: component })) ?? []; + const designTokensCount = allDesignTokens.filter(x => tokens.has(x.name)).length; + + + // TODO: dsd + return html` + ${Array.from({ length }, () => '#').join('')} ${component} + ${this.kwargs.hideDescription ?? false ? `` : html`

    ${description}

    `} + + + Slots + ${slotCount} + ${deprecatedSlotCount > 0 ? html`${deprecatedSlotCount}` : ``} + + ${await this.renderSlots('', { level, for: component })} + Attributes + ${attrCount} + ${deprecatedAttrCount > 0 ? html`${deprecatedAttrCount}` : ``} + + ${await this.renderAttributes('', { level, for: component })} + Methods + ${methodsCount} + ${deprecatedMethodsCount > 0 ? html`${deprecatedMethodsCount}` : ``} + + ${await this.renderMethods('', { level, for: component })} + Events + ${eventsCount} + ${deprecatedEventsCount > 0 ? html`${deprecatedEventsCount}` : ``} + + ${await this.renderEvents('', { level, for: component })} + CSS Shadow Parts + ${cssPartsCount} + ${deprecatedCssPartsCount > 0 ? html`${deprecatedCssPartsCount}` : ``} + + ${await this.renderCssParts('', { level, for: component })} + CSS Custom Properties + ${cssPropertiesCount} + ${deprecatedCssPropertiesCount > 0 ? html`${deprecatedCssPropertiesCount}` : ``} + + ${await this.renderCssCustomProperties('', { level, for: component })} + Design Tokens + ${designTokensCount} + + ${await this.renderTokens('', { level, for: component })} + + ${content} + `.trim(); + } + + async renderBand(content, { level } = {}) { + return html` +
    + ${mdHeading(content, { level })} + ${await this.innerMD(content)} +
    `; + } + + /** Render the list of element attributes */ + async renderAttributes(content, { header = 'Attributes', level = 2, ...kwargs } = {}) { + const _attrs = this.manifest.getAttributes(this.packageTagName(kwargs)) ?? []; + const deprecated = _attrs.filter(x => x.deprecated); + const attributes = _attrs.filter(x => !x.deprecated); + return html` +
    + ${!content && !attributes.length ? html` + None` : html` + ${await this.innerMD(content)} + + + + + + + + + + + + + ${(await Promise.all(attributes.map(async attribute => html` + + + + + + + `))).join('')} + +
    AttributeDOM PropertyDescriptionTypeDefault
    ${attribute.name}${attribute.fieldName}${await this.innerMD(attribute.description)}${type(attribute.type?.text ?? 'unknown')}${type(attribute.default ?? 'unknown')}
    +     `} + ${!deprecated.length ? '' : html` +
    + ${mdHeading(`Deprecated ${header}`, { level: level + 1 })} + + + + + + + + + + + + + ${(await Promise.all(deprecated.map(async attribute => html` + + + + + + + `))).join('')} + +
    AttributeDOM PropertyDescriptionTypeDefault
    ${attribute.name}${attribute.fieldName}${await this.innerMD(attribute.description)}${type(attribute.type?.text ?? 'unknown')}${type(attribute.default ?? 'unknown')}
    +     +
    `} +
    `; + } + + /** Render a table of element Design Tokens */ + async renderTokens(content, { + header = 'Design Tokens', + ...kwargs + } = {}) { + const allCssProperties = + this.manifest.getCssCustomProperties(this.packageTagName(kwargs)) ?? []; + const elTokens = allCssProperties.filter(x => tokens.has(x.name)); + return html` +
    + ${!content && !elTokens.length ? html` + None` : html` + ${await this.innerMD(content)} + + + + + + + + + ${elTokens.map(token => html`${copyCell(token)}`).join('')} +
    TokenCopy
    ${token.name}
    +     `} +
    `; + } + + /** Render a table of element CSS Custom Properties */ + async renderCssCustomProperties(content, { + header = 'CSS Custom Properties', + level = 2, ...kwargs + } = {}) { + const allCssProperties = + this.manifest.getCssCustomProperties(this.packageTagName(kwargs)) ?? []; + const cssProperties = allCssProperties.filter(x => !x.deprecated && !tokens.has(x.name)); + const deprecated = allCssProperties.filter(x => x.deprecated && !tokens.has(x.name)); + return html` +
    + ${!content && !cssProperties.length ? html` + None` : html` + ${await this.innerMD(content)} + + + + + + + + + + ${(await Promise.all(cssProperties.map(async prop => html` + + + + + `))).join('')} + +
    CSS PropertyDescriptionDefault
    ${prop.name}${await this.innerMD(prop.description ?? '')} + ${!prop.default?.startsWith('#') ? html`` : html``}${prop.default ?? '—'} +
    `}${!deprecated.length ? '' : html` +
    + ${mdHeading(`Deprecated ${header}`, { level: level + 1 })} + + + + + + + + + ${(await Promise.all(deprecated.map(async prop => html` + + + + + `))).join('')} + +
    CSS PropertyDescriptionDefault
    ${prop.name}${await this.innerMD(prop.description)}${await this.innerMD(prop.default ?? '—')}
    + +
    `} +
    `; + } + + /** Render the list of element CSS Shadow Parts */ + async renderCssParts(content, { header = 'CSS Shadow Parts', level = 2, ...kwargs } = {}) { + const allParts = this.manifest.getCssParts(this.packageTagName(kwargs)) ?? []; + const parts = allParts.filter(x => !x.deprecated); + const deprecated = allParts.filter(x => x.deprecated); + return html` +
    + ${!content && !parts.length ? html` + None` : html` + ${await this.innerMD(content)} + + + + + + + + + + ${(await Promise.all(parts.map(async part => html` + + + + `))).join('')} + +
    Part NameDescription
    ${part.name}${await this.innerMD(part.description)}
    +     `}${!deprecated.length ? '' : html` +
    + ${mdHeading(`Deprecated ${header}`, { level: level + 1 })} + + + + + + + + + + ${(await Promise.all(deprecated.map(async part => html` + + + + `))).join('')} + +
    Part NameDescription
    ${part.name} + ${await this.innerMD(part.description)} + Note: ${part.name} is deprecated. ${await this.innerMD(part.deprecated)} +
    +     +
    `} +
    `; + } + + /** Render the list of events for the element */ + async renderEvents(content, { header = 'Events', level = 2, ...kwargs } = {}) { + const _events = this.manifest.getEvents(this.packageTagName(kwargs)) ?? []; + const deprecated = _events.filter(x => x.deprecated); + const events = _events.filter(x => !x.deprecated); + return html` +
    + ${!content && !events.length ? html` + None` : html` + ${await this.innerMD(content)} + + + + + + + + + + ${(await Promise.all(events.map(async event => html` + + + + `))).join('')} + +
    Event NameDescription
    ${event.name}${await this.innerMD(event.description)}
    +     `}${!deprecated.length ? '' : html` +
    + ${mdHeading(`Deprecated ${header}`, { level: level + 1 })} + + + + + + + + + + ${(await Promise.all(deprecated.map(async event => html` + + + + `))).join('')} + +
    Event NameDescription
    ${event.name} + ${await this.innerMD(event.description)} + Note: ${event.name} is deprecated. ${await this.innerMD(event.deprecated)} +
    +     +
    `} +
    `; + } + + /** Render the installation instructions for the element */ + renderInstallation(content, { header = 'Installation', level = 2, tagName } = {}) { + return html` +
    +

    Installation

    + + We recommend loading elements via a CDN such as [JSPM][inst-jspm] and + using an import map to manage your dependencies. + + For more information on import maps and how to use them, + see the [import map reference on MDN Web Docs][inst-mdn]. + + If you are using node and NPM, you can install this component using npm: + + ~~~shell + npm install ${this.manifest.packageJson.name} + ~~~ + + Then import this component into your project by using a + [bare module specifier][inst-bms]: + + ~~~js + import '@patternfly/elements/${tagName}/${tagName}.js'; + ~~~ + + **Please Note** You should either load elements via a CDN or + install them locally through NPM. *Do not do both.* + +
    + + [inst-jspm]: https://jspm.dev + [inst-mdn]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap/ + [inst-bms]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules`; + } + + /** Render the list of element methods */ + async renderMethods(content, { header = 'Methods', level = 2, ...kwargs } = {}) { + const allMethods = this.manifest.getMethods(this.packageTagName(kwargs)) ?? []; + const deprecated = allMethods.filter(x => x.deprecated); + const methods = allMethods.filter(x => !x.deprecated); + // TODO: inline code highlighting for type and default: render the markdown to html and extract the `` from the `
    `
+    return html`
+      
    
+        ${!content && !methods.length ? html`
+        None` : html`
+        ${await this.innerMD(content)}
+
+        
+          
+            
+              
+                
+                
+              
+            
+            
+              ${(await Promise.all(methods.map(async method => html`
+              
+                
+                
+              `))).join('')}
+            
+          
    Method NameDescription
    ${method.name}(${stringifyParams(method)})${await this.innerMD(method.description)}
    
+            `}${!deprecated.length ? '' : html`
+        
    
+          ${mdHeading(`Deprecated ${header}`, { level: level + 1 })}
+          
+            
+              
+                
+                  
+                  
+                
+              
+              
+                ${(await Promise.all(deprecated.map(async method => html`
+                
+                  
+                  
+                `))).join('')}
+              
+            
    Method NameDescription
    ${method.name}(${stringifyParams(method)})
+                    ${await this.innerMD(method.description)}
+                    Note: ${method.name} is deprecated. ${await this.innerMD(method.deprecated)}
+                  
    
+              
+        
    `}
+      
    `;
+  }
+
+  /** Render the list of the element's slots */
+  async renderSlots(content, { header = 'Slots', level = 2, ...kwargs } = {}) {
+    const allSlots = this.docsPage.manifest.getSlots(this.packageTagName(kwargs)) ?? [];
+    const slots = allSlots.filter(x => !x.deprecated);
+    const deprecated = allSlots.filter(x => x.deprecated);
+    return html`
+      
    
+        ${!content && !slots.length ? html`
+        None` : html`
+        ${await this.innerMD(content)}
+
+        
+          
+            
+              
+                
+                
+              
+            
+            
+              ${(await Promise.all(slots.map(async slot => html`
+              
+                
+                
+              `))).join('')}
+            
+          
    Slot NameDescription
    ${slot.name}${await this.innerMD(slot.description)}
    
+            `}${!deprecated.length ? '' : html`
+        
    
+          ${mdHeading(`Deprecated ${header}`, { level: level + 1 })}
+          
+            
+              
+                
+                  
+                  
+                
+              
+              
+                ${(await Promise.all(deprecated.map(async slot => html`
+                
+                  
+                  
+                `))).join('')}
+              
+            
    Slot NameDescription
    ${slot.name}
+                    ${await this.innerMD(slot.description)}
+                    Note: ${slot.name} is deprecated. ${await this.innerMD(slot.deprecated)}
+                  
    
+              
+        
    `}
+      
    `;
+  }
+}
diff --git a/docs/_plugins/shortcodes/renderInstallation.cjs b/docs/_plugins/shortcodes/renderInstallation.cjs
new file mode 100644
index 0000000000..85661ed95b
--- /dev/null
+++ b/docs/_plugins/shortcodes/renderInstallation.cjs
@@ -0,0 +1,129 @@
+// for editor highlighting
+const html = String.raw;
+const markdown = String.raw;
+
+async function generateImportMap(packageName, tagName) {
+  const { Generator } = await import('@jspm/generator');
+  const generator = new Generator({
+    providers: {
+      '@rhds/elements': 'jspm.io',
+      [packageName]: 'jspm.io',
+    },
+  });
+  await generator.install(`${packageName}/${tagName}/${tagName}.js`);
+  return JSON.stringify(generator.getMap(), null, 2);
+}
+
+/**
+ * @param {string} content
+ * @param {object} [options]
+ * @param {boolean} [options.lightdomcss]
+ * @param {string} [options.cdnVersion]
+ */
+async function renderInstall(content, {
+  lightdomcss = false,
+  cdnVersion = 'v1-alpha',
+} = {}) {
+  /**
+   * 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
+   */
+  const { docsPage } = this.ctx.doc;
+
+  const packageVersion = require('../../../package.json').version;
+
+  const cdnContent = markdown`
+
+~~~html
+
+~~~
+
+
    Import Map Example
+
+~~~html
+
+~~~
+
+
    
+
+`;
+
+  const npmContent = markdown`
+
+~~~shell
+npm install @rhds/elements
+~~~
+
+~~~html
+
+~~~
+
+`;
+
+  let jspmContent = '';
+  try {
+    jspmContent = markdown`
+
+~~~html
+
+~~~
+
+
    Import Map Example
+
+~~~html
+
+~~~
+
+
    
+`;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    jspmContent = `Could not generate import map using JSPM: ${error.message}`;
+  }
+
+  return html`
+
+
+
+
+
    
+  
    Installation
    
+  
    Learn more about how to install on our getting started docs.
    
+  
+    Red Hat CDN
+    ${cdnContent}
+    NPM
+    ${npmContent}
+    JSPM
+    ${jspmContent}
+  
+
+${content ?? ''}
+
+
    
+`;
+}
+
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPairedShortcode('renderInstall', renderInstall);
+};
diff --git a/docs/_plugins/shortcodes/renderLightDom.cjs b/docs/_plugins/shortcodes/renderLightDom.cjs
new file mode 100644
index 0000000000..6fdece5ded
--- /dev/null
+++ b/docs/_plugins/shortcodes/renderLightDom.cjs
@@ -0,0 +1,64 @@
+// for editor highlighting
+const html = String.raw;
+const markdown = String.raw;
+
+/**
+ * @param {string} content
+ * @param {object} [options]
+ * @param {boolean} [options.shimcss]
+ */
+async function renderLightDom(content, {
+  shimcss = false,
+} = {}) {
+  const docsPage = this.ctx.doc;
+  let lightdomContent = '';
+
+  if (shimcss === true) {
+    lightdomContent = markdown`
+
+### Lightdom CSS shim
+
+This element has an optional "Lightdom CSS" shim to help reduce Cumulative Layout Shift (CLS) experience before the element has fully initialized.
+
+~~~html
+
+~~~
+
+
+  
    Note
    
+  
    Replace /path/to/ with path to the CSS file, whether local or CDN.
    
+    
+
+
+  
    Warning
    
+  
    Lightdom CSS shims are an optional, temporary solution for reducing CLS. Delcarative Shadow DOM is the better solution, and once it is more widely available, Lightdom CSS shims will no longer be needed and will become deprecated.
    
+    
+`;
+  } else {
+    lightdomContent = markdown`
+
+### Lightdom CSS
+
+This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.
+
+~~~html
+
+~~~
+
+
+  
    Note
    
+  
    Replace /path/to/ with path to the CSS file, whether local or CDN.
    
+    
+`;
+  }
+
+  return lightdomContent.trim();
+}
+
+/**
+ * Renders Light DOM CSS installation info
+ * @param {import('@11ty/eleventy').UserConfig} eleventyConfig  computed config
+ */
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPairedShortcode('renderLightDom', renderLightDom);
+};
diff --git a/docs/assets/javascript/elements/uxdot-installation-tabs.ts b/docs/assets/javascript/elements/uxdot-installation-tabs.ts
index aba3b9ad2a..3e72145ba0 100644
--- a/docs/assets/javascript/elements/uxdot-installation-tabs.ts
+++ b/docs/assets/javascript/elements/uxdot-installation-tabs.ts
@@ -10,12 +10,21 @@ const TABS_KEY = 'rhds-installation-tabs-selected-index';
 export class InstallationTabs extends RhTabs {
   static stored = localStorage.getItem(TABS_KEY);
 
+  constructor() {
+    super();
+    this.box = 'box';
+    this.vertical = true;
+  }
+
   async firstUpdated() {
     super.firstUpdated?.();
     await Promise.all(Array.from(
       this.querySelectorAll('rh-tab'),
       x => x.updateComplete,
     ));
+    for (const pre of this.querySelectorAll('rh-tab-panel > pre')) {
+      pre.style.maxWidth = '100cqw';
+    }
     if (InstallationTabs.stored !== null) {
       const index = parseInt(InstallationTabs.stored);
       if (!Number.isNaN(index)
diff --git a/docs/elements/demos.html b/docs/elements/demos.html
index 7dd5ac5bc6..ffe55851c5 100644
--- a/docs/elements/demos.html
+++ b/docs/elements/demos.html
@@ -1,88 +1,67 @@
 ---
 # this file generates the demos subnav tab,
 # e.g. ux.redhat.com/elements/tile/demos/
-layout: layouts/base.njk
-hasToc: true
 templateEngineOverride: njk
+hasToc: true
+layout: 'layouts/pages/elements.njk'
 permalink: '/elements/{{ element.slug }}/demos/'
-eleventyComputed:
-  slug: '{{ doc.slug or element.slug }}'
-  title: "{{ doc.pageTitle }} | {{ slug | deslugify }}"
 pagination:
   data: elements
   alias: element
   size: 1
 ---
-{# TODO: replace boilerplate with has-toc.njk template #}
-{%- set prettyName -%}{{ (doc.alias or doc.slug or element.slug) | deslugify }}{% endset %}
-{%- set planned = repoStatus | isPlanned(prettyName) %}
-{%- set manifest = doc.docsPage.manifest -%}
-{%- set tagName = doc.tagName or element.tagName -%}
-{%- set demos = manifest and manifest.getDemos(doc.docsPage.tagName) -%}
-{%- set demosUrl -%}/elements/{{ slug }}/demos/{%- endset -%}
-
 
 
-
-
-
-
-      ${planned ? '' : html`
-      `}
-
-      ${!isCodePage ? content : await this.#renderCodePage.call(this, ctx)}
-    `;
-  }
-
-  async #innerMD(content = '') {
-    return (await this.renderTemplate(content.trim(), 'md')).trim();
-  }
-
-  async #getMainDemoContent(tagName) {
-    try {
-      const demoPath = join(process.cwd(), 'elements', tagName, 'demo', `${tagName}.html`);
-      const demoContent = await readFile(demoPath, 'utf8');
-      return html`
-        
-          ${this.highlight('html', demoContent)}
-          ${this.#actionsLabels}
-        `;
-    } catch {
-      return '';
-    }
-  }
-
-  async #renderCodePage(ctx) {
-    const { doc } = ctx;
-    const { tagName } = doc.docsPage;
-    return [
-      await this.#renderInstallation.call(this, ctx),
-      await this.#renderLightdom(ctx),
-      html`
    Usage
    `,
-      await this.#getMainDemoContent(tagName),
-      doc.fileExists && await this.renderFile(doc.filePath),
-      await this.#renderCodeDocs.call(this,
-                                      doc.docsPage.tagName,
-                                      { ...ctx, level: (ctx.level ?? 2) + 1 }),
-      ...await Promise.all(doc.siblingElements.map(tagName =>
-        this.#renderCodeDocs.call(this, tagName, ctx))),
-    ].filter(Boolean).join('');
-  }
-
-  async #renderLightdom(ctx) {
-    const { docsPage } = ctx.doc;
-    let content = '';
-    // TODO: revisit after implementing auto-loaded light-dom css
-    if (ctx.doc.hasLightdom) {
-      content += html`
-        
    Lightdom CSS
    
-
-        
    This element requires you to load "Lightdom CSS" stylesheets for styling
-           deeply slotted elements.
    
-
-        
-          
    Note
    
-          
    Replace /path/to/ with path to the CSS file, whether local or CDN.
    
-            
-
-        
-          ${this.highlight('html', html`
-          
-          `.trim())}
-        
-      `;
-    }
-    if (ctx.doc.hasLightdomShim) {
-      content += html`
-        
    Lightdom CSS shim
    
-
-        
-          
    Warning
    
-          
    Lightdom CSS shims are an optional, temporary solution for reducing CLS.
-             Declarative Shadow DOM is the better solution, and once SSR tools are more widely
-             available, Lightdom CSS shims will no longer be needed and will become deprecated.
    
-            
-
-        
    This element has an optional "Lightdom CSS" shim to help reduce
-          Cumulative Layout Shift (CLS) experience
-          before the element has fully initialized.
    
-
-        
-          
    Note
    
-          
    Replace /path/to/ with path to the CSS file, whether local or CDN.
    
-            
-
-        
-          ${this.highlight('html', html`
-          
-          `.trim())}
-        
-      `;
-    }
-    return content;
-  }
-
-  async #renderInstallation({ doc, cdnVersion = 'v1-alpha' }) {
-    const { version: packageVersion } = require('../../package.json');
-
-    const jspmMap = await this.generateImportMap(doc.docsPage.tagName)
-        .catch(error => {
-          console.warn(error); // eslint-disable-line no-console
-          return `Could not generate import map using JSPM: ${error.message}`;
-        });
-
-    return html`
-      
-      
-      
    
-        
    Installation
    
-        
    We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
    
-        
-          Red Hat CDN
-          
-            ${this.highlight('html', this.dedent(html`
-              `))}
-              ${this.#actionsLabels}
-            
-          
-          NPM
-          
-            ${this.highlight('shell', `npm install @rhds/elements`, 'shell')}${this.#actionsLabels}
-            
-          
-          JSPM
-          
-            ${this.highlight('html', this.dedent(html`
-              `))}
-              ${this.#actionsLabels}
-            
-          
-        
-
-        
    Add it to your page with this import statement
    
-
-        ${this.highlight('html', this.dedent(html`
-          `))}
-          ${this.#actionsLabels}
-        
-      
    
-    `;
-  }
-
-  async #renderCodeDocs(tagName, ctx) {
-    const { docsPage } = ctx.doc;
-    const { manifest } = docsPage;
-
-    const h = ctx.level ?? 2;
-
-    // TODO: dsd
-    return html`
-      ${tagName}
-
-      
    ${manifest.getDescription(tagName)}
    
-
-      
-        ${await this.#renderSlots(tagName, ctx)}
-        ${await this.#renderAttributes(tagName, ctx)}
-        ${await this.#renderMethods(tagName, ctx)}
-        ${await this.#renderEvents(tagName, ctx)}
-        ${await this.#renderCssParts(tagName, ctx)}
-        ${await this.#renderCssCustomProperties(tagName, ctx)}
-        ${await this.#renderDesignTokens(tagName, ctx)}
-      
-    `;;
-  }
-
-  async #renderSlots(tagName, ctx) {
-    const level = ctx.level ?? 2;
-    const allSlots = ctx.doc.docsPage.manifest.getSlots(tagName) ?? [];
-    const slots = allSlots.filter(x => !x.deprecated);
-    const deprecated = allSlots.filter(x => x.deprecated);
-    const count = slots.length;
-    const deprecatedSlotCount = deprecated.length;
-
-    return html`
-      Slots
-        ${count}
-        ${deprecatedSlotCount > 0 ? html`${deprecatedSlotCount}` : ``}
-      
-      
-        
    
-          ${!slots.length ? html`
-          None` : html`
-          
-            
-              
-                
-                  
-                  
-                
-              
-              
-                ${(await Promise.all(slots.map(async slot => html`
-                
-                  
-                  
-                `))).join('')}
-              
-            
    Slot NameDescription
    ${slot.name}${await this.#innerMD(slot.description)}
    
-              `}${!deprecated.length ? '' : html`
-          
    
-            Deprecated Slots
-            
-              
-                
-                  
-                    
-                    
-                  
-                
-                
-                  ${(await Promise.all(deprecated.map(async slot => html`
-                  
-                    
-                    
-                  `))).join('')}
-                
-              
    Slot NameDescription
    ${slot.name}
-                      ${await this.#innerMD(slot.description)}
-                      Note: ${slot.name} is deprecated. ${await this.#innerMD(slot.deprecated)}
-                    
    
-                
-          
    `}
-        
    
-          `;
-  }
-
-  async #renderAttributes(tagName, ctx) {
-    const level = ctx.level ?? 2;
-    const _attrs = (ctx.doc.docsPage.manifest.getAttributes(tagName) ?? [])
-        .filter(x => !x.static && x.privacy !== 'protected' && x.privacy !== 'private');
-    const deprecated = _attrs.filter(x => x.deprecated);
-    const attributes = _attrs.filter(x => !x.deprecated);
-    const count = _attrs.length;
-    const deprecatedAttrCount = deprecated.length;
-
-    return html`
-      Attributes
-        ${count}
-        ${deprecatedAttrCount > 0 ? html`${deprecatedAttrCount}` : ``}
-      
-      
-        
    ${!attributes.length ? html`
-          None` : html`
-          
-            
-              
-                
-                  
-                  
-                  
-                  
-                  
-                
-              
-              
-                ${(await Promise.all(attributes.map(async attribute => html`
-                
-                  
-                  
-                  
-                  
-                  
-                `))).join('')}
-              
-            
    AttributeDOM PropertyDescriptionTypeDefault
    ${attribute.name}${attribute.fieldName}${await this.#innerMD(attribute.description)}${this.highlight('ts', attribute?.type?.text ?? 'unknown').replace(/\s+/g, ' ')}${this.highlight('ts', attribute?.default ?? 'unknown').replace(/\s+/g, ' ')}
    
-              `}
-          ${!deprecated.length ? '' : html`
-          
    
-            Deprecated Attributes
-            
-              
-                
-                  
-                    
-                    
-                    
-                    
-                    
-                  
-                
-                
-                  ${(await Promise.all(deprecated.map(async attribute => html`
-                  
-                    
-                    
-                    
-                    
-                    
-                  `))).join('')}
-                
-              
    AttributeDOM PropertyDescriptionTypeDefault
    ${attribute.name}${attribute.fieldName}${await this.#innerMD(attribute.description)}${this.highlight('ts', attribute.type?.text ?? 'unknown').replace(/\s+/g, ' ')}${this.highlight('ts', attribute.default ?? 'unknown').replace(/\s+/g, ' ')}
    
-                
-          
    `}
-        
    
-          
-    `;
-  }
-
-  async #renderMethods(tagName, ctx) {
-    const level = ctx.level ?? 2;
-    const allMethods = ctx.doc.docsPage.manifest.getMethods(tagName) ?? [];
-    const deprecated = allMethods.filter(x => x.deprecated);
-    const methods = allMethods.filter(x => !x.deprecated);
-    const count = methods.length;
-    const deprecatedMethodsCount = deprecated.length;
-
-    // TODO: inline code highlighting for type and default: render the markdown to html and extract the `` from the `
    `
-    return html`
-      Methods
-        ${count}
-        ${deprecatedMethodsCount > 0 ? html`${deprecatedMethodsCount}` : ``}
-      
-      
-        
    
-          ${!methods.length ? html`
-          None` : html`
-          
-            
-              
-                
-                  
-                  
-                
-              
-              
-                ${(await Promise.all(methods.map(async method => html`
-                
-                  
-                  
-                `))).join('')}
-              
-            
    Method NameDescription
    ${method.name}(${stringifyParams(method)})${await this.#innerMD(method.description)}
    
-              `}${!deprecated.length ? '' : html`
-          
    
-            Deprecated Methods
-            
-              
-                
-                  
-                    
-                    
-                  
-                
-                
-                  ${(await Promise.all(deprecated.map(async method => html`
-                  
-                    
-                    
-                  `))).join('')}
-                
-              
    Method NameDescription
    ${method.name}(${stringifyParams(method)})
-                      ${await this.#innerMD(method.description)}
-                      Note: ${method.name} is deprecated. ${await this.#innerMD(method.deprecated)}
-                    
    
-                
-          
    `}
-        
    
-          
-    `;
-  }
-
-  async #renderEvents(tagName, ctx) {
-    const level = ctx.level ?? 2;
-    const _events = ctx.doc.docsPage.manifest.getEvents(tagName) ?? [];
-    const deprecated = _events.filter(x => x.deprecated);
-    const events = _events.filter(x => !x.deprecated);
-    const count = events.length;
-    const deprecatedEventsCount = deprecated.length;
-
-    return html`
-      Events
-        ${count}
-        ${deprecatedEventsCount > 0 ? html`${deprecatedEventsCount}` : ``}
-      
-      
-        
    
-          ${!events.length ? html`
-          None` : html`
-          
-            
-              
-                
-                  
-                  
-                
-              
-              
-                ${(await Promise.all(events.map(async event => html`
-                
-                  
-                  
-                `))).join('')}
-              
-            
    Event NameDescription
    ${event.name}${await this.#innerMD(event.description)}
    
-              `}${!deprecated.length ? '' : html`
-          
    
-            Deprecated Events
-            
-              
-                
-                  
-                    
-                    
-                  
-                
-                
-                  ${(await Promise.all(deprecated.map(async event => html`
-                  
-                    
-                    
-                  `))).join('')}
-                
-              
    Event NameDescription
    ${event.name}
-                      ${await this.#innerMD(event.description)}
-                      Note: ${event.name} is deprecated. ${await this.#innerMD(event.deprecated)}
-                    
    
-                
-          
    `}
-        
    
-          
-    `;
-  }
-
-  async #renderCssParts(tagName, ctx) {
-    const level = ctx.level ?? 2;
-    const allParts = ctx.doc.docsPage.manifest.getCssParts(tagName) ?? [];
-    const parts = allParts.filter(x => !x.deprecated);
-    const deprecated = allParts.filter(x => x.deprecated);
-    const count = parts.length;
-    const deprecatedCssPartsCount = deprecated.length;
-
-    return html`
-      CSS Shadow Parts
-        ${count}
-        ${deprecatedCssPartsCount > 0 ? html`${deprecatedCssPartsCount}` : ``}
-      
-      
-        
    
-          ${!parts.length ? html`
-          None` : html`
-          
-            
-              
-                
-                  
-                  
-                
-              
-              
-                ${(await Promise.all(parts.map(async part => html`
-                
-                  
-                  
-                `))).join('')}
-              
-            
    Part NameDescription
    ${part.name}${await this.#innerMD(part.description)}
    
-              `}${!deprecated.length ? '' : html`
-          
    
-            Deprecated CSS Shadow Parts
-            
-              
-                
-                  
-                    
-                    
-                  
-                
-                
-                  ${(await Promise.all(deprecated.map(async part => html`
-                  
-                    
-                    
-                  `))).join('')}
-                
-              
    Part NameDescription
    ${part.name}
-                      ${await this.#innerMD(part.description)}
-                      Note: ${part.name} is deprecated. ${await this.#innerMD(part.deprecated)}
-                    
    
-                
-          
    `}
-        
    
-          
-    `;
-  }
-
-  async #renderCssCustomProperties(tagName, ctx) {
-    const level = ctx.level ?? 2;
-    const allCssProperties = (ctx.doc.docsPage.manifest.getCssCustomProperties(tagName) ?? [])
-        .filter(x => !tokens.has(x.name));
-    const cssProperties = allCssProperties.filter(x => !x.deprecated);
-    const deprecated = allCssProperties.filter(x => x.deprecated);
-    const count = cssProperties.length;
-    const deprecatedCssPropertiesCount = deprecated.length;
-
-    return html`
-      CSS Custom Properties
-        ${count}
-        ${deprecatedCssPropertiesCount > 0 ? html`${deprecatedCssPropertiesCount}` : ``}
-      
-      
-        
    
-          ${!cssProperties.length ? html`
-          None` : html`
-          
-            
-              
-                
-                  
-                  
-                  
-                
-              
-              ${(await Promise.all(cssProperties.map(async prop => html`
-                
-                  
-                  
-                  
-                `))).join('')}
-              
-            
    CSS PropertyDescriptionDefault
    ${prop.name}${await this.#innerMD(prop.description ?? '')}
-                    ${!prop.default?.startsWith('#') ? html`` : html``}${prop.default ?? '—'}
-                  
    
-              `}${!deprecated.length ? '' : html`
-          
    
-            Deprecated CSS Custom Properties
-            
-              
-                
-                  
-                    
-                    
-                    
-                  
-                
-                ${(await Promise.all(deprecated.map(async prop => html`
-                  
-                    
-                    
-                    
-                  `))).join('')}
-                
-              
    CSS PropertyDescriptionDefault
    ${prop.name}${await this.#innerMD(prop.description)}${await this.#innerMD(prop.default ?? '—')}
    
-                
-          
    `}
-        
    
-          
-    `;
-  }
-
-  async #renderDesignTokens(tagName, ctx) {
-    const designTokens = (ctx.doc.docsPage.manifest.getCssCustomProperties(tagName) ?? [])
-        .filter(x => tokens.has(x.name));
-    const count = designTokens.length;
-    return html`
-      Design Tokens
-        ${count}
-      
-      
-        
    
-          ${!designTokens.length ? html`
-          None` : html`
-          
-            
-              
-                
-                  
-                  
-                
-              
-              ${designTokens.map(token => html`
-                
-                  
-                  ${copyCell(token)}
-                `).join('')}
-              
-            
    TokenCopy
    
-                    
-                      ${token.name}
-                    
-                  
    
-              `}
-        
    
-          
-    `;
-  }
-};
diff --git a/docs/elements/elements.html b/docs/elements/elements.html
new file mode 100644
index 0000000000..ffe0518d26
--- /dev/null
+++ b/docs/elements/elements.html
@@ -0,0 +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;
+    },
+  },
+}
+---
+{% renderFile doc.filePath, context %}
diff --git a/docs/patterns/card/examples.md b/docs/patterns/card/examples.md
index 93a271a910..14be71085b 100644
--- a/docs/patterns/card/examples.md
+++ b/docs/patterns/card/examples.md
@@ -3,6 +3,7 @@ title: Examples
 heading: Card
 sidenavTitle: Card
 layout: layouts/pages/pattern.njk
+hasToc: true
 order: 20
 tags:
   - cardPatterns
diff --git a/docs/patterns/card/guidelines.md b/docs/patterns/card/guidelines.md
index 0d5bc8fed3..1d4ef47e18 100644
--- a/docs/patterns/card/guidelines.md
+++ b/docs/patterns/card/guidelines.md
@@ -3,6 +3,7 @@ title: Guidelines
 heading: Card
 sidenavTitle: Card
 layout: layouts/pages/pattern.njk
+hasToc: true
 order: 20
 tags:
   - cardPatterns
@@ -61,4 +62,4 @@ The recommended maximum character count for the elements of a card are listed be
 
 
 
-{% include 'partials/component/feedback.html' %}
+{% include 'partials/component/feedback.html' %}
\ No newline at end of file
diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md
index ee0770b7f6..bb22092262 100644
--- a/docs/patterns/card/index.md
+++ b/docs/patterns/card/index.md
@@ -3,6 +3,7 @@ title: Overview
 heading: Card
 sidenavTitle: Card
 layout: layouts/pages/pattern.njk
+hasToc: true
 order: 20
 tags:
   - pattern
diff --git a/docs/patterns/logo-wall/examples.md b/docs/patterns/logo-wall/examples.md
index 2b52a9be80..17da0e26a1 100644
--- a/docs/patterns/logo-wall/examples.md
+++ b/docs/patterns/logo-wall/examples.md
@@ -3,6 +3,7 @@ title: Examples
 heading: Logo wall
 sidenavTitle: Logo wall
 layout: layouts/pages/pattern.njk
+hasToc: true
 order: 20
 tags:
   - logowallPatterns
diff --git a/docs/patterns/logo-wall/guidelines.md b/docs/patterns/logo-wall/guidelines.md
index 2b24168c4f..0b862797d7 100644
--- a/docs/patterns/logo-wall/guidelines.md
+++ b/docs/patterns/logo-wall/guidelines.md
@@ -3,6 +3,7 @@ title: Guidelines
 heading: Logo wall
 sidenavTitle: Logo wall
 layout: layouts/pages/pattern.njk
+hasToc: true
 order: 20
 tags:
   - logowallPatterns
diff --git a/docs/patterns/logo-wall/index.md b/docs/patterns/logo-wall/index.md
index 4d5fa38269..4a116072b9 100644
--- a/docs/patterns/logo-wall/index.md
+++ b/docs/patterns/logo-wall/index.md
@@ -3,6 +3,7 @@ title: Overview
 heading: Logo wall
 sidenavTitle: Logo wall
 layout: layouts/pages/pattern.njk
+hasToc: true
 order: 75
 tags:
   - pattern
diff --git a/docs/patterns/logo-wall/style.md b/docs/patterns/logo-wall/style.md
index 3922c01e45..e30b5d3976 100644
--- a/docs/patterns/logo-wall/style.md
+++ b/docs/patterns/logo-wall/style.md
@@ -3,6 +3,7 @@ title: Style
 heading: Logo wall
 sidenavTitle: Logo wall
 layout: layouts/pages/pattern.njk
+hasToc: true
 order: 20
 tags:
   - logowallPatterns
diff --git a/docs/patterns/tile/examples.md b/docs/patterns/tile/examples.md
index 0db33ae1c8..70c4bbe7c1 100644
--- a/docs/patterns/tile/examples.md
+++ b/docs/patterns/tile/examples.md
@@ -3,6 +3,7 @@ title: Examples
 heading: Tile
 sidenavTitle: Tile
 layout: layouts/pages/pattern.njk
+hasToc: true
 order: 20
 tags:
   - tilePatterns
diff --git a/docs/patterns/tile/index.md b/docs/patterns/tile/index.md
index 507559579c..48c7e76a18 100644
--- a/docs/patterns/tile/index.md
+++ b/docs/patterns/tile/index.md
@@ -3,6 +3,7 @@ title: Overview
 heading: Tile
 sidenavTitle: Tile
 layout: layouts/pages/pattern.njk
+hasToc: true
 order: 120
 tags:
   - pattern
diff --git a/docs/styles/rh-code-block-lightdom.css b/docs/styles/rh-code-block-lightdom.css
index ca65b58545..b266f521ea 100644
--- a/docs/styles/rh-code-block-lightdom.css
+++ b/docs/styles/rh-code-block-lightdom.css
@@ -7,10 +7,10 @@ rh-code-block {
     color: var(--_code-color);
     font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace);
     text-align: left;
-    white-space: var(--_code-white-space, pre);
-    word-wrap: var(--_code-word-wrap, initial);
+    white-space: pre;
     word-spacing: normal;
     word-break: normal;
+    word-wrap: normal;
     line-height: var(--rh-line-height-code, 1.5);
     tab-size: 4;
     hyphens: none;
diff --git a/elements/rh-accordion/docs/30-code.md b/elements/rh-accordion/docs/30-code.md
new file mode 100644
index 0000000000..6fae0ba9ff
--- /dev/null
+++ b/elements/rh-accordion/docs/30-code.md
@@ -0,0 +1,26 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+```html
+
+  
    Item One
    
+  
+    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
+      
+  
    Item Two
    
+  
+    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
+      
+  
    Item Three
    
+  
+    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
+      
+    
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-accordion-header' %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-accordion-panel' %}{% endrenderCodeDocs %}
diff --git a/elements/rh-alert/docs/30-code.md b/elements/rh-alert/docs/30-code.md
new file mode 100644
index 0000000000..7993ce3cd6
--- /dev/null
+++ b/elements/rh-alert/docs/30-code.md
@@ -0,0 +1,3 @@
+{% renderInstall %}{% endrenderInstall %}
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-audio-player/docs/40-code.md b/elements/rh-audio-player/docs/40-code.md
new file mode 100644
index 0000000000..bef5e04027
--- /dev/null
+++ b/elements/rh-audio-player/docs/40-code.md
@@ -0,0 +1,14 @@
+{% renderInstall lightdomcss=true %}{% endrenderInstall %}
+
+{% renderLightDom %}{% endrenderLightDom %}
+
+## Usage
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-audio-player-about' %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-audio-player-subscribe' %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-transcript' %}{% endrenderCodeDocs %}
+
diff --git a/elements/rh-avatar/docs/30-code.md b/elements/rh-avatar/docs/30-code.md
new file mode 100644
index 0000000000..4c88fab0ab
--- /dev/null
+++ b/elements/rh-avatar/docs/30-code.md
@@ -0,0 +1,9 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+```html
+  
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-back-to-top/docs/30-code.md b/elements/rh-back-to-top/docs/30-code.md
new file mode 100644
index 0000000000..7993ce3cd6
--- /dev/null
+++ b/elements/rh-back-to-top/docs/30-code.md
@@ -0,0 +1,3 @@
+{% renderInstall %}{% endrenderInstall %}
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-badge/docs/30-code.md b/elements/rh-badge/docs/30-code.md
new file mode 100644
index 0000000000..983bef1e3e
--- /dev/null
+++ b/elements/rh-badge/docs/30-code.md
@@ -0,0 +1,9 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+```html
+1
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-blockquote/docs/30-code.md b/elements/rh-blockquote/docs/30-code.md
new file mode 100644
index 0000000000..cb3f173040
--- /dev/null
+++ b/elements/rh-blockquote/docs/30-code.md
@@ -0,0 +1,13 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+```html
+
+  
    In open source, we feel strongly that to really do something well, you have to get a lot of people involved.
    
+  Linus Torvalds
+  Software Engineer
+    
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-breadcrumb/docs/30-code.md b/elements/rh-breadcrumb/docs/30-code.md
new file mode 100644
index 0000000000..30538e1e94
--- /dev/null
+++ b/elements/rh-breadcrumb/docs/30-code.md
@@ -0,0 +1,20 @@
+{% renderInstall %}{% endrenderInstall %}
+
+{% renderLightDom %}{% endrenderLightDom %}
+
+## Usage
+
+```html
+
+  
      
+    
    1. Home
      2. 
+    
    2. Products
      3. 
+    
    3. Red Hat OpenShift on AWS
      4. 
+    
    4. 4
      5. 
+    
    5. Introduction to ROSA
      6. 
+    
    6. Chapter 1. Understanding ROSA
      7. 
+  
    
+    
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-button/docs/30-code.md b/elements/rh-button/docs/30-code.md
new file mode 100644
index 0000000000..6c433fdbe3
--- /dev/null
+++ b/elements/rh-button/docs/30-code.md
@@ -0,0 +1,5 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-card/docs/30-code.md b/elements/rh-card/docs/30-code.md
new file mode 100644
index 0000000000..7993ce3cd6
--- /dev/null
+++ b/elements/rh-card/docs/30-code.md
@@ -0,0 +1,3 @@
+{% renderInstall %}{% endrenderInstall %}
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-code-block/docs/30-code.md b/elements/rh-code-block/docs/30-code.md
index 1ecf5934f6..b044258817 100644
--- a/elements/rh-code-block/docs/30-code.md
+++ b/elements/rh-code-block/docs/30-code.md
@@ -1,10 +1,16 @@
+{% renderInstall %}{% endrenderInstall %}
+
+{% renderLightDom %}{% endrenderLightDom %}
+
+## Usage
+
 The content of code-block snippets must be contained within a non-executable 
 `
+
+
 ### Loading
 
 Icons load lazily by default, meaning that the browser will not attempt to fetch and render the icon until it scrolls into view. You can change this with the loading attribute, which has three values:
@@ -8,7 +16,9 @@ Icons load lazily by default, meaning that the browser will not attempt to fetch
 
 You might choose to enable eager rendering for "above-the-fold" content, but keep lazy loading for the rest of the page.
 
-```html rh-code-block
-
-```
+
+
+
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
 
diff --git a/elements/rh-menu/docs/rh-menu.md b/elements/rh-menu/docs/rh-menu.md
new file mode 100644
index 0000000000..e57d1513de
--- /dev/null
+++ b/elements/rh-menu/docs/rh-menu.md
@@ -0,0 +1,16 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+```html
+
+  Toggle Menu
+  Menuitem1
+  Menuitem2
+  Menuitem3
+  Menuitem4
+
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
+
diff --git a/elements/rh-navigation-secondary/docs/30-code.md b/elements/rh-navigation-secondary/docs/30-code.md
index de5495ecb1..619cc31c56 100644
--- a/elements/rh-navigation-secondary/docs/30-code.md
+++ b/elements/rh-navigation-secondary/docs/30-code.md
@@ -1,24 +1,26 @@
+{% renderInstall lightdomcss=true%}{% endrenderInstall %}
+
+{% renderLightDom %}{% endrenderLightDom %}
+
 ### System Integration
 
 #### Current page indicator
 
-When a user is viewing a page that is part of the secondary navigation 
-information architecture, a red top border is visible. If the current active 
-page is part of a dropdown menu, that dropdown is highlighted with the same top 
-border to indicate it contains the current page. For more details on how to use 
-this current page indicator, refer to the [design 
-guidelines](../guidelines/#current-page-indicator) for current page indicator.
+When a user is viewing a page that is part of the secondary navigation information architecture, a red top border is visible. If the current active page is part of a dropdown menu, that dropdown is highlighted with the same top border to indicate it contains the current page. For more details on how to use this current page indicator, refer to the [design guidelines](../guidelines/#current-page-indicator) for current page indicator.
 
-To enable this indicator style, implementation should apply the 
-`aria-current="page"` attribute to the current page link.
+To enable this indicator style, implementation should apply the aria-current="page" attribute to the current page link.
 
-```html rh-code-block
+```html
 Current page being viewed
 ```
 
-The `rh-navigation-secondary` element does not apply the 
-`aria-current="page"` attribute itself. The responsibility for 
-keeping track of which link is currently active falls on the content management 
-system or application.  The element checks for the presence of this attribute 
-and applies the current page indicator style to nav links and dropdown menus 
-when the active page is within a dropdown menu.
+ The `rh-navigation-secondary` element does not apply the aria-current="page" attribute itself. The responsibility for keeping track of which link is currently active falls on the content management system or application.  The element checks for the presence of this attribute and applies the current page indicator style to nav links and dropdown menus when the active page is within a dropdown menu.
+
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-navigation-secondary-dropdown' %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-navigation-secondary-menu' %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-navigation-secondary-menu-section' %}{% endrenderCodeDocs %}
diff --git a/elements/rh-pagination/docs/30-code.md b/elements/rh-pagination/docs/30-code.md
new file mode 100644
index 0000000000..28121686ab
--- /dev/null
+++ b/elements/rh-pagination/docs/30-code.md
@@ -0,0 +1,19 @@
+{% renderInstall lightdomcss=true %}{% endrenderInstall %}
+
+{% renderLightDom %}{% endrenderLightDom %}
+
+## Usage
+
+```html
+
+  
      
+    
    1. 1
      2. 
+    
    2. 2
      3. 
+    
    3. 3
      4. 
+    
    4. 4
      5. 
+    
    5. 5
      6. 
+  
    
+    
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-site-status/docs/30-code.md b/elements/rh-site-status/docs/30-code.md
new file mode 100644
index 0000000000..a8b7f7d650
--- /dev/null
+++ b/elements/rh-site-status/docs/30-code.md
@@ -0,0 +1,9 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+```html
+
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-skip-link/docs/30-code.md b/elements/rh-skip-link/docs/30-code.md
new file mode 100644
index 0000000000..919ed431e2
--- /dev/null
+++ b/elements/rh-skip-link/docs/30-code.md
@@ -0,0 +1,12 @@
+{% renderInstall %}{% endrenderInstall %}
+
+{% renderLightDom shimcss=true %}{% endrenderLightDom %}
+
+## Usage
+```html
+
+  Skip to main content
+
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-spinner/docs/30-code.md b/elements/rh-spinner/docs/30-code.md
index cec55d8675..fec027c779 100644
--- a/elements/rh-spinner/docs/30-code.md
+++ b/elements/rh-spinner/docs/30-code.md
@@ -1,3 +1,5 @@
+{% renderInstall %}{% endrenderInstall %}
+
 ## Usage
 
 ### Default/Large Spinner
@@ -11,7 +13,8 @@
 ```
 
 ### Small Spinner
-
 ```html
 
 ```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-stat/docs/30-code.md b/elements/rh-stat/docs/30-code.md
new file mode 100644
index 0000000000..ba8b098872
--- /dev/null
+++ b/elements/rh-stat/docs/30-code.md
@@ -0,0 +1,13 @@
+{% renderInstall %}{% endrenderInstall %}
+
+
+## Usage
+
+```html
+
+  Statistic Placeholder
+  Description Placeholder
+
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-subnav/docs/30-code.md b/elements/rh-subnav/docs/30-code.md
new file mode 100644
index 0000000000..cfdb9324e4
--- /dev/null
+++ b/elements/rh-subnav/docs/30-code.md
@@ -0,0 +1,5 @@
+{% renderInstall lightdomcss=true %}{% endrenderInstall %}
+
+{% renderLightDom %}{% endrenderLightDom %}
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-surface/docs/30-code.md b/elements/rh-surface/docs/30-code.md
new file mode 100644
index 0000000000..7993ce3cd6
--- /dev/null
+++ b/elements/rh-surface/docs/30-code.md
@@ -0,0 +1,3 @@
+{% renderInstall %}{% endrenderInstall %}
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-switch/docs/30-code.md b/elements/rh-switch/docs/30-code.md
new file mode 100644
index 0000000000..39aee53657
--- /dev/null
+++ b/elements/rh-switch/docs/30-code.md
@@ -0,0 +1,13 @@
+
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+  ```html
+  
+  
+  ```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-table/docs/30-code.md b/elements/rh-table/docs/30-code.md
index f395bc0639..3cd30a0d32 100644
--- a/elements/rh-table/docs/30-code.md
+++ b/elements/rh-table/docs/30-code.md
@@ -1,8 +1,20 @@
+{% renderInstall lightdomcss=true %}{% endrenderInstall %}
+
+{% renderLightDom %}{% endrenderLightDom %}
+
+## Usage
+
+
+  
    Warning
    
+  
    Ensure that the table follows the recommendations on the accessibility tab so that the table works with assistive technology.
    
+    
+
+
 ### Title
 
 Specify the title of the table using a `` element.
 
-```html rh-code-block
+```html
 
   
    
     
@@ -16,15 +28,11 @@ Specify the title of the table using a `` element.
 ### Responsive tables
 
 `` will automatically reformat to a "stacked" presentation in narrow 
-containers such as on small screens and mobile devices or in page sidebars. For 
-simple table structures, each table cell heading will be auto-generated for its 
-responsive layout.
+containers such as on small screens and mobile devices or in page sidebars. For simple table structures, each table cell heading will be auto-generated for its responsive layout.
 
-For complex tables (i.e., including `colspan` or `rowspan` attributes), or to 
-customize or override individual table cell headings on mobile devices, use a 
-`data-label` attribute on the `
    ` elements to label them.
+For complex tables (i.e., including `colspan` or `rowspan` attributes), or to customize or override individual table cell headings on mobile devices, use a `data-label` attribute on the `` elements to label them.
 
-```html rh-code-block
+```html
 
   
    
     
@@ -64,12 +72,13 @@ customize or override individual table cell headings on mobile devices, use a
 
 ```
 
+
 ### Column highlighting
 
 To enable column highlighting, the `` element must also include a `` 
 element for each column in the table, typically wrapped with a ``.
 
-```html rh-code-block
+```html
 
   
    `.
 To enable sorting on a column, add an `` as the last child of 
 the `
    
     
@@ -90,7 +99,7 @@ element for each column in the table, typically wrapped with a `
    ` cell.
 
-```html rh-code-block
+```html
 
   
    
     
@@ -115,10 +124,9 @@ the `
    ` cell.
 
 ### Summary
 
-Additional information about the data in the table should be slotted into the 
-`summary` slot after the `table` element.
+Additional information about the data in the table should be slotted into the `summary` slot after the `table` element.
 
-```html rh-code-block
+```html
 
   
    
     
@@ -158,3 +166,45 @@ Additional information about the data in the table should be slotted into the
 
 ```
 
+## Example
+
+
+  
+    
+    +      +      +      +    
+    
+      
+        
+        
+        
+      
+    
+    
+      
+        
+        
+        
+      
+      
+        
+        
+        
+      
+      
+        
+        
+        
+      
+    
+  
    
+      Concerts
+    




    DateEventVenue
    12 FebruaryWaltz with StraussMain Hall
    24 MarchThe ObelisksWest Wing
    14 AprilThe WhatMain Hall
    
+  Dates and venues subject to change.
+    
+
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-tabs/docs/30-code.md b/elements/rh-tabs/docs/30-code.md
new file mode 100644
index 0000000000..9615805ffa
--- /dev/null
+++ b/elements/rh-tabs/docs/30-code.md
@@ -0,0 +1,21 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+  ```html
+  
+    Tab 1
+    Tab 1 content
+    Tab 2
+    Tab 2 content
+    Tab 3
+    Tab 3 content
+    Tab 4
+    Tab 4 content
+  
+  ```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-tab' %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-tab-panel' %}{% endrenderCodeDocs %}
diff --git a/elements/rh-tag/docs/30-code.md b/elements/rh-tag/docs/30-code.md
new file mode 100644
index 0000000000..1780c45130
--- /dev/null
+++ b/elements/rh-tag/docs/30-code.md
@@ -0,0 +1,9 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+```html
+Red Hat
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-tile/docs/30-code.md b/elements/rh-tile/docs/30-code.md
new file mode 100644
index 0000000000..54579f625b
--- /dev/null
+++ b/elements/rh-tile/docs/30-code.md
@@ -0,0 +1,14 @@
+{% renderInstall lightdomcss=true %}{% endrenderInstall %}
+
+{% renderLightDom %}{% endrenderLightDom %}
+
+## Usage
+
+
+  
    Warning
    
+  
    Tiles require light DOM CSS to be included on the page in order to style links properly.
    
+    
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
+
+{% renderCodeDocs for='rh-tile-group', hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-timestamp/docs/30-code.md b/elements/rh-timestamp/docs/30-code.md
new file mode 100644
index 0000000000..a83e7a5e0c
--- /dev/null
+++ b/elements/rh-timestamp/docs/30-code.md
@@ -0,0 +1,10 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+```html
+
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
+
diff --git a/elements/rh-tooltip/docs/30-code.md b/elements/rh-tooltip/docs/30-code.md
new file mode 100644
index 0000000000..6c433fdbe3
--- /dev/null
+++ b/elements/rh-tooltip/docs/30-code.md
@@ -0,0 +1,5 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/elements/rh-video-embed/docs/30-code.md b/elements/rh-video-embed/docs/30-code.md
new file mode 100644
index 0000000000..694446f346
--- /dev/null
+++ b/elements/rh-video-embed/docs/30-code.md
@@ -0,0 +1,15 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+
+```html
+
+  Image description
+  
+  
    Video caption here
    
+    
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}
diff --git a/eleventy.config.cjs b/eleventy.config.cjs
index 2201d66810..a56a6b68c2 100644
--- a/eleventy.config.cjs
+++ b/eleventy.config.cjs
@@ -49,6 +49,7 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy('docs/styles/**/*');
   eleventyConfig.addPassthroughCopy('docs/foundations/**/*.{css,js}');
 
+
   if (isLocal) {
     eleventyConfig.addPassthroughCopy({
       'node_modules/playground-elements/playground-*worker*': '.',
@@ -86,8 +87,8 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy({
     'node_modules/@lit/reactive-element': '/assets/packages/@lit/reactive-element',
   });
-  eleventyConfig.addPassthroughCopy({ 'elements': '/assets/packages/@rhds/elements/elements/' });
-  eleventyConfig.addPassthroughCopy({ 'lib': '/assets/packages/@rhds/elements/lib/' });
+  eleventyConfig.addPassthroughCopy({ 'elements': 'assets/packages/@rhds/elements/elements/' });
+  eleventyConfig.addPassthroughCopy({ 'lib': 'assets/packages/@rhds/elements/lib/' });
   eleventyConfig.addPlugin(ImportMapPlugin, {
     nodemodulesPublicPath: '/assets/packages',
     manualImportMap: {
@@ -159,6 +160,14 @@ module.exports = function(eleventyConfig) {
   // RHDS Tokens docs
   eleventyConfig.addPlugin(DesignTokensPlugin);
 
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/@rhds/tokens/css/global.css': '/assets/rhds.css',
+  });
+
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/@lit/reactive-element': '/assets/packages/@lit/reactive-element',
+  });
+
   /** Generate and consume custom elements manifests */
   eleventyConfig.addPlugin(CustomElementsManifestPlugin, {
     renderTitleInOverview: false,