Search code examples
javascripthtmlcssdocumentation

how to create documentation from markdown inside docs folder on github? javascript

I have seen a lot of docs websites that have the same layout or same features. so I am wondering if there is a library used by all these docs.

how do they do this?

./docs -> files.md -> ./docs/files.html

like you see there are a lot of files with .md (sometimes also .mdx)

and they have the same functionalities (see below)

so I am wondering if they use the same js library to generate it?

enter image description here

I tried to search in all the repo, what they are using to generate, but nothing says the name of a library?

is there an npm package or CDN link to that js library?
that can get the .md files inside .docs, and based on the folder structure, create a list on the left with all topics, 2 buttons with next and previous, a button with edit this page on GitHub, etc...

if isn't possible I will do it by scratch, but writing HTML for every doc is time-consuming. I prefer some markdown fast, build consistent docs, and automatically added to the first-page list on the left.
also the routing thing for getting previous and next elements I need to do it manually and this can be time-consuming.

is there something that does that for me, some web API that gets files .md if I need to do it from scratch?
but still prefering npm package if there is.

Example:

previous and next docs.

  • react native

enter image description here

  • deno

enter image description here

  • lusift

enter image description here

and they have a button with the text EDIT THIS ON GITHUB

  • Mozilla docs MDN

enter image description here

when scrolling, it will change the color of the currently viewed section

  • sketch API

enter image description here

but I never find the name of the library.

other functionalities are...

  • multi-page and much more...

(I tried to search on Github, but never find it)

it's there a good docs generator for a programming library that I create?

I also google it: https://www.google.com/search?q=javascript+library+documentation

but nothing. the libraries there are for API GET/POST swagger etc...

but I am wanting a library for functions like if you write this function this happen, maybe also code snippet functionality to see what result give you that function.

something similar to StackOverflow. text to HTML (but not need any server-side things comlicated... just keep it simple the files are inside .docs in GitHub, so just simple stuff.

maybe I am writing wrong the google keyterm

Solution

  • I found the solution to this, by using the @evolutionxbox comment.

    how to find?

    if you want to find what library is used in a GitHub repo,
    go to the package.json, there you can find the list of libraries that is used on the project

    enter image description here

    the name?

    in this case, the library used is DOCUSAURUS

    link: https://docusaurus.io/

    is very simple to config and solves the job!

    and is used by

    • Facebook,
    • and other big companies like:
      • supabase
      • redux
      • etc...