Update to docusaurus 3

swan-io · Mar 22, 2024 · 4eb4c60 · 4eb4c60
1 parent d10ad83
commit 4eb4c60
Show file tree

Hide file tree

Showing 9 changed files with 3,898 additions and 3,834 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -1,24 +1,24 @@
 # Website
 
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
 
 ### Installation
 
-```console
+```
 $ yarn
 ```
 
 ### Local Development
 
-```console
+```
 $ yarn start
 ```
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
 ### Build
 
-```console
+```
 $ yarn build
 ```
 

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -1,27 +1,34 @@
 // @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
+// `@type` JSDoc annotations allow editor autocompletion and type checking
+// (when paired with `@ts-check`).
+// There are various equivalent ways to declare your Docusaurus config.
+// See: https://docusaurus.io/docs/api/docusaurus-config
 
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/oceanicNext");
+import { themes as prismThemes } from "prism-react-renderer";
 
 /** @type {import('@docusaurus/types').Config} */
-module.exports = {
+const config = {
   title: "GraphQL Client",
   tagline: "A simple, typesafe GraphQL client for React",
+  favicon: "img/favicon.png",
+
+  // Set the production url of your site here
   url: "https://swan-io.github.io",
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: "/graphql-client/",
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
-  favicon: "img/favicon.png",
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
   organizationName: "swan-io", // Usually your GitHub org/user name.
   projectName: "graphql-client", // 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"],
@@ -34,13 +41,13 @@ module.exports = {
       ({
         docs: {
           routeBasePath: "/",
-          sidebarPath: require.resolve("./sidebars.js"),
+          sidebarPath: "./sidebars.js",
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl: "https://github.com/swan-io/boxed/edit/main/docs/",
+          editUrl: "https://github.com/swan-io/graphql-client/edit/main/docs/",
         },
         theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: "./src/css/custom.css",
         },
       }),
     ],
@@ -80,8 +87,10 @@ module.exports = {
         copyright: `Copyright © ${new Date().getFullYear()} Swan`,
       },
       prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
+        theme: prismThemes.github,
+        darkTheme: prismThemes.dracula,
       },
     }),
 };
+
+export default config;
diff --git a/docs/package.json b/docs/package.json
@@ -14,20 +14,17 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.4.0",
-    "@docusaurus/preset-classic": "2.4.0",
-    "@docusaurus/theme-search-algolia": "2.4.0",
-    "@mdx-js/react": "^1.6.22",
-    "@svgr/webpack": "^5.5.0",
-    "clsx": "^1.2.1",
-    "file-loader": "^6.2.0",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "url-loader": "^4.1.1"
+    "@docusaurus/core": "3.1.1",
+    "@docusaurus/preset-classic": "3.1.1",
+    "@mdx-js/react": "^3.0.1",
+    "clsx": "^2.1.0",
+    "prism-react-renderer": "^2.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.0"
+    "@docusaurus/module-type-aliases": "3.1.1",
+    "@docusaurus/types": "3.1.1"
   },
   "browserslist": {
     "production": [
@@ -36,12 +33,12 @@
       "not op_mini all"
     ],
     "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
     ]
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18.0"
   }
 }
diff --git a/docs/sidebars.js b/docs/sidebars.js
@@ -12,7 +12,7 @@
 // @ts-check
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
-module.exports = {
+const sidebars = {
   docs: [
     {
       type: "doc",
@@ -36,3 +36,5 @@ module.exports = {
     },
   ],
 };
+
+export default sidebars;
diff --git a/docs/src/components/HomepageFeatures/styles.module.css b/docs/src/components/HomepageFeatures/styles.module.css
@@ -1,7 +1,7 @@
 .features {
   display: flex;
   align-items: center;
-  padding: 3rem 0;
+  padding: 5rem 0;
   width: 100%;
 }
 

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -4,10 +4,11 @@
  * work well for content-centric websites.
  */
 
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #6240b5;
-  --ifm-navbar-link-hover-color: #8166c4;
   --ifm-color-primary-dark: #4e3391;
   --ifm-color-primary-darker: #3b266d;
   --ifm-color-primary-darkest: #271a48;
@@ -17,6 +18,7 @@
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.08);
 
+  --ifm-navbar-link-hover-color: #8166c4;
   --ifm-font-family-base: Inter, system-ui, -apple-system, Segoe UI, Roboto,
     Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI",
     Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@@ -26,12 +28,13 @@
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
   --ifm-color-primary: #af9ddc;
-  --ifm-navbar-link-hover-color: #c0b2e1;
   --ifm-color-primary-dark: #a08ad6;
   --ifm-color-primary-darker: #9278d0;
   --ifm-color-primary-darkest: #8267c8;
   --ifm-color-primary-light: #d0c5e8;
   --ifm-color-primary-lighter: #dfd9ef;
   --ifm-color-primary-lightest: #efecf7;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+
+  --ifm-navbar-link-hover-color: #c0b2e1;
 }
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
@@ -3,77 +3,36 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import Layout from "@theme/Layout";
 import clsx from "clsx";
-import React from "react";
+
 import styles from "./index.module.css";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
-      <div className={styles.heroLeft}>
-        <img
-          src={"./img/logo.svg"}
-          alt="GraphQL Client logo"
-          className={styles.heroLogo}
-        />
-        <div>
-          <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
-          <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
-          <div className={styles.heroButtons}>
-            <Link
-              className={clsx("button button--lg", styles.heroButton)}
-              to="/getting-started"
-            >
-              Get started
-            </Link>
-          </div>
+      <img
+        src={"./img/logo.svg"}
+        alt="GraphQL Client logo"
+        className={styles.heroLogo}
+      />
+      <div>
+        <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
+        <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
+        <div className={styles.heroButtons}>
+          <Link
+            className={clsx("button button--lg", styles.heroButton)}
+            to="/getting-started"
+          >
+            Get started
+          </Link>
         </div>
       </div>
     </header>
   );
 }
 
-const Block = ({ children, reversed = false, title, description }) => {
-  return (
-    <div
-      className={reversed ? styles.contentBlockReversed : styles.contentBlock}
-    >
-      <div className={styles.contentBlockSide}>{children}</div>
-      <div className={styles.contentBlockSide}>
-        <h2>{title}</h2>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
-};
-
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
-  const videoContainer = React.useRef(null);
-
-  React.useEffect(() => {
-    const element = videoContainer.current;
-    if (element) {
-      const intersectionObserver = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              const video = element.querySelector("video");
-              if (video) {
-                video.play();
-              }
-            }
-          });
-        },
-        {
-          rootMargin: "100px",
-        },
-      );
-      intersectionObserver.observe(element);
-      return () => intersectionObserver.unobserve(element);
-    }
-  }, []);
-
   return (
     <Layout
       title={`GraphQL Client: ${siteConfig.tagline}`}