Flatten docs routing path

[tomy0000000]

Let's say I have the following docs structure.

docs
├── developing
│   ├── algorithms
│   ├── cli.md
│   ├── cloud.md
│   ├── database.md
│   ├── languages
│   ├── logistics.md
│   ├── package-managers.md
│   ├── setup
│   ├── specifications.md
└── travel
    ├── biking.md
    ├── cities.md
    ├── driving
    ├── flying.md
    └── transit.md

In addition, I have two navbars: developing and travel. I have more docs nested under this structure, and more often than not, I move docs around. Let's say maybe I want to move logistics.md under algorithms, so its path changes from /developing/logistics to /developing/algorithms/logistics. All my existing links are now failed.

Even though I move them all the time, I rarely change the base name. In this case, logistics is still logistics. This had me wondering:

Would it be possible to have a flattened docs structure?

In this case, the logistics page will always be available at /logistics, no matter where I put them, no matter how many times I have moved them.

Let's assume no multiple docs have the same base name.

Method 1

Move all docs to the top level docs directory, Docusaurus will generate all doc page with path: /{id}. However, I'll have to:

1. Manually build all sidebars
2. Assign sidebar in each docs front matter

Method 2

Add slug to each docs front matter. It's better than method 1, but I still have to manually change every doc and add them to future ones.

Method 3

There's gotta be some ways I can achieve this at Docusaurus's level, right? Perhaps tweaking some config? Adding a plugin? Swizzling some components?

Thoughts are welcome.

[Josh-Cena]

As we already say in the docs:

Our recommendation for file system organization is: make your file system mirror the sidebar structure (so you don't need to handwrite your sidebars.js file), and use the slug front matter to customize URLs of each document

Which fits your method 2. Method 3 is also possible, which just means you'll use the parseFrontMatter config option to programmatically inject a slug front matter.

[tomy0000000]

This is precisely what I was looking for!

In case anyone needs this. Here's my docusaurus.config.ts:

const slugger = new GithubSlugger();

const config: Config = {
  ...
  markdown: {
    ...
    parseFrontMatter: async (params) => {
      const result = await params.defaultParseFrontMatter(params);
      const filePaths = params.filePath.split("/");
      const fileName = filePaths.pop();
      let slug = fileName.split(".").shift();
      if (slug === "README") {
        slug = filePaths.pop();
      }
      result.frontMatter.slug = `/${slugger.slug(slug)}`;
      return result;
    },
    ...
  },
  ...
}