chore: test mdx v2 and CodeHike Scrollycoding

docs/docs/configuration/providers/email.md

@@ -40,5 +40,5 @@ The email provider requires a database, it cannot be used without one.
 |          type           |                       Type of provider, in this case `email`                        |            `"email"`             |   Yes    |
 |         server          |                     Path or object pointing to the email server                     |       `string` or `Object`       |   Yes    |
 | sendVerificationRequest |               Callback to execute when a verification request is sent               | `(params) => Promise<undefined>` |   Yes    |
-|          from           |   The email address from which emails are sent, default: "<no-reply@example.com>"   |             `string`             |    No    |
+|          from           |    The email address from which emails are sent, default: "no-reply@example.com"    |             `string`             |    No    |
 |         maxAge          | How long until the e-mail can be used to log the user in seconds. Defaults to 1 day |             `number`             |    No    |

docs/docs/faq.md

@@ -34,9 +34,12 @@ You can use also NextAuth.js with any database using a custom database adapter,
 </summary>
 <p>
 
-<p>NextAuth.js includes built-in support for signing in with&nbsp;
+<p>
+NextAuth.js includes built-in support for signing in with&nbsp;
 {Object.values(require("../providers.json")).sort().join(", ")}.
+
 (See also: <a href="/configuration/providers/oauth">Providers</a>)
+
 </p>
 
 NextAuth.js also supports email for passwordless sign in, which is useful for account recovery or for people who are not able to use an account with the configured OAuth services (e.g. due to service outage, account suspension or otherwise becoming locked out of an account).
@@ -316,7 +319,6 @@ JSON Web Tokens can be used for session tokens, but are also used for lots of ot
 
 - If you do not explicitly specify a secret for for NextAuth.js, existing sessions will be invalidated any time your NextAuth.js configuration changes, as NextAuth.js will default to an auto-generated secret. Since v4 this only impacts development and generating a secret is required in production.
 
-
 </p>
 </details>
 

docs/docs/getting-started/upgrade-to-v4.md

@@ -339,7 +339,6 @@ The way we save data with adapters have slightly changed. With the new Adapter A
 - New fields on Account: `token_type`, `scope`, `id_token`, `session_state`
 - `verification_requests` table has been renamed to `verification_tokens`
 
-<!-- REVIEW: Would something like this below be helpful? -->
 <details>
 <summary>
 See the changes

docs/docs/tutorials/securing-pages-and-api-routes.mdx

@@ -17,6 +17,8 @@ The methods `getSession()` and `getToken()` both return an `object` if a session
 
 If data on a page is fetched using calls to secure API routes - i.e. routes which use `getSession()` or `getToken()` to access the session - you can use the `useSession` React Hook to secure pages.
 
+<CH.Scrollycoding>
+
 ```js title="pages/client-side-example.js"
 import { useSession, getSession } from "next-auth/react"
 
@@ -137,6 +139,8 @@ export default async (req, res) => {
 }
 ```
 
+</CH.Scrollycoding>
+
 :::tip
 You can use the `getToken()` helper function in any application as long as you set the `NEXTAUTH_URL` environment variable and the application is able to read the JWT cookie (e.g. is on the same domain).
 :::

docs/docusaurus.config.js

@@ -1,3 +1,6 @@
+const theme = require("shiki/themes/nord.json")
+const { remarkCodeHike } = require("@code-hike/mdx")
+
 module.exports = {
   title: "NextAuth.js",
   tagline: "Authentication for Next.js",
@@ -143,6 +146,7 @@ module.exports = {
       respectPrefersColorScheme: true,
     },
   },
+  themes: ["mdx-v2"],
   presets: [
     [
       "@docusaurus/preset-classic",
@@ -154,6 +158,8 @@ module.exports = {
           lastVersion: "current",
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
+          beforeDefaultRemarkPlugins: [[remarkCodeHike, { theme }]],
+          admonitions: false,
           remarkPlugins: [
             require("remark-github"),
             require("mdx-mermaid"),
@@ -169,7 +175,10 @@ module.exports = {
           },
         },
         theme: {
-          customCss: require.resolve("./src/css/index.css"),
+          customCss: [
+            require.resolve("./src/css/index.css"),
+            require.resolve("@code-hike/mdx/styles.css"),
+          ],
         },
       },
     ],

docs/package.json

@@ -19,12 +19,14 @@
     "generate-providers": "node ./scripts/generate-providers.js"
   },
   "dependencies": {
+    "@code-hike/mdx": "^0.5.2",
     "@docusaurus/core": "^2.0.0-beta.20",
     "@docusaurus/preset-classic": "^2.0.0-beta.20",
     "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.20",
     "@docusaurus/theme-common": "2.0.0-beta.20",
-    "@mdx-js/react": "1.6.22",
+    "@mdx-js/react": "^2.1.1",
     "classnames": "^2.3.1",
+    "docusaurus-theme-mdx-v2": "^0.1.1",
     "mdx-mermaid": "^1.2.2",
     "mermaid": "^9.0.1",
     "prism-react-renderer": "1.3.1",

docs/versioned_docs/version-v3/configuration/providers.md

@@ -228,7 +228,7 @@ The email provider requires a database, it cannot be used without one.
 |          type           |                       Type of provider, in this case `email`                        |            `"email"`             |   Yes    |
 |         server          |                     Path or object pointing to the email server                     |       `string` or `Object`       |   Yes    |
 | sendVerificationRequest |               Callback to execute when a verification request is sent               | `(params) => Promise<undefined>` |   Yes    |
-|          from           |   The email address from which emails are sent, default: "<no-reply@example.com>"   |             `string`             |    No    |
+|          from           |    The email address from which emails are sent, default: "no-reply@example.com"    |             `string`             |    No    |
 |         maxAge          | How long until the e-mail can be used to log the user in seconds. Defaults to 1 day |             `number`             |    No    |
 
 ## Credentials Provider

docs/versioned_docs/version-v3/faq.md

@@ -23,7 +23,8 @@ You can use also NextAuth.js with any database using a custom database adapter,
 
 ### What authentication services does NextAuth.js support?
 
-<p>NextAuth.js includes built-in support for signing in with&nbsp;
+<p>
+NextAuth.js includes built-in support for signing in with&nbsp;
 {Object.values(require("../../providers.json")).sort().join(", ")}.
 (See also: <a href="/configuration/providers/oauth">Providers</a>)
 </p>