DEV Community

CDPhu
CDPhu

Posted on

1

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.

Quadratic AI

Quadratic AI – The Spreadsheet with AI, Code, and Connections

  • AI-Powered Insights: Ask questions in plain English and get instant visualizations
  • Multi-Language Support: Seamlessly switch between Python, SQL, and JavaScript in one workspace
  • Zero Setup Required: Connect to databases or drag-and-drop files straight from your browser
  • Live Collaboration: Work together in real-time, no matter where your team is located
  • Beyond Formulas: Tackle complex analysis that traditional spreadsheets can't handle

Get started for free.

Watch The Demo 📊✨

Top comments (0)

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

If you found this post useful, please drop a ❤️ or leave a kind comment!

Okay