Merge pull request #1274 from reduxjs/docusaurus-canary

Author: markerikson

docs/rtk-query/usage-with-typescript.mdx

@@ -321,6 +321,7 @@ const api = createApi({
           return {
             error: {
               status: 500,
+              statusText: 'Internal Server Error',
               data: 'Invalid ID provided.',
             },
           }

docs/rtk-query/usage/customizing-queries.mdx

@@ -223,25 +223,29 @@ import { createApi, BaseQueryFn } from '@reduxjs/toolkit/query'
 import axios, { AxiosRequestConfig, AxiosError } from 'axios'
 
 // highlight-start
-const axiosBaseQuery = (
-  { baseUrl }: { baseUrl: string } = { baseUrl: '' }
-): BaseQueryFn<
-  {
-    url: string
-    method: AxiosRequestConfig['method']
-    data?: AxiosRequestConfig['data']
-  },
-  unknown,
-  unknown
-> => async ({ url, method, data }) => {
-  try {
-    const result = await axios({ url: baseUrl + url, method, data })
-    return { data: result.data }
-  } catch (axiosError) {
-    let err = axiosError as AxiosError
-    return { error: { status: err.response?.status, data: err.response?.data } }
+const axiosBaseQuery =
+  (
+    { baseUrl }: { baseUrl: string } = { baseUrl: '' }
+  ): BaseQueryFn<
+    {
+      url: string
+      method: AxiosRequestConfig['method']
+      data?: AxiosRequestConfig['data']
+    },
+    unknown,
+    unknown
+  > =>
+  async ({ url, method, data }) => {
+    try {
+      const result = await axios({ url: baseUrl + url, method, data })
+      return { data: result.data }
+    } catch (axiosError) {
+      let err = axiosError as AxiosError
+      return {
+        error: { status: err.response?.status, data: err.response?.data },
+      }
+    }
   }
-}
 // highlight-end
 
 const api = createApi({
@@ -270,21 +274,19 @@ import { createApi } from '@reduxjs/toolkit/query'
 import { request, gql, ClientError } from 'graphql-request'
 
 // highlight-start
-const graphqlBaseQuery = ({ baseUrl }: { baseUrl: string }) => async ({
-  body,
-}: {
-  body: string
-}) => {
-  try {
-    const result = await request(baseUrl, body)
-    return { data: result }
-  } catch (error) {
-    if (error instanceof ClientError) {
-      return { error: { status: error.response.status, data: error } }
+const graphqlBaseQuery =
+  ({ baseUrl }: { baseUrl: string }) =>
+  async ({ body }: { body: string }) => {
+    try {
+      const result = await request(baseUrl, body)
+      return { data: result }
+    } catch (error) {
+      if (error instanceof ClientError) {
+        return { error: { status: error.response.status, data: error } }
+      }
+      return { error: { status: 500, data: error } }
     }
-    return { error: { status: 500, data: error } }
   }
-}
 // highlight-end
 
 export const api = createApi({
@@ -581,6 +583,7 @@ const dynamicBaseQuery: BaseQueryFn<
     return {
       error: {
         status: 400,
+        statusText: 'Bad Request',
         data: 'No project ID received',
       },
     }

packages/toolkit/src/query/endpointDefinitions.ts

@@ -99,7 +99,7 @@ interface EndpointDefinitionWithQueryFn<
    *         if (randomVal < 0.9) {
    *           return { data: 'tails' }
    *         }
-   *         return { error: { status: 500, data: "Coin landed on it's edge!" } }
+   *         return { error: { status: 500, statusText: 'Internal Server Error', data: "Coin landed on it's edge!" } }
    *       }
    *       // highlight-end
    *     })

website/package.json

@@ -9,8 +9,8 @@
     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.1",
-    "@docusaurus/preset-classic": "2.0.0-beta.1",
+    "@docusaurus/core": "2.0.0-beta.4",
+    "@docusaurus/preset-classic": "2.0.0-beta.4",
     "classnames": "^2.2.6",
     "react": "17.0.2",
     "react-dom": "17.0.2",

website/src/theme/DocPageWithBraveWarning/BraveWarning.js

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react'
+
+function BraveWarning() {
+  const [isBrave, setIsBrave] = useState(false)
+
+  useEffect(() => {
+    const check = async () => {
+      return (navigator.brave && (await navigator.brave.isBrave())) || false
+    }
+
+    check()
+      .then((isBrave) => {
+        if (isBrave) {
+          setIsBrave(isBrave)
+        }
+      })
+      .catch(console.error)
+  }, [])
+
+  return isBrave && !localStorage.getItem('brave-warning-dismissed') ? (
+    <div className="admonition admonition-caution alert alert--warning">
+      <div className="admonition-heading">
+        <h5>
+          <span className="admonition-icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
+              ></path>
+            </svg>
+          </span>
+          Brave Browser Warning
+        </h5>
+      </div>
+      <div className="admonition-content">
+        <p>
+          It appears that you're using Brave - that's awesome. We recommend
+          disabling shields for this domain as well as CodeSandbox in the event
+          that the examples do not load correctly.
+        </p>
+        <button
+          className="button button--warning button--md"
+          onClick={() => {
+            localStorage.setItem('brave-warning-dismissed', true)
+            setIsBrave(false)
+          }}
+        >
+          Dismiss
+        </button>
+      </div>
+    </div>
+  ) : null
+}
+
+export default BraveWarning

website/src/theme/DocPageWithBraveWarning/index.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { useState, useCallback, useEffect } from 'react'
+import React, { useState, useCallback } from 'react'
 import { MDXProvider } from '@mdx-js/react'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import renderRoutes from '@docusaurus/renderRoutes'
@@ -18,95 +18,15 @@ import { translate } from '@docusaurus/Translate'
 import clsx from 'clsx'
 import styles from './styles.module.css'
 import { ThemeClassNames, docVersionSearchTag } from '@docusaurus/theme-common'
-
-function BraveWarning() {
-  const [isBrave, setIsBrave] = useState(false)
-
-  useEffect(() => {
-    const check = async () => {
-      return (navigator.brave && (await navigator.brave.isBrave())) || false
-    }
-
-    check()
-      .then((isBrave) => {
-        if (isBrave) {
-          setIsBrave(isBrave)
-        }
-      })
-      .catch(console.error)
-  }, [])
-
-  return isBrave && !localStorage.getItem('brave-warning-dismissed') ? (
-    <div className="admonition admonition-caution alert alert--warning">
-      <div className="admonition-heading">
-        <h5>
-          <span className="admonition-icon">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
-              ></path>
-            </svg>
-          </span>
-          Brave Browser Warning
-        </h5>
-      </div>
-      <div className="admonition-content">
-        <p>
-          It appears that you're using Brave - that's awesome. We recommend
-          disabling shields for this domain as well as CodeSandbox in the event
-          that the examples do not load correctly.
-        </p>
-        <button
-          className="button button--warning button--md"
-          onClick={() => {
-            localStorage.setItem('brave-warning-dismissed', true)
-            setIsBrave(false)
-          }}
-        >
-          Dismiss
-        </button>
-      </div>
-    </div>
-  ) : null
-}
-
-function getSidebar({ versionMetadata, currentDocRoute }) {
-  function addTrailingSlash(str) {
-    return str.endsWith('/') ? str : `${str}/`
-  }
-
-  function removeTrailingSlash(str) {
-    return str.endsWith('/') ? str.slice(0, -1) : str
-  }
-
-  const { permalinkToSidebar, docsSidebars } = versionMetadata // With/without trailingSlash, we should always be able to get the appropriate sidebar
-  // note: docs plugin permalinks currently never have trailing slashes
-  // trailingSlash is handled globally at the framework level, not plugin level
-
-  const sidebarName =
-    permalinkToSidebar[currentDocRoute.path] ||
-    permalinkToSidebar[addTrailingSlash(currentDocRoute.path)] ||
-    permalinkToSidebar[removeTrailingSlash(currentDocRoute.path)]
-  const sidebar = docsSidebars[sidebarName]
-  return {
-    sidebar,
-    sidebarName,
-  }
-}
+import BraveWarning from './BraveWarning'
 
 function DocPageContent({ currentDocRoute, versionMetadata, children }) {
   const { siteConfig, isClient } = useDocusaurusContext()
   const { pluginId, version } = versionMetadata
-  const { sidebarName, sidebar } = getSidebar({
-    versionMetadata,
-    currentDocRoute,
-  })
+  const sidebarName = currentDocRoute.sidebar
+  const sidebar = sidebarName
+    ? versionMetadata.docsSidebars[sidebarName]
+    : undefined
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false)
   const [hiddenSidebar, setHiddenSidebar] = useState(false)
   const toggleSidebar = useCallback(() => {
@@ -152,9 +72,7 @@ function DocPageContent({ currentDocRoute, versionMetadata, children }) {
               }
               sidebar={sidebar}
               path={currentDocRoute.path}
-              sidebarCollapsible={
-                siteConfig.themeConfig?.sidebarCollapsible ?? true
-              }
+              sidebarCollapsible={siteConfig.themeConfig.sidebarCollapsible}
               onCollapse={toggleSidebar}
               isHidden={hiddenSidebar}
             />
@@ -227,7 +145,9 @@ function DocPage(props) {
       currentDocRoute={currentDocRoute}
       versionMetadata={versionMetadata}
     >
-      {renderRoutes(docRoutes)}
+      {renderRoutes(docRoutes, {
+        versionMetadata,
+      })}
     </DocPageContent>
   )
 }

website/src/theme/DocPageWithBraveWarning/styles.module.css

@@ -7,6 +7,7 @@
 
 :root {
   --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
 }
 
 :global(.docs-wrapper) {
@@ -19,17 +20,22 @@
   width: 100%;
 }
 
+.docSidebarContainer {
+  display: none;
+}
+
 @media (min-width: 997px) {
   .docMainContainer {
     flex-grow: 1;
     max-width: calc(100% - var(--doc-sidebar-width));
   }
 
   .docMainContainerEnhanced {
-    max-width: none;
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
   }
 
   .docSidebarContainer {
+    display: block;
     width: var(--doc-sidebar-width);
     margin-top: calc(-1 * var(--ifm-navbar-height));
     border-right: 1px solid var(--ifm-toc-border-color);
@@ -39,7 +45,7 @@
   }
 
   .docSidebarContainerHidden {
-    width: 30px;
+    width: var(--doc-sidebar-hidden-width);
     cursor: pointer;
   }
 
@@ -77,24 +83,3 @@
     ) !important;
   }
 }
-
-@media (max-width: 996px) {
-  .docSidebarContainer {
-    margin-top: 0;
-  }
-}
-
-@media (min-width: 997px) and (max-width: 1320px) {
-  .docItemWrapper {
-    max-width: calc(
-      var(--ifm-container-width) - var(--doc-sidebar-width) -
-        var(--ifm-spacing-horizontal) * 2
-    );
-  }
-
-  .docItemWrapperEnhanced {
-    max-width: calc(
-      var(--ifm-container-width) - var(--ifm-spacing-horizontal) * 2
-    );
-  }
-}