grnet / docusaurus-terminology

Home of Docusaurus Terminology Plugin
BSD 2-Clause "Simplified" License
35 stars 5 forks source link

YAMLExceptions when parsing non-tooltip links #9

Closed jabba-jedi closed 1 year ago

jabba-jedi commented 1 year ago

Hi!

I got the plugin to work in my local Docusaurus project, but it produces several YAMLExceprtions on perfectly valid non-tooltip Markdown lines, particularly codeblocks. Here are some examples:

`Module build failed (from ./node_modules/@grnet/webpack-terms-replace-loader/index.js): YAMLException: end of the stream or a document separator is expected at line 4, column 1:


    ^
Module build failed (from ./node_modules/@grnet/webpack-terms-replace-loader/index.js):
YAMLException: bad indentation of a sequence entry at line 4, column 15:
    - [Playground](https://www.typescriptlang.org/ ... 

Module build failed (from ./node_modules/@grnet/webpack-terms-replace-loader/index.js):
YAMLException: end of the stream or a document separator is expected at line 10, column 11:
      userName: string;
              ^

Module build failed (from ./node_modules/@grnet/webpack-terms-replace-loader/index.js):
YAMLException: unidentified alias "*Also" at line 2, column 7:
    **Also see:**
          ^

Module build failed (from ./node_modules/@grnet/webpack-terms-replace-loader/index.js):
YAMLException: end of the stream or a document separator is expected at line 9, column 28:
    declare function getLimit(): number;
tsironis commented 1 year ago

Hello, could you also provide some info about the operating system, the node version and any custom configuration you might be using in Docusaurus, please?zz

jabba-jedi commented 1 year ago

Hi,

I'm on Apple M1, macOS 13.1. node v18.12.1

      "dependencies": {
        "@docusaurus/core": "2.3.1",
        "@docusaurus/plugin-google-analytics": "2.3.1",
        "@docusaurus/preset-classic": "2.3.1",
        "@docusaurus/theme-search-algolia": "2.3.1",
        "@grnet/docusaurus-terminology": "^1.0.0-rc.3",
        "@mdx-js/react": "^1.6.21",
        "@svgr/webpack": "^5.5.0",
        "clsx": "^1.1.1",
        "docusaurus-plugin-drawio": "^0.1.7",
        "dotenv": "^16.0.0",
        "file-loader": "^6.2.0",
        "prism-react-renderer": "^1.2.1",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "url-loader": "^4.1.1",
        "uuid-by-string": "^3.0.4"
      },

We also have a draw.io plugin, but removing it didn't mitigate the above error.

Let me know if I can provide any more info. I'm not really a developer :)

tsironis commented 1 year ago

I would love to see also the contents of the docusaurus.config.js file in order to be able to replicate it.

jabba-jedi commented 1 year ago

I substituted all sensitive info (API token and internal GitLab urls) with 'company-info', otherwise it looks like this:

// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'Developer Portal',
  url: 'https://your-docusaurus-test-site.com',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/pd.png',
  organizationName: 'company-info',
  projectName: 'company-info', // Usually your repo name.

  plugins: [
    ['drawio', {}],
  ],
  presets: [
    [
      '@docusaurus/preset-classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        googleAnalytics: {
          trackingID: 'company-info',
          anonymizeIP: true,
        },
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          editUrl: 'company-info',
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          editUrl:
            'company-info',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        title: 'company-info',
        logo: {
          alt: 'My Site Logo',
          src: 'img/pd.png',
        },
        items: [
          {
            to: 'company-info',
            position: 'left',
            label: 'Docs',
          },
          {
            to: 'company-info',
            position: 'left',
            label: 'Services',
          },
          {
            href: 'company-info',
            label: 'GitLab project',
            position: 'right',
          }
        ],
      },
      footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Contribute to this project',
                to: '/docs/how-to',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'GitLab project',
                href: 'company-info',
              },
            ],
          },
        ],
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
};

module.exports = config;
VasiaKoum commented 1 year ago

Hello @jabba-jedi,

In order to use the docusaurus-terminology plugin, add the following in docusaurus.config.js:

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

You can read more on this at our README.

Regarding your issue, maybe your file starts like this:

--
right side menu item
---

or

right side menu item
---

when it should be like this:

---
right side menu item
---

If that is not the case or the problem persists, please provide the md or mdx file.

jabba-jedi commented 1 year ago

Hi Vasia!

Thanks for the hint! We have found indeed that the files throwing YAML exceptions contain Markdown divider lines, which are standalone triple dashes:

---

We have removed them for now, but since dividers are standard Markdown, maybe tweak the plugin to ignore them?

VasiaKoum commented 1 year ago

Hello,

The docusaurus-terminology plugin parses the metadata header located at the beginning of the md or mdx file, which is offered by Docusaurus:

---
id: head-metadata
title: Head Metadata
---

Currently, the plugin cannot ignore the triple dashes because it uses the header to display the info at the tooltip.

However, you can utilize the metadata header in your file as follows:

---
id: test
title: Test
---

The remaining triple dashes that appear after the metadata header and belong to the file body are displayed without any issues. For example, you can use an empty metadata header:

---
---
Μenu item 1: Test
---

---
[Playground](https://www.typescriptlang.org/)

Also see:

---
---
[This is the example-term](./terms/example)

Μenu item 2: Test
---

Alternatively, you can use a non-empty header:

---
id: test
---
Μenu item 1: Test
---

---
[Playground](https://www.typescriptlang.org/)

Also see:

---
---
[This is the example-term](./terms/example)

Μenu item 2: Test
---

I hope this helps! Let me know if you have any further questions.