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
- Yarn
- pnpm
npm run start
yarn run start
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
- TypeScript
// @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;
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
- TypeScript
/**
* 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;
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
- Yarn
- pnpm
npm run clear
yarn clear
pnpm run clear
Step two
Remove node_modules
and the lock file(s):
- Bash
- PowerShell
rm -rf node_modules yarn.lock package-lock.json
@('node_modules','yarn.lock','package-lock.json') | Remove-Item -Force -Recurse -ErrorAction SilentlyContinue
Step three
Reinstall packages:
- npm
- Yarn
- pnpm
npm install
yarn install
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