Definition overlay

Author: Dan Costello

app/components/Glossary.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Popover from './Popover';
+import { glossaryDefinitions } from './glossary-definitions';
+
+type GlossaryProps = {
+  children: string;
+};
+
+const Glossary = ({ children }: GlossaryProps) => {
+  const term = children.trim();
+  console.log(term);
+  const definition = glossaryDefinitions[term] || 'No definition found.';
+  return (
+    <Popover content={definition}>
+      <span style={{ textDecoration: 'underline dotted', cursor: 'help' }}>{term}</span>
+    </Popover>
+  );
+};
+
+export default Glossary; 

app/components/Popover.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+
+const Popover = ({ children, content }: { children: React.ReactNode, content: React.ReactNode }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const toggleVisibility = () => setIsVisible(v => !v);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as Node)
+      ) {
+        setIsVisible(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <span className="popover-container">
+      <button
+        ref={triggerRef}
+        onClick={toggleVisibility}
+        className="popover-trigger"
+        aria-haspopup="true"
+        aria-expanded={isVisible}
+        aria-controls="popover-content"
+        type="button"
+      >
+        {children}
+      </button>
+      {isVisible && (
+        <div
+          id="popover-content"
+          ref={popoverRef}
+          className="popover-content"
+          role="dialog"
+          aria-modal="true"
+        >
+          {content}
+        </div>
+      )}
+    </span>
+  );
+};
+
+export default Popover; 

app/components/glossary-definitions.ts

@@ -0,0 +1,6 @@
+export const glossaryDefinitions: Record<string, string> = {
+  accessor: "A function or method that retrieves data from a source.",
+  mutator: "A function or method that modifies data.",
+  token: "A secure, opaque reference to sensitive data.",
+  // Add more terms as needed
+}; 

app/global.css

@@ -55,3 +55,37 @@
   );
   background-repeat: no-repeat;
 }
+
+/* Popover styles */
+.popover-container {
+  position: relative;
+  display: inline-block;
+}
+
+.popover-trigger {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  text-decoration: underline dotted;
+}
+
+.popover-content {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 10px;
+  background-color: var(--color-fd-popover, white);
+  color: var(--color-fd-popover-foreground, black);
+  border: 1px solid var(--color-fd-border, #ccc);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  padding: 15px;
+  z-index: 1000;
+  white-space: normal;
+  min-width: 200px;
+  max-width: 320px;
+}

…ta-access/definitions/access-policies.md …a-access/definitions/access-policies.mdxcontent/docs/data-access/definitions/access-policies.md renamed to content/docs/data-access/definitions/access-policies.mdx content/docs/data-access/definitions/access-policies.md renamed to content/docs/data-access/definitions/access-policies.mdx

@@ -1,10 +1,12 @@
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 import type { MDXComponents } from 'mdx/types';
+import Glossary from './app/components/Glossary';
 
 // use this function to get MDX components, you will need it for rendering MDX
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
     ...defaultMdxComponents,
+    glossary: Glossary,
     ...components,
   };
 }