Skip to main content

Configuration

Wf pthon-setup

This section covers the custom configuration powering the MKX SpaceHub™ website. From its initial GitHub commit, the MKX SpaceHub™ has been organized as a monorepo with examples and built with Docusaurus TypeScript variant along with some awesome tools like VS Code.

Installation

npx create-docusaurus@latest website classic --typescript
npm run start

Structure

Here is a broad overview of the important files and folders.

mkeithx.github.io/ ├── / │ ├── [````] │ └── ... └── website/ ├── blog/ │ ├── [BLOG POSTS] │ └── ... ├── community/ │ ├── [CONTRIBUTING DOC FILES] │ └── ... ├── cosmos/ │ ├── [ ARTICLES ABOUT SPACE ] │ └── ... ├── docs/ │ ├── [ MAIN DOCS] │ └── ... ├── src/ │ ├── css/ │ │ ├── [CUSTOM STYLES] │ │ └── ... │ ├── pages/ │ │ ├── [STATIC PAGES] │ │ └── ... │ └── theme/ │ │ ├── [SWIZZLED COMPONENTS] │ │ └── ... ├── static/ │ ├── .../ │ │ └── assets/ │ ├── .../ │ │ └── assets/ │ └── img/ ├── docusaurus.config.ts ├── package.json ├── sidebars.json ├── sidebarsCommunity.ts ├── sidebarsCosmos.ts └── .../

Defaults

docusaurus.config.ts

Configs
docusaurus.config.js
// @ts-check

/** @type {import('@docusaurus/types').Config} */
const config = {
tagline: 'Dinosaurs are cool',
favicon: 'img/favicon.ico',

/* Your site config here */

presets: [
[
'@docusaurus/preset-classic',
/** @type {import('@docusaurus/preset-classic').Options} */
(
{
/* Your preset config here */
}
),
],
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
(
{
/* Your theme config here */
}
),
};

export default config;

sidebars.ts

Default
sidebars.js
/**
* Creating a sidebar enables you to:
- create an ordered group of docs
- render a sidebar for each doc of that group
- provide next/previous navigation

The sidebars can be generated from the filesystem, or explicitly defined here.

Create as many sidebars as you want.
*/

// @ts-check

/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
// By default, Docusaurus generates a sidebar from the docs folder structure
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],

// But you can create a sidebar manually
/*
tutorialSidebar: [
'intro',
'hello',
{
type: 'category',
label: 'Tutorial',
items: ['tutorial-basics/create-a-document'],
},
],
*/
};

export default sidebars;

Troubleshooting

Resolve issues caused by mismatching cached dependencies - especially during upgrades.

Step one

Clear all generated assets, caches and build artifacts:

npm run clear

Step two

Remove node_modules and the lock file(s):

rm -rf node_modules yarn.lock package-lock.json

Step three

Reinstall packages:

npm install

More