Lab 6 - Adding Docusaurus features

Intro

For my sixth lab, I have to make a website with Docusaurus and host to GitHub. Also, add some features similar to Docusaurus in my ssg project.

Docusaurus

To initialize Docusaurus I ran the command npx create-docusaurus@latest my-website classic --typescript.
After that, I started to customize the website.
I modified the theme color in the custom.css files.
I also removed all the other docs and blog that was pre-generated from the template and added mine.
I set up my index page to redirect to /text-ssg-docs/docs/introduction"

import React from 'react';
import { Redirect } from '@docusaurus/router';


export default function Home(): JSX.Element {
  return <Redirect to="/text-ssg-docs/docs/introduction" />;
}

I also add my documentation of my SSG project + some of my blog.

To deploy to GitHub I had to follow this instruction GitHub Deployment
Edited docusaurus.config.js config file to fix my setup

title: 'Text-ssg docs',
    tagline: 'Dinosaurs are cool',
    url: 'https://Kevan-Y.github.io',
    baseUrl: '/text-ssg-docs/',
    onBrokenLinks: 'throw',
    onBrokenMarkdownLinks: 'warn',
    favicon: 'img/favicon.ico',
    organizationName: 'kevan-y', 
    projectName: 'text-ssg-docs', 

Then I pushed my change to my repo. To deploy I have to run
cmd /C 'set "GIT_USER=<GITHUB_USERNAME>" && yarn deploy' This will make a new branch in my repo and use that branch commit to host the website on GitHub.

Adding Docusaurus to my ssg project

I decided to use a third party package to have the full markdown feature + highlight with highlight.js. Issue#24

First I need to configure markdown-it and highlight

const hljs = require('highlight.js');

//Markdown config
const md = require('markdown-it')({
    html: true,
    linkify: true,
    typographer: true,
    highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
            try {
                return hljs.highlight(str, { language: lang }).value;
            } catch (__) {}
        }

        return ''; // use external default escaping
    },
});

Then removes the old part markdown conversion and replace by dataTreated.content = md.render(data);.
After that, the implementation is done.