Use ts config

docusaurus.config.js → docusaurus.config.ts

@@ -1,10 +1,8 @@
-// @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
+import { themes as prismThemes } from 'prism-react-renderer'
+import type { Config } from '@docusaurus/types'
+import type * as Preset from '@docusaurus/preset-classic'
 
-const lightCodeTheme = require('prism-react-renderer/themes/github')
-const darkCodeTheme = require('prism-react-renderer/themes/dracula')
-
-const buildTimeClassicConfig = {}
+const buildTimeClassicConfig: Partial<Preset.Options> = {}
 
 // The GitHub workflow sets this environment variable for production.
 if (process.env.GTAG_TRACKING_ID) {
@@ -14,24 +12,28 @@ if (process.env.GTAG_TRACKING_ID) {
   }
 }
 
-/** @type {import('@docusaurus/types').Config} */
-const config = {
+const config: Config = {
   title: 'Valora Docs',
   tagline: 'Documentation for integrating with Valora',
+  favicon: 'img/favicon.ico',
+
+  // Set the production url of your site here
   url: 'https://docs.valora.xyz',
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
   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: 'valora-inc', // Usually your GitHub org/user name.
   projectName: 'docs', // 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".
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
+  // Even if you don't use internationalization, 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'],
@@ -40,10 +42,9 @@ const config = {
   presets: [
     [
       'classic',
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
+      {
         docs: {
-          sidebarPath: require.resolve('./sidebars.js'),
+          sidebarPath: './sidebars.ts',
           editUrl: ({ versionDocsDirPath, docPath }) => {
             if (docPath.startsWith('hooks/')) {
               return `https://github.com/mobilestack-xyz/hooks/edit/main/${versionDocsDirPath}/${docPath.replace(
@@ -57,12 +58,13 @@ const config = {
           routeBasePath: '/',
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: './src/css/custom.css',
         },
         ...buildTimeClassicConfig,
-      }),
+      } satisfies Preset.Options,
     ],
   ],
+
   plugins: [
     function (context, options) {
       return {
@@ -82,56 +84,54 @@ const config = {
     },
   ],
 
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    ({
-      navbar: {
-        title: 'Valora Docs',
-        logo: {
-          alt: 'Valora Logo',
-          src: 'img/valora-app-icon.png',
-        },
-        items: [
-          {
-            href: 'https://github.com/valora-inc/docs',
-            label: 'GitHub',
-            position: 'right',
-          },
-        ],
+  themeConfig: {
+    navbar: {
+      title: 'Valora Docs',
+      logo: {
+        alt: 'Valora Logo',
+        src: 'img/valora-app-icon.png',
       },
-      footer: {
-        style: 'dark',
-        links: [
-          {
-            title: 'Community',
-            items: [
-              {
-                label: 'Discord',
-                href: 'https://valoraapp.co/discord',
-              },
-              {
-                label: 'Twitter',
-                href: 'https://www.twitter.com/valoraApp',
-              },
-            ],
-          },
-          {
-            title: 'More',
-            items: [
-              {
-                label: 'GitHub',
-                href: 'https://github.com/valora-inc',
-              },
-            ],
-          },
-        ],
-        copyright: `Copyright © ${new Date().getFullYear()} Valora Inc. Built with Docusaurus.`,
-      },
-      prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
-      },
-    }),
+      items: [
+        {
+          href: 'https://github.com/valora-inc/docs',
+          label: 'GitHub',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      links: [
+        {
+          title: 'Community',
+          items: [
+            {
+              label: 'Discord',
+              href: 'https://valoraapp.co/discord',
+            },
+            {
+              label: 'Twitter',
+              href: 'https://www.twitter.com/valoraApp',
+            },
+          ],
+        },
+        {
+          title: 'More',
+          items: [
+            {
+              label: 'GitHub',
+              href: 'https://github.com/valora-inc',
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} Valora Inc. Built with Docusaurus.`,
+    },
+    prism: {
+      theme: prismThemes.github,
+      darkTheme: prismThemes.dracula,
+    },
+  } satisfies Preset.ThemeConfig,
 }
 
-module.exports = config
+export default config

sidebars.js → sidebars.ts

@@ -1,9 +1,10 @@
-// @ts-check
+import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'
+
 const includeWatchingAssets = process.env.INCLUDE_WATCHING_ASSETS === 'true'
 
 // https://docusaurus.io/docs/sidebar
 
-const sidebars = {
+const sidebars: SidebarsConfig = {
   docsSidebar: [
     {
       type: 'doc',
@@ -47,4 +48,4 @@ const sidebars = {
   ],
 }
 
-module.exports = sidebars
+export default sidebars