scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: init live preview sdk

Browse Source
This commit is contained in:
Christel Westerberg
2024-02-08 16:16:04 +01:00
parent cb502fbada
commit 9d05eefd56
15 changed files with 302 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example → .env.local.example
View File

@@ -2,3 +2,5 @@ CMS_ACCESS_TOKEN=""
CMS_API_KEY="" CMS_API_KEY=""
CMS_ENVIRONMENT="development" CMS_ENVIRONMENT="development"
CMS_URL="https://eu-graphql.contentstack.com/stacks/${CMS_API_KEY}?environment=${CMS_ENVIRONMENT}" 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=""

5
app/[lang]/current-content-page/page.tsx → app/[lang]/(live)/current-content-page/page.tsx
View File

@@ -1,7 +1,7 @@
import { notFound } from "next/navigation" import { notFound } from "next/navigation"
import { request } from "@/lib/request" import { request } from "@/lib/request";
import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql" import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql";
import Aside from "@/components/Current/Aside" import Aside from "@/components/Current/Aside"
import Blocks from "@/components/Current/Blocks" import Blocks from "@/components/Current/Blocks"
@@ -19,6 +19,7 @@ export default async function CurrentContentPage({
searchParams, searchParams,
}: PageArgs<LangParams, UriParams>) { }: PageArgs<LangParams, UriParams>) {
try { try {
console.log({ searchParams });
if (!searchParams.uri) { if (!searchParams.uri) {
throw new Error("Bad URI") throw new Error("Bad URI")
} }

17
app/[lang]/(live)/current-content-page/template.tsx Normal file
View File

@@ -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}
</>
);
}

4
app/[lang]/layout.tsx → app/[lang]/(live)/layout.tsx
View File

@@ -1,5 +1,5 @@
import "../core.css"; import "../../core.css";
import "../scandic.css"; import "../../scandic.css";
import Footer from "@/components/Current/Footer"; import Footer from "@/components/Current/Footer";
import LangPopup from "@/components/Current/LangPopup"; import LangPopup from "@/components/Current/LangPopup";

65
app/[lang]/(preview)/layout.tsx Normal file
View File

@@ -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>
);
}

62
app/[lang]/(preview)/preview/page.tsx Normal file
View File

@@ -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();
}
}

7
app/[lang]/page.tsx
View File

@@ -1,7 +0,0 @@
export default async function Home() {
return (
<main>
<h1>Hello world!</h1>
</main>
);
}

8
env/schema.mjs vendored
View File

@@ -10,9 +10,11 @@ export const serverSchema = z.object({
CMS_API_KEY: z.string(), CMS_API_KEY: z.string(),
CMS_ENVIRONMENT: z.enum(["development", "production", "staging", "test"]), CMS_ENVIRONMENT: z.enum(["development", "production", "staging", "test"]),
CMS_URL: z.string(), CMS_URL: z.string(),
CMS_PREVIEW_URL: z.string(),
CMS_PREVIEW_TOKEN: z.string(),
NODE_ENV: z.enum(["development", "test", "production"]), NODE_ENV: z.enum(["development", "test", "production"]),
PRINT_QUERY: z.boolean().default(false), PRINT_QUERY: z.boolean().default(false),
}) });
/** /**
* You can't destruct `process.env` as a regular object in the Next.js * 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_API_KEY: process.env.CMS_API_KEY,
CMS_ENVIRONMENT: process.env.CMS_ENVIRONMENT, CMS_ENVIRONMENT: process.env.CMS_ENVIRONMENT,
CMS_URL: process.env.CMS_URL, 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, NODE_ENV: process.env.NODE_ENV,
PRINT_QUERY: process.env.PRINT_QUERY, PRINT_QUERY: process.env.PRINT_QUERY,
} };
/** /**
* Specify your client-side environment variables schema here. * Specify your client-side environment variables schema here.

30
lib/graphql/Fragments/Blocks/Hero.graphql Normal file
View File

@@ -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
}
}
}
}
}
}
}

34
lib/previewRequest.ts Normal file
View File

@@ -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");
}
}

20
middleware.ts
View File

@@ -1,3 +1,4 @@
import ContentstackLivePreview from "@contentstack/live-preview-utils";
import { NextResponse } from "next/server"; import { NextResponse } from "next/server";
import type { NextRequest } 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) const searchParams = new URLSearchParams(request.nextUrl.searchParams);
searchParams.set("uri", pathNameWithoutLocale) 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) { switch (contentType) {
case "currentContentPage": case "currentContentPage":

38
package-lock.json generated
View File

@@ -9,6 +9,7 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"@contentstack/live-preview-utils": "^1.4.0",
"graphql": "16.8.1", "graphql": "16.8.1",
"graphql-request": "6.1.0", "graphql-request": "6.1.0",
"graphql-tag": "2.12.6", "graphql-tag": "2.12.6",
@@ -51,6 +52,17 @@
"node": ">=6.9.0" "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": { "node_modules/@eslint-community/eslint-utils": {
"version": "4.4.0", "version": "4.4.0",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2498,6 +2510,11 @@
"node": ">=4.0" "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": { "node_modules/keyv": {
"version": "4.5.4", "version": "4.5.4",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2625,12 +2642,25 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/ms": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true "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": { "node_modules/nanoid": {
"version": "3.3.7", "version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -3681,6 +3711,14 @@
"punycode": "^2.1.0" "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": { "node_modules/watchpack": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

1
package.json
View File

@@ -10,6 +10,7 @@
}, },
"dependencies": { "dependencies": {
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"@contentstack/live-preview-utils": "^1.4.0",
"graphql": "16.8.1", "graphql": "16.8.1",
"graphql-request": "6.1.0", "graphql-request": "6.1.0",
"graphql-tag": "2.12.6", "graphql-tag": "2.12.6",

24
types/requests/blocks/hero.ts Normal file
View File

@@ -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">

0
types/requests/utils/pageLink.ts → types/requests/utils/pagelink.ts
View File