frontend-dev-memo/docusaurus.config.ts at main · faciledictu/frontend-dev-memo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import type * as Preset from '@docusaurus/preset-classic';
import type { Config } from '@docusaurus/types';
import { themes as prismThemes } from 'prism-react-renderer';
import categories from './src/categories';

const REPO_URL = `https://github.com/faciledictu/frontend-dev-memo`;
const SITE_URL = `https://${process.env.VERCEL_URL}`;
const SITE_NAME = 'Frontend Developer Memo';

type CustomNavbarItem = {
  type: 'docSidebar';
  sidebarId: string;
  label: string;
  position: 'left';
};

const navbarItems = categories.map(
  ({ id, navbarLabel }): CustomNavbarItem => ({
    type: 'docSidebar',
    sidebarId: id,
    label: navbarLabel,
    position: 'left',
  })
);

const config: Config = {
  title: SITE_NAME,
  tagline: 'Information to help you prepare for a frontend developer interview',
  favicon: '/img/logo.svg',
  organizationName: 'Dmitrii Zhigulin',
  projectName: SITE_NAME,

  url: SITE_URL,
  baseUrl: '/',

  onBrokenLinks: 'throw',

  future: {
    experimental_faster: true,
    v4: true,
  },

  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },

  plugins: [
    [
      'vercel-analytics',
      {
        debug: false,
        mode: 'auto',
      },
    ],
  ],

  presets: [
    [
      'classic',
      {
        docs: {
          routeBasePath: '/',
          sidebarPath: './sidebars.ts',
          editUrl: `${REPO_URL}/tree/main/`,
        },
        blog: false,
        theme: {
          customCss: './src/css/custom.css',
        },
      } satisfies Preset.Options,
    ],
  ],

  themeConfig: {
    navbar: {
      logo: {
        alt: ' ',
        src: 'img/logo.svg',
        width: 32,
        height: 32,
      },
      items: [
        ...navbarItems,
        {
          href: REPO_URL,
          label: 'GitHub',
          position: 'right',
        },
      ],
    },
    footer: {
      links: [{ label: 'GitHub', href: REPO_URL }],
      copyright: `Built with Docusaurus`,
    },
    prism: {
      theme: prismThemes.github,
      darkTheme: prismThemes.dracula,
      additionalLanguages: ['bash', 'typescript'],
    },
    mermaid: {
      theme: { light: 'base', dark: 'base' },
      options: {
        themeVariables: {
          primaryColor: '#0062ff',
          primaryTextColor: '#ffffff',
          primaryBorderColor: '#0062ff',
          lineColor: '#0062ff',
          secondaryColor: '#4d91ff',
          tertiaryColor: '#ffffff',
        },
      },
    },
  } satisfies Preset.ThemeConfig,

  markdown: {
    mermaid: true,
    hooks: {
      onBrokenMarkdownLinks: 'warn',
    },
  },
  themes: ['@docusaurus/theme-mermaid'],
};

export default config;