glossary css

app/components/Article/Contents.tsx

@@ -121,13 +121,23 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
      */
     fragment.querySelectorAll('.glossary-entry').forEach((e) => {
       const entry = glossaryEntry(e)
-      entry &&
-        addPopup(
-          e as HTMLSpanElement,
-          `glossary-${entry.term}`,
-          `<div>${entry.contents}</div>` +
-            (entry.pageid ? `<br><a href="/${entry.pageid}">See more...</a>` : '')
-        )
+      if (!entry) return undefined
+      const link =
+        entry.pageid &&
+        `<a href="/${entry.pageid}" class="button secondary">View full definition</a>`
+      const image = entry.image && `<img src="${entry.image}"/>`
+      addPopup(
+        e as HTMLSpanElement,
+        `glossary-${entry.term}`,
+        `<div class="glossary-popup flex-container black">
+              <div class="contents">
+                   <h3>${entry.term}</h3>
+                   <div class="padding-bottom-24">${entry.contents}</div>
+                   ${link || ''}
+              </div>
+              ${image || ''}
+          </div>`
+      )
     })
 
     return fragment

app/components/Article/article.css

@@ -62,7 +62,6 @@ article .link-popup {
   position: absolute;
   display: inline-block;
   font: var(--baseFont);
-  padding: 5px 10px;
   margin-left: 10px;
   max-width: 35%;
   z-index: 2;
@@ -77,6 +76,15 @@ article .link-popup::after {
   right: 100%;
 }
 
+article .link-popup .glossary-popup > .contents {
+  padding: var(--spacing-24) var(--spacing-40) var(--spacing-24);
+}
+article .link-popup .glossary-popup > img {
+  width: 100%;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
 article .link-popup.shown {
   visibility: visible;
   opacity: 1;

app/server-utils/stampy.ts

@@ -49,6 +49,7 @@ export type GlossaryEntry = {
   term: string
   pageid: PageId
   contents: string
+  image: string
 }
 export type Glossary = {
   [key: string]: GlossaryEntry
@@ -147,6 +148,7 @@ type GlossaryRow = CodaRowCommon & {
     phrase: string
     aliases: string
     'UI ID': string
+    image: Entity
   }
 }
 type BannersRow = CodaRowCommon & {
@@ -326,12 +328,13 @@ export const loadGlossary = withCache('loadGlossary', async () => {
         const phrases = [values.phrase, ...values.aliases.split('\n')]
         const item = {
           pageid,
+          image: values.image?.url,
           contents: renderText(pageid, extractText(values.definition)),
         }
         return phrases
-          .map((i) => extractText(i.toLowerCase()))
+          .map((i) => extractText(i))
           .filter(Boolean)
-          .map((phrase) => [phrase, {term: phrase, ...item}])
+          .map((phrase) => [phrase.toLowerCase(), {term: phrase, ...item}])
       })
       .flat()
   )