DEV Community

CDPhu
CDPhu

Posted on

Docusaurus

Starting off week 7 we are asked to pick a feature of Docusaurus that we would have to implement into our code. The following list is the possibilities of what we can do:

  • Search Engine Optimization (SEO), including meta tags in the HTML head
  • Improved Accessibility of generated HTML
  • Support for React components
  • Themes
  • Plugins
  • Configurable Sidebar (i.e., table of contents)
  • Full Markdown support (e.g., swap out your basic version for an open source library/module that does it fully)
  • Syntax Highlighting for code blocks
  • Search
  • Static Assets for images, stylesheets, etc.
  • Markdown Frontmatter support
  • Blog posts in addition to Pages

How would you describe Docusaurus to a friend who has never used it before?
Docusaurus is a tool designed to make it easy for teams to publish documentation websites without having to worry about the infrastructure and design details.

What was it like to set up a Docusaurus project?
Setting up a Docusaurus is as fast as running one script. Everything is ready to deploy, just need to replace some name and links. Note: Replace "my-website" with the name you want.

npm init docusaurus@latest my-website classic
Enter fullscreen mode Exit fullscreen mode

After that modify a couple values that will allow to push to GitHub and run the program on pages.

https://lostbutton.github.io/my-doc/

Which feature did you decide to copy from Docusaurus? Why did you choose it?
Full Markdown support (e.g., swap out your basic version for an open source library/module that does it fully)
I thought, since we already implemented something similar, why not go for a full markdown support? So that's exactly what I did.

How did you approach adding it to your SSG?
First I had to find a library that is capable of converting and provide markdown support. In a previous lab I have refactored my code so that to convert a markdown file, it would have to call a function. All I had to do was figure out how to render it and push it into the string array so that it could be returned so then it can be converted into the html.

How did the planning experience compare to the actual work? How close were you in your estimation about what you could get done vs. what was left for the future?
The concept itself was simple, though the execution for trying to figure out how the syntax really worked gave me trouble. It was what I just about expected.

Top comments (0)