Doc upgrades (#175)

* upgrade to docusaurus to 3.1.1, ts to 5.2.2, and react to 18.0.0. plus required adjustments.

* upgrade docusaurus to 3.2.1

* fix features background in dark mode

* fix broken link

* Nuke lockfile

* Trigger CI

* Remove vercel specific configs

---------

Co-authored-by: Christy Presler <cpresler@users.noreply.github.com>
Co-authored-by: Charlie Brown <carbonrobot@gmail.com>

Author: cpresler

docs/api/matchers.md renamed to docs/api/matchers.mdx

@@ -4,7 +4,7 @@ sidebar_position: 3
 
 # Matchers
 
-### toMatchBaseline(options: {threshold?: number} = {threshold: 0.1})
+### toMatchBaseline(options: \{threshold?: number\} = \{threshold: 0.1\})
 
 This custom Jest matcher will try to find and compare the baseline screenshot by using the path of the latest screenshot (returned by `takeScreenshot()`). You will have to take a screenshot before using, and pass the path of that screenshot to the expect method.
 

docs/api/methods.md renamed to docs/api/methods.mdx

@@ -170,7 +170,7 @@ describe('App.tsx', () => {
 });
 ```
 
-### scrollTo(testID: string, position: {x?: number, y?: number})
+### scrollTo(testID: string, position: \{x?: number, y?: number\})
 
 Calls the `scrollTo` method of the element where its `testID` prop matches the methods `testID` argument.
 

docs/cli/building-the-app.md renamed to docs/cli/building-the-app.mdx

@@ -2,6 +2,9 @@
 sidebar_position: 1
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Getting Started
 
 ### React Native Version Support
@@ -58,7 +61,7 @@ or
 
 ### Add tests
 
-Use the [takeScreenshot](/docs/api/methods#takescreenshotname-string) and [.toMatchBaseline](/docs/api/matchers#tomatchbaselinename-string) apis to implement screenshot tests. File names must end in `.owl.ts`, `.owl.tsx`, `.owl.js` or `.owl.jsx`. [See the example app](https://github.com/FormidableLabs/react-native-owl/tree/main/example) for a more complete example.
+Use the [takeScreenshot](/docs/api/methods#takescreenshotname-string) and [.toMatchBaseline](/docs/api/matchers) apis to implement screenshot tests. File names must end in `.owl.ts`, `.owl.tsx`, `.owl.js` or `.owl.jsx`. [See the example app](https://github.com/FormidableLabs/react-native-owl/tree/main/example) for a more complete example.
 
 #### Example
 

docs/cli/testing-the-app.md renamed to docs/cli/testing-the-app.mdx

@@ -1,6 +1,6 @@
 # Website
 
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+This website is built using [Docusaurus 3](https://docusaurus.io/), a modern static website generator.
 
 ### Installation
 

docs/introduction/config-file.md renamed to docs/introduction/config-file.mdx

@@ -0,0 +1,120 @@
+import { themes as prismThemes } from "prism-react-renderer" ;
+import type { Config } from "@docusaurus/types";
+import type * as Preset from "@docusaurus/preset-classic";
+
+const config: Config = {
+  title: 'React Native Owl',
+  tagline: 'Visual Regression Testing for React Native',
+  url: 'https://commerce.nearform.com/',
+  baseUrl: '/open-source/react-native-owl/',
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+  favicon: 'images/favicon.ico',
+  organizationName: 'Nearform Commerce',
+  projectName: 'react-native-owl',
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+  presets: [
+    [
+      "classic",
+      {
+        docs: {
+          path: '../docs',
+          sidebarPath: './sidebars.js',
+          editUrl:
+            'https://github.com/FormidableLabs/react-native-owl/edit/main/website/',
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+        ...(process.env.VERCEL_ENV === 'production' && {
+          gtag: {
+            trackingID: process.env.GTAG_TRACKING_ID,
+            anonymizeIP: true,
+          },
+          googleTagManager: {
+            containerId: process.env.GTM_CONTAINER_ID,
+          },
+        }),
+      },
+    ],
+  ],
+
+  themeConfig: {
+    metadata: [
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1, maximum-scale=1",
+        image: '/images/social.png',
+      },
+    ],
+    navbar: {
+      style: 'dark',
+      title: 'React Native Owl',
+      logo: {
+        alt: 'React Native Owl Logo',
+        src: 'images/logo-eyes.svg',
+      },
+      items: [
+        {
+          label: 'Documentation',
+          position: 'left',
+          items: [
+            {
+              label: 'Getting Started',
+              to: '/docs/introduction/getting-started/',
+            },
+            {
+              label: 'Config File',
+              to: '/docs/introduction/config-file/',
+            },
+            {
+              label: 'CLI',
+              to: '/docs/cli/building-the-app/',
+            },
+            {
+              label: 'Methods',
+              to: '/docs/api/methods/',
+            },
+            {
+              label: 'Matchers',
+              to: '/docs/api/matchers/',
+            },
+          ],
+        },
+        {
+          href: 'https://github.com/FormidableLabs/react-native-owl',
+          className: 'header-github-link',
+          'aria-label': 'GitHub Repository',
+          position: 'right',
+        },
+        {
+          href: 'https://commerce.nearform.com/',
+          className: 'header-nearform-link',
+          'aria-label': 'Nearform Commerce Website',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      logo: {
+        alt: "Nearform logo",
+        src: "images/nearform-logo-white.svg",
+        href: "https://commerce.nearform.com",
+        width: 100,
+        height: 100,
+      },
+      copyright: `Copyright © ${new Date().getFullYear()} Nearform`,
+    },
+    prism: {
+      defaultLanguage: 'javascript',
+      theme: prismThemes.github,
+      darkTheme: prismThemes.dracula,
+    },
+  } satisfies Preset.ThemeConfig,
+};
+
+export default config;