From afaac0f6cc097d41fce979f7e053f4b5d416f136 Mon Sep 17 00:00:00 2001
From: Daniel O'Connell <github@ahiru.pl>
Date: Thu, 15 Feb 2024 15:56:01 +0100
Subject: [PATCH 1/3] glossary css

---
 app/components/Article/Contents.tsx | 12 ++++++++++--
 app/components/Article/article.css  | 10 +++++++++-
 app/server-utils/stampy.ts          |  7 +++++--
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/app/components/Article/Contents.tsx b/app/components/Article/Contents.tsx
index f4965e25..5469b27f 100644
--- a/app/components/Article/Contents.tsx
+++ b/app/components/Article/Contents.tsx
@@ -125,8 +125,16 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
         addPopup(
           e as HTMLSpanElement,
           `glossary-${entry.term}`,
-          `<div>${entry.contents}</div>` +
-            (entry.pageid ? `<br><a href="/${entry.pageid}">See more...</a>` : '')
+          '<div class="glossary-popup flex-container">' +
+            '   <div class="contents">' +
+            `       <h3>${entry.term}</h3>` +
+            `       <div class="padding-bottom-24">${entry.contents}</div>` +
+            (entry.pageid
+              ? `<a href="/${entry.pageid}" class="button secondary">View full definition</a>`
+              : '') +
+            '   </div>' +
+            (entry.image ? `<img src="${entry.image}" alt="${entry.term}"/>` : '') +
+            '</div>'
         )
     })
 
diff --git a/app/components/Article/article.css b/app/components/Article/article.css
index 19012360..5e21c95d 100644
--- a/app/components/Article/article.css
+++ b/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;
diff --git a/app/server-utils/stampy.ts b/app/server-utils/stampy.ts
index ab7c1c5c..f2757dcf 100644
--- a/app/server-utils/stampy.ts
+++ b/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()
   )

From ce8ddeacca13dd8ee4167c1cc180b4049c9588a5 Mon Sep 17 00:00:00 2001
From: Daniel O'Connell <github@ahiru.pl>
Date: Thu, 15 Feb 2024 17:53:45 +0100
Subject: [PATCH 2/3] More proper-like glossary popups

---
 app/components/Article/Contents.tsx | 52 ++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/app/components/Article/Contents.tsx b/app/components/Article/Contents.tsx
index 5469b27f..ab294dfa 100644
--- a/app/components/Article/Contents.tsx
+++ b/app/components/Article/Contents.tsx
@@ -79,6 +79,42 @@ const glossaryInjecter = (pageid: string, glossary: Glossary) => {
   }
 }
 
+const glossaryContents = ({term, pageid, contents, image}: GlossaryEntry) => {
+  const glossaryPopup = document.createElement('div')
+  glossaryPopup.className = 'glossary-popup flex-container'
+
+  const contentsDiv = document.createElement('div')
+  contentsDiv.className = 'contents'
+
+  const termHeading = document.createElement('h3')
+  termHeading.textContent = term
+  contentsDiv.appendChild(termHeading)
+
+  const contentsPaddingDiv = document.createElement('div')
+  contentsPaddingDiv.className = 'padding-bottom-24'
+  contentsPaddingDiv.innerHTML = contents
+  contentsDiv.appendChild(contentsPaddingDiv)
+
+  if (pageid) {
+    const viewFullLink = document.createElement('a')
+    viewFullLink.href = `/${pageid}`
+    viewFullLink.className = 'button secondary'
+    viewFullLink.textContent = 'View full definition'
+    contentsDiv.appendChild(viewFullLink)
+  }
+
+  glossaryPopup.appendChild(contentsDiv)
+
+  if (image) {
+    const imageElem = document.createElement('img')
+    imageElem.src = image
+    glossaryPopup.appendChild(imageElem)
+  }
+
+  console.log(glossaryPopup.outerHTML)
+  return glossaryPopup.outerHTML
+}
+
 const insertGlossary = (pageid: string, glossary: Glossary) => {
   const injecter = glossaryInjecter(pageid, glossary)
 
@@ -121,21 +157,7 @@ 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 class="glossary-popup flex-container">' +
-            '   <div class="contents">' +
-            `       <h3>${entry.term}</h3>` +
-            `       <div class="padding-bottom-24">${entry.contents}</div>` +
-            (entry.pageid
-              ? `<a href="/${entry.pageid}" class="button secondary">View full definition</a>`
-              : '') +
-            '   </div>' +
-            (entry.image ? `<img src="${entry.image}" alt="${entry.term}"/>` : '') +
-            '</div>'
-        )
+      entry && addPopup(e as HTMLSpanElement, `glossary-${entry.term}`, glossaryContents(entry))
     })
 
     return fragment

From 77ed3be99fd4c529e97adff733b09ba63be2955f Mon Sep 17 00:00:00 2001
From: Daniel O'Connell <github@ahiru.pl>
Date: Thu, 15 Feb 2024 18:43:02 +0100
Subject: [PATCH 3/3] pr changes

---
 app/components/Article/Contents.tsx           | 54 ++++++-------------
 public/assets/{ arrow.svg => arrow.svg}       |  0
 .../{ plane-large.svg => plane-large.svg}     |  0
 3 files changed, 17 insertions(+), 37 deletions(-)
 rename public/assets/{ arrow.svg => arrow.svg} (100%)
 rename public/assets/{ plane-large.svg => plane-large.svg} (100%)

diff --git a/app/components/Article/Contents.tsx b/app/components/Article/Contents.tsx
index ab294dfa..09cdb6e6 100644
--- a/app/components/Article/Contents.tsx
+++ b/app/components/Article/Contents.tsx
@@ -79,42 +79,6 @@ const glossaryInjecter = (pageid: string, glossary: Glossary) => {
   }
 }
 
-const glossaryContents = ({term, pageid, contents, image}: GlossaryEntry) => {
-  const glossaryPopup = document.createElement('div')
-  glossaryPopup.className = 'glossary-popup flex-container'
-
-  const contentsDiv = document.createElement('div')
-  contentsDiv.className = 'contents'
-
-  const termHeading = document.createElement('h3')
-  termHeading.textContent = term
-  contentsDiv.appendChild(termHeading)
-
-  const contentsPaddingDiv = document.createElement('div')
-  contentsPaddingDiv.className = 'padding-bottom-24'
-  contentsPaddingDiv.innerHTML = contents
-  contentsDiv.appendChild(contentsPaddingDiv)
-
-  if (pageid) {
-    const viewFullLink = document.createElement('a')
-    viewFullLink.href = `/${pageid}`
-    viewFullLink.className = 'button secondary'
-    viewFullLink.textContent = 'View full definition'
-    contentsDiv.appendChild(viewFullLink)
-  }
-
-  glossaryPopup.appendChild(contentsDiv)
-
-  if (image) {
-    const imageElem = document.createElement('img')
-    imageElem.src = image
-    glossaryPopup.appendChild(imageElem)
-  }
-
-  console.log(glossaryPopup.outerHTML)
-  return glossaryPopup.outerHTML
-}
-
 const insertGlossary = (pageid: string, glossary: Glossary) => {
   const injecter = glossaryInjecter(pageid, glossary)
 
@@ -157,7 +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}`, glossaryContents(entry))
+      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
diff --git a/public/assets/ arrow.svg b/public/assets/arrow.svg
similarity index 100%
rename from public/assets/ arrow.svg
rename to public/assets/arrow.svg
diff --git a/public/assets/ plane-large.svg b/public/assets/plane-large.svg
similarity index 100%
rename from public/assets/ plane-large.svg
rename to public/assets/plane-large.svg