1.6.0 (#390)

* feat(next): implement entity revalidated event

* chore(next): phpcs warnings

hehe ci is working

* docs(www): add documentation for on-demand revalidation

* feat(basic-starter): add DRUPAL_REVALIDATE_SECRET variable

* feat(graphql-starter): add DRUPAL_REVALIDATE_SECRET variable

* docs(www): update docs for environment variables

* fix(www): add redirect for /docs/on-demand-revalidation

* docs(www): add next-drupal 1.6.0 blog post

* docs(www): update blog post

* feat(www): add new learn section

* feat: implement rehype-pretty-code for blog pages

.env.example

@@ -6,5 +6,5 @@ NEXT_IMAGE_DOMAIN=dev.next-drupal.org
 DRUPAL_CLIENT_ID=
 DRUPAL_CLIENT_SECRET=
 
-# Required for Preview Mode
-DRUPAL_PREVIEW_SECRET=secret
+# Required for On-demand Revalidation
+DRUPAL_REVALIDATE_SECRET=secret

CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.0.2 (2022-12-06)
+
+
+### Features
+
+* add graphql-starter ([dd19609](https://github.com/chapter-three/next-drupal/commit/dd1960931328012e39026ae3638b5e9b336c74c3))

components/layout.tsx

@@ -9,15 +9,16 @@ export function Layout({ children }) {
  <div className="max-w-screen-md px-6 mx-auto">
  <header>
  <div className="container flex items-center justify-between py-6 mx-auto">
- <Link href="/" passHref>
- <a className="text-2xl font-semibold no-underline">
- Next.js for Drupal
- </a>
+ <Link href="/" className="text-2xl font-semibold no-underline">
+ Next.js for Drupal
  </Link>
- <Link href="https://next-drupal.org/docs" passHref>
- <a target="_blank" rel="external" className="hover:text-blue-600">
- Read the docs
- </a>
+ <Link
+ href="https://next-drupal.org/docs"
+ target="_blank"
+ rel="external"
+ className="hover:text-blue-600"
+ >
+ Read the docs
  </Link>
  </div>
  </header>

components/node--article--teaser.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image"
 import Link from "next/link"
 
-import { absoluteUrl, formatDate } from "lib/utils"
+import { formatDate } from "lib/utils"
 import { Article } from "types"
 
 interface NodeArticleTeaserProps {
@@ -11,10 +11,8 @@ interface NodeArticleTeaserProps {
 export function NodeArticleTeaser({ node, ...props }: NodeArticleTeaserProps) {
  return (
  <article {...props}>
- <Link href={node.path} passHref>
- <a className="no-underline hover:text-blue-600">
- <h2 className="mb-4 text-4xl font-bold">{node.title}</h2>
- </a>
+ <Link href={node.path} className="no-underline hover:text-blue-600">
+ <h2 className="mb-4 text-4xl font-bold">{node.title}</h2>
  </Link>
  <div className="mb-4 text-gray-600">
  {node.author?.displayName ? (
@@ -31,27 +29,26 @@ export function NodeArticleTeaser({ node, ...props }: NodeArticleTeaserProps) {
  src={node.image.url}
  width={768}
  height={480}
- layout="responsive"
- objectFit="cover"
  alt={node.title}
  />
  </figure>
  )}
- <Link href={node.path} passHref>
- <a className="inline-flex items-center px-6 py-2 border border-gray-600 rounded-full hover:bg-gray-100">
- Read article
- <svg
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- className="w-4 h-4 ml-2"
- >
- <path d="M5 12h14M12 5l7 7-7 7" />
- </svg>
- </a>
+ <Link
+ href={node.path}
+ className="inline-flex items-center px-6 py-2 border border-gray-600 rounded-full hover:bg-gray-100"
+ >
+ Read article
+ <svg
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ className="w-4 h-4 ml-2"
+ >
+ <path d="M5 12h14M12 5l7 7-7 7" />
+ </svg>
  </Link>
  </article>
  )

components/node--article.tsx

@@ -26,8 +26,6 @@ export function NodeArticle({ node, ...props }: NodeArticleProps) {
  src={node.image.url}
  width={768}
  height={480}
- layout="responsive"
- objectFit="cover"
  alt={node.title}
  />
  </figure>

package.json

@@ -1,6 +1,6 @@
 {
  "name": "graphql-starter",
- "version": "0.0.1",
+ "version": "0.0.2",
  "private": true,
  "license": "MIT",
  "scripts": {
@@ -11,21 +11,22 @@
  "lint": "next lint"
  },
  "dependencies": {
- "@tailwindcss/typography": "^0.5.2",
- "next": "^12.2.3",
+ "@tailwindcss/typography": "^0.5.8",
+ "next": "^13",
  "next-drupal": "^1.5.0",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "sharp": "^0.30.7"
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "sharp": "^0.31.2"
  },
  "devDependencies": {
- "@types/node": "^17.0.23",
- "@types/react": "^17.0.43",
- "autoprefixer": "^10.4.4",
- "eslint": "^8.12.0",
- "eslint-config-next": "^12.1.4",
- "postcss": "^8.4.12",
- "tailwindcss": "^3.0.23",
- "typescript": "^4.5.5"
+ "@types/node": "^18.11.10",
+ "@types/react": "^18.0.26",
+ "@types/react-dom": "^18.0.9",
+ "autoprefixer": "^10.4.13",
+ "eslint": "^8.28.0",
+ "eslint-config-next": "^13.0.6",
+ "postcss": "^8.4.19",
+ "tailwindcss": "^3.2.4",
+ "typescript": "^4.9.3"
  }
 }

pages/api/revalidate.ts

@@ -8,7 +8,7 @@ export default async function handler(
  const secret = request.query.secret as string
 
  // Validate secret.
- if (secret !== process.env.DRUPAL_PREVIEW_SECRET) {
+ if (secret !== process.env.DRUPAL_REVALIDATE_SECRET) {
  return response.status(401).json({ message: "Invalid secret." })
  }