diff --git a/docs/.editorconfig b/docs/.editorconfig
deleted file mode 100644
index 134bc64..0000000
--- a/docs/.editorconfig
+++ /dev/null
@@ -1,20 +0,0 @@
-# editorconfig.org
-
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_size = 4
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true
-block_comment_start = /*
-block_comment = *
-block_comment_end = */
-
-[*.{scss,css,js,json,yml,md}]
-indent_size = 2
-
-[acf-json/*.json]
-insert_final_newline = unset
diff --git a/docs/.eleventy.js b/docs/.eleventy.js
deleted file mode 100644
index 670c4c8..0000000
--- a/docs/.eleventy.js
+++ /dev/null
@@ -1,74 +0,0 @@
-require('dotenv').config();
-
-const { execSync } = require('child_process');
-const dateFilter = require('./src/filters/date-filter.js');
-const eleventyNavigationPlugin = require('@11ty/eleventy-navigation');
-const htmlMinTransform = require('./src/transforms/html-min-transform.js');
-const isProduction = process.env.NODE_ENV === 'production';
-const markdownIt = require('markdown-it');
-const markdownItAnchor = require('markdown-it-anchor');
-const pluginTOC = require('eleventy-plugin-toc');
-const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
-const w3DateFilter = require('./src/filters/w3-date-filter.js');
-const parentFilter = require('./src/filters/parent-filter.js');
-const markdownRenderShortcode = require('./src/shortcodes/markdown-render.js');
-const svgIconShortcode = require('./src/shortcodes/svg-icon.js');
-
-module.exports = config => {
- config.addFilter('dateFilter', dateFilter);
- config.addFilter('w3DateFilter', w3DateFilter);
- config.addFilter('parentFilter', parentFilter);
- config.addFilter('debugger', (...args) => {
- console.log(...args);
- debugger;
- });
-
- config.addPlugin(eleventyNavigationPlugin);
- config.addPlugin(syntaxHighlight);
- config.addPlugin(pluginTOC);
-
- config.addPassthroughCopy({ './src/robots.txt': '/robots.txt' });
- config.addPassthroughCopy('./src/img/**');
- config.addPassthroughCopy('./src/css/**');
- config.addPassthroughCopy('./src/js/**');
- config.addPassthroughCopy('./src/font/**');
-
- config.addCollection('posts', collection => {
- const items = collection.getFilteredByGlob('./src/posts/**/posts/*.md');
- return items.sort((a, b) => a.data.eleventyNavigation.order - b.data.eleventyNavigation.order);
- });
-
- config.addAsyncShortcode('svgIcon', svgIconShortcode);
- config.addAsyncShortcode('markdownRender', markdownRenderShortcode);
-
- if (isProduction) {
- config.addTransform('htmlmin', htmlMinTransform);
- }
-
- const markdownLib = markdownIt({ html: true }).use(
- markdownItAnchor,
- {
- permalink: true,
- permalinkClass: 'anchor',
- permalinkSymbol: '#'
- }
- );
-
- config.setLibrary('md', markdownLib);
-
- config.on('eleventy.after', () => {
- execSync(`npx pagefind --source dist --glob \"**/*.html\"`, { encoding: 'utf-8' })
- });
-
- return {
- markdownTemplateEngine: 'njk',
- dataTemplateEngine: 'njk',
- htmlTemplateEngine: 'njk',
- dir: {
- input: 'src',
- output: 'dist'
- },
- passthroughFileCopy: true,
- pathPrefix: './',
- };
-};
diff --git a/docs/.github/spruce-docs-preview-mockup-2.png b/docs/.github/spruce-docs-preview-mockup-2.png
deleted file mode 100644
index 0a50568..0000000
Binary files a/docs/.github/spruce-docs-preview-mockup-2.png and /dev/null differ
diff --git a/docs/.github/spruce-logo-dark.svg b/docs/.github/spruce-logo-dark.svg
deleted file mode 100644
index 756a4ee..0000000
--- a/docs/.github/spruce-logo-dark.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-
diff --git a/docs/.github/spruce-logo-light.svg b/docs/.github/spruce-logo-light.svg
deleted file mode 100644
index 4ee9e9f..0000000
--- a/docs/.github/spruce-logo-light.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-
diff --git a/docs/.github/sprucecss-cover.png b/docs/.github/sprucecss-cover.png
deleted file mode 100644
index 6d26f42..0000000
Binary files a/docs/.github/sprucecss-cover.png and /dev/null differ
diff --git a/docs/.github/workflows/test.yml b/docs/.github/workflows/test.yml
deleted file mode 100644
index e611c1f..0000000
--- a/docs/.github/workflows/test.yml
+++ /dev/null
@@ -1,39 +0,0 @@
-name: Test
-
-on:
- push:
- branches: [ main ]
- pull_request:
- branches: [ main ]
-
- workflow_dispatch:
-
-jobs:
- lint:
- name: Lint
- runs-on: ubuntu-latest
-
- steps:
- -
- name: Checkout repository
- uses: actions/checkout@v3
- -
- name: Set up Node.js
- uses: actions/setup-node@v3
- with:
- node-version: 'lts/*'
- -
- name: Install dependencies
- run: npm ci
- -
- name: Run linter
- run: npm run sass:lint
- -
- name: Check EditorConfig configuration
- run: test -f .editorconfig
- -
- name: Check adherence to EditorConfig
- uses: greut/eclint-action@v0
- with:
- eclint_args: |
- -exclude=css/*
diff --git a/docs/.gitignore b/docs/.gitignore
index d7b039c..b2d6de3 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -1,176 +1,20 @@
-### macOS ###
-# General
-.DS_Store
-.AppleDouble
-.LSOverride
+# Dependencies
+/node_modules
-# Thumbnails
-._*
+# Production
+/build
-# Files that might appear in the root of a volume
-.DocumentRevisions-V100
-.fseventsd
-.Spotlight-V100
-.TemporaryItems
-.Trashes
-.VolumeIcon.icns
-.com.apple.timemachine.donotpresent
+# Generated files
+.docusaurus
+.cache-loader
-# Directories potentially created on remote AFP share
-.AppleDB
-.AppleDesktop
-Network Trash Folder
-Temporary Items
-.apdisk
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
-### Node ###
-# Logs
-logs
-*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-.env*.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Storybook build outputs
-.out
-.storybook-out
-storybook-static
-
-# rollup.js default build output
-dist/
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# Temporary folders
-tmp/
-temp/
-
-### Windows ###
-# Windows thumbnail cache files
-Thumbs.db
-Thumbs.db:encryptable
-ehthumbs.db
-ehthumbs_vista.db
-
-# Dump file
-*.stackdump
-
-# Folder config file
-[Dd]esktop.ini
-
-# Recycle Bin used on file shares
-$RECYCLE.BIN/
-
-# Windows Installer files
-*.cab
-*.msi
-*.msix
-*.msm
-*.msp
-
-# Windows shortcuts
-*.lnk
diff --git a/docs/.node-version b/docs/.node-version
deleted file mode 100644
index 3c03207..0000000
--- a/docs/.node-version
+++ /dev/null
@@ -1 +0,0 @@
-18
diff --git a/docs/.stylelintrc.json b/docs/.stylelintrc.json
deleted file mode 100644
index 6850459..0000000
--- a/docs/.stylelintrc.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "extends": "stylelint-config-sass-guidelines",
- "plugins": ["stylelint-order"],
- "rules": {
- "selector-max-compound-selectors": 5,
- "max-nesting-depth": 4,
- "selector-no-vendor-prefix": [
- true,
- {
- "ignoreSelectors": ["/-moz-.*/", "/-ms-.*/", "/-webkit-.*/"]
- }
- ],
- "selector-no-qualifying-type": [
- true,
- {
- "ignore": ["attribute"]
- }
- ],
- "value-no-vendor-prefix": [
- true,
- {
- "ignoreValues": ["box"]
- }
- ],
- "selector-class-pattern": null,
- "scss/percent-placeholder-pattern": null,
- "order/properties-alphabetical-order": true
- }
-}
diff --git a/docs/CODE_OF_CONDUCT.md b/docs/CODE_OF_CONDUCT.md
deleted file mode 100644
index 3b882e9..0000000
--- a/docs/CODE_OF_CONDUCT.md
+++ /dev/null
@@ -1,123 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, religion, or sexual identity
-and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our
-community include:
-
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall community
-
-Examples of unacceptable behavior include:
-
-* The use of sexualized language or imagery, and sexual attention or advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of
-acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
-decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when
-an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
-representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-hello@conedevelopment.com.
-All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the
-reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing
-clarity around the nature of the violation and an explanation of why the
-behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series
-of actions.
-
-**Consequence**: A warning with consequences for continued behavior. No
-interaction with the people involved, including unsolicited interaction with
-those enforcing the Code of Conduct, for a specified period of time. This
-includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or
-permanent ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including
-sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public
-communication with the community for a specified period of time. No public or
-private interaction with the people involved, including unsolicited interaction
-with those enforcing the Code of Conduct, is allowed during this period.
-Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior, harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within
-the community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.0, available at
-https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
-
-Community Impact Guidelines were inspired by [Mozilla's code of conduct
-enforcement ladder](https://github.com/mozilla/diversity).
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see the FAQ at
-https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.
diff --git a/docs/LICENSE b/docs/LICENSE
deleted file mode 100644
index d18655c..0000000
--- a/docs/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Cone Development
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/docs/README.md b/docs/README.md
index 0600a8f..0c6c2c2 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,133 +1,41 @@
-
+# Website
-**Welcome to the official documentation of **Spruce Docs** Elventy theme. A small template you can use to document any of your projects.**
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
-
+### Installation
-![The preview image of the theme.](./.github/spruce-docs-preview-mockup-2.png)
-
-
-[![Github release](https://img.shields.io/github/v/release/conedevelopment/sprucecss-eleventy-documentation-template?color=2350f6&logo=github&logoColor=white&style=for-the-badge)](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/releases/latest)
-[![License](https://img.shields.io/badge/license-MIT-2350f6?style=for-the-badge)](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/LICENSE)
-
-A documentation template is always helpful. There are a lot of solutions to make one; we wanted to create our self-hosted version based on our favorite static site generator [Eleventy](https://www.11ty.dev/).
-
-By structure, it is simple, with two levels and additional custom templates like [FAQ]([/faq/](https://eleventy-documentation.sprucecss.com/faq/)) and [Changelog]([/changelog/](https://eleventy-documentation.sprucecss.com/changelog/)).
-
-## Spruce CSS
-
-The template is built on [Spruce CSS](https://sprucecss.com/), a small and customizable CSS framework. The main benefit of this is that you can use the Spruce UI components with dark mode and RTL support.
-
-## Features
-
-- Breadcrumb navigation built on [11ty Navigation Plugin](https://www.11ty.dev/docs/plugins/navigation/).
-- HTML minification in production mode.
-- Anchor headings.
-- Table of Content.
-- FAQ template.
-- Changelog template.
-- Static search integration with [pagefind](https://pagefind.app/).
-- Code highlighting.
-- RTL support.
-- Dark theme mode.
-- [svgIcon](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/src/shortcodes/svg-icon.js) shortcode: render any SVG icon inline and add optional classes.
-- [markdownRenderer](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/src/shortcodes/markdown-render.js): render any string (markdown) into HTML.
-
-## Setup
-
-1. **Clone the repository.**
-
-2. **Install the dependencies.**
-
- In the `package.json` file, you will find all of the dependencies (and scripts) to install them using the following command:
-
- ```shell
- npm install
- ```
-
-3. **Run the development mode**
-
- To run the development mode, use the `npm script`. This script will also watch for changes.
-
- ```shell
- npm start
- ```
-
-4. **Run the production mode**
-
- Before you go live, you should use the production script to compress the Sass files.
-
- ```shell
- npm run prod
- ```
-
-You can find some more npm scripts in the [package.json](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template/blob/main/package.json) that can be helpful.
-
-## Content Managment
-
-Adding content to the template is easy as almost everything is in Eleventy.
+```
+$ yarn
+```
-### The Basic Structure
+### Local Development
-Our base folder for the documentation pages is the `posts` folder. You must follow the folder structure, which means the `category` here. If you create a folder, you must make a list page with the same name as the folder. You must also create another `posts` folder under the `category` folder where your posts go. You must create the `posts.json` file that will parameter your `layout` and `permalink` values.
+```
+$ yarn start
+```
-### Eleventy Navigation
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-The theme utilizes the [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/), so you must explicitly set up the hierarchy. This is needed for the automatic sidebar navigation, the navigation order, and breadcrumb generation.
+### Build
-### Other Pages
+```
+$ yarn build
+```
-To create simple pages, make a file directly under the `src` folder and configure it with the available front matter.
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
-## Structure
+### Deployment
-```html
-spruecss-eleventy-documentation-template/
-├─ node_modules/
-├─ dist/
-├─ src/
-│ ├─ _data/
-│ ├─ _includes/
-│ ├─ css/
-│ ├─ filters/
-│ ├─ font/
-│ ├─ img/
-│ ├─ js/
-│ ├─ posts/
-│ ├─ scss/
-│ ├─ shortcodes/
-│ ├─ transforms/
-│ ├─ changelog.md
-│ ├─ faq.md
-│ ├─ index.md
-├─ .eleventy.js
-├─ package.json
-├─ README.md
-├─ ...
+Using SSH:
+```
+$ USE_SSH=true yarn deploy
```
-- **_data**: Some global data, like the name of your site and helpers like the active navigation element or current year.
-- **__includes**: All of the layout and partial templates.
-- **css**: The compiled CSS.
-- **filters**: The additional filters that you can use.
-- **font**: The custom fonts.
-- **img**: The static image files.
-- **posts**: The markdown contents.
-- **scss**: The Sass files.
-- **shortcodes**: The available shortcodes.
-- **transforms**: The transformations.
+Not using SSH:
-
+```
+$ GIT_USER= yarn deploy
+```
-[![Netlify Status](https://api.netlify.com/api/v1/badges/b7560c95-7035-491b-8c3f-94c43bea761e/deploy-status)](https://app.netlify.com/sites/sprucecss-eleventy-documentation/deploys)
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
diff --git a/docs/babel.config.js b/docs/babel.config.js
new file mode 100644
index 0000000..e00595d
--- /dev/null
+++ b/docs/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};
diff --git a/docs/blog/2019-05-28-first-blog-post.md b/docs/blog/2019-05-28-first-blog-post.md
new file mode 100644
index 0000000..02f3f81
--- /dev/null
+++ b/docs/blog/2019-05-28-first-blog-post.md
@@ -0,0 +1,12 @@
+---
+slug: first-blog-post
+title: First Blog Post
+authors:
+ name: Gao Wei
+ title: Docusaurus Core Team
+ url: https://github.com/wgao19
+ image_url: https://github.com/wgao19.png
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
diff --git a/docs/blog/2019-05-29-long-blog-post.md b/docs/blog/2019-05-29-long-blog-post.md
new file mode 100644
index 0000000..26ffb1b
--- /dev/null
+++ b/docs/blog/2019-05-29-long-blog-post.md
@@ -0,0 +1,44 @@
+---
+slug: long-blog-post
+title: Long Blog Post
+authors: endi
+tags: [hello, docusaurus]
+---
+
+This is the summary of a very long blog post,
+
+Use a `` comment to limit blog post size in the list view.
+
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
diff --git a/docs/blog/2021-08-01-mdx-blog-post.mdx b/docs/blog/2021-08-01-mdx-blog-post.mdx
new file mode 100644
index 0000000..c04ebe3
--- /dev/null
+++ b/docs/blog/2021-08-01-mdx-blog-post.mdx
@@ -0,0 +1,20 @@
+---
+slug: mdx-blog-post
+title: MDX Blog Post
+authors: [slorber]
+tags: [docusaurus]
+---
+
+Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
+
+:::tip
+
+Use the power of React to create interactive blog posts.
+
+```js
+
+```
+
+
+
+:::
diff --git a/docs/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg b/docs/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg
new file mode 100644
index 0000000..11bda09
Binary files /dev/null and b/docs/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg differ
diff --git a/docs/blog/2021-08-26-welcome/index.md b/docs/blog/2021-08-26-welcome/index.md
new file mode 100644
index 0000000..9455168
--- /dev/null
+++ b/docs/blog/2021-08-26-welcome/index.md
@@ -0,0 +1,25 @@
+---
+slug: welcome
+title: Welcome
+authors: [slorber, yangshun]
+tags: [facebook, hello, docusaurus]
+---
+
+[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
+
+Simply add Markdown files (or folders) to the `blog` directory.
+
+Regular blog authors can be added to `authors.yml`.
+
+The blog post date can be extracted from filenames, such as:
+
+- `2019-05-30-welcome.md`
+- `2019-05-30-welcome/index.md`
+
+A blog post folder can be convenient to co-locate blog post images:
+
+![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
+
+The blog supports tags as well!
+
+**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
diff --git a/docs/blog/authors.yml b/docs/blog/authors.yml
new file mode 100644
index 0000000..bcb2991
--- /dev/null
+++ b/docs/blog/authors.yml
@@ -0,0 +1,17 @@
+endi:
+ name: Endilie Yacop Sucipto
+ title: Maintainer of Docusaurus
+ url: https://github.com/endiliey
+ image_url: https://github.com/endiliey.png
+
+yangshun:
+ name: Yangshun Tay
+ title: Front End Engineer @ Facebook
+ url: https://github.com/yangshun
+ image_url: https://github.com/yangshun.png
+
+slorber:
+ name: Sébastien Lorber
+ title: Docusaurus maintainer
+ url: https://sebastienlorber.com
+ image_url: https://github.com/slorber.png
diff --git a/docs/docs/intro.md b/docs/docs/intro.md
new file mode 100644
index 0000000..45e8604
--- /dev/null
+++ b/docs/docs/intro.md
@@ -0,0 +1,47 @@
+---
+sidebar_position: 1
+---
+
+# Tutorial Intro
+
+Let's discover **Docusaurus in less than 5 minutes**.
+
+## Getting Started
+
+Get started by **creating a new site**.
+
+Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+
+### What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
+ - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+
+## Generate a new site
+
+Generate a new Docusaurus site using the **classic template**.
+
+The classic template will automatically be added to your project after you run the command:
+
+```bash
+npm init docusaurus@latest my-website classic
+```
+
+You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+
+The command also installs all necessary dependencies you need to run Docusaurus.
+
+## Start your site
+
+Run the development server:
+
+```bash
+cd my-website
+npm run start
+```
+
+The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
+
+The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+
+Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
diff --git a/docs/docs/tutorial-basics/_category_.json b/docs/docs/tutorial-basics/_category_.json
new file mode 100644
index 0000000..2e6db55
--- /dev/null
+++ b/docs/docs/tutorial-basics/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Tutorial - Basics",
+ "position": 2,
+ "link": {
+ "type": "generated-index",
+ "description": "5 minutes to learn the most important Docusaurus concepts."
+ }
+}
diff --git a/docs/docs/tutorial-basics/congratulations.md b/docs/docs/tutorial-basics/congratulations.md
new file mode 100644
index 0000000..04771a0
--- /dev/null
+++ b/docs/docs/tutorial-basics/congratulations.md
@@ -0,0 +1,23 @@
+---
+sidebar_position: 6
+---
+
+# Congratulations!
+
+You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
+
+Docusaurus has **much more to offer**!
+
+Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
+
+Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
+
+## What's next?
+
+- Read the [official documentation](https://docusaurus.io/)
+- Modify your site configuration with [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
+- Add navbar and footer items with [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
+- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
+- Add a [search bar](https://docusaurus.io/docs/search)
+- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
+- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)
diff --git a/docs/docs/tutorial-basics/create-a-blog-post.md b/docs/docs/tutorial-basics/create-a-blog-post.md
new file mode 100644
index 0000000..ea472bb
--- /dev/null
+++ b/docs/docs/tutorial-basics/create-a-blog-post.md
@@ -0,0 +1,34 @@
+---
+sidebar_position: 3
+---
+
+# Create a Blog Post
+
+Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
+
+## Create your first Post
+
+Create a file at `blog/2021-02-28-greetings.md`:
+
+```md title="blog/2021-02-28-greetings.md"
+---
+slug: greetings
+title: Greetings!
+authors:
+ - name: Joel Marcey
+ title: Co-creator of Docusaurus 1
+ url: https://github.com/JoelMarcey
+ image_url: https://github.com/JoelMarcey.png
+ - name: Sébastien Lorber
+ title: Docusaurus maintainer
+ url: https://sebastienlorber.com
+ image_url: https://github.com/slorber.png
+tags: [greetings]
+---
+
+Congratulations, you have made your first post!
+
+Feel free to play around and edit this post as much you like.
+```
+
+A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).
diff --git a/docs/docs/tutorial-basics/create-a-document.md b/docs/docs/tutorial-basics/create-a-document.md
new file mode 100644
index 0000000..c22fe29
--- /dev/null
+++ b/docs/docs/tutorial-basics/create-a-document.md
@@ -0,0 +1,57 @@
+---
+sidebar_position: 2
+---
+
+# Create a Document
+
+Documents are **groups of pages** connected through:
+
+- a **sidebar**
+- **previous/next navigation**
+- **versioning**
+
+## Create your first Doc
+
+Create a Markdown file at `docs/hello.md`:
+
+```md title="docs/hello.md"
+# Hello
+
+This is my **first Docusaurus document**!
+```
+
+A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
+
+## Configure the Sidebar
+
+Docusaurus automatically **creates a sidebar** from the `docs` folder.
+
+Add metadata to customize the sidebar label and position:
+
+```md title="docs/hello.md" {1-4}
+---
+sidebar_label: 'Hi!'
+sidebar_position: 3
+---
+
+# Hello
+
+This is my **first Docusaurus document**!
+```
+
+It is also possible to create your sidebar explicitly in `sidebars.js`:
+
+```js title="sidebars.js"
+export default {
+ tutorialSidebar: [
+ 'intro',
+ // highlight-next-line
+ 'hello',
+ {
+ type: 'category',
+ label: 'Tutorial',
+ items: ['tutorial-basics/create-a-document'],
+ },
+ ],
+};
+```
diff --git a/docs/docs/tutorial-basics/create-a-page.md b/docs/docs/tutorial-basics/create-a-page.md
new file mode 100644
index 0000000..20e2ac3
--- /dev/null
+++ b/docs/docs/tutorial-basics/create-a-page.md
@@ -0,0 +1,43 @@
+---
+sidebar_position: 1
+---
+
+# Create a Page
+
+Add **Markdown or React** files to `src/pages` to create a **standalone page**:
+
+- `src/pages/index.js` → `localhost:3000/`
+- `src/pages/foo.md` → `localhost:3000/foo`
+- `src/pages/foo/bar.js` → `localhost:3000/foo/bar`
+
+## Create your first React Page
+
+Create a file at `src/pages/my-react-page.js`:
+
+```jsx title="src/pages/my-react-page.js"
+import React from 'react';
+import Layout from '@theme/Layout';
+
+export default function MyReactPage() {
+ return (
+
+
My React page
+
This is a React page
+
+ );
+}
+```
+
+A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).
+
+## Create your first Markdown Page
+
+Create a file at `src/pages/my-markdown-page.md`:
+
+```mdx title="src/pages/my-markdown-page.md"
+# My Markdown page
+
+This is a Markdown page
+```
+
+A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).
diff --git a/docs/docs/tutorial-basics/deploy-your-site.md b/docs/docs/tutorial-basics/deploy-your-site.md
new file mode 100644
index 0000000..1c50ee0
--- /dev/null
+++ b/docs/docs/tutorial-basics/deploy-your-site.md
@@ -0,0 +1,31 @@
+---
+sidebar_position: 5
+---
+
+# Deploy your site
+
+Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
+
+It builds your site as simple **static HTML, JavaScript and CSS files**.
+
+## Build your site
+
+Build your site **for production**:
+
+```bash
+npm run build
+```
+
+The static files are generated in the `build` folder.
+
+## Deploy your site
+
+Test your production build locally:
+
+```bash
+npm run serve
+```
+
+The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).
+
+You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).
diff --git a/docs/docs/tutorial-basics/markdown-features.mdx b/docs/docs/tutorial-basics/markdown-features.mdx
new file mode 100644
index 0000000..35e0082
--- /dev/null
+++ b/docs/docs/tutorial-basics/markdown-features.mdx
@@ -0,0 +1,152 @@
+---
+sidebar_position: 4
+---
+
+# Markdown Features
+
+Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
+
+## Front Matter
+
+Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
+
+```text title="my-doc.md"
+// highlight-start
+---
+id: my-doc-id
+title: My document title
+description: My document description
+slug: /my-custom-url
+---
+// highlight-end
+
+## Markdown heading
+
+Markdown text with [links](./hello.md)
+```
+
+## Links
+
+Regular Markdown links are supported, using url paths or relative file paths.
+
+```md
+Let's see how to [Create a page](/create-a-page).
+```
+
+```md
+Let's see how to [Create a page](./create-a-page.md).
+```
+
+**Result:** Let's see how to [Create a page](./create-a-page.md).
+
+## Images
+
+Regular Markdown images are supported.
+
+You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
+
+```md
+![Docusaurus logo](/img/docusaurus.png)
+```
+
+![Docusaurus logo](/img/docusaurus.png)
+
+You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
+
+```md
+![Docusaurus logo](./img/docusaurus.png)
+```
+
+## Code Blocks
+
+Markdown code blocks are supported with Syntax highlighting.
+
+````md
+```jsx title="src/components/HelloDocusaurus.js"
+function HelloDocusaurus() {
+ return
diff --git a/docs/src/changelog.md b/docs/src/changelog.md
deleted file mode 100644
index f7b1b9d..0000000
--- a/docs/src/changelog.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: "Changelog"
-layout: "layouts/changelog.html"
-changelog:
- - date: "2023-05-24"
- title: "v1.1.0"
- items:
- - "**This is a test changelog record for demonstration.**"
- - "**Improvement:** add `$btn-font-family` to control the button's font family."
- - "**Improvement:** add `$heading-font-weight` to control the heading's font-weight."
- - "**Improvement:** rename some keys in the `$colors` map (`mark-color` : `mark-foreground`, `code-color` : `code-foreground`)."
- - "**Improvement:** reorganize the recurrent colors into variables."
- - "**Fix:** modify `btn-variant()` mixin: add hover foreground color."
- - "Global switch to `color()` function's fallback value under the [`$settings`](https://sprucecss.com/docs/sass/variables#settings) map."
- - "Modify the [`scrollbar()`](https://sprucecss.com/docs/sass/mixins#scrollbar) mixin to accept hover thumb background-color value."
- - "Make `$breakpoints` overwriteable by key."
- - "Modify `font-size()` and `responsive-font-size()` function to accept optimal size value. The optimal value will fallback to a global settnigs under the `$settings` map."
- - date: "2023-05-23"
- title: "v1.0.0"
- items:
- - "Initial release"
----
diff --git a/docs/src/components/HomepageFeatures/index.js b/docs/src/components/HomepageFeatures/index.js
new file mode 100644
index 0000000..acc7621
--- /dev/null
+++ b/docs/src/components/HomepageFeatures/index.js
@@ -0,0 +1,64 @@
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+const FeatureList = [
+ {
+ title: 'Easy to Use',
+ Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+ description: (
+ <>
+ Docusaurus was designed from the ground up to be easily installed and
+ used to get your website up and running quickly.
+ >
+ ),
+ },
+ {
+ title: 'Focus on What Matters',
+ Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+ description: (
+ <>
+ Docusaurus lets you focus on your docs, and we'll do the chores. Go
+ ahead and move your docs into the docs directory.
+ >
+ ),
+ },
+ {
+ title: 'Powered by React',
+ Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+ description: (
+ <>
+ Extend or customize your website layout by reusing React. Docusaurus can
+ be extended while reusing the same header and footer.
+ >
+ ),
+ },
+];
+
+function Feature({Svg, title, description}) {
+ return (
+