Docusaurus로 문서 관리하기 - 2

Copy 
1module.exports = {
2  // ...
3  themeConfig: {
4    prism: {
5      theme: require('prism-react-renderer/themes/github'),
6      darkTheme: require('prism-react-renderer/themes/dracula'),
7    },
8    // ...
9  },
10};

Copy 
1module.exports = {
2  // ...
3  themeConfig: {
4    navbar: {
5      title: 'Site Title',
6      logo: {
7        alt: 'Site Logo',
8        src: 'img/logo.svg',
9        srcDark: 'img/logo_dark.svg', // Default to `logo.src`.
10        href: 'https://v2.docusaurus.io/', // Default to `siteConfig.baseUrl`.
11        target: '_self', // By default, this value is calculated based on the `href` attribute (the external link will open in a new tab, all others in the current one).
12      },
13    },
14    // ...
15  },
16};

Copy 
1module.exports = {
2  // ...
3  themeConfig: {
4    navbar: {
5      items: [
6        {
7          label: 'Docs',
8          position: 'left', // or 'right'
9          items: [
10            {
11              label: 'Category 1',
12              to: '...',
13            },
14            {
15              label: 'Category 2',
16              to: '...',
17            },
18            // ... more items
19          ],
20        },
21      ],
22    },
23    // ...
24  },
25};

Copy 
1// 디렉토리에 있는 파일 이름 배열을 반환함.
2const getFilesOf = (dir) =>
3  fs
4    .readdirSync(dir)
5    .reduce(
6      (files, fileName) =>
7        fileName.includes('.') ? [...files, fileName] : files,
8      [],
9    )
10    .map((file) => path.parse(file).name);
11
12// 디렉토리에 있는 디렉토리 목록을 반환함.
13const getDirectoriesOf = (dir) =>
14  fs
15    .readdirSync(dir)
16    .reduce(
17      (dirs, dirName) => (dirName.includes('.') ? dirs : [...dirs, dirName]),
18      [],
19    );
20
21// docs 디렉토리에 있는 카테고리
22const categories = getDirectoriesOf('docs');
23
24// 카테고리를 받아서 하위 카테고리의 목록을 반환하는 함수
25const getSubCategories = (category) => getDirectoriesOf(`docs/${category}`);
26
27// 서브 카테고리 파일들을 Docusaurus의 중첩된 사이드바로 구성
28const createSubCategoryItem = (category, subCategory) => ({
29  type: 'category',
30  label: SUB_CATEGORY_SLUGS[removePriority(subCategory)],
31  items: getFilesOf(`docs/${category}/${subCategory}`).map(
32    (fileName) => `${category}/${subCategory}/${fileName}`,
33  ),
34});
35
36// 카테고리 별로 서브 카테고리의 중첩된 사이드바를 구성
37module.exports = categories.reduce(
38  (sidebars, category) => ({
39    ...sidebars,
40    [category]: getSubCategories(category).map((subCategory) =>
41      createSubCategoryItem(category, subCategory),
42    ),
43  }),
44  {},
45);

Copy 
1yarn run swizzle @docusaurus/theme-classic DocItem

Copy 
1yarn run swizzle @docusaurus/theme-classic DocItem --danger
2yarn run swizzle @docusaurus/theme-classic BlogPostPage --danger

Copy 
1import React, {useEffect, useRef} from 'react';
2
3function Comment() {
4  const containerRef = useRef(null);
5
6  useEffect(() => {
7    const createUtterancesEl = () => {
8      const script = document.createElement('script');
9
10      script.src = 'https://utteranc.es/client.js';
11      script.setAttribute('repo', '{username}/{repository name}');
12      script.setAttribute('issue-term', 'title');
13      script.setAttribute('label', 'comment');
14      script.setAttribute('theme', 'github-light');
15      script.crossOrigin = 'anonymous';
16      script.async = true;
17
18      containerRef.current.appendChild(script);
19    };
20
21    createUtterancesEl();
22  }, []);
23
24  return <div ref={containerRef} />;
25}
26
27export default Comment;

Copy 
1import React, {useEffect, useRef} from 'react';
2import useThemeContext from '@theme/hooks/useThemeContext';
3
4const utterancesSelector = 'iframe.utterances-frame';
5
6function Comment() {
7  const {isDarkTheme} = useThemeContext();
8  const utterancesTheme = isDarkTheme ? 'github-dark' : 'github-light';
9  const containerRef = useRef(null);
10
11  useEffect(() => {
12    const utterancesEl = containerRef.current.querySelector(utterancesSelector);
13
14    const createUtterancesEl = () => {
15      const script = document.createElement('script');
16
17      script.src = 'https://utteranc.es/client.js';
18      script.setAttribute('repo', '{username}/{repository name}');
19      script.setAttribute('issue-term', 'title');
20      script.setAttribute('label', 'comment');
21      script.setAttribute('theme', utterancesTheme);
22      script.crossOrigin = 'anonymous';
23      script.async = true;
24
25      containerRef.current.appendChild(script);
26    };
27
28    const postThemeMessage = () => {
29      const message = {
30        type: 'set-theme',
31        theme: utterancesTheme,
32      };
33
34      utterancesEl.contentWindow.postMessage(message, 'https://utteranc.es');
35    };
36
37    utterancesEl ? postThemeMessage() : createUtterancesEl();
38  }, [utterancesTheme]);
39
40  return <div ref={containerRef} />;
41}
42
43export default Comment;

Copy 
1docker run -it --env-file=.env -e "CONFIG=$(cat ./config.json | jq -r tostring)" algolia/docsearch-scraper

Copy 
1module.exports = {
2  ...
3  themeConfig: {
4    algolia: {
5      apiKey: 'df534cd50449ff1ac456585231e62076',
6      indexName: 'mytil',
7      appId: 'CPGK41PHIV',
8      contextualSearch: true,
9    },
10    ...
11  }
12  ...
13}

Copy 
1yarn add @docusaurus/plugin-pwa

Copy 
1{
2  "name": "younho9 TIL",
3  "short_name": "📝 TIL",
4  "theme_color": "#5468ff",
5  "background_color": "#424242",
6  "display": "standalone",
7  "scope": "./",
8  "start_url": "./index.html",
9  "icons": [
10    {
11      "src": "img/icons/icon-72x72.png",
12      "sizes": "72x72",
13      "type": "image/png"
14    },
15    {
16      "src": "img/icons/icon-96x96.png",
17      "sizes": "96x96",
18      "type": "image/png"
19    },
20    {
21      "src": "img/icons/icon-128x128.png",
22      "sizes": "128x128",
23      "type": "image/png"
24    },
25    {
26      "src": "img/icons/icon-144x144.png",
27      "sizes": "144x144",
28      "type": "image/png"
29    },
30    {
31      "src": "img/icons/icon-152x152.png",
32      "sizes": "152x152",
33      "type": "image/png"
34    },
35    {
36      "src": "img/icons/icon-192x192.png",
37      "sizes": "192x192",
38      "type": "image/png"
39    },
40    {
41      "src": "img/icons/icon-384x384.png",
42      "sizes": "384x384",
43      "type": "image/png"
44    },
45    {
46      "src": "img/icons/icon-512x512.png",
47      "sizes": "512x512",
48      "type": "image/png"
49    }
50  ]
51}

Copy 
1plugins: [
2  ...[
3    '@docusaurus/plugin-pwa',
4    {
5      debug: true,
6      offlineModeActivationStrategies: ['appInstalled', 'queryString'],
7      pwaHead: [
8        {
9          tagName: 'link',
10          rel: 'icon',
11          href: '/img/logo.png',
12        },
13        {
14          tagName: 'link',
15          rel: 'manifest',
16          href: '/manifest.json', // your PWA manifest
17        },
18        {
19          tagName: 'meta',
20          name: 'theme-color',
21          content: 'rgb(84, 104, 255)',
22        },
23        {
24          tagName: 'meta',
25          name: 'apple-mobile-web-app-capable',
26          content: 'yes',
27        },
28        {
29          tagName: 'meta',
30          name: 'apple-mobile-web-app-status-bar-style',
31          content: '#000',
32        },
33        {
34          tagName: 'link',
35          rel: 'apple-touch-icon',
36          href: 'img/logo.png',
37        },
38        {
39          tagName: 'link',
40          rel: 'mask-icon',
41          href: 'img/logo.svg',
42          color: 'rgb(255, 255, 255)',
43        },
44        {
45          tagName: 'meta',
46          name: 'msapplication-TileImage',
47          content: 'img/logo.png',
48        },
49        {
50          tagName: 'meta',
51          name: 'msapplication-TileColor',
52          content: '#000',
53        },
54      ],
55    },
56  ],
57];