glossary css

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