feat(basic-starter): update the basic starter

chapter-three · Aug 12, 2021 · a7efdcd · a7efdcd · vercel · Aug 12, 2021
1 parent 37deb8c
commit a7efdcd
Show file tree

Hide file tree

Showing 9 changed files with 235 additions and 25 deletions.
diff --git a/starters/basic-starter/components/layout.tsx b/starters/basic-starter/components/layout.tsx
@@ -5,8 +5,9 @@ import { useRouter } from "next/dist/client/router"
 export function Layout({ children }) {
   const { asPath } = useRouter()
   const { tree } = useMenu("main")
+
   return (
-    <div className="max-w-screen-md mx-auto">
+    <div className="max-w-screen-md mx-auto px-6">
       <header>
         <div className="container mx-auto flex items-center justify-between py-6">
           <Link href="/" passHref>

diff --git a/starters/basic-starter/next-env.d.ts b/starters/basic-starter/next-env.d.ts
@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/starters/basic-starter/package.json b/starters/basic-starter/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@tailwindcss/typography": "^0.4.1",
-    "next": "^11.0.0",
+    "next": "^11.1.0",
     "next-drupal": "^0.15.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -23,6 +23,6 @@
     "eslint-config-next": "^11.0.0",
     "postcss": "^8.3.5",
     "tailwindcss": "^2.1.4",
-    "typescript": "^4.2.4"
+    "typescript": "^4.3.5"
   }
 }
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
@@ -1,24 +1,48 @@
+import * as React from "react"
 import Head from "next/head"
 import {
   getPathsFromContext,
   getResourceFromContext,
   getResourceTypeFromContext,
 } from "next-drupal"
+import { GetStaticPropsContext } from "next"
 import { NodeArticle } from "@/nodes/node-article"
 import { NodeBasicPage } from "@/components/nodes/node-basic-page"
 
-export default function NodePage({ node }) {
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+interface NodePageProps {
+  preview: GetStaticPropsContext["preview"]
+  node: Record<string, any>
+}
+
+export default function NodePage({ node, preview }: NodePageProps) {
+  const [showPreviewAlert, setShowPreviewAlert] = React.useState<boolean>(false)
+
   if (!node) return null
 
+  React.useEffect(() => {
+    setShowPreviewAlert(preview && window.top === window.self)
+  }, [])
+
   return (
     <>
       <Head>
         <title>{node.title}</title>
         <meta
           name="description"
-          content="A Next.js site powered by a Drupal backend. Built with paragraphs, views, menus and translations."
+          content="A Next.js site powered by a Drupal backend."
         />
       </Head>
+      {showPreviewAlert && (
+        <div className="fixed top-4 right-4">
+          <a
+            href="/api/exit-preview"
+            className="bg-black text-white rounded-md px-4 py-2 text-sm"
+          >
+            Exit preview
+          </a>
+        </div>
+      )}
       {node.type === "node--page" && <NodeBasicPage node={node} />}
       {node.type === "node--article" && <NodeArticle node={node} />}
     </>
@@ -60,8 +84,9 @@ export async function getStaticProps(context) {
 
   return {
     props: {
+      preview: context.preview || false,
       node,
-      revalidate: 60,
     },
+    revalidate: 60,
   }
 }
diff --git a/starters/basic-starter/pages/_app.tsx b/starters/basic-starter/pages/_app.tsx
@@ -1,7 +1,13 @@
 import { AppProps } from "next/app"
 import "tailwindcss/tailwind.css"
+import Router from "next/router"
+import { syncDrupalPreviewRoutes } from "next-drupal"
 import { Layout } from "@/components/layout"
 
+Router.events.on("routeChangeStart", function (path) {
+  syncDrupalPreviewRoutes(path)
+})
+
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <Layout>

diff --git a/starters/basic-starter/pages/index.tsx b/starters/basic-starter/pages/index.tsx
@@ -1,22 +1,32 @@
+import Head from "next/head"
 import { getResourceCollectionFromContext } from "next-drupal"
 import { NodeArticleTeaser } from "@/components/nodes/node-article"
 
 export default function IndexPage({ articles }) {
   return (
-    <div>
-      <h1 className="text-6xl font-black mb-10">Latest Articles.</h1>
+    <>
+      <Head>
+        <title>Next.js for Drupal</title>
+        <meta
+          name="description"
+          content="A Next.js site powered by a Drupal backend."
+        />
+      </Head>
+      <div>
+        <h1 className="text-6xl font-black mb-10">Latest Articles.</h1>
 
-      {articles?.length ? (
-        articles.map((node) => (
-          <div key={node.id}>
-            <NodeArticleTeaser node={node} />
-            <hr className="my-20" />
-          </div>
-        ))
-      ) : (
-        <p className="py-4">No articles found</p>
-      )}
-    </div>
+        {articles?.length ? (
+          articles.map((node) => (
+            <div key={node.id}>
+              <NodeArticleTeaser node={node} />
+              <hr className="my-20" />
+            </div>
+          ))
+        ) : (
+          <p className="py-4">No articles found</p>
+        )}
+      </div>
+    </>
   )
 }
 
@@ -35,7 +45,7 @@ export async function getStaticProps(context) {
   return {
     props: {
       articles,
-      revalidate: 60,
     },
+    revalidate: 60,
   }
 }
diff --git a/starters/basic-starter/public/favicon.ico b/starters/basic-starter/public/favicon.ico
diff --git a/starters/basic-starter/public/robots.txt b/starters/basic-starter/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /