Skip to content

Commit

Permalink
docs(next-drupal): updated learn section
Browse files Browse the repository at this point in the history
  • Loading branch information
Marco Monti committed Jul 11, 2024
1 parent d67f2cf commit 6c0e389
Show file tree
Hide file tree
Showing 11 changed files with 93 additions and 91 deletions.
10 changes: 5 additions & 5 deletions www/content/tutorials/draft-mode/configure-content-types.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<Callout>

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.

</Callout>

Expand Down
39 changes: 39 additions & 0 deletions www/content/tutorials/draft-mode/configure-draft-routes.mdx
Original file line number Diff line number Diff line change
@@ -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.

<Callout>

If you're using the Basic Starter, draft routes are already created for you.

</Callout>

## /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<Response | never> {
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()
}
```
43 changes: 0 additions & 43 deletions www/content/tutorials/draft-mode/configure-preview-routes.mdx

This file was deleted.

27 changes: 12 additions & 15 deletions www/content/tutorials/draft-mode/create-oauth-client.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
},
})
```
8 changes: 4 additions & 4 deletions www/content/tutorials/draft-mode/create-site.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
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**.
3. Fill in the following values:

- **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`

<Callout>

Expand Down
4 changes: 2 additions & 2 deletions www/content/tutorials/draft-mode/done.mdx
Original file line number Diff line number Diff line change
@@ -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.

Expand Down
2 changes: 1 addition & 1 deletion www/content/tutorials/graphql/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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**.

<Callout>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,16 @@ weight: 350
group: On-demand Revalidation
---

<!--
************************************************************
* TODO: Remove this block before publishing.

* Comment: The revalidator plugin used to work out of the box with path-based revalidation. However, Next.js implemented Tag-based revalidation, which is
pretty useful for revalidating Menus on the FE whenever a Drupal Menu is updating. I'm just leaving this comment to note this, since I do not know
if the new version of drupal module supports this out of the box.
************************************************************
-->

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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,44 +5,43 @@ 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`.

<Callout>

If you're using the Basic Starter, revalidate route are already created for you. You can skip this step.

</Callout>

## /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 }
```
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion www/content/tutorials/quick-start/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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**.

<Callout>

Expand Down

0 comments on commit 6c0e389

Please sign in to comment.