From 6c0e38950320143fd2bdf9fb3bf463d14f65fe86 Mon Sep 17 00:00:00 2001 From: Marco Monti Date: Thu, 11 Jul 2024 10:41:50 +0200 Subject: [PATCH] docs(next-drupal): updated learn section --- .../draft-mode/configure-content-types.mdx | 10 ++--- .../draft-mode/configure-draft-routes.mdx | 39 +++++++++++++++++ .../draft-mode/configure-preview-routes.mdx | 43 ------------------- .../draft-mode/create-oauth-client.mdx | 27 ++++++------ .../tutorials/draft-mode/create-site.mdx | 8 ++-- www/content/tutorials/draft-mode/done.mdx | 4 +- www/content/tutorials/graphql/index.mdx | 2 +- .../configure-entity-types.mdx | 10 +++++ .../configure-revalidate-route.mdx | 37 ++++++++-------- .../quick-start/configure-path-aliases.mdx | 2 +- www/content/tutorials/quick-start/index.mdx | 2 +- 11 files changed, 93 insertions(+), 91 deletions(-) create mode 100644 www/content/tutorials/draft-mode/configure-draft-routes.mdx delete mode 100644 www/content/tutorials/draft-mode/configure-preview-routes.mdx diff --git a/www/content/tutorials/draft-mode/configure-content-types.mdx b/www/content/tutorials/draft-mode/configure-content-types.mdx index 0efbe058..1bb3ab76 100644 --- a/www/content/tutorials/draft-mode/configure-content-types.mdx +++ b/www/content/tutorials/draft-mode/configure-content-types.mdx @@ -2,20 +2,20 @@ title: Configure Content Types excerpt: Configure preview for content types weight: 150 -group: Preview Mode +group: Draft Mode --- -Next, we need to configure preview mode for the content types. This will display an inline preview in an iframe when you visit the content pages. +Next, we need to configure draft mode for the content types. This will display an inline draft in an iframe when you visit the content pages. --- -## Configure Preview +## Configure Draft -To enable content preview inside Drupal, we need to configure a site resolver for the **Article** content type. +To enable content draft inside Drupal, we need to configure a site resolver for the **Article** content type. -A _site resolver_ tells Drupal how to resolve the preview URL for an entity. +A _site resolver_ tells Drupal how to resolve the draft URL for an entity. diff --git a/www/content/tutorials/draft-mode/configure-draft-routes.mdx b/www/content/tutorials/draft-mode/configure-draft-routes.mdx new file mode 100644 index 00000000..b10eee73 --- /dev/null +++ b/www/content/tutorials/draft-mode/configure-draft-routes.mdx @@ -0,0 +1,39 @@ +--- +title: Configure Draft Routes +excerpt: Draft routes in Next.js +weight: 140 +group: Draft Mode +--- + +Implement draft mode using two API routes. + + + +If you're using the Basic Starter, draft routes are already created for you. + + + +## /app/api/draft/route.ts + +```ts title=app/api/draft/route.ts +import { drupal } from "@/lib/drupal" +import { enableDraftMode } from "next-drupal/draft" +import type { NextRequest } from "next/server" + +export async function GET(request: NextRequest): Promise { + return enableDraftMode(request, drupal) +} +``` + +--- + +## /app/api/disable-draft/route.ts + +```ts title=app/api/disable-draft/route.ts +import { disableDraftMode } from "next-drupal/draft" +import type { NextRequest } from "next/server" + +export async function GET(request: NextRequest) { + return disableDraftMode() +} +``` diff --git a/www/content/tutorials/draft-mode/configure-preview-routes.mdx b/www/content/tutorials/draft-mode/configure-preview-routes.mdx deleted file mode 100644 index e49d7b3f..00000000 --- a/www/content/tutorials/draft-mode/configure-preview-routes.mdx +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Configure Preview Routes -excerpt: Preview routes in Next.js -weight: 140 -group: Preview Mode ---- - -Implement preview mode using two API routes. - - - -If you're using the Basic Starter, preview routes are already created for you. - - - -## /pages/api/preview.ts - -```ts title=pages/api/preview.ts -import { NextApiRequest, NextApiResponse } from "next" - -import { drupal } from "lib/drupal" - -export default async function handler( - request: NextApiRequest, - response: NextApiResponse -) { - return await drupal.preview(request, response) -} -``` - ---- - -## /pages/api/exit-preview.ts - -```ts title=pages/api/exit-preview.ts -import { NextApiResponse } from "next" - -export default function exit(_, response: NextApiResponse) { - response.clearPreviewData() - response.writeHead(307, { Location: "/" }) - response.end() -} -``` diff --git a/www/content/tutorials/draft-mode/create-oauth-client.mdx b/www/content/tutorials/draft-mode/create-oauth-client.mdx index 7bb38b66..3983f969 100644 --- a/www/content/tutorials/draft-mode/create-oauth-client.mdx +++ b/www/content/tutorials/draft-mode/create-oauth-client.mdx @@ -2,7 +2,7 @@ title: Create OAuth Client excerpt: Setup an OAuth client to be used for authenticated content. weight: 110 -group: Preview Mode +group: Draft Mode --- Before we can create an OAuth consumer, we need to create a new role and a user for OAuth scopes. @@ -38,7 +38,7 @@ We are assigning the _Bypass content access control_ permission to allow Next.js This scope is only going to be used when making authenticated requests from Next.js to Drupal. ```ts -const articles = await drupal.getResource( +const article = await drupal.getResource( "node--article", "dad82fe9-f2b7-463e-8c5f-02f73018d6cb", // highlight-start @@ -108,20 +108,17 @@ DRUPAL_CLIENT_SECRET= --- -## 7. Update DrupalClient +## 7. Update NextDrupal client. -Update the `DrupalClient` to use the **Bearer** authentication header. +Update the `NextDrupal` to use the **Bearer** authentication header. ```ts title=lib/drupal.ts -import { DrupalClient } from "next-drupal" - -export const drupal = new DrupalClient( - process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, - { - auth: { - clientId: process.env.DRUPAL_CLIENT_ID, - clientSecret: process.env.DRUPAL_CLIENT_SECRET, - }, - } -) +import { NextDrupal } from "next-drupal" + +export const drupal = new NextDrupal(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, { + auth: { + clientId: process.env.DRUPAL_CLIENT_ID, + clientSecret: process.env.DRUPAL_CLIENT_SECRET, + }, +}) ``` diff --git a/www/content/tutorials/draft-mode/create-site.mdx b/www/content/tutorials/draft-mode/create-site.mdx index fcc43a8f..000616f1 100644 --- a/www/content/tutorials/draft-mode/create-site.mdx +++ b/www/content/tutorials/draft-mode/create-site.mdx @@ -2,10 +2,10 @@ title: Create Next.js site excerpt: Create a Next.js site on Drupal weight: 105 -group: Preview Mode +group: Draft Mode --- -Start by creating a Next.js site so that we can render the preview on Drupal. +Start by creating a Next.js site so that we can render the draft on Drupal. 1. Visit `/admin/config/services/next`. 2. Click **Add Next.js site**. @@ -13,8 +13,8 @@ Start by creating a Next.js site so that we can render the preview on Drupal. - **Label**: `Next.js` - **Base URL**: `http://localhost:3000` -- **Preview URL**: `http://localhost:3000/api/preview` -- **Preview secret**: `secret` +- **Draft URL (or Preview URL)**: `http://localhost:3000/api/draft` +- **Secret key**: `secret` diff --git a/www/content/tutorials/draft-mode/done.mdx b/www/content/tutorials/draft-mode/done.mdx index 19ff2866..a350ab53 100644 --- a/www/content/tutorials/draft-mode/done.mdx +++ b/www/content/tutorials/draft-mode/done.mdx @@ -1,10 +1,10 @@ --- title: Done weight: 160 -group: Preview Mode +group: Draft Mode --- -Congratulations. You have successfully configured preview mode for your content types. +Congratulations. You have successfully configured draft mode for your content types. You should see the iframe preview when you visit your content pages. diff --git a/www/content/tutorials/graphql/index.mdx b/www/content/tutorials/graphql/index.mdx index 6d126420..a1659dc6 100644 --- a/www/content/tutorials/graphql/index.mdx +++ b/www/content/tutorials/graphql/index.mdx @@ -5,7 +5,7 @@ weight: 10 group: Quick Start (GraphQL) --- -This tutorial will help you get started with Next.js for Drupal using the [`DrupalClient`](/docs/client) and **GraphQL**. +This tutorial will help you get started with Next.js for Drupal using the [`NextDrupal`](/docs/client) and **GraphQL**. diff --git a/www/content/tutorials/on-demand-revalidation/configure-entity-types.mdx b/www/content/tutorials/on-demand-revalidation/configure-entity-types.mdx index 3cbc8681..79d46391 100644 --- a/www/content/tutorials/on-demand-revalidation/configure-entity-types.mdx +++ b/www/content/tutorials/on-demand-revalidation/configure-entity-types.mdx @@ -5,6 +5,16 @@ weight: 350 group: On-demand Revalidation --- + + Next, we need to configure on-demand revalidation for the entity types. To enable on-demand revalidation for an entity type, we need to configure a **revalidator** plugin. diff --git a/www/content/tutorials/on-demand-revalidation/configure-revalidate-route.mdx b/www/content/tutorials/on-demand-revalidation/configure-revalidate-route.mdx index 63bf6f07..303611bb 100644 --- a/www/content/tutorials/on-demand-revalidation/configure-revalidate-route.mdx +++ b/www/content/tutorials/on-demand-revalidation/configure-revalidate-route.mdx @@ -5,7 +5,7 @@ weight: 360 group: On-demand Revalidation --- -Implement on-demand revalidation using an API routes at `/revalidate`. +Implement on-demand revalidation using an API route at `/revalidate`. @@ -13,36 +13,35 @@ If you're using the Basic Starter, revalidate route are already created for you. -## /pages/api/revalidate.ts +## /app/api/revalidate/route.ts -```ts title=pages/api/revalidate.ts -import { NextApiRequest, NextApiResponse } from "next" +```ts title=app/api/revalidate/route.ts +import { revalidatePath } from "next/cache" +import type { NextRequest } from "next/server" -export default async function handler( - request: NextApiRequest, - response: NextApiResponse -) { - let slug = request.query.slug as string - const secret = request.query.secret as string +async function handler(request: NextRequest) { + const searchParams = request.nextUrl.searchParams + const path = searchParams.get("path") + const secret = searchParams.get("secret") // Validate secret. if (secret !== process.env.DRUPAL_REVALIDATE_SECRET) { - return response.status(401).json({ message: "Invalid secret." }) + return new Response("Invalid secret.", { status: 401 }) } - // Validate slug. - if (!slug) { - return response.status(400).json({ message: "Invalid slug." }) + // Validate path. + if (!path) { + return new Response("Invalid path.", { status: 400 }) } try { - await response.revalidate(slug) + revalidatePath(path) - return response.json({}) + return new Response("Revalidated.") } catch (error) { - return response.status(404).json({ - message: error.message, - }) + return new Response((error as Error).message, { status: 500 }) } } + +export { handler as GET, handler as POST } ``` diff --git a/www/content/tutorials/quick-start/configure-path-aliases.mdx b/www/content/tutorials/quick-start/configure-path-aliases.mdx index e73b89d9..86f9b4df 100644 --- a/www/content/tutorials/quick-start/configure-path-aliases.mdx +++ b/www/content/tutorials/quick-start/configure-path-aliases.mdx @@ -5,7 +5,7 @@ weight: 50 group: Quick Start --- -The `next-drupal` plugin uses paths to resolve resources for `getStaticProps`. To make this work, we need to configure path aliases for our content types. +The `next-drupal` plugin uses paths to resolve resources for the Next.js Frontend. To make this work, we need to configure path aliases for our content types. Let's add a pattern for the **Article** content type. diff --git a/www/content/tutorials/quick-start/index.mdx b/www/content/tutorials/quick-start/index.mdx index e777be58..3c719d08 100644 --- a/www/content/tutorials/quick-start/index.mdx +++ b/www/content/tutorials/quick-start/index.mdx @@ -5,7 +5,7 @@ weight: 10 group: Quick Start --- -This tutorial will help you get started with Next.js for Drupal using the [`DrupalClient`](/docs/client) and **JSON:API**. +This tutorial will help you get started with Next.js for Drupal using the [`NextDrupal`](/docs/client) and **JSON:API**.