Fourth stage - Checking out what's under the hood -- "*your code* 😉"

This is the most exciting part. Understand the code behind the awesome Docusaurus and c customizing it to be your own.

First, let's look at the structure of the code.

We wrote down what each part meant so it would be easier for you to follow.

Just to note, we will be using a lot of Markdown Syntax for our blog and docs. Here's a link to the Markdown Guide to help you with the basic syntax. Another helpful tool is StackEdit.io. It's an online platform that converts your text to markdown so all you need to do is copy and paste once you have created your content.

Blog Section

The only thing that you need to know about the blog section is that all the blog posts are stored inside the blog folder. Also the naming convention, should be date-article-slug.md.

The date is needed as it will be used as the blog post date. Here is how everything is connected.

Docs Section

The most important part in the Docs section is the docs folder and sidebars.js. Inside the docs folder, we will need to save our markdown files. The name of the markdown files will be used as the file id so make sure it is unique.

Inside a sample doc file doc1.md:

There are two main parts of the a docs markdown file:

1. Front matter - consist of id, title, sidebar_label.

2. Content - written in markdown.

Markdown File

Output

Here's how the docs in the docs folder is connected to sidebars.js and what it looks like in the output:

The Docusaurus is the section title, while the document id are the strings inside the arrays. The sidebar_label written in the front matter are the ones being shown as the text on the sidebar.

If you want to have two words in the section title, all you have to put the title in a quotes. Example "Lesson One". Make sure that all section title have quotes as well to prevent errors.

Landing Page Section

The important parts of the landing page section are:

• docusaurus.config.js - holds the data that is being shown in the navbar, footer, title, tagline and more.
• index.js - contains the components on our landing page
• static/img - contains the images used in this project

Updating Images:

Let's start with the images. If you have a logo available, all you have to do is exchange the logo.svg in the static/img folder. If it's in png, jpg, jpeg make sure to update the docusaurus.config.js logo details with the correct file name. Logo details can be found in line 14.

This would be the same on the images found in the landing page except that in the feature section, it is found inside the index.js file under the imageUrl.

Updating Content

For the Navbar, Header, Footer, Title, Tagline, all of them are located at the docusaurus.config.js. Just update the content inside the " " marks (aka strings).

For the Feature related details, all of them are located in the index.js. Just update the content inside the feature object.

Updating Design Style

For color changes, it is located in the custom.css. You can change the colors there as you preferred. There are also some styles in the style.module.css that you can customize.