Refactor code to support tooltips in en-us and ja-jp

Author: josh-wong

scripts/generate-glossary-json.js

@@ -1,9 +1,12 @@
 const fs = require('fs');
 const path = require('path');
-const glossaryFilePath = path.join(__dirname, '../src/pages/glossary.mdx');
-const outputJsonPath = path.join(__dirname, '../static/glossary.json');
 
-const generateGlossaryJson = () => {
+const glossaries = [
+  { src: '../docs/glossary.mdx', output: '../build/docs/glossary.json' },
+  { src: '../i18n/versioned_docs/ja-jp/docusaurus-plugin-content-docs/current/glossary.mdx', output: '../build/ja-jp/glossary.json' }
+];
+
+const generateGlossaryJson = (glossaryFilePath, outputJsonPath) => {
   const glossaryContent = fs.readFileSync(glossaryFilePath, 'utf-8');
   const glossaryLines = glossaryContent.split('\n');
 
@@ -12,20 +15,17 @@ const generateGlossaryJson = () => {
 
   glossaryLines.forEach((line) => {
     if (line.startsWith('## ')) {
-      // Extract the term (strip the '## ' prefix)
       currentTerm = line.replace('## ', '').trim();
     } else if (line.startsWith('# ')) {
-      // Skip heading 1 (`# `) lines
-      currentTerm = ''; // Reset the current term for heading 1 lines
+      currentTerm = ''; // Reset the term for heading 1 lines.
     } else if (line.trim() !== '' && currentTerm !== '') {
-      // Add the definition to the current term (only if a valid term is set)
       glossary[currentTerm] = line.trim();
     }
   });
 
-  // Write glossary to glossary.json
   fs.writeFileSync(outputJsonPath, JSON.stringify(glossary, null, 2));
-  console.log('glossary.json generated successfully.');
+  console.log(`${outputJsonPath} generated successfully.`);
 };
 
-generateGlossaryJson();
+// Generate both glossaries.
+glossaries.forEach(({ src, output }) => generateGlossaryJson(path.join(__dirname, src), path.join(__dirname, output)));

src/components/GlossaryInjector.tsx

@@ -10,89 +10,141 @@ const GlossaryInjector: React.FC<GlossaryInjectorProps> = ({ children }) => {
   const [glossary, setGlossary] = useState<{ [key: string]: string }>({});
 
   useEffect(() => {
-    // Fetch glossary.json on component mount.
-    fetch('/glossary.json')
-      .then((res) => res.json())
+    const url = window.location.pathname;
+    let glossaryPath = '/docs/glossary.json'; // Use the English version as the default glossary.
+
+    if (process.env.NODE_ENV === 'production') { // The glossary tooltip works only in production environments.
+      glossaryPath = url.startsWith('/ja-jp/docs') ? '/ja-jp/glossary.json' : '/docs/glossary.json';
+    } else {
+      glossaryPath = url.startsWith('/ja-jp/docs') ? '/ja-jp/glossary.json' : '/docs/glossary.json';
+    }
+
+    fetch(glossaryPath)
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`HTTP error! status: ${res.status}`);
+        }
+        return res.json();
+      })
       .then(setGlossary)
       .catch((err) => console.error('Failed to load glossary:', err));
   }, []);
 
   useEffect(() => {
     if (Object.keys(glossary).length === 0) return;
 
-    const terms = Object.keys(glossary);
+    // Sort terms in descending order by length to prioritize multi-word terms.
+    const terms = Object.keys(glossary).sort((a, b) => b.length - a.length);
+    const processedTerms = new Set<string>(); // Set to track processed terms.
 
     const wrapTermsInTooltips = (node: HTMLElement) => {
       const textNodes = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, null, false);
       let currentNode: Node | null;
 
-      // Store modifications for later processing.
       const modifications: { originalNode: Node; newNodes: Node[] }[] = [];
 
       while ((currentNode = textNodes.nextNode())) {
         const parentElement = currentNode.parentElement;
 
-        // Only wrap terms if the parent is a <p> or <li> element.
-        if (parentElement && (parentElement.tagName.toLowerCase() === 'p' || parentElement.tagName.toLowerCase() === 'li')) {
-          const newNodes: Node[] = []; // Array to hold the new nodes.
-          let lastIndex = 0; // Track the last index for proper splitting.
+        // Check if the parent element is a tab title.
+        const isTabTitle = parentElement && parentElement.closest('.tabs__item'); // Adjust the selector as necessary.
 
-          terms.forEach((term) => {
-            const regex = new RegExp(`\\b(${term})\\b`, 'gi'); // Case-insensitive match
-            let match: RegExpExecArray | null;
+        // Check if the parent element is a code block.
+        const isCodeBlock = parentElement && parentElement.closest('.prism-code'); // Adjust the selector as necessary.
 
-            // If a match is found
-            while ((match = regex.exec(currentNode.textContent || ''))) {
-              // Add text before the match.
-              if (lastIndex < match.index) {
-                newNodes.push(document.createTextNode(currentNode.textContent!.slice(lastIndex, match.index)));
-              }
+        // Check if the parent element is a Card.
+        const isCard = parentElement && parentElement.closest('.card__body'); // Adjust the selector as necessary.
 
-              // Create and push the GlossaryTooltip for the matched term.
-              const tooltipWrapper = document.createElement('span');
-              tooltipWrapper.setAttribute('data-term', term);
-              tooltipWrapper.className = 'glossary-term'; // Add a class for styling.
+        // Check if the parent element is a Mermaid diagram.
+        const isMermaidDiagram = parentElement && parentElement.closest('.docusaurus-mermaid-container'); // Adjust the selector as necessary.
+
+        // Only wrap terms in tooltips if the parent is within the target div and not in headings or tab titles.
+        if (
+          parentElement &&
+          parentElement.closest('.theme-doc-markdown.markdown') &&
+          !/^H[1-6]$/.test(parentElement.tagName) && // Skip headings (H1 to H6).
+          !isTabTitle && // Skip tab titles.
+          !isCodeBlock && // Skip code blocks.
+          !isCard && // Skip Cards.
+          !isMermaidDiagram // Skip Mermaid diagrams.
+        ) {
+          let currentText = currentNode.textContent!;
+          const newNodes: Node[] = [];
+          let hasReplacements = false;
 
-              // Get the definition for the matched term.
-              const definition = glossary[term]; // Access the definition from the glossary.
+          // Create a regex pattern to match all terms (case-sensitive).
+          const regexPattern = terms.map(term => `(${term})`).join('|');
+          const regex = new RegExp(regexPattern, 'g');
 
-              // Render the Tooltip with the definition text.
-              ReactDOM.render(<GlossaryTooltip term={term} definition={definition}>{match[0]}</GlossaryTooltip>, tooltipWrapper);
+          let lastIndex = 0;
+          let match: RegExpExecArray | null;
 
-              newNodes.push(tooltipWrapper); // Push tooltip wrapper.
+          while ((match = regex.exec(currentText))) {
+            const matchedTerm = match[0];
 
-              // Update lastIndex to the end of the match.
-              lastIndex = match.index + match[0].length;
+            if (lastIndex < match.index) {
+              newNodes.push(document.createTextNode(currentText.slice(lastIndex, match.index)));
             }
-          });
 
-          // Add any remaining text after the last match.
-          if (lastIndex < currentNode.textContent!.length) {
-            newNodes.push(document.createTextNode(currentNode.textContent!.slice(lastIndex)));
+            const isFirstMention = !processedTerms.has(matchedTerm);
+            const isLink = parentElement && parentElement.tagName === 'A'; // Check if the parent is a link.
+
+            if (isFirstMention && !isLink) {
+              // Create a tooltip only if it's the first mention and not a link.
+              const tooltipWrapper = document.createElement('span');
+              tooltipWrapper.setAttribute('data-term', matchedTerm);
+              tooltipWrapper.className = 'glossary-term';
+
+              const definition = glossary[matchedTerm]; // Exact match from glossary.
+
+              ReactDOM.render(
+                <GlossaryTooltip term={matchedTerm} definition={definition}>
+                  {matchedTerm}
+                </GlossaryTooltip>,
+                tooltipWrapper
+              );
+
+              newNodes.push(tooltipWrapper);
+              processedTerms.add(matchedTerm); // Mark this term as processed.
+            } else if (isLink) {
+              // If it's a link, we skip this mention but do not mark it as processed.
+              newNodes.push(document.createTextNode(matchedTerm));
+            } else {
+              // If it's not the first mention, just add the plain text.
+              newNodes.push(document.createTextNode(matchedTerm));
+            }
+
+            lastIndex = match.index + matchedTerm.length;
+            hasReplacements = true;
+          }
+
+          if (lastIndex < currentText.length) {
+            newNodes.push(document.createTextNode(currentText.slice(lastIndex)));
           }
 
-          // If new nodes are created, we need to store the modification.
-          if (newNodes.length > 0) {
+          if (hasReplacements) {
             modifications.push({ originalNode: currentNode, newNodes });
           }
         }
       }
 
-      // Apply the modifications outside of the tree walker iteration.
+      // Replace the original nodes with new nodes.
       modifications.forEach(({ originalNode, newNodes }) => {
         const parentElement = originalNode.parentElement;
         if (parentElement) {
           newNodes.forEach((newNode) => {
             parentElement.insertBefore(newNode, originalNode);
           });
-          parentElement.removeChild(originalNode); // Remove the original text node.
+          parentElement.removeChild(originalNode);
         }
       });
     };
 
-    // Process <p> and <li> elements in the document body.
-    const paragraphsAndLists = document.querySelectorAll('p, li');
-    paragraphsAndLists.forEach((node) => wrapTermsInTooltips(node));
+    // Target the specific div with the class "theme-doc-markdown markdown".
+    const targetDiv = document.querySelector('.theme-doc-markdown.markdown');
+    if (targetDiv) {
+      wrapTermsInTooltips(targetDiv);
+    }
   }, [glossary]);
 
   return <>{children}</>;