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โ€‹