render markdown

src/assets/main.scss

@@ -32,6 +32,7 @@ $modal-card-title-size: 1.2rem;
 // Set placeholder contrast to ~4.5:1 for WCAG AA compliance
 $input-placeholder-color: #757575;
 $input-disabled-placeholder-color: #707070;
+
 .input::placeholder, .textarea::placeholder, .select select::placeholder {
     opacity: 1;
 }
@@ -115,6 +116,11 @@ a:focus {
 
 // Add html and body styles to :host for webcomponents
 :host {
+  --primary: #{$wr-green};
+  --info: #{$wr-light-bg};
+  --warning: #{$wr-yellow};
+  --link: #{$wr-dark-blue};
+
   //background-color: $body-background-color;
   font-size: $body-size;
   -moz-osx-font-smoothing: grayscale;
@@ -130,6 +136,7 @@ a:focus {
   line-height: $body-line-height;
 
   box-sizing: border-box;
+
 }
 
 // Make available to screen readers while hiding element visually:

src/coll-description.ts

@@ -0,0 +1,61 @@
+import { css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
+import { micromark } from "micromark";
+import {
+  gfmStrikethrough,
+  gfmStrikethroughHtml,
+} from "micromark-extension-gfm-strikethrough";
+
+@customElement("wr-coll-description")
+export class CollectionDescription extends LitElement {
+  static styles = [
+    css`
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-size: 1rem;
+      }
+
+      a {
+        color: var(--link);
+      }
+
+      a:hover,
+      a:active {
+        text-decoration: none;
+      }
+
+      img {
+        max-width: 100%;
+      }
+
+      p {
+        line-height: inherit;
+      }
+
+      p:first-child {
+        margin-top: 0;
+      }
+
+      p:last-child {
+        margin-bottom: 0;
+      }
+    `,
+  ];
+
+  @property({ type: String })
+  value = "";
+
+  render() {
+    return staticHtml`${unsafeStatic(
+      micromark(this.value, {
+        extensions: [gfmStrikethrough()],
+        htmlExtensions: [gfmStrikethroughHtml()],
+      }),
+    )}`;
+  }
+}

src/index.ts

@@ -13,6 +13,7 @@ import { Sorter } from "./sorter";
 import { SWManager } from "./swmanager";
 import { URLResources } from "./url-resources";
 import { Embed } from "./embed";
+import "./coll-description";
 import "./shoelace";
 
 export {

src/pages.ts

@@ -539,9 +539,10 @@ class Pages extends LitElement {
 
       .index-bar-description {
         margin-bottom: var(--sl-spacing-x-small);
+        line-height: var(--sl-line-height-normal);
         flex: 1 1 auto;
         overflow: auto;
-        line-height: var(--sl-line-height-normal);
+        border-bottom: 1px solid var(--sl-panel-border-color);
       }
     `);
   }
@@ -654,7 +655,7 @@ class Pages extends LitElement {
                     ? "is-hidden-mobile"
                     : "is-sr-only"}"
                 >
-                  Collection Title
+                  Collection Name
                 </div>
                 <div
                   class="index-bar-title"
@@ -670,7 +671,9 @@ class Pages extends LitElement {
                         class="index-bar-description  is-hidden-mobile"
                         @dblclick="${() => (this.editing = true)}"
                       >
-                        ${this.collInfo!.description}
+                        <wr-coll-description
+                          value=${this.collInfo!.description}
+                        ></wr-coll-description>
                       </div>`
                   : html``}`}
           ${this.editable