Skip to content

Commit 96fdb82

Browse files
TRomeshTRomesh
committed
Add basic content types and basic components
1 parent 16c54c0 commit 96fdb82

File tree

21 files changed

+717
-201
lines changed

21 files changed

+717
-201
lines changed

‎templates/alloy-template/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,5 @@ yarn-error.log*
3939
# typescript
4040
*.tsbuildinfo
4141
next-env.d.ts
42+
43+
certificates

‎templates/alloy-template/optimizely.config.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { buildConfig } from '@episerver/cms-sdk';
1+
import { buildConfig } from '@optimizely/cms-sdk';
22

33
export default buildConfig({
4-
components: ['./src/components/*.tsx'],
4+
components: ['./src/components/*.tsx', './src/components/**/*.tsx'],
55
});

‎templates/alloy-template/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
6-
"dev": "next dev",
6+
"dev": "next dev --experimental-https",
77
"build": "next build",
88
"start": "next start"
99
},

‎templates/alloy-template/src/app/[...slug]/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { GraphClient } from '@episerver/cms-sdk';
2-
import { OptimizelyComponent } from '@episerver/cms-sdk/react/server';
1+
import { GraphClient } from '@optimizely/cms-sdk';
2+
import { OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
33
import { notFound } from 'next/navigation';
44
import React from 'react';
55

‎templates/alloy-template/src/app/layout.tsx‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,19 @@ import { Geist, Geist_Mono } from 'next/font/google';
33
import {
44
BlankExperienceContentType,
55
initContentTypeRegistry,
6-
initDisplayTemplateRegistry,
7-
} from '@episerver/cms-sdk';
8-
import { initReactComponentRegistry } from '@episerver/cms-sdk/react/server';
6+
} from '@optimizely/cms-sdk';
7+
import { initReactComponentRegistry } from '@optimizely/cms-sdk/react/server';
98

109
import './globals.css';
11-
import Article from '@/components/Article';
10+
import Header from '@/components/base/Header';
11+
import Footer from '@/components/base/Footer';
12+
import Jumbotron, { JumbotronContentType } from '@/components/Jumbotron';
13+
import Teaser, { TeaserContentType } from '@/components/Teaser';
14+
import Editorial, { EditorialContentType } from '@/components/Editorial';
15+
import Contact, { ContactContentType } from '@/components/Contact';
16+
import StartPage, { StartPageContentType } from '@/components/StartPage';
17+
import Product, { ProductContentType } from '@/components/Product';
18+
import StandardPage from '@/components/StandardPage';
1219

1320
const geistSans = Geist({
1421
variable: '--font-geist-sans',
@@ -25,10 +32,26 @@ export const metadata: Metadata = {
2532
description: 'Generated by create next app',
2633
};
2734

28-
initDisplayTemplateRegistry([]);
29-
initContentTypeRegistry([BlankExperienceContentType]);
35+
initContentTypeRegistry([
36+
BlankExperienceContentType,
37+
StartPageContentType,
38+
JumbotronContentType,
39+
TeaserContentType,
40+
EditorialContentType,
41+
ContactContentType,
42+
ProductContentType,
43+
]);
44+
3045
initReactComponentRegistry({
31-
resolver: { Article },
46+
resolver: {
47+
StartPage,
48+
Jumbotron,
49+
Teaser,
50+
Editorial,
51+
Contact,
52+
Product,
53+
StandardPage,
54+
},
3255
});
3356

3457
export default function RootLayout({
@@ -41,7 +64,9 @@ export default function RootLayout({
4164
<body
4265
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
4366
>
67+
<Header />
4468
{children}
69+
<Footer />
4570
</body>
4671
</html>
4772
);

‎templates/alloy-template/src/app/page.tsx‎

Lines changed: 1 addition & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,3 @@
1-
import Image from "next/image";
2-
31
export default function Home() {
4-
return (
5-
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
6-
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
7-
<Image
8-
className="dark:invert"
9-
src="/next.svg"
10-
alt="Next.js logo"
11-
width={180}
12-
height={38}
13-
priority
14-
/>
15-
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
16-
<li className="mb-2 tracking-[-.01em]">
17-
Get started by editing{" "}
18-
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
19-
src/app/page.tsx
20-
</code>
21-
.
22-
</li>
23-
<li className="tracking-[-.01em]">
24-
Save and see your changes instantly.
25-
</li>
26-
</ol>
27-
28-
<div className="flex gap-4 items-center flex-col sm:flex-row">
29-
<a
30-
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
31-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
32-
target="_blank"
33-
rel="noopener noreferrer"
34-
>
35-
<Image
36-
className="dark:invert"
37-
src="/vercel.svg"
38-
alt="Vercel logomark"
39-
width={20}
40-
height={20}
41-
/>
42-
Deploy now
43-
</a>
44-
<a
45-
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
46-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
47-
target="_blank"
48-
rel="noopener noreferrer"
49-
>
50-
Read our docs
51-
</a>
52-
</div>
53-
</main>
54-
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
55-
<a
56-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
57-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
>
61-
<Image
62-
aria-hidden
63-
src="/file.svg"
64-
alt="File icon"
65-
width={16}
66-
height={16}
67-
/>
68-
Learn
69-
</a>
70-
<a
71-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
72-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
73-
target="_blank"
74-
rel="noopener noreferrer"
75-
>
76-
<Image
77-
aria-hidden
78-
src="/window.svg"
79-
alt="Window icon"
80-
width={16}
81-
height={16}
82-
/>
83-
Examples
84-
</a>
85-
<a
86-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
87-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
88-
target="_blank"
89-
rel="noopener noreferrer"
90-
>
91-
<Image
92-
aria-hidden
93-
src="/globe.svg"
94-
alt="Globe icon"
95-
width={16}
96-
height={16}
97-
/>
98-
Go to nextjs.org →
99-
</a>
100-
</footer>
101-
</div>
102-
);
2+
return <></>;
1033
}

‎templates/alloy-template/src/app/preview/page.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { GraphClient, type PreviewParams } from '@episerver/cms-sdk';
2-
import { OptimizelyComponent } from '@episerver/cms-sdk/react/server';
3-
import { PreviewComponent } from '@episerver/cms-sdk/react/client';
1+
import { GraphClient, type PreviewParams } from '@optimizely/cms-sdk';
2+
import { OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
3+
import { PreviewComponent } from '@optimizely/cms-sdk/react/client';
44
import Script from 'next/script';
55

66
type Props = {
@@ -12,10 +12,16 @@ export default async function Page({ searchParams }: Props) {
1212
graphUrl: process.env.OPTIMIZELY_GRAPH_URL,
1313
});
1414

15-
const response = await client.getPreviewContent(
16-
// TODO: check types in runtime properly
17-
(await searchParams) as PreviewParams
18-
);
15+
const response = await client
16+
.getPreviewContent(
17+
// TODO: check types in runtime properly
18+
(await searchParams) as PreviewParams
19+
)
20+
.catch((err) => {
21+
console.log(err.errors);
22+
console.log(err.request.query);
23+
throw err;
24+
});
1925

2026
return (
2127
<>

‎templates/alloy-template/src/components/Contact.tsx‎

Lines changed: 13 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,31 @@
11
import React from 'react';
2-
import { contentType, Infer } from '@episerver/cms-sdk';
2+
import { contentType, Infer } from '@optimizely/cms-sdk';
33

44
export const ContactContentType = contentType({
55
key: 'Contact',
66
displayName: 'Contact',
77
baseType: '_component',
88
properties: {
9-
teaser_image: {
9+
image: {
1010
type: 'contentReference',
1111
allowedTypes: ['_image'],
12-
displayName: 'Teaser Image',
12+
displayName: 'Image',
1313
},
14-
teaser_text: {
14+
heading: {
1515
type: 'string',
16-
displayName: 'Teaser Text',
16+
displayName: 'Heading',
1717
},
18-
unique_selling_points: {
19-
type: 'string',
20-
displayName: 'Unique Selling Points',
21-
},
22-
main_body: {
23-
type: 'richText',
24-
displayName: 'Main Body',
25-
},
26-
large_content_area: {
27-
type: 'array',
28-
displayName: 'Large Content Area',
29-
items: {
30-
type: 'contentReference',
31-
},
32-
},
33-
small_content_area: {
34-
type: 'array',
35-
displayName: 'Small Content Area',
36-
items: {
37-
type: 'contentReference',
38-
},
18+
contact: {
19+
type: 'content',
20+
displayName: 'Contact',
3921
},
40-
title: {
41-
type: 'string',
42-
},
43-
keywords: {
44-
type: 'string',
22+
link: {
23+
type: 'url',
24+
displayName: 'Link',
4525
},
46-
page_description: {
26+
link_text: {
4727
type: 'string',
28+
displayName: 'Link Text',
4829
},
4930
},
5031
});

‎templates/alloy-template/src/components/Editorial.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { contentType, Infer } from '@optimizely/cms-sdk';
2+
import { RichText } from '@optimizely/cms-sdk/react/richText';
3+
4+
export const EditorialContentType = contentType({
5+
key: 'Editorial',
6+
displayName: 'Editorial',
7+
baseType: '_component',
8+
properties: {
9+
main_body: {
10+
type: 'richText',
11+
displayName: 'Main Body',
12+
},
13+
},
14+
});
15+
16+
type EditorialProps = {
17+
opti: Infer<typeof EditorialContentType>;
18+
};
19+
20+
function Editorial({ opti }: EditorialProps) {
21+
return (
22+
<>
23+
<RichText content={opti.main_body?.json} />
24+
</>
25+
);
26+
}
27+
28+
export default Editorial;

0 commit comments

Comments
 (0)