Update website design

Author: iddan

assets/logo.svg

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/iddan/react-spreadsheet/master/assets/logo.svg?sanitize=true" height="120">
+  <img src="https://raw.githubusercontent.com/iddan/react-spreadsheet/master/assets/logo.svg?sanitize=true" height="120" />
 </div>
 
 # React Spreadsheet

readme.md

@@ -3,7 +3,7 @@
 import typescript from "rollup-plugin-typescript2";
 import postcss from "rollup-plugin-postcss";
 import dts from "rollup-plugin-dts";
-import pkg from "./package.json" assert { type: "json" };
+import pkg from "./package.json" with { type: "json" };
 
 function createExternal(dependencies) {
   return Object.keys(dependencies).flatMap(

rollup.config.mjs

@@ -24,4 +24,7 @@ yarn-error.log*
 # ESLint
 .eslintcache
 
-static/storybook
+static/storybook
+!reference
+reference/**/*.cjs
+reference/**/*.md

typedoc.json

@@ -1,3 +1,4 @@
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 module.exports = {
   sidebar: [
     {

website/.gitignore

@@ -0,0 +1,101 @@
+import type { DocusaurusConfig } from "@docusaurus/types";
+import type * as pluginContentDocs from "@docusaurus/plugin-content-docs";
+import type * as docusaurusPluginTypedoc from "docusaurus-plugin-typedoc";
+
+export default {
+  title: "React Spreadsheet",
+  tagline: "Simple, customizable yet performant spreadsheet for React",
+  url: "https://iddan.github.io",
+  baseUrl: "/react-spreadsheet/",
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
+  favicon: "img/favicon.ico",
+  organizationName: "iddan", // Usually your GitHub org/user name.
+  projectName: "react-spreadsheet", // Usually your repo name.
+  themeConfig: {
+    prism: {
+      theme: require("prism-react-renderer").themes.nightOwlLight,
+      darkTheme: require("prism-react-renderer").themes.nightOwl,
+    },
+    colorMode: {
+      defaultMode: "dark",
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
+    },
+    navbar: {
+      title: "React Spreadsheet",
+      logo: {
+        alt: "React Spreadsheet Logo",
+        src: "img/logo.svg",
+      },
+      items: [
+        {
+          type: "search",
+          position: "right",
+        },
+        {
+          to: "learn/",
+          activeBasePath: "learn",
+          label: "Learn",
+          position: "right",
+        },
+        {
+          to: "reference/variables/Spreadsheet",
+          label: "Reference",
+          position: "right",
+          activeBasePath: "reference",
+        },
+        {
+          href: "https://github.com/iddan/react-spreadsheet",
+          position: "right",
+          className: "header-github-link",
+          "aria-label": "GitHub repository",
+        },
+      ],
+    },
+  },
+  presets: [
+    [
+      "@docusaurus/preset-classic",
+      {
+        docs: {
+          routeBasePath: "learn",
+          sidebarPath: require.resolve("./docs/sidebars.js"),
+          // Please change this to your repo.
+          editUrl:
+            "https://github.com/iddan/react-spreadsheet/tree/master/website",
+        },
+        theme: {
+          customCss: require.resolve("./src/css/custom.css"),
+        },
+      },
+    ],
+  ],
+  plugins: [
+    [
+      "docusaurus-plugin-typedoc",
+      {
+        // @ts-expect-error docusaurus-plugin-typedoc is not typed properly
+        entryPoints: ["../src/index.ts"],
+        tsconfig: "../tsconfig.json",
+        out: "reference",
+        sidebar: {
+          pretty: true,
+          autoConfiguration: true,
+          typescript: false,
+          deprecatedItemClassName: "deprecated",
+        }
+      } satisfies Partial<docusaurusPluginTypedoc.PluginOptions>,
+    ],
+    [
+      "@docusaurus/plugin-content-docs",
+      {
+        id: "reference",
+        path: "reference",
+        routeBasePath: "reference",
+        sidebarPath: require.resolve("./src/reference-sidebar.js"),
+        exclude: ["index.md"],
+      } satisfies Partial<pluginContentDocs.PluginOptions>,
+    ],
+  ],
+} satisfies Partial<DocusaurusConfig>;

website/docs/sidebars.js

@@ -20,24 +20,25 @@
   },
   "dependencies": {
     "@algolia/client-search": "^4.9.1",
-    "@docusaurus/core": "^3.6.3",
-    "@docusaurus/mdx-loader": "^3.6.3",
-    "@docusaurus/preset-classic": "^3.6.3",
+    "@docusaurus/core": "^3.9.2",
+    "@docusaurus/mdx-loader": "^3.9.2",
+    "@docusaurus/preset-classic": "^3.9.2",
     "@mdx-js/react": "^3.0.0",
     "@rehooks/component-size": "^1.0.3",
     "@svgr/webpack": "^5.5.0",
     "@types/react": "^18.0.0",
     "clsx": "^1.1.1",
-    "docusaurus-plugin-typedoc-api": "^4.4.0",
+    "docusaurus-plugin-typedoc": "^1.4.2",
     "file-loader": "^6.2.0",
+    "prism-react-renderer": "^2.4.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-loadable": "^5.5.0",
-    "react-spreadsheet": "^0.8.0",
+    "react-spreadsheet": "^0.10.1",
     "scheduler": "^0.23.0",
     "search-insights": "^2.17.3",
-    "typedoc": "^0.27.6",
-    "typedoc-plugin-rename-defaults": "^0.7.2",
+    "typedoc": "^0.28.14",
+    "typedoc-plugin-markdown": "^4.0.0",
     "typescript": "^5.0.4",
     "webpack": "^5.97.1"
   },