Glossary page not sorted

Hello @grahamegee,

We released a new version 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 instead of:


Object.keys(content).map(key => {
...
})

use:

Object.keys(content).sort().map(key => {
...
})

to sort the terms in the Glossary page.

grnet / docusaurus-terminology

Glossary page not sorted #11