Render the element page description markdown as HTML

Author: aomarks

package-lock.json

@@ -6,6 +6,7 @@
 
 import {html, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import {WCOPage} from './wco-page.js';
 
 import type {Package, Reference} from 'custom-elements-manifest/schema.js';
@@ -22,6 +23,7 @@ export interface ElementData {
   declarationReference: string;
   customElementExport: string;
   manifest: Package;
+  elementDescriptionHtml: string;
 }
 
 @customElement('wco-element-page')
@@ -40,6 +42,10 @@ export class WCOElementPage extends WCOPage {
         align-items: center;
         justify-items: center;
       }
+
+      main {
+        padding: 25px;
+      }
     `,
   ];
 
@@ -56,6 +62,7 @@ export class WCOElementPage extends WCOPage {
       declarationReference,
       customElementExport,
       manifest,
+      elementDescriptionHtml,
     } = this.elementData;
     const ceExportRef = parseReferenceString(customElementExport);
     const declarationRef = parseReferenceString(declarationReference);
@@ -81,7 +88,7 @@ export class WCOElementPage extends WCOPage {
       <h1>${packageName}/${elementName}</h1>
       <h3>${declaration.summary}</h3>
 
-      <p>${declaration.description}</p>
+      <p>${unsafeHTML(elementDescriptionHtml)}</p>
 
       <h2>Usage</h2>
       <pre><code>

packages/site-client/src/components/wco-element-page.ts

@@ -103,12 +103,14 @@
     "@types/koa-conditional-get": "^2.0.0",
     "@types/koa-etag": "^3.0.0",
     "@types/koa-static": "^4.0.2",
+    "@types/marked": "^4.0.8",
     "@web/dev-server": "^0.1.34",
     "@webcomponents/internal-site-content": "^0.0.0",
     "koa": "^2.13.4",
     "koa-conditional-get": "^3.0.0",
     "koa-etag": "^4.0.0",
-    "koa-static": "^5.0.0"
+    "koa-static": "^5.0.0",
+    "marked": "^4.2.5"
   },
   "devDependencies": {
     "uvu": "^0.5.6"

packages/site-server/package.json

@@ -11,10 +11,19 @@ import {DefaultContext, DefaultState, ParameterizedContext} from 'koa';
 import {Readable} from 'stream';
 import {gql} from '@apollo/client/core/index.js';
 import Router from '@koa/router';
+import {marked} from 'marked';
 
 import {renderElementPage} from '@webcomponents/internal-site-client/lib/entrypoints/element.js';
 import {client} from '../../graphql.js';
 
+import type {ElementData} from '@webcomponents/internal-site-client/lib/components/wco-element-page.js';
+
+import {
+  getModule,
+  parseReferenceString,
+  resolveReference,
+} from '@webcomponents/custom-elements-manifest-tools';
+
 export const handleElementRoute = async (
   context: ParameterizedContext<
     DefaultState,
@@ -91,12 +100,32 @@ export const handleElementRoute = async (
     throw new Error('Internal error');
   }
 
-  const elementData = {
+  const declarationRef = parseReferenceString(customElement.declaration);
+  const module =
+    declarationRef.module === undefined
+      ? undefined
+      : getModule(customElementsManifest, declarationRef.module);
+  const declaration =
+    module === undefined
+      ? undefined
+      : resolveReference(
+          customElementsManifest,
+          module,
+          declarationRef,
+          packageName,
+          ''
+        );
+  const elementDescriptionHtml = declaration?.description
+    ? marked(declaration?.description)
+    : '';
+
+  const elementData: ElementData = {
     packageName: packageName,
     elementName: elementName,
     declarationReference: customElement.declaration,
     customElementExport: customElement.customElementExport,
     manifest: customElementsManifest,
+    elementDescriptionHtml,
   };
 
   // Set location because wco-nav-bar reads pathname from it. URL isn't