Fix in-app docs

[azrikahar]

Description

Problem

vite-plugin-md package was updated from 0.11.4 to 0.14.0 in #13845, but unfortunately it seems to break the in-app docs for Directus 9.12.2 now:

0.14.0 included one particular sizable change — antfu/vite-plugin-md#77, and I believe the 2 main reasons why it's broken on our end are:

• DocsWrapper PascalCase for wrapperComponent is not valid/recognized anymore, which is why any of our docs-wrapper component styling doesn't apply now:

  directus/app/vite.config.js

  Line 26 in 42cb679

  wrapperComponent: 'DocsWrapper',

  This PascalCase wrapperComponent issue is being tracked in Failed to use Vue component in markdown antfu/vite-plugin-md#90.

• There is now a .markdown-body class applying styles over our custom styles, so even if we were to use docs-wrapper in the current 0.14.0 or the latest 0.15.0, it is still overriding certain styles, primarily the text color in dark theme.

  There is currently a PR to fix this in fix: the effect of default style on custom class antfu/vite-plugin-md#85.

  • Style overridden issue:

    

Solution

• Downgraded vite-plugin-md package to 0.13.1 temporarily while we await for the additional styling to be removed in a future version.

  Side note: regarding packages removed in the package-lock file after this downgrade, it's mostly because they were added in 0.14.0. They have since been removed in 0.14.2.

• Opted to rename DocsWrapper to docs-wrapper, even if PascalCase still works in 0.13.1 as I believe it's more unlikely for kebab-case support to be removed in future versions based on my understanding in that thread.

Result

Type of Change

• Bugfix
• New Feature
• Refactor / codestyle updates
• Other, please describe:

Requirements Checklist

• New / updated tests are included
• All tests are passing locally
• Performed a self-review of the submitted code

If adding a new feature:

• Documentation was added/updated