Configuration

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

npm run start

Yarn

yarn run start

pnpm

pnpm 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

JavaScript

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;

TypeScript

docusaurus.config.ts

import type {Config} from '@docusaurus/types';
import type * as Preset from '@docusaurus/preset-classic';

const config: Config = {
  title: 'My Site',
  favicon: 'img/favicon.ico',

  /* Your site config here */

  presets: [
    [
      'classic',
      {
        /* Your preset config here */
      } satisfies Preset.Options,
    ],
  ],

  themeConfig: {
    /* Your theme config here */
  } satisfies Preset.ThemeConfig,
};

export default config;

sidebars.ts

Default

JavaScript

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;

TypeScript

sidebars.ts

import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';

/**
 * 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.
 */
const sidebars: SidebarsConfig = {
  // 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

npm run clear

Yarn

yarn clear

pnpm

pnpm run clear

Step two

Remove node_modules and the lock file(s):

Bash

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

PowerShell

@('node_modules','yarn.lock','package-lock.json') | Remove-Item -Force -Recurse -ErrorAction SilentlyContinue

Step three

Reinstall packages:

npm

npm install

Yarn

yarn install

pnpm

pnpm install

More

📄️ Create a Document

Create a Markdown Document

📄️ Create a Page

Create a Page using React components

📄️ Create a Blog Post

Create a Blog Article

🗃️ Deployment

2 items

🗃️ Plugins

1 item