feat: init live preview sdk

2024-02-08 16:16:04 +01:00
parent cb502fbada
commit 9d05eefd56
15 changed files with 302 additions and 15 deletions
--- a/.env.local.example
+++ b/.env.local.example
@@ -2,3 +2,5 @@ CMS_ACCESS_TOKEN=""
 CMS_API_KEY=""
 CMS_ENVIRONMENT="development"
 CMS_URL="https://eu-graphql.contentstack.com/stacks/${CMS_API_KEY}?environment=${CMS_ENVIRONMENT}"
+CMS_PREVIEW_URL="graphql-preview.contentstack.com/stacks/${CMS_API_KEY}?environment=${CMS_ENVIRONMENT}";
+CMS_PREVIEW_TOKEN=""
--- a/app/[lang]/(live)/current-content-page/page.tsx
+++ b/app/[lang]/(live)/current-content-page/page.tsx
@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation"

-import { request } from "@/lib/request"
-import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql"
+import { request } from "@/lib/request";
+import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql";

 import Aside from "@/components/Current/Aside"
 import Blocks from "@/components/Current/Blocks"
@@ -19,6 +19,7 @@ export default async function CurrentContentPage({
  searchParams,
 }: PageArgs<LangParams, UriParams>) {
  try {
+    console.log({ searchParams });
    if (!searchParams.uri) {
      throw new Error("Bad URI")
    }
--- a/app/[lang]/(live)/current-content-page/template.tsx
+++ b/app/[lang]/(live)/current-content-page/template.tsx
@@ -0,0 +1,17 @@
+import Header from "@/components/Current/Header";
+
+import type { LangParams, PageArgs, UriParams } from "@/types/params";
+
+export default function CurrentContentpageTemplate({ children, params, searchParams }: React.PropsWithChildren<PageArgs<LangParams, UriParams>>) {
+  // if (!searchParams.uri) {
+  //   throw new Error("Bad URI");
+  // }
+
+  return (
+    <>
+      {/* <Header lang={params.lang} pathname={searchParams.uri} /> */}
+      {children}
+    </>
+  );
+}
+
--- a/app/[lang]/(live)/layout.tsx
+++ b/app/[lang]/(live)/layout.tsx
@@ -1,5 +1,5 @@
-import "../core.css";
-import "../scandic.css";
+import "../../core.css";
+import "../../scandic.css";

 import Footer from "@/components/Current/Footer";
 import LangPopup from "@/components/Current/LangPopup";
--- a/app/[lang]/(preview)/layout.tsx
+++ b/app/[lang]/(preview)/layout.tsx
@@ -0,0 +1,65 @@
+import "../../core.css";
+import "../../scandic.css";
+
+import Footer from "@/components/Current/Footer";
+import LangPopup from "@/components/Current/LangPopup";
+import Script from "next/script";
+import SkipToMainContent from "@/components/SkipToMainContent";
+
+import type { Metadata } from "next";
+import type { LangParams, LayoutArgs } from "@/types/params";
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
+
+export const metadata: Metadata = {
+  description: "New web",
+  title: "Scandic Hotels New Web",
+};
+
+ContentstackLivePreview.init();
+
+export default function RootLayout({
+  children,
+  params,
+}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  return (
+    <html lang={params.lang}>
+      <head>
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/head.js?85c84c9e24ae8da3e7af"
+        />
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/inline.js?00133e5a37de35c51a5d"
+        />
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/main.js?89d0030e1a04b3b46d0b"
+        />
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/ng/polyfills.js?1705409330990"
+        />
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/ng/runtime.js?1705409330990"
+        />
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/ng/main.js?1705409330990"
+        />
+        <Script
+          data-cookieconsent="ignore"
+          src="/Static/dist/js/main-ng.js?336b801d6b38eff10884"
+          strategy="lazyOnload"
+        />
+      </head>
+      <body>
+        <LangPopup lang={params.lang} />
+        <SkipToMainContent lang={params.lang} />
+        {children}
+        <Footer lang={params.lang} />
+      </body>
+    </html>
+  );
+}
--- a/app/[lang]/(preview)/preview/page.tsx
+++ b/app/[lang]/(preview)/preview/page.tsx
@@ -0,0 +1,62 @@
+import { notFound } from "next/navigation";
+import fs from "node:fs/promises";
+import path from "node:path";
+
+import { request } from "@/lib/request";
+import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql";
+
+import type { PageArgs, LangParams, UriParams } from "@/types/params";
+import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage";
+
+export default async function CurrentContentPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams, UriParams>) {
+  try {
+    console.log({ searchParams });
+    if (!searchParams.uri) {
+      throw new Error("Bad URI");
+    }
+
+    // const response = await request<GetCurrentBlockPageData>(GetCurrentBlockPage, { locale: params.lang, url: searchParams.uri })
+
+    // console.log(response.data.all_current_blocks_page.items[0].blocks)
+
+    const filePath = path.join(
+      process.cwd(),
+      "mockCms",
+      params.lang,
+      searchParams.uri,
+      "data.json"
+    );
+
+    const data = await fs.readFile(filePath, { encoding: "utf-8" });
+
+    if (!data) {
+      throw new Error("No data");
+    }
+
+    const json = JSON.parse(data);
+
+    return (
+      <>
+        {json.hero ? (
+          <div
+            dangerouslySetInnerHTML={{ __html: json.hero }}
+            className="hero-content-overlay hero-content-widget"
+          />
+        ) : null}
+        {json.content ? (
+          <main
+            className="main l-sections-wrapper"
+            role="main"
+            id="maincontent"
+            dangerouslySetInnerHTML={{ __html: json.content }}
+          />
+        ) : null}
+      </>
+    );
+  } catch (err) {
+    return notFound();
+  }
+}
--- a/app/[lang]/page.tsx
+++ b/app/[lang]/page.tsx
@@ -1,7 +0,0 @@
-export default async function Home() {
-  return (
-    <main>
-      <h1>Hello world!</h1>
-    </main>
-  );
-}
--- a/env/schema.mjs
+++ b/env/schema.mjs
@@ -10,9 +10,11 @@ export const serverSchema = z.object({
  CMS_API_KEY: z.string(),
  CMS_ENVIRONMENT: z.enum(["development", "production", "staging", "test"]),
  CMS_URL: z.string(),
+  CMS_PREVIEW_URL: z.string(),
+  CMS_PREVIEW_TOKEN: z.string(),
  NODE_ENV: z.enum(["development", "test", "production"]),
  PRINT_QUERY: z.boolean().default(false),
-})
+});

 /**
 * You can't destruct `process.env` as a regular object in the Next.js
@@ -24,9 +26,11 @@ export const serverEnv = {
  CMS_API_KEY: process.env.CMS_API_KEY,
  CMS_ENVIRONMENT: process.env.CMS_ENVIRONMENT,
  CMS_URL: process.env.CMS_URL,
+  CMS_PREVIEW_URL: process.env.CMS_PREVIEW_URL,
+  CMS_PREVIEW_TOKEN: process.env.CMS_PREVIEW_TOKEN,
  NODE_ENV: process.env.NODE_ENV,
  PRINT_QUERY: process.env.PRINT_QUERY,
-}
+};

 /**
 * Specify your client-side environment variables schema here.
--- a/lib/graphql/Fragments/Blocks/Hero.graphql
+++ b/lib/graphql/Fragments/Blocks/Hero.graphql
@@ -0,0 +1,30 @@
+#import "../PageLinks.graphql"
+
+fragment HeroBlock on CurrentBlocksPageBlocksHero {
+  hero {
+    imagesConnection {
+      totalCount
+      edges {
+        node {
+          title
+          url
+        }
+      }
+    }
+    ingress {
+      json
+      embedded_itemsConnection {
+        edges {
+          node {
+            ...CurrentBlocksPageLink
+            ...TempPageLink
+            ... on SysAsset {
+              title
+              url
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/lib/previewRequest.ts
+++ b/lib/previewRequest.ts
@@ -0,0 +1,34 @@
+import "server-only";
+import { request as graphqlRequest } from "graphql-request";
+
+import { env } from "@/env/server.mjs";
+
+import type { Data } from "@/types/request";
+import type { DocumentNode } from "graphql";
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
+
+export async function request<T>(
+  query: string | DocumentNode,
+  variables?: {}
+): Promise<Data<T>> {
+  try {
+    const hash = ContentstackLivePreview.hash;
+
+    const response = await graphqlRequest<T>({
+      document: query,
+      requestHeaders: {
+        access_token: env.CMS_ACCESS_TOKEN,
+        "Content-Type": "application/json",
+        preview_token: env.CMS_PREVIEW_TOKEN,
+        live_preview: hash,
+      },
+      url: env.CMS_PREVIEW_URL,
+      variables,
+    });
+
+    return { data: response };
+  } catch (error) {
+    console.error(error);
+    throw new Error("Something went wrong");
+  }
+}
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,3 +1,4 @@
+import ContentstackLivePreview from "@contentstack/live-preview-utils";
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";

@@ -32,8 +33,23 @@ export async function middleware(request: NextRequest) {
    ""
  );

-  const searchParams = new URLSearchParams(request.nextUrl.searchParams)
-  searchParams.set("uri", pathNameWithoutLocale)
+  const searchParams = new URLSearchParams(request.nextUrl.searchParams);
+  searchParams.set("uri", pathNameWithoutLocale);
+
+  if (request.nextUrl.pathname.includes("preview")) {
+    if (request.nextUrl.searchParams.get("hash")) {
+      ContentstackLivePreview.setConfigFromParams(request.nextUrl.searchParams);
+
+      return NextResponse.rewrite(
+        new URL(
+          `/${locale}/current-content-page?${searchParams.toString()}`,
+          request.url
+        )
+      );
+    } else {
+      return Response.json("Not found!!!", { status: 404 });
+    }
+  }

  switch (contentType) {
    case "currentContentPage":
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
      "version": "0.1.0",
      "dependencies": {
        "class-variance-authority": "^0.7.0",
+        "@contentstack/live-preview-utils": "^1.4.0",
        "graphql": "16.8.1",
        "graphql-request": "6.1.0",
        "graphql-tag": "2.12.6",
@@ -51,6 +52,17 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@contentstack/live-preview-utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@contentstack/live-preview-utils/-/live-preview-utils-1.4.0.tgz",
+      "integrity": "sha512-74N9ACoUwSrvmbtqoy8CkX7H/OmA3cjnOmaKMq6qoVI1r9kJjO+gqQevBPxs17nurbNL2XjXU56hbHZagWL4nw==",
+      "dependencies": {
+        "just-camel-case": "^4.0.2",
+        "morphdom": "^2.6.1",
+        "mustache": "^4.2.0",
+        "uuid": "^8.3.2"
+      }
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2498,6 +2510,11 @@
        "node": ">=4.0"
      }
    },
+    "node_modules/just-camel-case": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/just-camel-case/-/just-camel-case-4.0.2.tgz",
+      "integrity": "sha512-df6QI/EIq+6uHe/wtaa9Qq7/pp4wr4pJC/r1+7XhVL6m5j03G6h9u9/rIZr8rDASX7CxwDPQnZjffCo2e6PRLw=="
+    },
    "node_modules/keyv": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2625,12 +2642,25 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/morphdom": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.2.tgz",
+      "integrity": "sha512-Dqb/lHFyTi7SZpY0a5R4I/0Edo+iPMbaUexsHHsLAByyixCDiLHPHyVoKVmrpL0THcT7V9Cgev9y21TQYq6wQg=="
+    },
    "node_modules/ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
      "dev": true
    },
+    "node_modules/mustache": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
+      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
+      "bin": {
+        "mustache": "bin/mustache"
+      }
+    },
    "node_modules/nanoid": {
      "version": "3.3.7",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -3681,6 +3711,14 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
  },
  "dependencies": {
    "class-variance-authority": "^0.7.0",
+    "@contentstack/live-preview-utils": "^1.4.0",
    "graphql": "16.8.1",
    "graphql-request": "6.1.0",
    "graphql-tag": "2.12.6",
--- a/types/requests/blocks/hero.ts
+++ b/types/requests/blocks/hero.ts
@@ -0,0 +1,24 @@
+import type { SysAsset } from "../utils/asset"
+import type { Edges } from "../utils/edges"
+import type { ExternalLink } from "../utils/externalLink"
+import type { PageLink } from "../utils/pagelink";
+import type { Typename } from "../utils/typename"
+
+export type Hero = {
+  hero: {
+    imagesConnection: Edges<{
+      title: string
+      url: string
+    }>
+    ingress: {
+      json: JSON
+      embedded_itemsConnection: Edges<
+        | ExternalLink
+        | PageLink
+        | SysAsset
+      >
+    }
+  }
+}
+
+export type HeroBlockData = Typename<Hero, "CurrentBlocksPageBlocksHero">
--- a/types/requests/utils/pagelink.ts
+++ b/types/requests/utils/pagelink.ts