Getting to know about Docusaurus

What is docusaurus?

It is a react-based tool designed to make it easier for users to post documentation websites. In other words, basic website styles, forms, and simple document navigation are handy tools because they are parts that you do not need to take care of.

How to set it up?

The installation for this project is very simple.

First, create a folder to store this project and type the following instructions using the desired tool.

npx create-docusaurus@latest [name] [template]

Then another folder which is "name" is created, and various files are created in it. They look like the file tree below.

my-website
├-- blog
│ ├-- 2019-05-28-hola.md
│ ├-- 2019-05-29-hello-world.md
│ └-- 2020-05-30-welcome.md
├-- docs
│ ├-- doc1.md
│ ├-- doc2.md
│ ├-- doc3.md
│ └-- mdx.md
├-- src
│ ├-- css
│ │ └-- custom.css
│ └-- pages
│ ├-- styles.module.css
│ └-- index.js
├-- static
│ └-- img
├-- docusaurus.config.js
├-- package.json
├-- README.md
├-- sidebars.js
└-- yarn.lock

Next, enter the folder and run the command

npm run start 

or

yarn run start

After confirming that the program is successfully running, you can check the program at http://localhost:3000.

feature I copied from Docusaurus and why

I liked the style part of this project the most because I thought that the style of the program I created was not much different from the document's style. So, it did not have a website advantage. In particular, it was interesting to see the change in website style with dark and bright themes.

Plan to implement a new feature from docusaurus to my SSG

If I could apply this nice feature right into my project, there would be nothing better than that, but as of now, I have to go step by step with what is possible. So as a first step, we received a parameter called theme and planned to change the background colour based on the theme. And the way I did it was as similar as other parameters.

    .option('t', {
        alias: 'theme',
        describe: 'css theme',
        type: 'string',
        required: false
    })

I added the style tag in my html generator format like below,

   <style>
    .container {
        width: 70%;
        margin: 0 auto;
    }
    ${theme && getThemeStyle(theme)}
    </style>

and I added a simple function for the theme.

function getThemeStyle(theme) {
    return theme === 'dark' 
    ? `body {background-color: black; color: white;}` : `body {background-color: white; color: black;}`;
}

By doing this, this feature wasn't completed. This step is just a prototype which I could do for now, and it needs to be improved step by step.

Next steps for the feature

In the next step, we will focus on more detailed changes depending on the background and further implement background changes using buttons in the domain.