docs: Use the v2 Search Component provided from Docusaurus & Algolia Search (react-navigation#968)

* bump docusaurus

* use the new search component

* bump node version for gh pages

* bumo node version on netlify

* change node

* separate call from client x ssr

* fix snack links

Author: eriveltonelias

.github/workflows/ci.yml

@@ -10,10 +10,10 @@ jobs:
     steps:
     - uses: actions/checkout@v1
 
-    - name: Use Node.js 10
+    - name: Use Node.js 12.13
       uses: actions/setup-node@v1
       with:
-        node-version: 10
+        node-version: 12.13
 
     - name: Restore yarn cache
       id: yarn-cache

.github/workflows/main.yml

@@ -13,10 +13,10 @@ jobs:
     steps:
     - uses: actions/checkout@v1
 
-    - name: Use Node.js 10
+    - name: Use Node.js 12.13
       uses: actions/setup-node@v1
       with:
-        node-version: 10
+        node-version: 12.13
 
     - name: Restore yarn cache
       id: yarn-cache

docusaurus.config.js

@@ -146,8 +146,8 @@ module.exports = {
       '@docusaurus/preset-classic',
       {
         docs: {
-          docLayoutComponent: require.resolve('./src/layouts/DocPage.js'),
-          docItemComponent: require.resolve('./src/layouts/DocItem.js'),
+          docLayoutComponent: require.resolve('./src/pages/layouts/DocPage.js'),
+          docItemComponent: require.resolve('./src/pages/layouts/DocItem.js'),
           editUrl:
             'https://github.com/react-navigation/react-navigation.github.io/edit/main/',
           remarkPlugins: [require('./src/plugins/remark-npm2yarn')],

netlify.toml

@@ -2,3 +2,6 @@
   base    = "/"
   publish = "build"
   command = "yarn install && yarn build"
+
+[build.environment]
+  NODE_VERSION = "12.13"

package.json

@@ -12,9 +12,9 @@
     "fetch-sponsors": "node scripts/fetch-sponsors.js"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.66",
+    "@docusaurus/core": "^2.0.0-alpha.72",
     "@docusaurus/plugin-google-analytics": "^2.0.0-alpha.66",
-    "@docusaurus/preset-classic": "2.0.0-alpha.66",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.72",
     "@octokit/graphql": "^4.5.7",
     "@react-navigation/core": "^5.14.3",
     "classnames": "^2.2.6",

src/SnackHelpers.js

@@ -90,7 +90,7 @@ function findNearestCodeBlock(node) {
   while (nextElement) {
     if (
       nextElement.tagName === 'DIV' &&
-      nextElement.className.includes('mdxCodeBlock')
+      ( nextElement.className.includes('mdxCodeBlock') || nextElement.className.includes('codeBlockContainer'))
     ) {
       return nextElement;
     } else {

src/layouts/DocItem.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import DefaultDocItem from '@theme/DocItem';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+function DocItem(props) {
+  // make sure to not use the window on the SSR
+  if(!ExecutionEnvironment.canUseDOM){
+    return null;
+  }
+  return <DefaultDocItem {...props} />;
+}
+
+export default DocItem;

src/pages/layouts/DocItem.js

@@ -1,11 +1,16 @@
 import React from 'react';
 import DefaultDocPage from '@theme/DocPage';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import {
   initializeSnackObservers,
   removeSnackObservers,
-} from '../SnackHelpers';
+} from '../../SnackHelpers';
 
 function DocPage(props) {
+  // make sure to not use the window on the SSR
+  if(!ExecutionEnvironment.canUseDOM){
+    return null;
+  }
   React.useEffect(() => {
     // Tags in Head aren't immediately available when the snack script loads, so
     // instead let's just store this in a global...