Firstly, BIG THANKS to all of you working on this great project, which is very promising in combination with vite + react
setup. I'm actually integrating this as my doc site. I followed the advanced FS routing
to apply my own pageStrategy. Now I want to add images to my markdown files.
- docs/
|-- _theme.tsx
|-- index.html
|-- README.md <-- this page requires the diagram.png
| .. something like ![my-diagram](./static/images/diagram.png)
`-- static
`-- images
`-- diagram.png
- output/
`-- docs/ <-- this is the expected outDir
- package.json
- tsconfig.json
- vite.config.ts
import { defineConfig } from 'vite';
import { resolve } from 'path';
import react from '@vitejs/plugin-react';
import mdx from 'vite-plugin-mdx';
import pages, {
PageStrategy,
FileHandler,
extractStaticData,
} from 'vite-plugin-react-pages';
export default defineConfig({
plugins: [
react(), // this is my adoption, hopefully not related to this question
mdx(),
pages({
pagesDir: resolve(__dirname, 'docs'),
pageStrategy: new PageStrategy(function findPages(pagesDir, helpers) {
helpers.watchFiles(
pagesDir,
'**/*.md',
fileHandler
);
})
}),
],
root: 'docs',
base: '/help/', // to be served from 'http://my-server/help/'
build: {
outDir: '../output/docs',
emptyOutDir: true
}
});
const fileHandler: FileHandler = async (file, fileHandlerAPI) => {
const pagePublicPath = getPagePublicPath(file.relative);
fileHandlerAPI.addPageData({
pageId: pagePublicPath,
dataPath: file.path,
staticData: await extractStaticData(file),
});
};
/**
* turn `sub-path/page2/welcome.md` into `/sub-path/page2/welcome`,
* and `sub-path/page2/README.md` into `/sub-path/page2`
*/
function getPagePublicPath(relativePageFilePath: string) {
let pagePublicPath = relativePageFilePath.replace(
/(README)?\.md$/,
''
);
// remove ending slash
pagePublicPath = pagePublicPath.replace(/\/$/, '');
// add starting slash
pagePublicPath = `/${pagePublicPath}`;
console.log(`find new page: [${relativePageFilePath}] -> ${pagePublicPath}`);
return pagePublicPath;
}