From 0cba4695ba253c19164b478583e973682471f079 Mon Sep 17 00:00:00 2001
From: Manuel Schmidt <4742603+trailsnail@users.noreply.github.com>
Date: Tue, 18 Oct 2022 18:22:48 +0200
Subject: [PATCH] Enrich docs with `@summary` and `@title` from
 `custom-elements.json` (#952)

* provide possibility to render components "description" into docs with `[component-description:COMPONENT_NAME]`

* the meta summary should be rendered into header too
---
 custom-elements-manifest.config.js       | 3 ++-
 docs/assets/plugins/metadata/metadata.js | 6 +++++-
 docs/assets/styles/docs.css              | 3 ++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js
index 02d6f268..6d7f536f 100644
--- a/custom-elements-manifest.config.js
+++ b/custom-elements-manifest.config.js
@@ -27,7 +27,7 @@ export default {
           case ts.SyntaxKind.ClassDeclaration: {
             const className = node.name.getText();
             const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
-            const customTags = ['animation', 'dependency', 'since', 'status'];
+            const customTags = ['title', 'animation', 'dependency', 'since', 'status'];
             let customComments = '/**';
 
             node.jsDoc?.forEach(jsDoc => {
@@ -65,6 +65,7 @@ export default {
                 // Value-only metadata tags
                 case 'since':
                 case 'status':
+                case 'title':
                   classDoc[t.tag] = t.name;
                   break;
 
diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index db8a768a..ae33e719 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -374,7 +374,7 @@
         result += `
           <div class="component-header">
             <div class="component-header__tag">
-              <code>&lt;${component.tagName}&gt; | ${component.name}</code>
+              <code>&lt;${component.tagName}&gt; | ${component.title ?? component.name}</code>
             </div>
 
             <div class="component-header__info">
@@ -386,6 +386,10 @@
                 ${component.status}
               </sl-badge>
             </div>
+
+            <div class="component-header__summary">
+              <p>${component.summary}</p>
+            </div>
           </div>
         `;
 
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 94314c56..1eb601dc 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -533,7 +533,8 @@ kbd,
 }
 
 /* Lead sentences that occur immediately after the header */
-.component-header + p {
+.component-header + p,
+.component-header p {
   font-size: var(--sl-font-size-large);
   line-height: 1.6;
 }