Restyle Gesture Handler Documentation

docs/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+  plugins: ['react-native-reanimated/plugin'],
 };

docs/docs/fundamentals/introduction.md

@@ -107,24 +107,24 @@ If you've build something with this library you'd like to share, please contact
 
 ### Gesture Handler Team 🚀
 
-<div class="community-holder-container">
+<div className="community-holder-container">
 
-  <div class="community-holder-container-item">
-    <div class="community-imageHolder">
+  <div className="community-holder-container-item">
+    <div className="community-imageHolder">
       <img src="https://ca.slack-edge.com/T03Q9AMJJ-U02700KC6J1-0c9e18c89e71-512" />
     </div>
     <div>Jakub Piasecki</div>
   </div>
 
-  <div class="community-holder-container-item">
-    <div class="community-imageHolder">
+  <div className="community-holder-container-item">
+    <div className="community-imageHolder">
       <img src="https://ca.slack-edge.com/T03Q9AMJJ-U03N3HU2C0M-60a31c54a7d5-512" />
     </div>
     <div>Michał Bert</div>
   </div>
 
-  <div class="community-holder-container-item">
-    <div class="community-imageHolder">
+  <div className="community-holder-container-item">
+    <div className="community-imageHolder">
       <img src="https://ca.slack-edge.com/T03Q9AMJJ-U0F40CATS-d0a2e7559a1b-512" />
     </div>
     <div>Krzysztof Magiera</div>
@@ -137,21 +137,21 @@ If you've build something with this library you'd like to share, please contact
 
 We really appreciate our sponsors! Thanks to them we can develop our library and make the react-native world a better place. Special thanks for:
 
-<div class="community-holder-container">
+<div className="community-holder-container">
 
-  <div class="community-holder-container-item">
+  <div className="community-holder-container-item">
     <a href="https://www.shopify.com/">
-      <div class="community-imageHolder">
+      <div className="community-imageHolder">
         <img src="https://avatars1.githubusercontent.com/u/8085?v=3&s=100" />
       </div>
       <div>Shopify</div>
     </a>
   </div>
 
-  <div class="community-holder-container-item">
+  <div className="community-holder-container-item">
     <a href="https://expo.dev">
-      <div class="community-imageHolder">
-        <img class="community-imageHolder" src="https://avatars2.githubusercontent.com/u/12504344?v=3&s=100" />
+      <div className="community-imageHolder">
+        <img className="community-imageHolder" src="https://avatars2.githubusercontent.com/u/12504344?v=3&s=100" />
       </div>
       <div>Expo</div>
     </a>

docs/docusaurus.config.js

@@ -1,130 +1,34 @@
-/** @type {import('@docusaurus/types').DocusaurusConfig} */
-
-const prismConfig = {
-  plain: {
-    color: '#ffffff',
-    backgroundColor: '#001a72',
-  },
-  styles: [
-    {
-      types: ['comment'],
-      style: {
-        color: '#aaaaaa',
-        fontStyle: 'italic',
-      },
-    },
-    {
-      types: ['string'],
-      style: {
-        color: '#ffffff',
-      },
-    },
-    {
-      types: ['punctuation'],
-      style: {
-        color: '#ffee86',
-      },
-    },
-    {
-      types: ['variable', 'constant', 'builtin', 'attr-name'],
-      style: {
-        color: '#a3b8ff',
-      },
-    },
-    {
-      types: ['number', 'operator'],
-      style: {
-        color: '#ffaaa8',
-      },
-    },
-    {
-      types: ['keyword'],
-      style: {
-        color: '#8ed3ef',
-      },
-    },
-    {
-      types: ['char'],
-      style: {
-        color: '#a3b8ff',
-      },
-    },
-    {
-      types: ['tag'],
-      style: {
-        color: '#ffaaa8',
-      },
-    },
-    {
-      types: ['function'],
-      style: {
-        color: '#a3b8ff',
-      },
-    },
-  ],
-};
 /*
 In swizzled components look for "SWM -" string to see our modifications
 */
 
-module.exports = {
+const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
+const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
+// @ts-check
+const webpack = require('webpack');
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
   title: 'React Native Gesture Handler',
-  tagline:
-    'Declarative API exposing platform native touch and gesture system to React Native.',
+  favicon: 'img/favicon.ico',
+
   url: 'https://docs.swmansion.com',
+
   baseUrl: '/react-native-gesture-handler/',
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
-  favicon: 'img/SWM_Fav_192x192.png',
+
   organizationName: 'software-mansion',
+  projectName: 'react-native-gesture-handler',
   customFields: {
     shortTitle: 'Gesture Handler',
   },
-  projectName: 'react-native-gesture-handler',
-  themeConfig: {
-    algolia: {
-      appId: 'BKGDKVWG6F',
-      apiKey: '742696612cb124b06465cf68bce6ec92',
-      indexName: 'react-native-gesture-handler',
-      // contextualSearch: true, // doesn't work for some reason
-    },
-    colorMode: {
-      disableSwitch: true,
-    },
-    navbar: {
-      title: 'React Native Gesture Handler',
-      items: [
-        {
-          type: 'docsVersionDropdown',
-          position: 'right',
-        },
-        {
-          type: 'search',
-          position: 'right',
-        },
-        {
-          className: 'github-navbar-logo',
-          href: 'https://github.com/software-mansion/react-native-gesture-handler/',
-          label: 'Github',
-          position: 'right',
-        },
-      ],
-    },
-    footer: {
-      logo: {
-        alt: 'Software Mansion',
-        src: 'img/swmLogo.svg',
-        href: 'https://swmansion.com/',
-      },
-    },
-    prism: {
-      theme: prismConfig,
-    },
-  },
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
   presets: [
     [
-      '@docusaurus/preset-classic',
-      {
+      'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
         docs: {
           breadcrumbs: false,
           sidebarPath: require.resolve('./sidebars.js'),
@@ -139,13 +43,108 @@ module.exports = {
           },
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: require.resolve('./src/css/index.css'),
         },
         googleAnalytics: {
           trackingID: 'UA-41044622-6',
-          anonymizeIP: true, // Should IPs be anonymized?
+          anonymizeIP: true,
         },
-      },
+      }),
     ],
   ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      image: 'img/og-image.png',
+      metadata: [
+        { name: 'og:image:width', content: '1200' },
+        { name: 'og:image:height', content: '630' },
+      ],
+      navbar: {
+        title: 'React Native Gesture Handler',
+        hideOnScroll: true,
+        logo: {
+          alt: 'React Native Gesture Handler',
+          src: 'img/logo-hero.svg',
+        },
+        items: [
+          {
+            to: 'docs/',
+            activeBasePath: 'docs',
+            label: 'Docs',
+            position: 'right',
+          },
+          {
+            type: 'docsVersionDropdown',
+            position: 'right',
+            dropdownActiveClassDisabled: true,
+          },
+          {
+            href: 'https://github.com/software-mansion/react-native-reanimated/',
+            position: 'right',
+            className: 'header-github',
+            'aria-label': 'GitHub repository',
+          },
+        ],
+      },
+      footer: {
+        style: 'light',
+        links: [],
+        copyright:
+          'All trademarks and copyrights belong to their respective owners.',
+      },
+      prism: {
+        theme: lightCodeTheme,
+        darkTheme: darkCodeTheme,
+      },
+      algolia: {
+        appId: 'BKGDKVWG6F',
+        apiKey: '742696612cb124b06465cf68bce6ec92',
+        indexName: 'react-native-gesture-handler',
+      },
+    }),
+  plugins: [
+    ...[
+      process.env.NODE_ENV === 'production' && '@docusaurus/plugin-debug',
+    ].filter(Boolean),
+    async function reanimatedDocusaurusPlugin(context, options) {
+      return {
+        name: 'react-native-reanimated/docusaurus-plugin',
+        configureWebpack(config, isServer, utils) {
+          const processMock = !isServer ? { process: { env: {} } } : {};
+
+          const raf = require('raf');
+          raf.polyfill();
+
+          return {
+            mergeStrategy: {
+              'resolve.extensions': 'prepend',
+            },
+            plugins: [
+              new webpack.DefinePlugin({
+                ...processMock,
+                __DEV__: 'false',
+                setImmediate: () => {},
+              }),
+            ],
+            module: {
+              rules: [
+                {
+                  test: /\.txt/,
+                  type: 'asset/source',
+                },
+              ],
+            },
+            resolve: {
+              alias: { 'react-native$': 'react-native-web' },
+              extensions: ['.web.js', '...'],
+            },
+          };
+        },
+      };
+    },
+  ],
 };
+
+module.exports = config;

docs/package.json

@@ -11,16 +11,50 @@
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids"
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc --noEmit",
+    "lint": "prettier --check docs src versioned_docs versioned_docs",
+    "format": "prettier --write --list-different docs src versioned_docs versioned_docs"
   },
   "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
     "@docusaurus/core": "^2.4.3",
+    "@docusaurus/plugin-debug": "^2.4.3",
     "@docusaurus/preset-classic": "^2.4.3",
-    "@mdx-js/react": "^1.6.21",
-    "classnames": "^2.3.1",
-    "clsx": "^1.1.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mdx-js/react": "^1.6.22",
+    "@mui/material": "^5.12.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-expo": "^9.2.2",
+    "babel-preset-react-native": "^4.0.1",
+    "clsx": "^1.2.1",
+    "raf": "^3.4.1",
+    "raw-loader": "^4.0.2",
+    "react": "^17.0.2",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^17.0.2",
+    "react-draggable": "^4.4.5",
+    "react-native": "^0.71.4",
+    "react-native-gesture-handler": "2.14.1",
+    "react-native-reanimated": "^3.7.0-nightly-20240130-720fefba7",
+    "react-native-web": "^0.18.12",
+    "source-map": "^0.7.4",
+    "source-map-loader": "^4.0.1",
+    "usehooks-ts": "^2.9.1"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "^2.4.3",
+    "@tsconfig/docusaurus": "^1.0.7",
+    "copy-webpack-plugin": "^11.0.0",
+    "eslint-plugin-mdx": "^2.2.0",
+    "prettier": "^2.8.4",
+    "typescript": "^4.7.4",
+    "webpack-cli": "^5.0.1"
   },
   "browserslist": {
     "production": [
@@ -33,5 +67,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "engines": {
+    "node": ">=16.14"
   }
 }