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

@@ -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;
 

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>
         `;
 

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;
 }