@contentful/create-studio-experiences 1.37.1-dev-20250425T1024-b8bfdfb.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +62 -0
- package/dist/constants.d.ts +7 -0
- package/dist/constants.js +8 -0
- package/dist/constants.js.map +1 -0
- package/dist/content.d.ts +724 -0
- package/dist/content.js +983 -0
- package/dist/content.js.map +1 -0
- package/dist/copyTemplates.d.ts +1 -0
- package/dist/copyTemplates.js +20 -0
- package/dist/copyTemplates.js.map +1 -0
- package/dist/ctflClient.d.ts +85 -0
- package/dist/ctflClient.js +253 -0
- package/dist/ctflClient.js.map +1 -0
- package/dist/fsClient.d.ts +13 -0
- package/dist/fsClient.js +84 -0
- package/dist/fsClient.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +296 -0
- package/dist/index.js.map +1 -0
- package/dist/models.d.ts +27 -0
- package/dist/models.js +32 -0
- package/dist/models.js.map +1 -0
- package/dist/utils.d.ts +7 -0
- package/dist/utils.js +24 -0
- package/dist/utils.js.map +1 -0
- package/package.json +64 -0
- package/templates/nextjs-marketing-demo/.env.template +5 -0
- package/templates/nextjs-marketing-demo/.eslintrc.json +3 -0
- package/templates/nextjs-marketing-demo/README.md +22 -0
- package/templates/nextjs-marketing-demo/next.config.mjs +21 -0
- package/templates/nextjs-marketing-demo/src/app/[locale]/[slug]/page.tsx +50 -0
- package/templates/nextjs-marketing-demo/src/app/favicon.ico +0 -0
- package/templates/nextjs-marketing-demo/src/app/fonts/GeistMonoVF.woff +0 -0
- package/templates/nextjs-marketing-demo/src/app/fonts/GeistVF.woff +0 -0
- package/templates/nextjs-marketing-demo/src/app/globals.css +37 -0
- package/templates/nextjs-marketing-demo/src/app/layout.tsx +34 -0
- package/templates/nextjs-marketing-demo/src/app/page.module.css +19 -0
- package/templates/nextjs-marketing-demo/src/assets/Logo.svg +8 -0
- package/templates/nextjs-marketing-demo/src/components/ButtonComponentRegistration.tsx +125 -0
- package/templates/nextjs-marketing-demo/src/components/CardComponentRegistration.tsx +54 -0
- package/templates/nextjs-marketing-demo/src/components/Container.tsx +15 -0
- package/templates/nextjs-marketing-demo/src/components/Experience.tsx +16 -0
- package/templates/nextjs-marketing-demo/src/components/Footer/Footer.tsx +42 -0
- package/templates/nextjs-marketing-demo/src/components/Footer/FooterDebugging.tsx +23 -0
- package/templates/nextjs-marketing-demo/src/components/Footer/FooterNav.tsx +34 -0
- package/templates/nextjs-marketing-demo/src/components/Footer/styles.module.css +51 -0
- package/templates/nextjs-marketing-demo/src/components/Header/Header.tsx +15 -0
- package/templates/nextjs-marketing-demo/src/components/Header/HeaderNav.tsx +59 -0
- package/templates/nextjs-marketing-demo/src/components/Header/styles.module.css +30 -0
- package/templates/nextjs-marketing-demo/src/components/Icon.tsx +21 -0
- package/templates/nextjs-marketing-demo/src/components/RatingStarsComponentRegistration.tsx +49 -0
- package/templates/nextjs-marketing-demo/src/getExperience.ts +40 -0
- package/templates/nextjs-marketing-demo/src/middleware.ts +17 -0
- package/templates/nextjs-marketing-demo/src/studio-config.ts +139 -0
- package/templates/nextjs-marketing-demo/tsconfig.json +26 -0
- package/templates/react-vite-ts/.env.template +5 -0
- package/templates/react-vite-ts/README.md +50 -0
- package/templates/react-vite-ts/eslint.config.js +25 -0
- package/templates/react-vite-ts/index.html +13 -0
- package/templates/react-vite-ts/public/vite.svg +1 -0
- package/templates/react-vite-ts/src/App.css +4 -0
- package/templates/react-vite-ts/src/App.tsx +37 -0
- package/templates/react-vite-ts/src/assets/react.svg +1 -0
- package/templates/react-vite-ts/src/index.css +0 -0
- package/templates/react-vite-ts/src/main.tsx +10 -0
- package/templates/react-vite-ts/src/studio-config.ts +67 -0
- package/templates/react-vite-ts/src/vite-env.d.ts +1 -0
- package/templates/react-vite-ts/tsconfig.app.json +24 -0
- package/templates/react-vite-ts/tsconfig.json +4 -0
- package/templates/react-vite-ts/tsconfig.node.json +22 -0
- package/templates/react-vite-ts/vite.config.ts +7 -0
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { Metadata } from 'next';
|
|
2
|
+
import { AntdRegistry } from '@ant-design/nextjs-registry';
|
|
3
|
+
import localFont from 'next/font/local';
|
|
4
|
+
import './globals.css';
|
|
5
|
+
|
|
6
|
+
const geistSans = localFont({
|
|
7
|
+
src: './fonts/GeistVF.woff',
|
|
8
|
+
variable: '--font-geist-sans',
|
|
9
|
+
weight: '100 900',
|
|
10
|
+
});
|
|
11
|
+
const geistMono = localFont({
|
|
12
|
+
src: './fonts/GeistMonoVF.woff',
|
|
13
|
+
variable: '--font-geist-mono',
|
|
14
|
+
weight: '100 900',
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
export const metadata: Metadata = {
|
|
18
|
+
title: 'The Studio',
|
|
19
|
+
description: 'Studio Experiences template for a marketing website.',
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export default function RootLayout({
|
|
23
|
+
children,
|
|
24
|
+
}: Readonly<{
|
|
25
|
+
children: React.ReactNode;
|
|
26
|
+
}>) {
|
|
27
|
+
return (
|
|
28
|
+
<html lang="en">
|
|
29
|
+
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
|
30
|
+
<AntdRegistry>{children}</AntdRegistry>
|
|
31
|
+
</body>
|
|
32
|
+
</html>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
div.layout {
|
|
2
|
+
background: var(--gray-1);
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
min-height: 100vh;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
header.header {
|
|
9
|
+
background: var(--gray-1);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
main.content {
|
|
13
|
+
background: var(--gray-1);
|
|
14
|
+
flex: 1;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
footer.footer {
|
|
18
|
+
background: var(--gray-9);
|
|
19
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg width="80" height="40" viewBox="0 0 80 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0495 1.78216C14.612 1.78216 14.2574 2.13678 14.2574 2.57424V4.95047H12.6732V2.57424C12.6732 1.26188 13.7371 0.197998 15.0495 0.197998H25.3465C26.6589 0.197998 27.7228 1.26188 27.7228 2.57424V5.74255H26.1386V2.57424C26.1386 2.13678 25.784 1.78216 25.3465 1.78216H15.0495Z" fill="#262626"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.1921 0.318501C43.5631 0.550351 43.6758 1.03902 43.444 1.40998L19.6816 39.4298C19.4498 39.8007 18.9611 39.9135 18.5901 39.6817C18.2192 39.4498 18.1064 38.9611 18.3382 38.5902L42.1006 0.570382C42.3325 0.199423 42.8211 0.0866517 43.1921 0.318501Z" fill="#262626"/>
|
|
4
|
+
<rect x="3.96042" y="8.91089" width="3.16832" height="3.16832" rx="1.33333" fill="#262626"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2916 28.7129L18.3059 30.2971H2.37624C1.06388 30.2971 0 29.2332 0 27.9209V7.3268C0 6.01444 1.06388 4.95056 2.37624 4.95056H34.077L33.0914 6.53472H2.37624C1.93878 6.53472 1.58416 6.88935 1.58416 7.3268V27.9209C1.58416 28.3583 1.93878 28.7129 2.37624 28.7129H19.2916ZM29.3863 12.4893C27.6955 9.86027 24.7442 8.11888 21.3861 8.11888C16.1367 8.11888 11.8812 12.3744 11.8812 17.6238C11.8812 22.5109 15.5695 26.5366 20.3144 27.069L21.4603 25.2274C21.4356 25.2277 21.4109 25.2278 21.3861 25.2278C17.1866 25.2278 13.7822 21.8234 13.7822 17.6238C13.7822 13.4243 17.1866 10.0199 21.3861 10.0199C24.4054 10.0199 27.0137 11.7796 28.2413 14.3294L29.3863 12.4893ZM26.9563 16.3946C26.3942 13.8358 24.1138 11.9209 21.3861 11.9209C18.2365 11.9209 15.6832 14.4742 15.6832 17.6238C15.6832 20.7735 18.2365 23.3268 21.3861 23.3268C21.8541 23.3268 22.3089 23.2704 22.7442 23.1641L26.9563 16.3946Z" fill="#262626"/>
|
|
6
|
+
<path d="M49.1709 13.7426H46.8861V8.87535H45.2157V6.94575H50.8413V8.87535H49.1709V13.7426ZM55.6856 11.1602H53.8232V13.7426H51.5384V6.94575H53.8136V9.24975H55.676V6.94575H57.9704V13.7426H55.6856V11.1602ZM59.2353 6.94575H63.9105V8.84655H61.3857V9.43215H63.7569V11.2082H61.3857V11.8418H64.0737V13.7426H59.2353V6.94575Z" fill="#262626"/>
|
|
7
|
+
<path d="M36.9202 26.6079C36.645 26.6079 36.373 26.5823 36.1042 26.5311C35.8418 26.4863 35.5858 26.4191 35.3362 26.3295C35.093 26.2335 34.8626 26.1247 34.645 26.0031C34.4274 25.8751 34.2322 25.7343 34.0594 25.5807L35.4514 24.0639C35.6114 24.2367 35.8226 24.3903 36.085 24.5247C36.3538 24.6591 36.629 24.7263 36.9106 24.7263C37.0386 24.7263 37.1538 24.7039 37.2562 24.6591C37.365 24.6143 37.4194 24.5311 37.4194 24.4095C37.4194 24.3455 37.4002 24.2911 37.3618 24.2463C37.3298 24.2015 37.269 24.1567 37.1794 24.1119C37.0898 24.0607 36.965 24.0063 36.805 23.9487C36.6514 23.8911 36.4562 23.8239 36.2194 23.7471C35.989 23.6703 35.7682 23.5807 35.557 23.4783C35.3458 23.3695 35.157 23.2383 34.9906 23.0847C34.8306 22.9311 34.7026 22.7487 34.6066 22.5375C34.5106 22.3199 34.4626 22.0607 34.4626 21.7599C34.4626 21.3375 34.549 20.9791 34.7218 20.6847C34.8946 20.3903 35.1154 20.1503 35.3842 19.9647C35.6594 19.7727 35.9666 19.6351 36.3058 19.5519C36.645 19.4687 36.981 19.4271 37.3138 19.4271C37.7618 19.4271 38.2162 19.5135 38.677 19.6863C39.1442 19.8591 39.5538 20.1087 39.9058 20.4351L38.485 21.8847C38.3314 21.6927 38.1426 21.5487 37.9186 21.4527C37.6946 21.3503 37.493 21.2991 37.3138 21.2991C37.1474 21.2991 37.013 21.3247 36.9106 21.3759C36.8082 21.4207 36.757 21.4975 36.757 21.6063C36.757 21.7087 36.8082 21.7855 36.9106 21.8367C37.0194 21.8879 37.1922 21.9519 37.429 22.0287C37.6722 22.1055 37.9282 22.1951 38.197 22.2975C38.4658 22.3999 38.7122 22.5343 38.9362 22.7007C39.1666 22.8607 39.3554 23.0591 39.5026 23.2959C39.6498 23.5327 39.7234 23.8271 39.7234 24.1791C39.7234 24.5887 39.6402 24.9471 39.4738 25.2543C39.3138 25.5551 39.0994 25.8079 38.8306 26.0127C38.5682 26.2111 38.2706 26.3583 37.9378 26.4543C37.605 26.5567 37.2658 26.6079 36.9202 26.6079ZM43.8943 26.4159H41.6095V21.5487H39.9391V19.6191H45.5647V21.5487H43.8943V26.4159ZM49.3146 26.6079C48.7834 26.6079 48.3194 26.5343 47.9226 26.3871C47.5322 26.2399 47.2058 26.0383 46.9434 25.7823C46.681 25.5263 46.4858 25.2255 46.3578 24.8799C46.2298 24.5279 46.1658 24.1503 46.1658 23.7471V19.6191H48.4506V23.4975C48.4506 23.8239 48.5274 24.0799 48.681 24.2655C48.841 24.4447 49.065 24.5343 49.353 24.5343C49.641 24.5343 49.8618 24.4447 50.0154 24.2655C50.1754 24.0799 50.2554 23.8239 50.2554 23.4975V19.6191H52.5306V23.7471C52.5306 24.1503 52.4602 24.5279 52.3194 24.8799C52.185 25.2255 51.9834 25.5263 51.7146 25.7823C51.4458 26.0383 51.1098 26.2399 50.7066 26.3871C50.3098 26.5343 49.8458 26.6079 49.3146 26.6079ZM53.7055 26.4159V19.6191H56.2399C56.7775 19.6191 57.2895 19.6735 57.7759 19.7823C58.2687 19.8847 58.7007 20.0671 59.0719 20.3295C59.4495 20.5855 59.7503 20.9279 59.9743 21.3567C60.1983 21.7855 60.3103 22.3263 60.3103 22.9791C60.3103 23.5743 60.2015 24.0895 59.9839 24.5247C59.7727 24.9599 59.4879 25.3183 59.1295 25.5999C58.7711 25.8751 58.3583 26.0799 57.8911 26.2143C57.4239 26.3487 56.9375 26.4159 56.4319 26.4159H53.7055ZM55.9039 21.5583V24.4575H56.3263C56.8639 24.4575 57.2767 24.3423 57.5647 24.1119C57.8527 23.8751 57.9967 23.4911 57.9967 22.9599C57.9967 22.5183 57.8527 22.1759 57.5647 21.9327C57.2767 21.6831 56.8927 21.5583 56.4127 21.5583H55.9039ZM61.2711 19.6191H63.5751V26.4159H61.2711V19.6191ZM64.5358 22.9791C64.5358 22.4351 64.6318 21.9455 64.8238 21.5103C65.0158 21.0687 65.2782 20.6943 65.611 20.3871C65.9502 20.0799 66.3502 19.8431 66.811 19.6767C67.2718 19.5103 67.771 19.4271 68.3086 19.4271C68.8462 19.4271 69.3454 19.5103 69.8062 19.6767C70.267 19.8431 70.667 20.0799 71.0062 20.3871C71.3454 20.6943 71.611 21.0687 71.803 21.5103C71.995 21.9455 72.091 22.4351 72.091 22.9791C72.091 23.5231 71.995 24.0191 71.803 24.4671C71.611 24.9151 71.3454 25.2991 71.0062 25.6191C70.667 25.9327 70.267 26.1759 69.8062 26.3487C69.3454 26.5215 68.8462 26.6079 68.3086 26.6079C67.771 26.6079 67.2718 26.5215 66.811 26.3487C66.3502 26.1759 65.9502 25.9327 65.611 25.6191C65.2782 25.2991 65.0158 24.9151 64.8238 24.4671C64.6318 24.0191 64.5358 23.5231 64.5358 22.9791ZM66.9646 22.9791C66.9646 23.2031 66.9966 23.4079 67.0606 23.5935C67.131 23.7791 67.2238 23.9391 67.339 24.0735C67.4606 24.2079 67.6046 24.3135 67.771 24.3903C67.9374 24.4607 68.1166 24.4959 68.3086 24.4959C68.5006 24.4959 68.6766 24.4607 68.8366 24.3903C69.003 24.3135 69.147 24.2079 69.2686 24.0735C69.3902 23.9391 69.483 23.7791 69.547 23.5935C69.6174 23.4079 69.6526 23.2031 69.6526 22.9791C69.6526 22.7615 69.6174 22.5631 69.547 22.3839C69.483 22.1983 69.3902 22.0447 69.2686 21.9231C69.147 21.7951 69.003 21.6959 68.8366 21.6255C68.6766 21.5551 68.5006 21.5199 68.3086 21.5199C68.1166 21.5199 67.9374 21.5551 67.771 21.6255C67.6046 21.6959 67.4606 21.7951 67.339 21.9231C67.2238 22.0447 67.131 22.1983 67.0606 22.3839C66.9966 22.5631 66.9646 22.7615 66.9646 22.9791Z" fill="#262626"/>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { Button } from 'antd';
|
|
2
|
+
import Icon from './Icon';
|
|
3
|
+
import { ComponentRegistration } from '@contentful/experiences-sdk-react';
|
|
4
|
+
|
|
5
|
+
type ButtonComponentProps = Omit<React.ComponentProps<typeof Button>, 'children' | 'icon'> & {
|
|
6
|
+
text: string;
|
|
7
|
+
icon?: React.ComponentProps<typeof Icon>['icon'];
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export const ButtonComponentRegistration: ComponentRegistration = {
|
|
11
|
+
component: (props: ButtonComponentProps) => {
|
|
12
|
+
const { color, icon, variant, text, ...rest } = props;
|
|
13
|
+
return (
|
|
14
|
+
<Button
|
|
15
|
+
color={color?.length ? color : undefined}
|
|
16
|
+
variant={variant?.length ? variant : undefined}
|
|
17
|
+
icon={icon && <Icon icon={icon} />}
|
|
18
|
+
{...rest}>
|
|
19
|
+
{text}
|
|
20
|
+
</Button>
|
|
21
|
+
);
|
|
22
|
+
},
|
|
23
|
+
definition: {
|
|
24
|
+
id: 'custom-button',
|
|
25
|
+
name: 'Button',
|
|
26
|
+
category: 'Custom Components',
|
|
27
|
+
variables: {
|
|
28
|
+
href: {
|
|
29
|
+
displayName: 'Link',
|
|
30
|
+
type: 'Text',
|
|
31
|
+
},
|
|
32
|
+
text: {
|
|
33
|
+
displayName: 'Text',
|
|
34
|
+
type: 'Text',
|
|
35
|
+
defaultValue: 'Click me',
|
|
36
|
+
},
|
|
37
|
+
color: {
|
|
38
|
+
displayName: 'Color',
|
|
39
|
+
type: 'Text',
|
|
40
|
+
defaultValue: 'primary',
|
|
41
|
+
group: 'style',
|
|
42
|
+
validations: {
|
|
43
|
+
in: [
|
|
44
|
+
{
|
|
45
|
+
value: '',
|
|
46
|
+
displayName: 'Default',
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
value: 'primary',
|
|
50
|
+
displayName: 'Primary',
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
value: 'danger',
|
|
54
|
+
displayName: 'Danger',
|
|
55
|
+
},
|
|
56
|
+
],
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
variant: {
|
|
60
|
+
displayName: 'Variant',
|
|
61
|
+
type: 'Text',
|
|
62
|
+
defaultValue: 'solid',
|
|
63
|
+
group: 'style',
|
|
64
|
+
validations: {
|
|
65
|
+
in: [
|
|
66
|
+
{
|
|
67
|
+
value: '',
|
|
68
|
+
displayName: 'None',
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
value: 'outline',
|
|
72
|
+
displayName: 'Outline',
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
value: 'dashed',
|
|
76
|
+
displayName: 'Dashed',
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
value: 'solid',
|
|
80
|
+
displayName: 'Solid',
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
value: 'filled',
|
|
84
|
+
displayName: 'Filled',
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
value: 'text',
|
|
88
|
+
displayName: 'Text',
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
value: 'link',
|
|
92
|
+
displayName: 'Link',
|
|
93
|
+
},
|
|
94
|
+
],
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
icon: {
|
|
98
|
+
displayName: 'Icon',
|
|
99
|
+
type: 'Text',
|
|
100
|
+
group: 'style',
|
|
101
|
+
defaultValue: '',
|
|
102
|
+
validations: {
|
|
103
|
+
in: [
|
|
104
|
+
{
|
|
105
|
+
value: '',
|
|
106
|
+
displayName: 'None',
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
value: 'CheckOutlined',
|
|
110
|
+
displayName: 'Check',
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
value: 'NotificationOutlined',
|
|
114
|
+
displayName: 'Notification',
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
value: 'SearchOutlined',
|
|
118
|
+
displayName: 'Search',
|
|
119
|
+
},
|
|
120
|
+
],
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
},
|
|
124
|
+
},
|
|
125
|
+
};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Card } from 'antd';
|
|
3
|
+
import { ComponentRegistration } from '@contentful/experiences-sdk-react';
|
|
4
|
+
|
|
5
|
+
type CardComponentProps = {
|
|
6
|
+
coverSlot: React.ReactNode;
|
|
7
|
+
title: string;
|
|
8
|
+
description: string;
|
|
9
|
+
size: 'default' | 'small';
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const CardComponentRegistration: ComponentRegistration = {
|
|
13
|
+
component: ({ coverSlot, title, description, size }: CardComponentProps) => {
|
|
14
|
+
return (
|
|
15
|
+
<Card size={size} cover={coverSlot}>
|
|
16
|
+
<Card.Meta title={title} description={description} />
|
|
17
|
+
</Card>
|
|
18
|
+
);
|
|
19
|
+
},
|
|
20
|
+
definition: {
|
|
21
|
+
id: 'custom-card',
|
|
22
|
+
name: 'Card',
|
|
23
|
+
category: 'Custom Components',
|
|
24
|
+
slots: {
|
|
25
|
+
coverSlot: {
|
|
26
|
+
displayName: 'Cover Slot',
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
variables: {
|
|
30
|
+
title: {
|
|
31
|
+
displayName: 'Title',
|
|
32
|
+
type: 'Text',
|
|
33
|
+
defaultValue: 'Title',
|
|
34
|
+
},
|
|
35
|
+
description: {
|
|
36
|
+
displayName: 'Description',
|
|
37
|
+
type: 'Text',
|
|
38
|
+
defaultValue: 'Description',
|
|
39
|
+
},
|
|
40
|
+
size: {
|
|
41
|
+
displayName: 'Size',
|
|
42
|
+
type: 'Text',
|
|
43
|
+
defaultValue: 'default',
|
|
44
|
+
group: 'style',
|
|
45
|
+
validations: {
|
|
46
|
+
in: [
|
|
47
|
+
{ value: 'default', displayName: 'Default' },
|
|
48
|
+
{ value: 'small', displayName: 'Small' },
|
|
49
|
+
],
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Row, Col } from 'antd';
|
|
2
|
+
|
|
3
|
+
const Container: React.FC<React.PropsWithChildren> = ({ children }) => {
|
|
4
|
+
return (
|
|
5
|
+
<Row className="container">
|
|
6
|
+
<Col xs={1} sm={2}></Col>
|
|
7
|
+
<Col xs={22} sm={20}>
|
|
8
|
+
{children}
|
|
9
|
+
</Col>
|
|
10
|
+
<Col xs={1} sm={2}></Col>
|
|
11
|
+
</Row>
|
|
12
|
+
);
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export default Container;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import '../studio-config';
|
|
4
|
+
import { ExperienceRoot } from '@contentful/experiences-sdk-react';
|
|
5
|
+
import React from 'react';
|
|
6
|
+
|
|
7
|
+
interface ExperienceProps {
|
|
8
|
+
experienceJSON: string | null;
|
|
9
|
+
locale: string;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const Experience: React.FC<ExperienceProps> = ({ experienceJSON, locale }) => {
|
|
13
|
+
return <ExperienceRoot experience={experienceJSON} locale={locale} />;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export default Experience;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Menu, Typography, Flex } from 'antd';
|
|
3
|
+
import Container from '../Container';
|
|
4
|
+
import FooterNav from './FooterNav';
|
|
5
|
+
import styles from './styles.module.css';
|
|
6
|
+
import FooterDebugging from './FooterDebugging';
|
|
7
|
+
|
|
8
|
+
const socials = [
|
|
9
|
+
{ key: 'instagram', label: 'Instagram' },
|
|
10
|
+
{ key: 'pinterist', label: 'Pinterest' },
|
|
11
|
+
{ key: 'tiktok', label: 'Tiktok' },
|
|
12
|
+
{ key: 'linkedin', label: 'LinkedIn' },
|
|
13
|
+
];
|
|
14
|
+
|
|
15
|
+
const Footer: React.FC = () => {
|
|
16
|
+
return (
|
|
17
|
+
<Container>
|
|
18
|
+
<Flex gap="large" vertical>
|
|
19
|
+
<Flex gap="large" vertical={false} wrap>
|
|
20
|
+
<Flex className={styles.links} vertical>
|
|
21
|
+
<Typography className={styles.heading}>Links</Typography>
|
|
22
|
+
<FooterNav />
|
|
23
|
+
</Flex>
|
|
24
|
+
<Flex className={styles.links} vertical>
|
|
25
|
+
<Typography className={styles.heading}>Follow us</Typography>
|
|
26
|
+
<Menu mode="horizontal" className={styles.menu} items={socials} selectable={false} />
|
|
27
|
+
</Flex>
|
|
28
|
+
</Flex>
|
|
29
|
+
<Flex justify="flex-end" vertical={false}>
|
|
30
|
+
<Flex align="flex-end" vertical>
|
|
31
|
+
<Typography className={styles.copyright}>
|
|
32
|
+
Altitude Design ©{new Date().getFullYear()}
|
|
33
|
+
</Typography>
|
|
34
|
+
<FooterDebugging />
|
|
35
|
+
</Flex>
|
|
36
|
+
</Flex>
|
|
37
|
+
</Flex>
|
|
38
|
+
</Container>
|
|
39
|
+
);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export default Footer;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import reactPackage from 'react/package.json';
|
|
3
|
+
import { version as sdkVersion } from '@contentful/experiences-sdk-react';
|
|
4
|
+
import { Divider, Flex, Typography } from 'antd';
|
|
5
|
+
import styles from './styles.module.css';
|
|
6
|
+
|
|
7
|
+
const FooterDebugging: React.FC = () => {
|
|
8
|
+
const isDebugMode = process.env.NODE_ENV === 'development';
|
|
9
|
+
|
|
10
|
+
if (!isDebugMode) {
|
|
11
|
+
return null;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<Flex align="center" vertical={false} className={styles.debugInfo}>
|
|
16
|
+
<Typography className={styles.darkText}>Experiences SDK v{sdkVersion}</Typography>
|
|
17
|
+
<Divider type="vertical" className={styles.divider} />
|
|
18
|
+
<Typography className={styles.darkText}>React v{reactPackage.version}</Typography>
|
|
19
|
+
</Flex>
|
|
20
|
+
);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export default FooterDebugging;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { usePathname } from 'next/navigation';
|
|
5
|
+
import Link from 'next/link';
|
|
6
|
+
import { Menu } from 'antd';
|
|
7
|
+
import styles from './styles.module.css';
|
|
8
|
+
|
|
9
|
+
const items = [
|
|
10
|
+
{
|
|
11
|
+
key: '/home-page',
|
|
12
|
+
label: <Link href="/">Home</Link>,
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
key: '/about',
|
|
16
|
+
label: 'About',
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
key: '/contact',
|
|
20
|
+
label: 'Contact',
|
|
21
|
+
},
|
|
22
|
+
];
|
|
23
|
+
|
|
24
|
+
const FooterNav: React.FC = () => {
|
|
25
|
+
const pathname = usePathname();
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<div className={styles.nav}>
|
|
29
|
+
<Menu selectedKeys={[pathname]} mode="horizontal" className={styles.menu} items={items} />
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export default FooterNav;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
ul.menu {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex: 1;
|
|
4
|
+
background-color: transparent;
|
|
5
|
+
border-bottom: 1px solid transparent;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
ul.menu :global li.ant-menu-item-selected::after,
|
|
9
|
+
ul.menu :global li.ant-menu-item-active::after {
|
|
10
|
+
border-bottom-color: var(--orange-2) !important;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
ul.menu li span {
|
|
14
|
+
color: var(--orange-2);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
article.heading {
|
|
18
|
+
color: var(--gray-1);
|
|
19
|
+
padding: 0 1rem;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
article.copyright {
|
|
23
|
+
color: var(--gray-1);
|
|
24
|
+
padding: 0 1rem;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
article.darkText {
|
|
28
|
+
color: var(--gray-7);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
div.debugInfo {
|
|
32
|
+
padding: 0 1rem;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
div.links {
|
|
36
|
+
min-width: 240px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
div.nav {
|
|
40
|
+
display: flex;
|
|
41
|
+
flex: 1;
|
|
42
|
+
justify-content: flex-end;
|
|
43
|
+
flex-direction: row;
|
|
44
|
+
align-items: center;
|
|
45
|
+
gap: 8px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
div.divider {
|
|
49
|
+
height: 1rem;
|
|
50
|
+
background: var(--gray-7);
|
|
51
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Nav from './HeaderNav';
|
|
3
|
+
import styles from './styles.module.css';
|
|
4
|
+
import Logo from '@/assets/Logo.svg';
|
|
5
|
+
|
|
6
|
+
const Header: React.FC = () => {
|
|
7
|
+
return (
|
|
8
|
+
<div className={styles.header}>
|
|
9
|
+
<Logo />
|
|
10
|
+
<Nav />
|
|
11
|
+
</div>
|
|
12
|
+
);
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export default Header;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { usePathname } from 'next/navigation';
|
|
5
|
+
import Link from 'next/link';
|
|
6
|
+
import { Button, Grid, Menu } from 'antd';
|
|
7
|
+
import { MenuOutlined } from '@ant-design/icons';
|
|
8
|
+
import styles from './styles.module.css';
|
|
9
|
+
|
|
10
|
+
const items = [
|
|
11
|
+
{
|
|
12
|
+
key: '/home-page',
|
|
13
|
+
label: <Link href="/">Home</Link>,
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
key: '/about',
|
|
17
|
+
label: 'About',
|
|
18
|
+
},
|
|
19
|
+
];
|
|
20
|
+
|
|
21
|
+
const mobileItems = [
|
|
22
|
+
...items,
|
|
23
|
+
{
|
|
24
|
+
key: '/contact',
|
|
25
|
+
label: 'Contact',
|
|
26
|
+
},
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
const Nav: React.FC = () => {
|
|
30
|
+
const pathname = usePathname();
|
|
31
|
+
const screens = Grid.useBreakpoint();
|
|
32
|
+
|
|
33
|
+
if (screens.xs) {
|
|
34
|
+
return (
|
|
35
|
+
<div className={styles.nav}>
|
|
36
|
+
<Menu
|
|
37
|
+
selectedKeys={[pathname]}
|
|
38
|
+
mode="horizontal"
|
|
39
|
+
className={styles.mobileMenu}
|
|
40
|
+
items={mobileItems}
|
|
41
|
+
overflowedIndicator={
|
|
42
|
+
<Button>
|
|
43
|
+
<MenuOutlined />
|
|
44
|
+
</Button>
|
|
45
|
+
}
|
|
46
|
+
/>
|
|
47
|
+
</div>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<div className={styles.nav}>
|
|
53
|
+
<Menu selectedKeys={[pathname]} mode="horizontal" className={styles.menu} items={items} />
|
|
54
|
+
<Button variant="outlined">Contact Us</Button>
|
|
55
|
+
</div>
|
|
56
|
+
);
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export default Nav;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.header {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: space-between;
|
|
4
|
+
align-items: center;
|
|
5
|
+
height: inherit;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
ul.menu {
|
|
9
|
+
display: flex;
|
|
10
|
+
flex: 1;
|
|
11
|
+
justify-content: flex-end;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
ul.menu,
|
|
15
|
+
ul.mobileMenu {
|
|
16
|
+
border-bottom: 1px solid transparent;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
ul.mobileMenu :global li.ant-menu-overflow-item::after {
|
|
20
|
+
border-bottom-color: transparent !important;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.nav {
|
|
24
|
+
display: flex;
|
|
25
|
+
flex: 1;
|
|
26
|
+
justify-content: flex-end;
|
|
27
|
+
flex-direction: row;
|
|
28
|
+
align-items: center;
|
|
29
|
+
gap: 8px;
|
|
30
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CheckOutlined, SearchOutlined, NotificationOutlined } from '@ant-design/icons';
|
|
3
|
+
|
|
4
|
+
interface IconProps {
|
|
5
|
+
icon?: 'CheckOutlined' | 'SearchOutlined' | 'NotificationOutlined';
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const Icon: React.FC<IconProps> = ({ icon }) => {
|
|
9
|
+
switch (icon) {
|
|
10
|
+
case 'CheckOutlined':
|
|
11
|
+
return <CheckOutlined />;
|
|
12
|
+
case 'NotificationOutlined':
|
|
13
|
+
return <NotificationOutlined />;
|
|
14
|
+
case 'SearchOutlined':
|
|
15
|
+
return <SearchOutlined />;
|
|
16
|
+
default:
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export default Icon;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { ComponentRegistration } from '@contentful/experiences-sdk-react';
|
|
2
|
+
import { Rate } from 'antd';
|
|
3
|
+
|
|
4
|
+
export const RatingStarsComponentRegistration: ComponentRegistration = {
|
|
5
|
+
component: Rate,
|
|
6
|
+
definition: {
|
|
7
|
+
id: 'custom-rating',
|
|
8
|
+
name: 'Rating Stars',
|
|
9
|
+
category: 'Custom Components',
|
|
10
|
+
variables: {
|
|
11
|
+
disabled: {
|
|
12
|
+
displayName: 'Read only',
|
|
13
|
+
type: 'Boolean',
|
|
14
|
+
defaultValue: true,
|
|
15
|
+
group: 'style',
|
|
16
|
+
},
|
|
17
|
+
value: {
|
|
18
|
+
displayName: 'Stars',
|
|
19
|
+
type: 'Number',
|
|
20
|
+
defaultValue: 5,
|
|
21
|
+
group: 'style',
|
|
22
|
+
validations: {
|
|
23
|
+
in: [
|
|
24
|
+
{
|
|
25
|
+
value: 1,
|
|
26
|
+
displayName: 'One Star',
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
value: 2,
|
|
30
|
+
displayName: 'Two Star',
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
value: 3,
|
|
34
|
+
displayName: 'Three Star',
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
value: 4,
|
|
38
|
+
displayName: 'Four Star',
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
value: 5,
|
|
42
|
+
displayName: 'Five Star',
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { fetchBySlug } from '@contentful/experiences-sdk-react';
|
|
2
|
+
import { createClient } from 'contentful';
|
|
3
|
+
|
|
4
|
+
const accessToken = process.env.NEXT_PUBLIC_CTFL_ACCESS_TOKEN!;
|
|
5
|
+
const prevAccessToken = process.env.NEXT_PUBLIC_CTFL_PREVIEW_ACCESS_TOKEN!;
|
|
6
|
+
const space = process.env.NEXT_PUBLIC_CTFL_SPACE!;
|
|
7
|
+
const environment = process.env.NEXT_PUBLIC_CTFL_ENVIRONMENT!;
|
|
8
|
+
const experienceTypeId = process.env.NEXT_PUBLIC_CTFL_EXPERIENCE_TYPE!;
|
|
9
|
+
const domain = process.env.NEXT_PUBLIC_CTFL_DOMAIN || 'contentful.com';
|
|
10
|
+
|
|
11
|
+
const getConfig = (isPreview: boolean) => {
|
|
12
|
+
const client = createClient({
|
|
13
|
+
space,
|
|
14
|
+
environment,
|
|
15
|
+
accessToken: isPreview ? prevAccessToken : accessToken,
|
|
16
|
+
host: isPreview ? `preview.${domain}` : `cdn.${domain}`,
|
|
17
|
+
});
|
|
18
|
+
return client;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export const getExperience = async (
|
|
22
|
+
slug: string,
|
|
23
|
+
localeCode: string,
|
|
24
|
+
isPreview = false,
|
|
25
|
+
isEditorMode = false,
|
|
26
|
+
) => {
|
|
27
|
+
const client = getConfig(isPreview);
|
|
28
|
+
try {
|
|
29
|
+
const experience = await fetchBySlug({
|
|
30
|
+
client,
|
|
31
|
+
slug,
|
|
32
|
+
experienceTypeId,
|
|
33
|
+
localeCode,
|
|
34
|
+
isEditorMode,
|
|
35
|
+
});
|
|
36
|
+
return { experience };
|
|
37
|
+
} catch (error) {
|
|
38
|
+
return { experience: undefined, error: error as Error };
|
|
39
|
+
}
|
|
40
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { i18nRouter } from 'next-i18n-router';
|
|
2
|
+
import { NextRequest } from 'next/server';
|
|
3
|
+
|
|
4
|
+
export function middleware(request: NextRequest) {
|
|
5
|
+
const i18n = {
|
|
6
|
+
locales: ['en-US', 'de-DE'],
|
|
7
|
+
defaultLocale: 'en-US',
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
const resp = i18nRouter(request, i18n);
|
|
11
|
+
return resp;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// only applies this middleware to files in the app directory
|
|
15
|
+
export const config = {
|
|
16
|
+
matcher: '/((?!api|static|.*\\..*|_next).*)',
|
|
17
|
+
};
|