feat: introduce routeBasePath option

README.md

@@ -26,25 +26,28 @@ yarn add @grnet/docusaurus-terminology
 
 Once the package is installed, you need to configure it in your Docusaurus site configuration file by adding the plugin to your `docusaurus.config.js` file:
 
-```
+```js
 module.exports = {
     ...
   plugins: [
     ['@grnet/docusaurus-terminology', {
       termsDir: './docs/terms',
       docsDir: './docs/',
-      glossaryFilepath: './docs/glossary.md'
+      glossaryFilepath: './docs/glossary.md',
+      routeBasePath: './docs' // optional, defaults to docsDir
     }],
   ],
     ...
 };
 ```
 
+Here, the value for `routeBasePath` should equal the value in the `presets:docs:routeBasePath` configuration if that is supplied manually.
+
 There is the ability to use custom components for the glossary file and term preview tooltip, instead of using the ones provided by `@grnet/docusaurus-term-preview` and `@grnet/docusaurus-glossary-view`.
 
 To modify the default options, add the fields `glossaryComponentPath`, `termPreviewComponentPath` in the plugins section to provide the corresponding component paths (**relative to the `/docs` folder**):
 
-```
+```js
 plugins: [
     ['@grnet/docusaurus-terminology', {
       ...

examples/terminology-example-baseurl/docusaurus.config.js

@@ -38,6 +38,7 @@ const config = {
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
+          routeBasePath: '/documentation',
           sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
@@ -62,7 +63,8 @@ const config = {
     ['@grnet/docusaurus-terminology', {
       termsDir: './docs/01-meta/terms',
       docsDir: './docs/',
-      glossaryFilepath: './docs/01-meta/02-glossary.md'
+      glossaryFilepath: './docs/01-meta/02-glossary.md',
+      routeBasePath: '/documentation'
     }],
   ],
 

libs/glossary-view/index.js

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
+import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
+import { useEffect, useState } from 'react';
 
 const Glossary = () => {
   const [content, setContent] = useState();

plugins/webpack-glossary-loader/index.js

@@ -3,7 +3,6 @@ const store = require('@grnet/terminology-store');
 const path = require('path');
 
 module.exports = function(source) {
-  const urls = store.terms;
   const importStatement = `
 import Glossary from "${ this.query.glossaryComponentPath || "@grnet/docusaurus-glossary-view"}";
   `;

plugins/webpack-terms-loader/index.js

@@ -1,34 +1,43 @@
-const path = require('path');
 const parseMD = require('parse-md').default;
 const store = require('@grnet/terminology-store');
+const path = require('path');
 const remark = require('remark')
 const remarkHTML = require('remark-html')
 
+function sanitize(p) {
+  const p_unix = p
+    .replace(/^\.\//, '')
+    .replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const p_win = p.replace(/\//g, "\\")
+    .replace(/\./, "")
+    .replace(/[*+?^${}()|[\]\\]/g, '\\$&');
+  return process.platform === 'win32' ? p_win : p_unix;
+}
+
 module.exports = function(source) {
-  const unixRegex = new RegExp(
-    `(${this.query.termsDir
-      .replace(/^\.\//, '')
-      .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}.*?)\.(md|mdx)`
-  );
-  const winRegex = new RegExp(
-    `(${this.query.termsDir
-      .replace(/\//g, "\\")
-      .replace(/\./, "")
-      .replace(/[*+?^${}()|[\]\\]/g, '\\$&')}.*?)\.(md|mdx)`
+  const pattern = new RegExp(
+    `(${sanitize(this.query.termsDir)}.*?)\.(md|mdx)`
   );
   const unixResourcePath = this.resourcePath
   const winResourcePath = this.resourcePath.replace(/\\/, "\\\\")
 
-  const termMatch = process.platform === 'win32' ? winResourcePath.match(winRegex) : unixResourcePath.match(unixRegex);
+  const termMatch = process.platform === 'win32' ? winResourcePath.match(pattern) : unixResourcePath.match(pattern);
 
   if (termMatch) {
-    const data = parseMD(source);
     const resourcePath = termMatch[1].replace(/\d+-/, '');
+    const docsDir = sanitize(this.query.docsDir);
+    const resourcePathRelativeToDocsDir = path.relative(docsDir, resourcePath);
+
+    const routeBasePath = sanitize(this.query.routeBasePath || this.query.docsDir);
+    const targetPath = path.posix.join(routeBasePath, resourcePathRelativeToDocsDir);
+
+    const data = parseMD(source);
     data.metadata.hoverText = data.metadata.hoverText ? remark()
       .use(remarkHTML, { sanitize: true })
       .processSync(data.metadata.hoverText).contents : '';
-    store.addTerm(resourcePath, data);
-    this.emitFile(resourcePath + '.json', JSON.stringify(data))
+
+    store.addTerm(targetPath, data);
+    this.emitFile(targetPath + '.json', JSON.stringify(data));
   }
 
   return source;

plugins/webpack-terms-replace-loader/index.js

@@ -1,10 +1,19 @@
 const parseMD = require('parse-md').default;
-const store = require('@grnet/terminology-store');
 const path = require('path');
 const pkgUp = require('pkg-up');
 const pkg = pkgUp.sync({ cwd: process.cwd() });
 const root = process.platform === 'win32' ? path.win32.dirname(pkg) : path.dirname(pkg);
 
+function sanitize(p) {
+  const p_unix = p
+    .replace(/^\.\//, '')
+    .replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const p_win = p.replace(/\//g, "\\")
+    .replace(/\./, "")
+    .replace(/[*+?^${}()|[\]\\]/g, '\\$&');
+  return process.platform === 'win32' ? p_win : p_unix;
+}
+
 module.exports = function(source) {
   const urlsRegex = /(?<!!)\[[^\]]+\]\([^)]+\)/g;
   const urlRegex =  /\[\s*(.*?)\s*\]\((.*?)\)/s;
@@ -23,10 +32,15 @@ import Term from "${ this.query.termPreviewComponentPath || "@grnet/docusaurus-t
         const rel_path = process.platform === 'win32' ? path.win32.relative(root, this.resourcePath) : path.relative(root, this.resourcePath);
         const pathName = new URL(urlPath, `http://bla.com/${rel_path}`).pathname;
         if (pathName.includes(this.query.termsDir.replace(/\./, ''))) {
+          const docsDir = "/" + sanitize(this.query.docsDir);
+          const pathRelativeToDocsDir = path.relative(docsDir, pathName);
+
+          const routeBasePath = "/" + sanitize(this.query.routeBasePath || this.query.docsDir);
+          const targetPathName = path.posix.join(routeBasePath, pathRelativeToDocsDir);
+
           const termKey =
             this.query.baseUrl.replace(/\/$/, '') +
-            pathName.replace(/\.(md|mdx)$/, '');
-          const metadata = store.terms[termKey];
+            targetPathName.replace(/\.(md|mdx)$/, '');
           source = source.replace(
             mdUrl,
             `<Term pathName="${termKey.replace(/\d+-/, '')}">${title}</Term>`