Open11
Docusaurus を試す

を試す
自作ライブラリのドキュメントサイトの作成に使えないか検討する

$ yarn create docusaurus docusaurus-sandbox
yarn create v1.22.18
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-docusaurus@2.0.0-beta.21" with binaries:
- create-docusaurus
? Select a template below... › - Use arrow-keys. Return to submit.
❯ classic (recommended)
facebook
Git repository
Local template
すると、モード?の選択を求められる
classic
がレコメンドらしいのでそれを選ぶ
TS 使うか聞かれるので、yes にする
✔ This template is available in TypeScript. Do you want to use the TS variant? … yes

[INFO] Inside that directory, you can run several commands:
`yarn start`
Starts the development server.
`yarn build`
Bundles your website into static files for production.
`yarn serve`
Serves the built website locally.
`yarn deploy`
Publishes the website to GitHub pages.
We recommend that you begin by typing:
`cd docusaurus-sandbox`
`yarn start`
deploy も標準であるの心強い

ビルドシステムは webpack っぽい

こういう感じのページが作成される

プロジェクト構造
/blog/
ディレクトリはプラグインありきのものらしく、なくてもいいらしい
/docs/
ディレクトリに md ファイルを置く
/src/
は React のコンポーネントを置く、/src/pages/
にはウェブサイトのページをおけるらしい

monorepo の場合
my-monorepo
├── package-a # Another package, your actual project
│ ├── src
│ └── package.json # Package A's dependencies
├── website # Docusaurus root
│ ├── docs
│ ├── src
│ └── package.json # Docusaurus' dependencies
├── package.json # Monorepo's shared dependencies
的な感じらしい
パッケージの1つとして website を生やすらしい

config
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'My Site',
tagline: 'Dinosaurs are cool',
url: 'https://your-docusaurus-test-site.com',
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: 'facebook', // Usually your GitHub org/user name.
projectName: 'docusaurus', // Usually your repo name.
// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: 'en',
locales: ['en'],
},
presets: [
[
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
blog: {
showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
}),
],
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
navbar: {
title: 'My Site',
logo: {
alt: 'My Site Logo',
src: 'img/logo.svg',
},
items: [
{
type: 'doc',
docId: 'intro',
position: 'left',
label: 'Tutorial',
},
{to: '/blog', label: 'Blog', position: 'left'},
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
position: 'right',
},
],
},
footer: {
style: 'dark',
links: [
{
title: 'Docs',
items: [
{
label: 'Tutorial',
to: '/docs/intro',
},
],
},
{
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
},
{
label: 'Discord',
href: 'https://discordapp.com/invite/docusaurus',
},
{
label: 'Twitter',
href: 'https://twitter.com/docusaurus',
},
],
},
{
title: 'More',
items: [
{
label: 'Blog',
to: '/blog',
},
{
label: 'GitHub',
href: 'https://github.com/facebook/docusaurus',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
};
module.exports = config;
@docusaurus/preset-classic
が @docusaurus/plugin-content-blog
を使用しているらしい

TS サポート
tsconfig.json
で @tsconfig/docusaurus/tsconfig.json
を extends
する感じ

ポチポチ触ってわかったこと
-
/docs/
ディレクトリは/docs
で配信される -
src/pages
には.tsx
だけじゃなくて.md
ファイルも置ける -
@site/src/components/
を import するとsrc/components
ディレクトリ以下のファイルを参照できる

感想
- Docusaurus は VitePress というより Next.js に近いイメージ
- ドキュメントサイトを簡単に作れるフレームワーク
- VitePress は easy に作れるけど、Docusaurus は simple に作る感じ
- 諸々をいい感じにするには
@docusaurus/preset-classic
を理解する必要がある- 理解できれば自由度高くサイトを作れそう