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