nolebase/integrations

Problems with `@nolebase/vitepress-plugin-og-image`

Closed this issue · 4 comments

When trying to insert code (as in your knowledge base), the plugin complains that it cannot find MD files

Code (ALTKDEWiki/.vitepress/config.mts):

import { buildEndGenerateOpenGraphImages } from "@nolebase/vitepress-plugin-og-image/vitepress";
...
export default defineConfigWithTheme({
  ...
  async buildEnd(siteConfig) {
    const newBuilder = buildEndGenerateOpenGraphImages({
      category: {
        byCustomGetter: (page) => {
          console.log(page.frontmatter);
          return page.frontmatter.title;
        },
        fallbackWithFrontmatter: true,
      },
    });

    await newBuilder(siteConfig);
  },
});

Error:

...
✖ @nolebase/vitepress-plugin-og-image: rendering open graph images...
build error:
ENOENT: no such file or directory, open '/home/x1z53/git/ALTKDEWiki/nvidia/nvidia-nouveau/index.md'
Error: ENOENT: no such file or directory, open '/home/x1z53/git/ALTKDEWiki/nvidia/nvidia-nouveau/index.md'
    at Object.readFileSync (node:fs:448:20)
    at file:///home/x1z53/git/ALTKDEWiki/node_modules/@nolebase/vitepress-plugin-og-image/dist/vitepress/index.mjs:425:40
    at task (file:///home/x1z53/git/ALTKDEWiki/node_modules/@nolebase/vitepress-plugin-og-image/dist/vitepress/index.mjs:111:20)
    at file:///home/x1z53/git/ALTKDEWiki/node_modules/@nolebase/vitepress-plugin-og-image/dist/vitepress/index.mjs:415:11
    at async Object.buildEnd (file:///home/x1z53/git/ALTKDEWiki/.vitepress/config.mts.timestamp-1720595814809-c89b952138c53.mjs:368:5)
    at async build (file:///home/x1z53/git/ALTKDEWiki/node_modules/vitepress/dist/node/serve-BhLFz9dF.js:47110:3)
...

Based on this error, I see that it incorrectly forms paths to MD files. Here is a simplified project structure:

ALTKDEWiki
┣ .vitepress
┃ ┗ config.mts
┗ docs
  ┣ apps
  ┃ ┗ arianna
  ┃   ┗ index.md
  ┗ graphics
    ┗ nvidia
      ┣ index.md
      ┣ nvidia-drivers
      ┃ ┗ index.md
      ┗ nvidia-nouveau
        ┗ index.md

After looking at the code a bit, I wrote a "crutch" in order to try to work around this error:

...
  async buildEnd(siteConfig) {
    function updateItemLinks(items, base) {
      items.forEach((item) => {
        item.link = "/docs" + base.slice(0, -1) + item.link;

        if (item.items) updateItemLinks(item.items, base);
      });
    }
    siteConfig.site.themeConfig.sidebar["/"].forEach((sidebarItem) => {
      const base = sidebarItem.base;
      updateItemLinks(sidebarItem.items, base);
    });
    const newBuilder = buildEndGenerateOpenGraphImages({
      category: {
        byCustomGetter: (page) => {
          console.log(page.frontmatter);
          return page.frontmatter.title;
        },
        fallbackWithFrontmatter: true,
      },
    });

    await newBuilder(siteConfig);
  },
...

After that, the compilation was successful, but there was no generation:

...
✓ @nolebase/vitepress-plugin-og-image: rendering open graph images... (14ms) 0 generated, 44 skipped, 0 errored

 - Following files were skipped:

    - .vitepress/dist/licence.html: correspond Markdown page not found in sidebar
    - .vitepress/dist/index.html: correspond Markdown page not found in sidebar
    - .vitepress/dist/404.html: correspond Markdown page not found in sidebar
...

I can finally reproduce this issue. Let me investigate it.

This was so interesting that it only take place when the file name is index.md. VitePress must break something during the past versions of releases.

For example, in nolebase/nolebase, og-image will try to read the following file:

/Users/neko/Git/nolebase/nolebase/笔记/📦 收集箱/🐙 GitHub 项目/maplibre/index.md

However, at the same time, the file is actually named:

[
  "index.md.md"
]

(or the only file that live in the directory of its parent.

Not sure what happended, but on my side, the issue was caused by the filename that accidentally named to index.md.md...

Will close for now, feel free to open again if you got different cases. Or perhaps, a minimal reproduction would be awesome for me to investigate.