From 3bc1fad58dfe4405fd42518e7002c80944707d4b Mon Sep 17 00:00:00 2001
From: Fraser <tomatoesneverlie@gmail.com>
Date: Wed, 9 Aug 2023 00:26:10 -0400
Subject: [PATCH] display hover text, link to aisafety.info

---
 web/src/glossary.tsx       | 13 +++++++++++--
 web/src/styles/globals.css | 13 +++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/web/src/glossary.tsx b/web/src/glossary.tsx
index adbbd30..5b40aad 100644
--- a/web/src/glossary.tsx
+++ b/web/src/glossary.tsx
@@ -16,7 +16,7 @@ type GlossaryItem = {
 export const GlossaryP: React.FC<{content: string}> = ({content}) => {
     const [glossary, setGlossary] = useState<Map<string, GlossaryItem> | null>(null);
     const [glossaryRegex, setGlossaryRegex] = useState<RegExp | null>(null);
-    
+
     useEffect(() => {
         if (glossary === null) {
             const glossary = new Map(Object.entries(GLOSSARY_JSON));
@@ -37,12 +37,21 @@ export const GlossaryP: React.FC<{content: string}> = ({content}) => {
     // once and use that instead.
 
     return <span dangerouslySetInnerHTML={{__html: content.replace(glossaryRegex!, (match) => {
+
         const item = glossary.get(match.toLowerCase());
         if (item == undefined) return match;
 
         const hover_content = item.contents;
         const pageid = item.pageid;
-        return "AAAAAAAAA";
+
+        return `
+            <a href="https://aisafety.info/?state=${pageid}"
+               target="_blank"
+               class="glossary-link">
+                 ${match}
+            </a>
+            <div class="glossary-hover">${hover_content}</div>
+        `;
 
     })}} />;
 }
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 8715069..e56d570 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -37,3 +37,16 @@ ol {
   @apply list-decimal;
 }
 
+
+/* glossary terms with a definition that shows on hover */
+.glossary-hover {
+  position: absolute;
+  display: none;
+  width: 300px;
+  @apply bg-white hover:bg-gray-300 h-fit px-3;
+  @apply border border-gray-300;
+}
+
+.glossary-link:hover + .glossary-hover {
+  display: block;
+}