fix: scrollycoding min-height

docs/docs/adapters/neo4j.md

@@ -66,7 +66,7 @@ Optimum indexes will vary on your edition of Neo4j i.e. community or enterprise,
 
 1. For **both** Community Edition & Enterprise Edition create constraints and indexes
 
-```cypher
+```sql
 
 CREATE CONSTRAINT user_id_constraint IF NOT EXISTS
 ON (u:User) ASSERT u.id IS UNIQUE;
@@ -86,7 +86,7 @@ FOR (s:Session) ON (s.sessionToken);
 
 2.a. For Community Edition **only** create single-property indexes
 
-```cypher
+```sql
 CREATE INDEX account_provider_index IF NOT EXISTS
 FOR (a:Account) ON (a.provider);
 
@@ -102,7 +102,7 @@ FOR (v:VerificationToken) ON (v.token);
 
 2.b. For Enterprise Edition **only** create composite node key constraints and indexes
 
-```cypher
+```sql
 CREATE CONSTRAINT account_provider_composite_constraint IF NOT EXISTS
 ON (a:Account) ASSERT (a.provider, a.providerAccountId) IS NODE KEY;
 

docs/docs/configuration/initialization.mdx

@@ -3,17 +3,21 @@ id: initialization
 title: Initialization
 ---
 
+import Admonition from "@theme/Admonition"
+
 In Next.js, you can define an API route that will catch all requests that begin with a certain path. Conveniently, this is called [Catch all API routes](https://nextjs.org/docs/api-routes/dynamic-api-routes#catch-all-api-routes).
 
 When you define a `/pages/api/auth/[...nextauth]` JS/TS file, you instruct NextAuth.js that every API request beginning with `/api/auth/*` should be handled by the code written in the `[...nextauth]` file.
 
 Depending on your use case, you can initialize NextAuth.js in two different ways:
 
+<CH.Scrollycoding>
+
 ## Simple initialization
 
 In most cases, you won't need to worry about what `NextAuth.js` does, and you will get by just fine with the following initialization:
 
-```ts title="/pages/api/auth/[...nextauth].js"
+```ts /pages/api/auth/[...nextauth].ts focus=1
 import NextAuth from "next-auth"
 
 export default NextAuth({
@@ -29,9 +33,11 @@ This is the preferred initialization in tutorials/other parts of the documentati
 
 If you have a specific use case and need to make NextAuth.js do something slightly different than what it is designed for, keep in mind, the `[...nextauth].js` config file is still just **a regular [API Route](https://nextjs.org/docs/api-routes/introduction)** at the end of the day.
 
+---
+
 That said, you can initialize NextAuth.js like this:
 
-```ts title="/pages/api/auth/[...nextauth].ts"
+```ts /pages/api/auth/[...nextauth].ts bg=6:8
 import type { NextApiRequest, NextApiResponse } from "next"
 import NextAuth from "next-auth"
 
@@ -47,19 +53,24 @@ The `...` section will still be your [options](/configuration/options), but you
 
 You could for example log the request, add headers, read `query` or `body` parameters, whatever you would do in an API route.
 
-:::tip
+<Admonition type="tip">
 Since this is a catch-all route, remember to check what kind of NextAuth.js "action" is running. Compare the REST API with the `req.query.nextauth` parameter.
 
 For example to execute something on the "callback" action when the request is a POST method, you can check for `req.query.nextauth.includes("callback") && req.method === "POST"`
-:::
 
-:::note
-`NextAuth` will implicitly close the response (by calling `res.end`, `res.send` or similar), so you should not run code **after** `NextAuth` in the function body. Using `return NextAuth` makes sure you don't forget that.
-:::
+</Admonition>
+
+---
+
+<Admonition type="note">
+  `NextAuth` will implicitly close the response (by calling `res.end`,
+  `res.send` or similar), so you should not run code **after** `NextAuth` in the
+  function body. Using `return NextAuth` makes sure you don't forget that.
+</Admonition>
 
 Any variable you create this way will be available in the `NextAuth` options as well, since they are in the same scope.
 
-```ts title="/pages/api/auth/[...nextauth].ts"
+```ts /pages/api/auth/[...nextauth].ts
 import type { NextApiRequest, NextApiResponse } from "next"
 import NextAuth from "next-auth"
 
@@ -89,9 +100,11 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
 }
 ```
 
+---
+
 A practical example could be to not show a certain provider on the default sign-in page, but still be able to sign in with it. (The idea is taken from [this discussion](https://github.com/nextauthjs/next-auth/discussions/3133)):
 
-```js title="/pages/api/auth/[...nextauth].js"
+```js /pages/api/auth/[...nextauth].ts
 import NextAuth from "next-auth"
 import CredentialsProvider from "next-auth/providers/credentials"
 import GoogleProvider from "next-auth/providers/google"
@@ -114,6 +127,10 @@ export default async function auth(req, res) {
 }
 ```
 
+---
+
+</CH.Scrollycoding>
+
 For more details on all available actions and which methods are supported, please check out the [REST API documentation](/getting-started/rest-api) or the appropriate area in [the source code](https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/core/index.ts)
 
 This way of initializing `NextAuth` is very powerful, but should be used sparingly.

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
@@ -552,26 +551,35 @@ DROP COLUMN IF EXISTS "updated_at";
 
 MongoDB is a document database and as such new fields will be automatically populated. You do, however, need to update the names of existing fields which are going to be reused.
 
-```mongo
-db.getCollection('accounts').updateMany({}, {
-  $rename: {
-    "provider_id": "provider",
-    "provider_account_id": "providerAccountId",
-    "user_id": "userId",
-    "access_token_expires": "expires_at"
+```javascript
+db.getCollection("accounts").updateMany(
+  {},
+  {
+    $rename: {
+      provider_id: "provider",
+      provider_account_id: "providerAccountId",
+      user_id: "userId",
+      access_token_expires: "expires_at",
+    },
   }
-})
-db.getCollection('users').updateMany({}, {
-  $rename: {
-    "email_verified": "emailVerified"
+)
+db.getCollection("users").updateMany(
+  {},
+  {
+    $rename: {
+      email_verified: "emailVerified",
+    },
   }
-})
-db.getCollection('sessions').updateMany({}, {
-  $rename: {
-    "session_token": "sessionToken",
-    "user_id": "userId"
+)
+db.getCollection("sessions").updateMany(
+  {},
+  {
+    $rename: {
+      session_token: "sessionToken",
+      user_id: "userId",
+    },
   }
-})
+)
 ```
 
 ## Missing `secret`

docs/docs/guides/index.md

@@ -7,7 +7,7 @@ title: Guides
 
 We have internal guides in three levels of difficulty.
 
-```mdx-code-block
+```markdown
 import DocCardList from '@theme/DocCardList';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 

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

@@ -17,7 +17,7 @@ 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.
 
-```js title="pages/client-side-example.js"
+```js pages/client-side-example.js
 import { useSession, getSession } from "next-auth/react"
 
 export default function Page() {

docs/docusaurus.config.js

@@ -1,3 +1,6 @@
+const theme = require("shiki/themes/material-palenight.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,13 @@ module.exports = {
           lastVersion: "current",
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
+          beforeDefaultRemarkPlugins: [
+            [
+              remarkCodeHike,
+              { theme, lineNumbers: true, showCopyButton: true },
+            ],
+          ],
+          admonitions: false,
           remarkPlugins: [
             require("remark-github"),
             require("mdx-mermaid"),
@@ -169,7 +180,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/src/css/index.css

@@ -31,6 +31,8 @@
   --ifm-navbar-background-color: rgba(255, 255, 255, 0.95);
   --ifm-h1-font-size: 3rem;
   --ifm-h1-font-size: 2rem;
+
+  --ch-scrollycoding-code-min-height: 500px;
 }
 
 html[data-theme="dark"]:root {

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

@@ -72,7 +72,7 @@ providers: [
 
 5. Once a provider has been setup, you can sign in at the following URL: `[origin]/api/auth/signin`. This is an unbranded auto-generated page with all the configured providers.
 
-<Image src="/img/signin.png" alt="Signin Screenshot" />
+![](/img/signin.png)
 
 ### Options
 
@@ -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>

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

@@ -148,4 +148,4 @@ export const Image = ({ children, src, alt = "" }) => {
   )
 }
 
-<Image src="/img/signin-complex.png" />
+![](/img/signin-complex.png)