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
chapter-three · Dec 6, 2022 · 302cc7c · 302cc7c
1 parent 63e9762
commit 302cc7c
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 49 deletions.
diff --git a/.env.example b/.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
diff --git a/CHANGELOG.md b/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))
diff --git a/components/layout.tsx b/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>

diff --git a/components/node--article--teaser.tsx b/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>
   )

diff --git a/components/node--article.tsx b/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>

diff --git a/package.json b/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"
   }
 }
diff --git a/pages/api/revalidate.ts b/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." })
   }