| name | docusaurus-1-project-structure |
| description | Sub-skill of docusaurus: 1. Project Structure (+3). |
| version | 1.0.0 |
| category | development |
| type | reference |
| scripts_exempt | true |
1. Project Structure (+3)
1. Project Structure
my-website/
โโโ blog/ # Blog posts
โโโ docs/ # Documentation
โ โโโ intro.md
โ โโโ tutorial-basics/
โโโ src/
โ โโโ components/ # React components
โ โโโ css/ # Custom styles
โ โโโ pages/ # Custom pages
โโโ static/ # Static assets
โโโ docusaurus.config.js # Main configuration
โโโ sidebars.js # Sidebar configuration
2. Main Configuration
const config = {
title: 'My Project',
tagline: 'A powerful documentation framework',
favicon: 'img/favicon.ico',
url: 'https://myproject.github.io',
baseUrl: '/',
organizationName: 'myorg',
projectName: 'my-project',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
i18n: {
defaultLocale: 'en',
locales: ['en'],
},
presets: [
['classic', {
docs: {
sidebarPath: './sidebars.js',
editUrl: 'https://github.com/myorg/my-project/tree/main/',
showLastUpdateTime: true,
},
blog: {
showReadingTime: true,
postsPerPage: 10,
},
theme: {
customCss: './src/css/custom.css',
},
}],
],
themeConfig: {
navbar: {
title: 'My Project',
logo: { alt: 'Logo', src: 'img/logo.svg' },
items: [
{ type: 'docSidebar', sidebarId: 'tutorialSidebar', label: 'Docs' },
{ to: '/blog', label: 'Blog' },
{ type: 'docsVersionDropdown' },
{ href: 'https://github.com/myorg/my-project', position: 'right' },
],
},
footer: {
style: 'dark',
links: [
{ title: 'Docs', items: [{ label: 'Getting Started', to: '/docs/intro' }] },
{ title: 'Community', items: [{ label: 'Discord', href: 'https://discord.gg/xxx' }] },
],
copyright: `Copyright ${new Date().getFullYear()} My Project.`,
},
prism: {
theme: require('prism-react-renderer').themes.github,
darkTheme: require('prism-react-renderer').themes.dracula,
additionalLanguages: ['bash', 'python', 'yaml'],
},
},
};
module.exports = config;
3. Sidebar Configuration
const sidebars = {
tutorialSidebar: [
'intro',
{
type: 'category',
label: 'Getting Started',
collapsed: false,
items: [
'getting-started/installation',
'getting-started/quick-start',
],
},
{
type: 'category',
label: 'Guides',
link: { type: 'doc', id: 'guides/index' },
items: ['guides/basic-usage', 'guides/advanced'],
},
{
type: 'category',
label: 'Examples',
items: [{ type: 'autogenerated', dirName: 'examples' }],
},
],
};
module.exports = sidebars;
4. Documentation Pages
<!-- docs/intro.md -->
---
id: intro
title: Introduction
sidebar_position: 1
description: Introduction to My Project
---
# Introduction
Welcome to **My Project** documentation!