Is it possible to override?

[sophia-wings]

Hello. Thanks for providing a wonderful plugin :) I adopted your plugin but I have a question. I set the docusaurus config file as described in Read.me.

  plugins: [
    [
      "@grnet/docusaurus-terminology",
      {
        termsDir: "./docs/terms",
        docsDir: "./docs/",
        glossaryFilepath: "./docs/glossary.md",
      },
    ],
  ],

It used to work but I encountered an issue after changing some settings related to path(routeBasePath, baseUrl).

const config = {
 :
  baseUrl: "/docs", 
}

:

  presets: [
    [
      "classic",
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          routeBasePath: "/",
          sidebarPath: require.resolve("./sidebars.js"),

The terms are listed up in the glossary file but when I click a term, it directs me to the link with 'docs' duplicated as follows. Also, tooltips do not show up anymore.

http://localhost:3000/docs/docs/terms/xxx

I guess it might work if I modify this code (https://github.com/grnet/docusaurus-terminology/blob/main/libs/glossary-view/index.js), but I'm not sure if I can override this source code.

If it is possible, can you tell me how to fix this issue?

Thanks in advance.

[sophia-wings]

Moreover, I would like to customize the glossary page like this page (https://essif-lab.github.io/framework/docs/essifLab-glossary)

1. Modify CSS elements for the terms (e.g. color, font size)
2. Create a right side bar menu for the term list.

I guess this website used the version 1 (https://gitlab.grnet.gr/terminology/docusaurus-terminology) of the plugin. Does the version 2 also provide the features?

[VasiaKoum]

Hi @sophia-wings,

Thank you for your feedback. Currently, we do not support the parsing of routeBasePath from the Docusaurus preset-classic. Instead, we use the default value of routeBasePath:/docs (routing in content plugins).

With the current implementation, the generated path http://localhost:3000/docs/docs/terms/<filename> is the expected output based on the combination of baseUrl: /docs, termsDir: /docs/terms, and filename.

We will try to address this issue in our upcoming releases. In the meantime, feel free to contribute with your proposed solution.

Regarding your second question, the project you mentioned docusaurus-terminology (deprecated) uses the Tooltip component from material-ui to display the tooltip information. However, in our current project, we use rc-tooltip along with custom CSS styles (tooltip-styles.css) to display the title and hoverText from the metadata header of the corresponding file.

After the merge of #12, you will be able to use custom components to display the glossary page and the term preview tooltip.

[sophia-wings]

@VasiaKoum Thanks for your answer! It helped me a lot :)

[VasiaKoum]

Hello @sophia-wings,

We released the above updates and now you can use custom components for the Glossary page and the Term preview:

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

For more details, please read first the README.

For example, based on the following default Glossary component you can create your own Glossary.tsx file (under the docusaurus project)

import React, { useEffect, useState } from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link';

const Glossary = () => {
  const [content, setContent] = useState();
  const { withBaseUrl } = useBaseUrlUtils();

  useEffect(() => {
    if (typeof window !== undefined) {
      const JSONurl = withBaseUrl('docs/glossary.json');
      if (!content) {
        if (!window._cachedGlossary) {
          fetch(JSONurl)
            .then(res => res.json())
            .then(obj => {
              setContent(obj);
              window._cachedGlossary = obj;
            });
        } else {
          setContent(window._cachedGlossary);
        }
      }
    }
  }, [content])

  return (
    <BrowserOnly
      fallback={<div>The fallback content to display on prerendering</div>}>
      {() =>
        <div>{content ?
          <>
            {
              Object.keys(content).map(key => {
                return (
                  <p key={key}>
                    <Link to={withBaseUrl(`${key.replace('/\\/g', '/')}`)}>{content[key].metadata.title}</Link>: <span style={{ display: 'inline-flex' }} dangerouslySetInnerHTML={{ __html: content[key].metadata.hoverText }} />
                  </p>
                )
              })
            }
          </> :
          'loading...'}
        </div>
      }
    </BrowserOnly>
  );
};

export default Glossary;

and if you change the following part:

Object.keys(content).map(key => {
  return (
    <p key={key}>
      <Link to={withBaseUrl(`${key.replace('/\\/g', '/')}`)}>{content[key].metadata.title}</Link>: <span style={{ display: 'inline-flex' }} dangerouslySetInnerHTML={{ __html: content[key].metadata.hoverText }} />
    </p>
  )
})

to:

Object.keys(content).map(key => {
  return (
      <p key={key}>
          <h2>
              <Link style={{ color: '#ac3c7a' }} to={withBaseUrl(`${key.replace('/\\/g', '/')}`)}>{content[key].metadata.title}</Link>
          </h2>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
  )
})

The glossary page will be like this:

Hope this helps with your issue.

[sophia-wings]

@VasiaKoum

Thank you for your support! The new release helped me to resolve the things that I wanted to fix. I really appreciate it :)