fix: Support description markdown and longer length (#385)

Fixes https://github.com/webrecorder/replayweb.page/issues/381

## Changes

- Renders description as markdown
- Shows "Collection name" and "About this collection" labels when
description is present
- Fixes overflow issue where bottom few pixels of embed is cut off
- Hides description in mobile view

Co-authored-by: emma <hi@emma.cafe>

src/appmain.ts

@@ -179,7 +179,8 @@ export class ReplayWebApp extends LitElement {
         flex-direction: column;
       }
       wr-item {
-        height: 100%;
+        flex: 1 1 auto;
+        overflow: hidden;
       }
       .navbar {
         padding: 0 0.5em;

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

@@ -341,7 +341,8 @@ class Pages extends LitElement {
     return wrapCss(css`
       :host {
         width: 100%;
-        height: 100%;
+        flex: 1 1 auto;
+        overflow: hidden;
         display: flex;
         min-width: 0px;
         flex-direction: column;
@@ -396,10 +397,19 @@ class Pages extends LitElement {
         position: relative;
       }
 
-      .index-bar-title {
-        font-size: 1.25rem;
+      .index-bar-label {
         text-transform: uppercase;
-        margin-bottom: 1rem;
+        font-size: var(--sl-font-size-x-small);
+        font-weight: var(--sl-font-weight-semibold);
+        color: var(--sl-color-neutral-500);
+        margin-bottom: var(--sl-spacing-2x-small);
+        line-height: 1;
+      }
+
+      .index-bar-title {
+        font-size: var(--sl-font-size-large);
+        font-weight: var(--sl-font-weight-semibold);
+        margin-bottom: var(--sl-spacing-large);
         word-break: break-word;
       }
 
@@ -528,8 +538,11 @@ class Pages extends LitElement {
       }
 
       .index-bar-description {
-        margin-bottom: 20px;
-        font-style: italic;
+        margin-bottom: var(--sl-spacing-x-small);
+        line-height: var(--sl-line-height-normal);
+        flex: 1 1 auto;
+        overflow: auto;
+        border-bottom: 1px solid var(--sl-panel-border-color);
       }
     `);
   }
@@ -638,18 +651,30 @@ class Pages extends LitElement {
                 </form>
               `
             : html` <div
+                  class="index-bar-label ${this.collInfo!.description
+                    ? "is-hidden-mobile"
+                    : "is-sr-only"}"
+                >
+                  Collection Name
+                </div>
+                <div
                   class="index-bar-title"
                   @dblclick="${() => (this.editing = true)}"
                 >
                   ${this.collInfo!.name || this.collInfo!.title}
                 </div>
                 ${this.collInfo!.description
-                  ? html`<div
-                      class="index-bar-description"
-                      @dblclick="${() => (this.editing = true)}"
-                    >
-                      ${this.collInfo!.description}
-                    </div>`
+                  ? html` <div class="index-bar-label  is-hidden-mobile">
+                        About This Collection
+                      </div>
+                      <div
+                        class="index-bar-description  is-hidden-mobile"
+                        @dblclick="${() => (this.editing = true)}"
+                      >
+                        <wr-coll-description
+                          value=${this.collInfo!.description}
+                        ></wr-coll-description>
+                      </div>`
                   : html``}`}
           ${this.editable
             ? html`<fa-icon class="editIcon" .svg="${fasEdit}"></fa-icon>`