Docusaurus

Prequisites

개발환경

Node.js

Install

Docusaurus 프로젝트 생성

PS> npx create-docusaurus@latest til classic --typescript
PS> yarn add @docusaurus/theme-live-codeblock
PS> yarn add @docusaurus/theme-mermaid

Run

Docusaurus 실행

PS> yarn run start

Configuration

테마설정

docusaurus.config.ts

const config: Config = {
  themes: ['@docusaurus/theme-live-codeblock', '@docusaurus/theme-mermaid'],
  markdown: {
    mermaid: true,
  },
  themeConfig: {
    ...defaultThemeConfig,
    colorMode: {
      defaultMode: 'dark',
      disableSwitch: false,
      respectPrefersColorScheme: false,
    }
  },
  prism: {
    ...defaultPrismTheme,
    additionalLanguages: ['powershell','json','typescript','python','bash'],
  }
}

사이드바 설정

sidebars.ts

const sidebars: SidebarsConfig = {
  devSidebar: [
    {
      type: 'category',
      label: '개발환경 | Windows',
      link: {
        type: 'doc',
        id: 'dev/windows/development-in-windows',
      },
      items: ['dev/windows/init-in-windows'],
    },
  ],
};

메인 페이지 설정

src/pages/index.tsx

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className="container">
        <div className={styles.buttons}>
        <a href="https://www.python.org" target='_blank'><img alt="Python" src="https://img.shields.io/badge/Python-3776AB?&logo=Python&logoColor=white"/></a>
        <a href="https://jupyter.org" target='_blank'><img alt="Jupyter" src="https://img.shields.io/badge/Jupyter-F37626?logo=Jupyter&logoColor=white"/></a>
        <a href="https://pandas.pydata.org" target='_blank'><img alt="Pandas" src="https://img.shields.io/badge/Pandas-150458?&logo=Pandas&logoColor=white"/></a>
        <a href="https://www.typescriptlang.org" target='_blank'><img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-3178C6?&logo=TypeScript&logoColor=white"/></a>
        <a href="https://nestjs.com" target='_blank'><img alt="NestJS" src="https://img.shields.io/badge/NestJS-E0234E?logo=NestJS&logoColor=white"/></a>
        </div>
      </div>
    </header>
  );
}

홈페이지 기능 컴포넌트 설정

src/components/HomepageFeatures/index.tsx

const FeatureList: FeatureItem[] = [
  {
    title: 'Student',
    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
    description: (
      <>
        Studing in a university.
      </>
    ),
  }
]