docs: add a landing page

docs/docusaurus.config.ts

@@ -1,6 +1,7 @@
 import { themes as prismThemes } from 'prism-react-renderer';
 import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
+import type { Options as RedirectsOptions } from '@docusaurus/plugin-client-redirects';
 import reactNativeWeb from './plugins/react-native-web.mjs';
 import swmGeo from './plugins/swm-geo.mjs';
 
@@ -24,15 +25,28 @@ const config: Config = {
     locales: ['en'],
   },
 
-  plugins: [reactNativeWeb, swmGeo],
+  plugins: [
+    reactNativeWeb,
+    swmGeo,
+    [
+      '@docusaurus/plugin-client-redirects',
+      {
+        // The docs used to sit at the root, with the overview at /overview.
+        createRedirects: (path) => {
+          if (path === '/docs' || path === '/docs/') return '/overview';
+          if (path.startsWith('/docs/')) return path.slice('/docs'.length);
+          return undefined;
+        },
+      } satisfies RedirectsOptions,
+    ],
+  ],
 
   presets: [
     [
       'classic',
       {
         docs: {
           path: './content',
-          routeBasePath: '/',
           breadcrumbs: false,
           sidebarPath: './sidebars.ts',
           editUrl:
@@ -54,6 +68,12 @@ const config: Config = {
     navbar: {
       title: 'React Native Bottom Sheet',
       items: [
+        {
+          type: 'docSidebar',
+          sidebarId: 'docsSidebar',
+          label: 'Docs',
+          position: 'left',
+        },
         {
           href: 'https://github.com/software-mansion-labs/react-native-bottom-sheet',
           label: 'GitHub',

docs/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@docusaurus/core": "3.10.2",
     "@docusaurus/faster": "3.10.2",
+    "@docusaurus/plugin-client-redirects": "3.10.2",
     "@docusaurus/preset-classic": "3.10.2",
     "@mdx-js/react": "^3.1.1",
     "clsx": "^2.1.1",

docs/src/css/custom.css

@@ -232,6 +232,14 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
+/* The landing page's navbar floats over the hero. */
+html.landing-page .navbar {
+  position: fixed;
+  inset: 0 0 auto;
+  background-color: transparent;
+  box-shadow: none;
+}
+
 .footer {
   --ifm-footer-background-color: var(--ifm-background-color);
   border-top: 1px solid var(--ifm-toc-border-color);