-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Auto generate sidebar according to the docs folder structure #3464
Comments
We could have the both options. It seems a good proposal for me. |
This comment has been minimized.
This comment has been minimized.
If this ends up with a new option in the
Perhaps prefixing numbers in the files: |
Why not, but you'd rather add slug frontmatter to have nice url paths I guess the category labels should be inferred from the folder names. So this means folder names should also have a number prefix for ordering. That also means it's not possible to have docs without sidebar, nor multiple sidebars, nor refs or external links in sidebars, so this option is limited compared to have a proper sidebars file. Wonder if it's really worth it. It may as well be quite confusing and add some complexity for no real gains except replacing centralised config boilerplate by number prefixes and frontmatter boilerrplate. Do you really see yourself using such a feature? If so, I'd like to ask you a commitment first. For example:
|
I wrote a script for one of our monorepos that generates markdown from jsdoc comments, keeping the folder structure, and then auto-generates the sidebars.js while preserving any custom entries. It needs a few tweaks like alphabetizing and removing non-existent files, but it should give you a starting point for your project. https://gist.github.com/arinthros/526df3ef12383d26903c1c8588211cca The sidebar structure looks like this
|
@arinthros Sounds very cool! Just to mention, the https://github.com/felipecrs/megatar/blob/master/website/sidebars.js#L5 The plugin generates the |
Not only. As per my initial proposal, further customizations for the categories could be made through an
I was not thinking this way. I think we must add this feature in a way that you are free to use both methods (manual or auto-generated sidebars). Something like: // sidebars.js
module.exports = {
sidebar: [
"introduction",
"API": './api/'
]
} Notice that in
Yes, but I totally understand that you should not waste time to implement a feature if you have a single user. Perhaps some kind of votation could help? (I'm just imagining)
https://felipesantos.dev/megatar Not a production-grade example though.
The
The sidebars labels are already customized because of the |
Thanks for the infos. I need to work on i18n, not sure there's a huge need for this right now, and we need to figure out a good API surface for this feature first, so unless someone wants to help design/implement this will wait, but we can keep the discussion about API design. An idea could be to use a special kind of category type, somehow quite similar to your proposal but maybe more explicit.
One important thing to consider is that it should work well with versioning. If we copy the sidebars.js to the versioned folders, it should still work so we should avoid relative paths/imports in this sidebars file, so creating "utils" to generate a sidebars slice from a relative path is likely not a good idea (related to #3285 (comment)). |
Awesome, your design is more refined than what I proposed. LGTM. |
Above example would be generated from this directory:
[tree credits], where all .md files have a If later Design Principles itself becomes a folder (which will be then be an autogenerated category), e.g.
or if the category is an i18n name or something like Why Docsaurus?, we have a problem. Thus, I suggest to a
This would make the Docs only mode much more useful. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
+1 for this feature. The use case is that docusaurus docs are autogenerated, and keeping track of said files in the sidebar file will surely lead to issues. What I did to resolve this issue, is have a separate script (eg. This way I can choose when and how to use the generated sidebars, and no other configuration is required. Implementation details:
Here's an example implementation: https://gist.github.com/rudasn/e4f501cdfa7e066e4a4ecf7804a10894 |
I was looking into this feature for a project that's migrating away from Github Wiki for their docs (links to detailed discussion comparing the merits between MkDocs and Docusaurus v2 for a community project with few maintainers, reliant on contributors and minimal web dev experience for most). MkDocs by default generates the sidebar based on the docs folder and lists items in alphanumeric order. It also supports directories which are being sorted below files at the same level. If a user wants to control the navigation they add a hierarchy similar to I noticed that Docusaurus doesn't explicitly state These additional gotchas and config overhead like this issue are making Docusaurus a less attractive option to adopt despite my advocating for the flexibility and powerful configuration that Docusaurus brings to the table. I think this is an important consideration to sort out for v2 while in alpha (especially since the docs state that I did come across a third-party Docusaurus plugin (
For the basic purpose of generating the sidebar implicitly, it's quite useful especially when you're migrating your docs over from another docs platform.
@rudasn this is a nice idea 👍 I think it's better to avoid regular docs files having anything specific to the category/directory docs are located in via their frontmatter especially when dependent on sort order. The I don't think that categories or docs need individual sort priority properties. They just need to provide a number, and that can easily be collected into an array for content at that level using native sort (
They should not require that, the feature afaik is primarily for convenience and would additionally help with new user adoption especially for projects migrating and wanting to get a minimal setup going with their existing docs (possibly already structured via folder hierarchy). There should be minimal friction towards this. Being more explicit or having other features when required, especially if available piecemeal (eg
These are all great features and I think they speak greatly for the capabilities of Docusaurus. As a new user evaluating Docusaurus, the default "hello world" project that the docs introduce was a nice overview with the landing page and complimentary blog and footer links. I didn't need any of that though and had to figure out what I could strip out. I used the "docs only" mode which required some additional configuration changes along with some build errors from the boilerplate which had me sifting through the docs to grok how to produce a focused demo of what Docusaurus can do for docs specifically. We have no external links. I don't know what refs are (markdown frontmatter id that from what I could gather from the docs can't be used to as links to other docs within markdown files?); The docs suggest that I can't use filepaths and need to add frontmatter to add id values for each doc to reference in Setting up the I read about multiple sidebars, but don't recall that in the getting started demo, and not sure if that clicked very well when I saw it in the docs. I'm sure it has it's uses, but for someone like me who wanted to just autogenerate docs to get started and play around with real docs, none of these extra features were immediately important and I'm sure would be more acceptable when actually required.
Again not something I used. Seemed like a nice feature, but the docs did warn caution against it due to the way versioning is implemented. Thus they can't make updates to old code on the master branch and for them there isn't value in having a group of directories named by version release since they'd fall out of sync with the codebase and serve little value for them while confusing contributors (or users viewing older docs since the edit page links to master instead of the versioned branch). At least that's what I gathered from that link. From what I can tell, they seem to be migrating to Gatsby instead, I'm not sure if it's due to that issue or other reasons. For the project I'm contributing to, the versioning feature sounds desirable, but we also want to keep the docs folder simple for contributors, the versioned branch approach that vector takes (or using tags) seems more ideal. TL;DR
|
hi i have nothing to do with all of this but here are my 2 cents.... |
@Pl8tinium for the time being you can leverage the docusaurus plugin I mentioned or other solutions shared here prior. If you'd like to consider MkDocs I can confirm it's easy to setup locally if opting for the more featured (by default) MkDocs Setting up the Github Actions workflow is also pretty easy for deployments on push to master/main branch. Docusaurus docs are a bit over-complicated for this, I recently picked up Github Actions for CI and have an easier workflow that I'll contribute to the docs for the benefit of others. I have found MkDocs has a third-party plugin/extension called Then you just update the This is quite a nice workflow for tackling the solution and might be a useful reference for Docusaurus to consider? Something like There's a related feature request for upstream MkDocs (since 2015) as MkDocs only offers explicit or implicit sidebar/nav without that linked extension. In that feature request, the OP is referencing GlusterFS docs which involved a 200 line config for nav where sometimes it'd be nice to just explicitly declare top-level categories and then glob the directory files and any nested children. |
thanks for that suggestion. i should have said ... "that there is no integrated auto generation" still probably going to pick docusaurus bc of the customizability |
This is much needed feature. We have tons of markdown files divided into subfolders. It would be brilliant if Docusaurus supported targeting subdirectories instead of 1:1 matching everything. It's indeed error prone, we just noticed couple of docs weren't actually mapped to the sidebar because of developers didn't update the |
FYI, we have decided that this feature is a top priority for the beta launch, and I'll work on this very soon! Will read again all your comments before I start. It is a very visible feature that can make Docusaurus more intuitive for newcomers: some end up creating a doc file and don't really understand how to navigate to this doc file, as it requires reading the doc to know about the In general, I believe we should make it easier to use Docusaurus without any frontmatter at all for the most simple cases. We'll move the init template example to have no sidebars.js file, and also dogfood this on our own website. Just merged this PR that allows using a markdown heading like I also think we should support ordering with a numbered prefix as it's a quite popular convention. The new init template might look like: docs
├ 1-Intro.md
├ 2-Getting Started.md
├ 3-Tutorial.md
└-4-Advanced guides.md We'll also support auto-generating only a "slice" of your sidebar, so that you can have more control over some other parts and yet keep the reduced boilerplate of auto-generation (and we'll dogfood that on the Docusaurrus site itself as we want to display the new init template docs tutorial here!) Does this all make sense? |
@slorber I love the 'slice' concept. We follow this general sidebar structure when using Docusaurus v2.
|
Great to see this taking priority!
This is the right approach. I would stress that it would be great to have a hook function that allows full customization of the sidebar allowing anyone to override the default implementation (that function would take arguments of all id file mappings as I mentioned elsewhere).
Re-ordering can be difficult. Prisma use a cli tool though -> https://github.com/prisma/docs#inserting-moving-and-deleting-files. Maybe good to mention somewhere in docs...or even support it via a docusaurus cli. |
Asking for feedbacksI've made some progress on this feature and would like to have your feedbacks. Sidebar configuration:You can use a new sidebar item type module.exports = {
mySidebar: [
'my-doc-1'
{
type: 'category',
label: 'Some category',
items: [
'my-doc-2'
{
type: 'autogenerated',
dirName: 'api', // generate sidebar slice from docs/api (or versioned_docs/version/api)
},
],
},
],
}; By default, a Docusaurus site will auto-generate from its The default/fallback sidebar config in case sidebars.js is absent: module.exports = {
defaultSidebar: [
{
type: "autogenerated",
dirName: "." // generate sidebar slice from docs (or versioned_docs/version)
}
]
}; A "sidebar slice" will generate a list of sidebar items (be replaced with), and you can "concat" 2 sidebar slices under a single sidebar category if you want: module.exports = {
mySidebar: [
{
type: "category",
label: "Guides",
items: [
{
type: "autogenerated",
dirName: "guides/tutorial"
},
{
type: "autogenerated",
dirName: "guides/i18n"
}
]
}
]
}; Category metadata fileDocusaurus will look for a When we'll implement category index files, we'll read this metadata directly on the Sidebar orderingA new category and doc metadata/frontmatter By default, Docusaurus will look for number prefix patterns in filenames and dirnames, and try to use those when there is no explicit The number prefixes will be stripped to keep clean slugs/urls, titles and ids, so that in most cases you don't need to provide custom frontmatter. You can opt-out from extracting the number prefix from filenames if your doc really needs to start with a number ( Provide your own generatorDocusaurus has a default way to generate a sidebar from the FS. We could allow users to provide their own generator function by using docs plugin like It would be a hook/function that would receive the "autogenerated" sidebar items we found, and would have to return the sidebar slice that would replace the autogenerated item. It would receive the version and all available docs metadatas. Signature export type SidebarItemsGenerator = (generatorArgs: {
item: SidebarItemAutogenerated;
version: VersionMetadata;
docs: DocMetadataBase[];
}) => Promise<SidebarItem[]>; Feedback questionsAbout the new sidebar item
About position metadata:
About number prefixes:
About
Worth mentioning:
|
Let me know if anyone has any feedback or concern with my implementation, names or anything. The PR is ready to merge, just need to add the doc now so will likely merge it tomorrow. |
The proposed design seems very good to my perspective. I don't have any concerns. |
@slorber I read through this the other day, and had some time to process. Overall I think this is a great approach, well done. I don't think we would have a use case for numerical sort ordering of auto-generated content, we prefer the default alphabetical ordering of file names/titles so it's easier to find in the nav. But maybe there are others who would use numbering?
Sounds good to me. It's explicit about its purpose.
I would think the numbering would be scoped to the slice, so not interleaved. I think the complexity of interleaving could be its own feature - or some sort of param boolean to enable or merge sort order. How would conflicts be handled?
Agreed. Re-sorting a manually sorted list could lead to unintended confusion/bugs. |
If we want a custom sort order, we would manually do that in the sidebar.js file and use slices for the rest. So maybe slices would ignore plucked files, kind of how object spread works in React?
|
Thanks for the feedbacks, so it seems my implementation is good enough to merge.
For now we don't "deduplicate" items, so basically you can do that and end-up with the sidebar slice being generated twice: module.exports = {
mySidebar: [
{
type: "autogenerated",
dirName: "tutorials"
},
{
type: "autogenerated",
dirName: "tutorials"
}
]
}; I don't think we shuld do anything clever regarding this kind of situation. We could add a way to include/exclude some docs by using glob patterns: module.exports = {
mySidebar: [
{
type: "autogenerated",
dirName: "tutorials"
include: "**/easy-*.md"
},
{
type: "autogenerated",
dirName: "tutorials"
include: "**/easy-*.md"
}
]
}; I don't think this is needed now, but that can be added later if this is requested. |
@slorber is there a way to specify items within an autogenerated slice by file? Possibly use the I want just the top level of my slice to be autogenerated to avoid confusion for others maintaining another section of our docs that want to use autogenerated slices all the way down. |
@slorber I have a perception that git diffs will be cleaner and rebases will also have less merge conflicts if I'm encoding my documentation structure in a file versus using the file-system concept to set the doc structure. |
Documentation structure as code versus documentation structure as filesystem. It is easier to change the contents of a limited number of files versus moving files around the filesystem and having to modify lots of |
This is my personal preference having experiences with this sort of thing in the past. Other people on the team including maintainer of our docs repository currently prefer the autogeneration. |
@0Grit it's still hard to understand to me. If you just auto-generate on a single level, why don't you just not auto-generate and declare an explicit sidebar category instead? You can put all your docs flat in a single folder and create your sidebar tree manually: no file move needed |
@slorber Yes, your recommendation, is what I was going to end up doing. |
🚀 Feature
Auto generate sidebar according to the docs folder structure.
Have you read the Contributing Guidelines on issues?
Yes
Motivation
For me, it seems to be redundant to manage both the sidebars file and the
docs
folder structure, since the sidebars can be inferred from it.Also, every time I add a new md file, I have to add it to the
sidebar
. This might not be a problem for fully manual work, but it's a problem when the md files can be generated automatically so we don't know beforehand what would be their IDs.Pitch
Let's consider a
docs
folder like this:We would need to set a sidebars like that to properly show this:
This could be inferred automatically rather than requiring the user to maintain a separate file. Further customizations could be made through Front Matter in each doc. In case a folder requires personalization, a
README.md
could also be created for it.The text was updated successfully, but these errors were encountered: