docusaurus-plugin-glossary 1.2.0 → 1.3.2

package/README.md

@@ -2,7 +2,7 @@
 
 A comprehensive Docusaurus plugin that provides glossary functionality with an auto-generated glossary page, searchable terms, and inline term tooltips.
 
-> Compatibility: Fully compatible with Docusaurus v3 (MDX v3). If you were on a v2-era fork, please upgrade to the latest 1.x release of this plugin. No manual MDX pipeline wiring is required when `autoLinkTerms` is enabled (default).
+> Compatibility: Fully compatible with Docusaurus v3 (MDX v3). If you were on a v2-era fork, please upgrade to the latest 1.x release of this plugin.
 
 ## Features
 
@@ -26,15 +26,47 @@ A comprehensive Docusaurus plugin that provides glossary functionality with an a
 2. **Add to your `docusaurus.config.js`:**
 
    ```javascript
+   const glossaryPlugin = require('docusaurus-plugin-glossary');
+
    module.exports = {
      // ... other config
+     presets: [
+       [
+         '@docusaurus/preset-classic',
+         {
+           docs: {
+             // Add the remark plugin to enable auto-linking in docs
+             remarkPlugins: [
+               glossaryPlugin.getRemarkPlugin(
+                 {
+                   glossaryPath: 'glossary/glossary.json',
+                   routePath: '/glossary',
+                 },
+                 { siteDir: __dirname }
+               ),
+             ],
+           },
+           pages: {
+             // Add the remark plugin to enable auto-linking in pages
+             remarkPlugins: [
+               glossaryPlugin.getRemarkPlugin(
+                 {
+                   glossaryPath: 'glossary/glossary.json',
+                   routePath: '/glossary',
+                 },
+                 { siteDir: __dirname }
+               ),
+             ],
+           },
+         },
+       ],
+     ],
      plugins: [
        [
          'docusaurus-plugin-glossary',
          {
            glossaryPath: 'glossary/glossary.json', // Path to your glossary file
            routePath: '/glossary', // URL path for glossary page
-           autoLinkTerms: true, // Automatically link terms (default: true)
          },
        ],
      ],
@@ -42,7 +74,7 @@ A comprehensive Docusaurus plugin that provides glossary functionality with an a
    };
    ```
 
-   **That’s it!** On Docusaurus v3, the remark plugin is automatically configured via the plugin’s `configureMarkdown` hook — no manual `markdown.remarkPlugins` setup needed.
+   **Note:** You need to configure the remark plugin in both the plugin AND the preset (for docs/pages) to enable auto-linking of terms.
 
 3. **Create your glossary file at `glossary/glossary.json`:**
 
@@ -127,52 +159,90 @@ Create a JSON file at `glossary/glossary.json` (or your configured path) in your
 Add the plugin to your `docusaurus.config.js`:
 
 ```javascript
+const glossaryPlugin = require('docusaurus-plugin-glossary');
+
 module.exports = {
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          // Add the remark plugin to enable auto-linking in docs
+          remarkPlugins: [
+            glossaryPlugin.getRemarkPlugin(
+              {
+                glossaryPath: 'glossary/glossary.json',
+                routePath: '/glossary',
+              },
+              { siteDir: __dirname }
+            ),
+          ],
+        },
+        pages: {
+          // Add the remark plugin to enable auto-linking in pages
+          remarkPlugins: [
+            glossaryPlugin.getRemarkPlugin(
+              {
+                glossaryPath: 'glossary/glossary.json',
+                routePath: '/glossary',
+              },
+              { siteDir: __dirname }
+            ),
+          ],
+        },
+      },
+    ],
+  ],
   plugins: [
     [
       'docusaurus-plugin-glossary',
       {
         glossaryPath: 'glossary/glossary.json', // Path to your glossary file
         routePath: '/glossary', // URL path for the glossary page
-        autoLinkTerms: true, // Automatically detect and link terms (default: true)
       },
     ],
   ],
 };
 ```
 
-**Automatic Configuration:** The remark plugin is automatically configured when `autoLinkTerms` is `true` (the default). You don't need to manually configure `markdown.remarkPlugins`!
+**Required Configuration:** To enable automatic term detection and linking, you must configure the remark plugin in your preset (as shown above). The plugin provides a `getRemarkPlugin` helper to make this easier.
 
-**Advanced: Manual Remark Plugin Configuration**
+**Alternative: Using remarkPlugin directly**
 
-If you need more control or want to disable automatic detection, you can manually configure the remark plugin:
+You can also use the `remarkPlugin` export directly if you prefer:
 
 ```javascript
 const glossaryPlugin = require('docusaurus-plugin-glossary');
 
 module.exports = {
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          remarkPlugins: [
+            [
+              glossaryPlugin.remarkPlugin,
+              {
+                glossaryPath: 'glossary/glossary.json',
+                routePath: '/glossary',
+                siteDir: __dirname,
+              },
+            ],
+          ],
+        },
+      },
+    ],
+  ],
   plugins: [
     [
       'docusaurus-plugin-glossary',
       {
         glossaryPath: 'glossary/glossary.json',
         routePath: '/glossary',
-        autoLinkTerms: false, // Disable automatic configuration
       },
     ],
   ],
-  markdown: {
-    remarkPlugins: [
-      [
-        glossaryPlugin.remarkPlugin,
-        {
-          glossaryPath: 'glossary/glossary.json',
-          routePath: '/glossary',
-          siteDir: process.cwd(),
-        },
-      ],
-    ],
-  },
 };
 ```
 
@@ -187,12 +257,13 @@ module.exports = {
   ```
 
 - **No tooltips or no auto-linking?**
-  - Confirm you’re on `@docusaurus/core@^3` and `react@^18`.
-  - Ensure the plugin is listed in `plugins` and `autoLinkTerms` is not disabled.
+  - Confirm you're on `@docusaurus/core@^3` and `react@^18`.
+  - Ensure the plugin is listed in `plugins` AND the remark plugin is configured in your preset (see Step 2 above).
   - Visit `/glossary`. If the page or route fails to render, verify your `glossaryPath` file exists and contains a `terms` array.
+  - Clear your Docusaurus cache with `npm run clear` and restart your dev server.
   - If you previously used a local patch for `1.0.0`, remove it when using `1.0.2+`; the plugin bundles the v3-compatible theme and remark integration.
 
-- **Opting out of auto-linking**: set `autoLinkTerms: false` and add the remark plugin manually (see above), or only use the `<GlossaryTerm />` component where you want explicit control.
+- **Opting out of auto-linking**: Simply don't configure the remark plugin in your preset. You can still use the `<GlossaryTerm />` component manually where you want explicit control.
 
 ### Step 3: Use Glossary Terms in Your Content
 
@@ -272,11 +343,10 @@ module.exports = {
 
 ## Configuration Options
 
-| Option          | Type    | Default                    | Description                                                                        |
-| --------------- | ------- | -------------------------- | ---------------------------------------------------------------------------------- |
-| `glossaryPath`  | string  | `'glossary/glossary.json'` | Path to glossary JSON file relative to site directory                              |
-| `routePath`     | string  | `'/glossary'`              | URL path for glossary page                                                         |
-| `autoLinkTerms` | boolean | `true`                     | Enable automatic term detection in markdown (requires remark plugin configuration) |
+| Option         | Type   | Default                    | Description                                           |
+| -------------- | ------ | -------------------------- | ----------------------------------------------------- |
+| `glossaryPath` | string | `'glossary/glossary.json'` | Path to glossary JSON file relative to site directory |
+| `routePath`    | string | `'/glossary'`              | URL path for glossary page                            |
 
 ## Customization
 
@@ -439,12 +509,12 @@ The remark plugin (`remark/glossary-terms.js`) automatically detects glossary te
 
 ### Automatic term detection not working
 
-- Ensure `autoLinkTerms` is `true` (the default) in your plugin configuration
-- The remark plugin is automatically configured, so you don't need to manually add it to `markdown.remarkPlugins`
+- **IMPORTANT**: Ensure you have configured the remark plugin in your preset (see Configuration section above)
 - Verify your glossary file exists at the configured `glossaryPath` and contains terms
 - Check that terms in your content match the terms in your glossary (matching is case-insensitive but respects word boundaries)
 - Try clearing cache with `npm run clear` and restarting the dev server
 - Note that terms inside code blocks, links, or MDX components are not processed
+- Make sure you've added the remark plugin to both `docs` and `pages` sections if you want auto-linking in both
 - If you've manually configured the remark plugin, ensure `siteDir` points to the correct Docusaurus site directory
 
 ### Styles not applying

package/lib/index.js

@@ -0,0 +1,246 @@
+var _a, _b;
+import path from 'path';
+import fs from 'fs-extra';
+import { createRequire } from 'module';
+import validatePeerDependencies from 'validate-peer-dependencies';
+import remarkGlossaryTerms from './remark/glossary-terms.js';
+// Helper function to compute __dirname lazily when needed
+// This avoids webpack bundling issues by not using fileURLToPath at module load time
+function getDirname() {
+    var _a;
+    // Check if we're in a Node.js environment
+    if (typeof process === 'undefined' || !((_a = process.versions) === null || _a === void 0 ? void 0 : _a.node)) {
+        return '';
+    }
+    // Use cached value if available
+    if (globalThis.__dirnameCache) {
+        return globalThis.__dirnameCache;
+    }
+    // In Jest/Babel transformed environment, __filename is available
+    // @ts-ignore - __filename is available after Babel transforms ES modules to CommonJS
+    if (typeof __filename !== 'undefined') {
+        const computedDirname = path.dirname(__filename);
+        globalThis.__dirnameCache = computedDirname;
+        return computedDirname;
+    }
+    // Check if import.meta.url is available
+    // Use try-catch to handle cases where import.meta is undefined (e.g., in Jest before transform)
+    let hasImportMetaUrl = false;
+    try {
+        hasImportMetaUrl = typeof import.meta.url !== 'undefined';
+    }
+    catch {
+        // import.meta is undefined (e.g., in Jest environment before Babel transform)
+        return '';
+    }
+    if (!hasImportMetaUrl) {
+        return '';
+    }
+    // Try to compute __dirname using fileURLToPath via createRequire
+    // This avoids webpack trying to bundle fileURLToPath at module load time
+    try {
+        const require = createRequire(import.meta.url);
+        const urlModule = require('url');
+        // Check if fileURLToPath is actually a function (webpack may provide a broken polyfill)
+        if (urlModule && typeof urlModule.fileURLToPath === 'function') {
+            const __filename = urlModule.fileURLToPath(import.meta.url);
+            const computedDirname = path.dirname(__filename);
+            globalThis.__dirnameCache = computedDirname;
+            return computedDirname;
+        }
+    }
+    catch (error) {
+        // If webpack provides a broken polyfill or require fails, return empty
+        // __dirname will be computed when the plugin function is called (server-side only)
+        return '';
+    }
+    return '';
+}
+// Initialize __dirname at module load time, but handle webpack bundling gracefully
+let __dirname = '';
+let peerDepsValidated = false;
+try {
+    // Only compute __dirname if we're in Node.js (not during webpack bundling)
+    if (typeof process !== 'undefined' && ((_a = process.versions) === null || _a === void 0 ? void 0 : _a.node)) {
+        // In Jest/Babel transformed environment, __filename is available
+        // @ts-ignore - __filename is available after Babel transforms ES modules to CommonJS
+        if (typeof __filename !== 'undefined') {
+            __dirname = path.dirname(__filename);
+            validatePeerDependencies(__dirname);
+            peerDepsValidated = true;
+        }
+        else {
+            // Check if import.meta.url is available - use try-catch since import.meta might be undefined
+            let hasImportMetaUrl = false;
+            try {
+                hasImportMetaUrl = typeof import.meta.url !== 'undefined';
+            }
+            catch {
+                // import.meta is undefined (e.g., in Jest environment before Babel transform)
+                hasImportMetaUrl = false;
+            }
+            if (hasImportMetaUrl) {
+                const require = createRequire(import.meta.url);
+                const urlModule = require('url');
+                // Check if fileURLToPath is actually a function (not a webpack polyfill)
+                if (urlModule && typeof urlModule.fileURLToPath === 'function') {
+                    const __filename = urlModule.fileURLToPath(import.meta.url);
+                    __dirname = path.dirname(__filename);
+                    validatePeerDependencies(__dirname);
+                    peerDepsValidated = true;
+                }
+            }
+        }
+    }
+}
+catch {
+    // If initialization fails (e.g., during webpack bundling), __dirname will be empty
+    // and will be computed lazily via getDirname() when needed
+}
+// Validate peer dependencies lazily if not already validated
+if (!peerDepsValidated && typeof process !== 'undefined' && ((_b = process.versions) === null || _b === void 0 ? void 0 : _b.node)) {
+    try {
+        const dirname = getDirname();
+        if (dirname) {
+            validatePeerDependencies(dirname);
+            peerDepsValidated = true;
+        }
+    }
+    catch {
+        // Ignore validation errors during webpack bundling
+    }
+}
+/**
+ * Docusaurus Glossary Plugin
+ *
+ * A plugin that provides glossary functionality with:
+ * - Glossary terms defined in a JSON file
+ * - Auto-generated glossary page
+ * - GlossaryTerm component for inline definitions
+ * - Tooltips on hover
+ * - Automatic glossary term detection in markdown files (requires manual remark plugin configuration)
+ *
+ * IMPORTANT: To enable auto-linking of glossary terms, you must manually add the remark plugin
+ * to your docusaurus.config.js using the getRemarkPlugin helper:
+ *
+ * Example:
+ * ```javascript
+ * const glossaryPlugin = require('docusaurus-plugin-glossary');
+ *
+ * module.exports = {
+ *   presets: [
+ *     ['@docusaurus/preset-classic', {
+ *       docs: {
+ *         remarkPlugins: [
+ *           glossaryPlugin.getRemarkPlugin({
+ *             glossaryPath: 'glossary/glossary.json',
+ *             routePath: '/glossary',
+ *           }, { siteDir: __dirname }),
+ *         ],
+ *       },
+ *       pages: {
+ *         remarkPlugins: [
+ *           glossaryPlugin.getRemarkPlugin({
+ *             glossaryPath: 'glossary/glossary.json',
+ *             routePath: '/glossary',
+ *           }, { siteDir: __dirname }),
+ *         ],
+ *       },
+ *     }],
+ *   ],
+ *   plugins: [
+ *     ['docusaurus-plugin-glossary', {
+ *       glossaryPath: 'glossary/glossary.json',
+ *       routePath: '/glossary',
+ *     }],
+ *   ],
+ * };
+ * ```
+ *
+ * @param context - Docusaurus context
+ * @param options - Plugin options
+ * @param options.glossaryPath - Path to glossary JSON file (default: 'glossary/glossary.json')
+ * @param options.routePath - Route path for glossary page (default: '/glossary')
+ * @param options.autoLinkTerms - Legacy option, kept for compatibility but no longer used (configure remark plugin manually instead)
+ * @returns Plugin object
+ */
+export default function glossaryPlugin(context, options = {}) {
+    const { glossaryPath = 'glossary/glossary.json', routePath = '/glossary', autoLinkTerms = true, } = options;
+    let glossaryDataCache = { terms: [] };
+    return {
+        name: 'docusaurus-plugin-glossary',
+        async loadContent() {
+            // Load glossary terms from JSON file
+            const glossaryFilePath = path.resolve(context.siteDir, glossaryPath);
+            if (await fs.pathExists(glossaryFilePath)) {
+                const glossaryData = (await fs.readJson(glossaryFilePath));
+                glossaryDataCache = glossaryData;
+                return glossaryData;
+            }
+            console.warn(`Glossary file not found at ${glossaryFilePath}. Using empty glossary.`);
+            glossaryDataCache = { terms: [] };
+            return { terms: [] };
+        },
+        async contentLoaded({ content, actions }) {
+            const { createData, addRoute, setGlobalData } = actions;
+            const glossaryContent = content;
+            // Create data file that can be imported by components
+            const glossaryDataPath = await createData('glossary-data.json', JSON.stringify(glossaryContent));
+            // Create a data file for the remark plugin to access glossary terms
+            const remarkGlossaryDataPath = await createData('remark-glossary-data.json', JSON.stringify({
+                terms: glossaryContent.terms || [],
+                routePath: routePath,
+            }));
+            // Add glossary page route
+            // Compute __dirname if not already set (for webpack bundling compatibility)
+            const pluginDirname = __dirname || getDirname();
+            addRoute({
+                path: routePath,
+                component: path.join(pluginDirname, 'components/GlossaryPage.js'),
+                exact: true,
+                modules: {
+                    glossaryData: glossaryDataPath,
+                },
+            });
+            // Expose global data for runtime lookups (used by GlossaryTerm)
+            setGlobalData({
+                terms: glossaryContent.terms || [],
+                routePath,
+            });
+        },
+        getThemePath() {
+            // Compute __dirname if not already set (for webpack bundling compatibility)
+            const pluginDirname = __dirname || getDirname();
+            return path.resolve(pluginDirname, './theme');
+        },
+        getPathsToWatch() {
+            return [path.resolve(context.siteDir, glossaryPath)];
+        },
+        async postBuild({ outDir }) {
+            // You can add any post-build steps here if needed
+            console.log('Glossary plugin: Build completed');
+        },
+    };
+}
+// Export remark plugin factory for use in markdown configuration
+export const remarkPlugin = remarkGlossaryTerms;
+/**
+ * Helper function to get the configured remark plugin
+ * This can be used in docusaurus.config.js markdown configuration
+ *
+ * @param pluginOptions - Plugin options from docusaurus.config.js
+ * @param context - Context with siteDir
+ * @returns Configured remark plugin
+ */
+export function getRemarkPlugin(pluginOptions, context) {
+    const { glossaryPath = 'glossary/glossary.json', routePath = '/glossary' } = pluginOptions;
+    const siteDir = context === null || context === void 0 ? void 0 : context.siteDir;
+    return [
+        remarkGlossaryTerms,
+        {
+            glossaryPath,
+            routePath,
+            siteDir,
+        },
+    ];
+}

package/{remark → lib/remark}/glossary-terms.js

@@ -1,8 +1,6 @@
-// Support both CJS and ESM exports of unist-util-visit
-let visit = require('unist-util-visit');
-visit = visit && visit.visit ? visit.visit : visit;
-const path = require('path');
-const fs = require('fs');
+import { visit } from 'unist-util-visit';
+import path from 'path';
+import fs from 'fs';
 
 /**
  * Creates a remark plugin that automatically detects and replaces glossary terms in markdown
@@ -14,7 +12,7 @@ const fs = require('fs');
  * @param {string} options.siteDir - Docusaurus site directory (required if using glossaryPath)
  * @returns {function} Remark plugin function
  */
-function remarkGlossaryTerms({
+export default function remarkGlossaryTerms({
   terms = [],
   glossaryPath = null,
   routePath = '/glossary',
@@ -79,10 +77,8 @@ function remarkGlossaryTerms({
         // Check if it's a whole word match, with simple plural tolerance ('s' or 'es')
         const beforeChar = index > 0 ? textLower[index - 1] : ' ';
         const afterIndex = index + lowerTerm.length;
-        const afterChar = afterIndex < textLower.length 
-          ? textLower[afterIndex] 
-          : ' ';
-        
+        const afterChar = afterIndex < textLower.length ? textLower[afterIndex] : ' ';
+
         let matchLength = term.length;
         let isWordBoundary = !/\w/.test(beforeChar) && !/\w/.test(afterChar);
 
@@ -96,7 +92,12 @@ function remarkGlossaryTerms({
         }
 
         // Allow trailing 'es' plural (e.g., API -> APIs, box -> boxes)
-        if (!isWordBoundary && afterChar === 'e' && afterIndex + 1 < textLower.length && textLower[afterIndex + 1] === 's') {
+        if (
+          !isWordBoundary &&
+          afterChar === 'e' &&
+          afterIndex + 1 < textLower.length &&
+          textLower[afterIndex + 1] === 's'
+        ) {
           const nextChar = afterIndex + 2 < textLower.length ? textLower[afterIndex + 2] : ' ';
           if (!/\w/.test(nextChar)) {
             isWordBoundary = true;
@@ -111,7 +112,7 @@ function remarkGlossaryTerms({
             term: term,
             termObj: termObj,
             // Store original case from the text
-            originalText: text.substring(index, index + matchLength)
+            originalText: text.substring(index, index + matchLength),
           });
         }
 
@@ -237,10 +238,11 @@ function remarkGlossaryTerms({
 
     // Inject MDX import for GlossaryTerm if we used it anywhere in this file
     if (usedGlossaryTerm) {
-      // Create import node matching MDX expectations (empty value + estree)
+      // Create import node matching MDX v3 expectations
+      // Both 'value' (the import string) and 'data.estree' (the parsed AST) are required
       const importNode = {
         type: 'mdxjsEsm',
-        value: '',
+        value: "import GlossaryTerm from '@theme/GlossaryTerm'",
         data: {
           estree: {
             type: 'Program',
@@ -254,7 +256,11 @@ function remarkGlossaryTerms({
                     local: { type: 'Identifier', name: 'GlossaryTerm' },
                   },
                 ],
-                source: { type: 'Literal', value: '@theme/GlossaryTerm' },
+                source: {
+                  type: 'Literal',
+                  value: '@theme/GlossaryTerm',
+                  raw: "'@theme/GlossaryTerm'",
+                },
               },
             ],
           },
@@ -274,13 +280,12 @@ function remarkGlossaryTerms({
           if (n.data?.estree?.body) {
             return n.data.estree.body.some(
               stmt =>
-                stmt.type === 'ImportDeclaration' &&
-                stmt.source?.value === '@theme/GlossaryTerm'
+                stmt.type === 'ImportDeclaration' && stmt.source?.value === '@theme/GlossaryTerm'
             );
           }
           return false;
         });
-      
+
       if (!hasExistingImport) {
         // Place import at the very beginning of the file (before all other nodes)
         // This ensures it's available when MDX compiles the JSX elements
@@ -297,5 +302,3 @@ function remarkGlossaryTerms({
     }
   };
 }
-
-module.exports = remarkGlossaryTerms;

package/{theme → lib/theme}/GlossaryTerm/styles.module.css

@@ -4,17 +4,19 @@
 }
 
 .glossaryTerm {
-  color: var(--ifm-color-primary);
+  color: var(--ifm-font-color-base);
   text-decoration: none;
-  border-bottom: 1px dotted var(--ifm-color-primary);
+  border-bottom: 1px dotted;
+  border-bottom-color: color-mix(in srgb, var(--ifm-font-color-base) 20%, transparent);
   cursor: help;
-  font-weight: 500;
   transition: all 0.2s;
-}
+} 
 
 .glossaryTerm:hover {
   color: var(--ifm-color-primary-dark);
   border-bottom-style: solid;
+  border-bottom-color: var(--ifm-color-primary-dark);
+  border-bottom: none;
 }
 
 .tooltip {
@@ -59,7 +61,7 @@
   transform: translateX(-50%);
   bottom: -6px;
   border: 6px solid transparent;
-  border-bottom-color: var(--ifm-background-surface-color);
+  border-top-color: var(--ifm-background-surface-color);
 }
 .tooltipTop::before {
   content: '';
@@ -68,7 +70,7 @@
   transform: translateX(-50%);
   bottom: -7px;
   border: 7px solid transparent;
-  border-bottom-color: var(--ifm-color-emphasis-300);
+  border-top-color: var(--ifm-color-emphasis-300);
 }
 
 /* Arrow for bottom placement (tooltip below anchor) */
@@ -79,7 +81,7 @@
   transform: translateX(-50%);
   top: -6px;
   border: 6px solid transparent;
-  border-top-color: var(--ifm-background-surface-color);
+  border-bottom-color: var(--ifm-background-surface-color);
 }
 .tooltipBottom::before {
   content: '';
@@ -88,7 +90,7 @@
   transform: translateX(-50%);
   top: -7px;
   border: 7px solid transparent;
-  border-top-color: var(--ifm-color-emphasis-300);
+  border-bottom-color: var(--ifm-color-emphasis-300);
 }
 
 .tooltipVisible {
@@ -111,16 +113,16 @@
 
 /* Dark mode arrow overrides scoped to placement to avoid upside-down arrows */
 [data-theme='dark'] .tooltipTop::after {
-  border-bottom-color: var(--ifm-background-surface-color);
+  border-top-color: var(--ifm-background-surface-color);
 }
 [data-theme='dark'] .tooltipTop::before {
-  border-bottom-color: var(--ifm-color-emphasis-400);
+  border-top-color: var(--ifm-color-emphasis-400);
 }
 [data-theme='dark'] .tooltipBottom::after {
-  border-top-color: var(--ifm-background-surface-color);
+  border-bottom-color: var(--ifm-background-surface-color);
 }
 [data-theme='dark'] .tooltipBottom::before {
-  border-top-color: var(--ifm-color-emphasis-400);
+  border-bottom-color: var(--ifm-color-emphasis-400);
 }
 
 /* Responsive adjustments */

package/package.json

@@ -1,24 +1,37 @@
 {
   "name": "docusaurus-plugin-glossary",
-  "version": "1.2.0",
+  "version": "1.3.2",
   "description": "A Docusaurus plugin for creating and managing glossary terms with auto-generated pages and inline tooltips",
-  "main": "index.js",
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.js",
+      "default": "./lib/index.js"
+    },
+    "./remark/glossary-terms": {
+      "import": "./lib/remark/glossary-terms.js",
+      "require": "./lib/remark/glossary-terms.js",
+      "default": "./lib/remark/glossary-terms.js"
+    }
+  },
   "files": [
-    "index.js",
-    "components/",
-    "theme/",
-    "remark/",
+    "lib/",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
+    "build": "tsc && node scripts/build.js",
+    "watch": "node scripts/watch.js",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "example:start": "npm --prefix examples/docusaurus-v3 run start",
     "example:build": "npm --prefix examples/docusaurus-v3 run build",
     "example:serve": "npm --prefix examples/docusaurus-v3 run serve",
-    "prepublishOnly": "npm test",
+    "example:clear": "npm --prefix examples/docusaurus-v3 run clear",
+    "prepublishOnly": "npm run build && npm test",
     "version": "npm version",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\""
@@ -49,7 +62,8 @@
   },
   "dependencies": {
     "fs-extra": "^11.0.0",
-    "unist-util-visit": "^5.0.0"
+    "unist-util-visit": "^5.0.0",
+    "validate-peer-dependencies": "^2.2.0"
   },
   "engines": {
     "node": ">=16.14"
@@ -57,6 +71,8 @@
   "devDependencies": {
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
+    "@docusaurus/tsconfig": "^3.9.2",
+    "@docusaurus/types": "^3.9.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -64,6 +80,19 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
-    "prettier": "^3.6.2"
+    "prettier": "^3.6.2",
+    "typescript": "^5.7.3"
+  },
+  "browser": {
+    "path": false,
+    "url": false,
+    "fs": false,
+    "fs-extra": false,
+    "graceful-fs": false,
+    "jsonfile": false,
+    "util": false,
+    "assert": false,
+    "stream": false,
+    "constants": false
   }
 }

package/index.js

@@ -1,156 +0,0 @@
-const path = require('path');
-const fs = require('fs-extra');
-
-/**
- * Docusaurus Glossary Plugin
- *
- * A plugin that provides glossary functionality with:
- * - Glossary terms defined in a JSON file
- * - Auto-generated glossary page
- * - GlossaryTerm component for inline definitions
- * - Tooltips on hover
- * - Automatic glossary term detection in markdown files
- *
- * @param {object} context - Docusaurus context
- * @param {object} options - Plugin options
- * @param {string} options.glossaryPath - Path to glossary JSON file (default: 'glossary/glossary.json')
- * @param {string} options.routePath - Route path for glossary page (default: '/glossary')
- * @param {boolean} options.autoLinkTerms - Automatically link glossary terms in markdown (default: true)
- * @returns {object} Plugin object
- */
-function glossaryPlugin(context, options = {}) {
-  const {
-    glossaryPath = 'glossary/glossary.json',
-    routePath = '/glossary',
-    autoLinkTerms = true,
-  } = options;
-
-  let glossaryDataCache = { terms: [] };
-
-  return {
-    name: 'docusaurus-plugin-glossary',
-
-    configureMarkdown(markdownConfig) {
-      // Automatically configure the remark plugin if autoLinkTerms is enabled
-      if (autoLinkTerms) {
-        if (!markdownConfig.remarkPlugins) {
-          markdownConfig.remarkPlugins = [];
-        }
-
-        const remarkPlugin = require('./remark/glossary-terms');
-
-        // Check if the remark plugin is already configured
-        const isAlreadyConfigured = markdownConfig.remarkPlugins.some(plugin => {
-          if (Array.isArray(plugin) && plugin[0]) {
-            // Check if it's our remark plugin by comparing the function reference
-            return plugin[0] === remarkPlugin;
-          }
-          // Also check if it's directly the remark plugin function
-          return plugin === remarkPlugin;
-        });
-
-        // Only add if not already configured
-        if (!isAlreadyConfigured) {
-          markdownConfig.remarkPlugins.push([
-            remarkPlugin,
-            {
-              glossaryPath,
-              routePath,
-              siteDir: context.siteDir,
-            },
-          ]);
-        }
-      }
-    },
-
-    async loadContent() {
-      // Load glossary terms from JSON file
-      const glossaryFilePath = path.resolve(context.siteDir, glossaryPath);
-
-      if (await fs.pathExists(glossaryFilePath)) {
-        const glossaryData = await fs.readJson(glossaryFilePath);
-        glossaryDataCache = glossaryData;
-        return glossaryData;
-      }
-
-      console.warn(`Glossary file not found at ${glossaryFilePath}. Using empty glossary.`);
-      glossaryDataCache = { terms: [] };
-      return { terms: [] };
-    },
-
-    async contentLoaded({ content, actions }) {
-      const { createData, addRoute, setGlobalData } = actions;
-
-      // Create data file that can be imported by components
-      const glossaryDataPath = await createData('glossary-data.json', JSON.stringify(content));
-
-      // Create a data file for the remark plugin to access glossary terms
-      const remarkGlossaryDataPath = await createData(
-        'remark-glossary-data.json',
-        JSON.stringify({
-          terms: content.terms || [],
-          routePath: routePath,
-        })
-      );
-
-      // Add glossary page route
-      addRoute({
-        path: routePath,
-        component: path.join(__dirname, 'components/GlossaryPage.js'),
-        exact: true,
-        modules: {
-          glossaryData: glossaryDataPath,
-        },
-      });
-
-      // Expose global data for runtime lookups (used by GlossaryTerm)
-      setGlobalData({
-        terms: content.terms || [],
-        routePath,
-      });
-    },
-
-    getThemePath() {
-      return path.resolve(__dirname, './theme');
-    },
-
-    getPathsToWatch() {
-      return [path.resolve(context.siteDir, glossaryPath)];
-    },
-
-    async postBuild({ outDir }) {
-      // You can add any post-build steps here if needed
-      console.log('Glossary plugin: Build completed');
-    },
-  };
-}
-
-// Export remark plugin factory for use in markdown configuration
-glossaryPlugin.remarkPlugin = require('./remark/glossary-terms');
-
-/**
- * Helper function to get the configured remark plugin
- * This can be used in docusaurus.config.js markdown configuration
- *
- * @param {object} pluginOptions - Plugin options from docusaurus.config.js
- * @param {object} context - Docusaurus context
- * @returns {function} Configured remark plugin
- */
-glossaryPlugin.getRemarkPlugin = function (pluginOptions, context) {
-  const {
-    glossaryPath = 'glossary/glossary.json',
-    routePath = '/glossary',
-    siteDir = context.siteDir,
-  } = pluginOptions;
-
-  return [
-    require('./remark/glossary-terms'),
-    {
-      glossaryPath,
-      routePath,
-      siteDir,
-    },
-  ];
-};
-
-module.exports = glossaryPlugin;