update brand documentation site with new ucdlib-md component

brand-app/components.js

@@ -19,3 +19,4 @@ import "./pages/page-ucdlib-pages";
 import "./pages/page-ucdlib-sils-permalink";
 import "./pages/page-ucdlib-branding-bar";
 import "./pages/page-ucdlib-sils-search-redirect";
+import "./pages/page-ucdlib-md";

brand-app/pages/page-ucdlib-md.js

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+import {render, styles} from "./page-ucdlib-md.tpl.js";
+
+import {Mixin, MainDomElement} from '../../elements/utils/mixins';
+import {BrandedPageElement, MdElement} from "../utils/index.js";
+
+export default class PageUcdlibMd extends Mixin(LitElement)
+  .with(MainDomElement, BrandedPageElement, MdElement) {
+
+  static get properties() {
+    return {
+
+    };
+  }
+
+  static get styles() {
+    return styles();
+  }
+
+  constructor() {
+    super();
+    this.render = render.bind(this);
+  }
+
+}
+
+customElements.define('page-ucdlib-md', PageUcdlibMd);

brand-app/pages/page-ucdlib-md.tpl.js

@@ -0,0 +1,65 @@
+import { html, css } from 'lit';
+
+export function styles() {
+  const elementStyles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  return [elementStyles];
+}
+
+export function render() { 
+  return html`
+    ${this.pageTitle("Parse Markdown to HTML")}
+    <p>The <code>ucdlib-md</code> element parses Markdown text and renders HTML.</p>
+
+    <h2>Using the component</h2>
+
+    <p>There are a couple ways:</p>
+    
+    ${this.examplePanel(html`
+      <ucdlib-md id="md">
+        <ucdlib-md-content>
+          Enter your markdown here
+          ## h2
+          > blockquote
+          **bold** text or *italicized*
+          - list
+          - etc
+        </ucdlib-md-content>
+      </ucdlib-md>
+    `, true)}
+    
+    <p>
+      You can also omit the <code>ucdlib-md-content</code> element and instead use 
+      the <code>data</code> property to set the markdown text. For instance, <br>
+      <code>document.querySelector('ucdlib-md').data = '## header content \n a paragraph with **bold** text.'</code>
+    </p>
+
+    <h2>Overriding the default renderer</h2>
+    <p>
+      It's also possible to override how some elements are rendered. Similar to the <code>data</code> property, set the
+      <code>renderer</code> property to an object holding the specific elements you'd like to override.
+    </p>
+
+    ${this.examplePanel(html`
+      document.querySelector('ucdlib-md').renderer = '{ 
+        header(text, level) {
+          let renderedContent = '';
+          if (level === 'h1') {
+            // something custom (ie custom class)
+          } else {
+            // combine h+level around text
+          }       
+          return renderedContent;
+        }
+        // optionally other element types (comma-separated)
+      }'
+    `, true)}
+
+    <p>The list of available element functions can be found on the <a href="https://marked.js.org/using_pro#renderer" target="_blank">Marked documentation page</a>.</p>
+
+  `;
+}

brand-app/ucdlib-theme-brand-app.tpl.js

@@ -86,6 +86,7 @@ return html`
             <li><a href="#ucdlib-sils-search-redirect">Search Redirect</a></li>
             <li><a href="#ucdlib-sils-permalink">SILS Permalinks</a></li>
           </ul>
+          <li><a href="#ucdlib-md">Markdown</a></li>
         </ul>
 
         <ul link-text="Brand Guides" href="#overview">