Skip to content

Commit 2036a56

Browse files
paulpopuspaulpopus
authored
feat(templates): update website styles and new home hero image (#9413)
1 parent 0b4e5a6 commit 2036a56

File tree

22 files changed

+269
-247
lines changed

22 files changed

+269
-247
lines changed

‎templates/website/pnpm-lock.yaml

Lines changed: 99 additions & 101 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎templates/website/src/Footer/Component.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { ThemeSelector } from '@/providers/Theme/ThemeSelector'
88
import { CMSLink } from '@/components/Link'
99

1010
export async function Footer() {
11-
const footer: Footer = await getCachedGlobal('footer')()
11+
const footer: Footer = await getCachedGlobal('footer', 1)()
1212

1313
const navItems = footer?.navItems || []
1414

‎templates/website/src/Header/Component.client.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,13 @@ export const HeaderClient: React.FC<HeaderClientProps> = ({ header }) => {
3030
}, [headerTheme])
3131

3232
return (
33-
<header
34-
className="container relative z-20 py-8 flex justify-between"
35-
{...(theme ? { 'data-theme': theme } : {})}
36-
>
37-
<Link href="/">
38-
<Logo />
39-
</Link>
40-
<HeaderNav header={header} />
33+
<header className="container relative z-20 " {...(theme ? { 'data-theme': theme } : {})}>
34+
<div className="py-8 border-b border-border flex justify-between">
35+
<Link href="/">
36+
<Logo />
37+
</Link>
38+
<HeaderNav header={header} />
39+
</div>
4140
</header>
4241
)
4342
}

‎templates/website/src/app/(frontend)/globals.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
--background: 0 0% 0%;
5454
--foreground: 210 40% 98%;
5555

56-
--card: 240 6% 10%;
56+
--card: 0 0% 4%;
5757
--card-foreground: 210 40% 98%;
5858

5959
--popover: 222.2 84% 4.9%;
@@ -74,7 +74,7 @@
7474
--destructive: 0 62.8% 30.6%;
7575
--destructive-foreground: 210 40% 98%;
7676

77-
--border: 240 4% 16%;
77+
--border: 0, 0%, 15%, 0.5;
7878
--input: 217.2 32.6% 17.5%;
7979
--ring: 212.7 26.8% 83.9%;
8080

‎templates/website/src/app/(frontend)/posts/[slug]/page.tsx

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -53,20 +53,15 @@ export default async function Post({ params: paramsPromise }: Args) {
5353
<PostHero post={post} />
5454

5555
<div className="flex flex-col items-center gap-4 pt-8">
56-
<div className="container lg:mx-0 lg:grid lg:grid-cols-[1fr_48rem_1fr] grid-rows-[1fr]">
57-
<RichText
58-
className="lg:grid lg:grid-cols-subgrid col-start-1 col-span-3 grid-rows-[1fr]"
59-
content={post.content}
60-
enableGutter={false}
61-
/>
56+
<div className="container">
57+
<RichText className="max-w-[48rem] mx-auto" content={post.content} enableGutter={false} />
58+
{post.relatedPosts && post.relatedPosts.length > 0 && (
59+
<RelatedPosts
60+
className="mt-12 max-w-[52rem] lg:grid lg:grid-cols-subgrid col-start-1 col-span-3 grid-rows-[2fr]"
61+
docs={post.relatedPosts.filter((post) => typeof post === 'object')}
62+
/>
63+
)}
6264
</div>
63-
64-
{post.relatedPosts && post.relatedPosts.length > 0 && (
65-
<RelatedPosts
66-
className="mt-12"
67-
docs={post.relatedPosts.filter((post) => typeof post === 'object')}
68-
/>
69-
)}
7065
</div>
7166
</article>
7267
)

‎templates/website/src/app/(payload)/admin/importMap.js

Lines changed: 21 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -21,42 +21,25 @@ import { default as default_1a7510af427896d367a49dbf838d2de6 } from '@/component
2121
import { default as default_8a7ab0eb7ab5c511aba12e68480bfe5e } from '@/components/BeforeLogin'
2222

2323
export const importMap = {
24-
'@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell':
25-
RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
26-
'@payloadcms/richtext-lexical/rsc#RscEntryLexicalField':
27-
RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e,
28-
'@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient':
29-
InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
30-
'@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient':
31-
FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
32-
'@payloadcms/richtext-lexical/client#HeadingFeatureClient':
33-
HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
34-
'@payloadcms/richtext-lexical/client#ParagraphFeatureClient':
35-
ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
36-
'@payloadcms/richtext-lexical/client#UnderlineFeatureClient':
37-
UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
38-
'@payloadcms/richtext-lexical/client#BoldFeatureClient':
39-
BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
40-
'@payloadcms/richtext-lexical/client#ItalicFeatureClient':
41-
ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
42-
'@payloadcms/richtext-lexical/client#LinkFeatureClient':
43-
LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
44-
'@payloadcms/plugin-seo/client#OverviewComponent':
45-
OverviewComponent_a8a977ebc872c5d5ea7ee689724c0860,
46-
'@payloadcms/plugin-seo/client#MetaTitleComponent':
47-
MetaTitleComponent_a8a977ebc872c5d5ea7ee689724c0860,
48-
'@payloadcms/plugin-seo/client#MetaImageComponent':
49-
MetaImageComponent_a8a977ebc872c5d5ea7ee689724c0860,
50-
'@payloadcms/plugin-seo/client#MetaDescriptionComponent':
51-
MetaDescriptionComponent_a8a977ebc872c5d5ea7ee689724c0860,
52-
'@payloadcms/plugin-seo/client#PreviewComponent':
53-
PreviewComponent_a8a977ebc872c5d5ea7ee689724c0860,
54-
'@/fields/slug/SlugComponent#SlugComponent': SlugComponent_92cc057d0a2abb4f6cf0307edf59f986,
55-
'@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient':
56-
HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
57-
'@payloadcms/richtext-lexical/client#BlocksFeatureClient':
58-
BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
59-
'@payloadcms/plugin-search/client#LinkToDoc': LinkToDoc_aead06e4cbf6b2620c5c51c9ab283634,
60-
'@/components/BeforeDashboard#default': default_1a7510af427896d367a49dbf838d2de6,
61-
'@/components/BeforeLogin#default': default_8a7ab0eb7ab5c511aba12e68480bfe5e,
24+
"@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
25+
"@payloadcms/richtext-lexical/rsc#RscEntryLexicalField": RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e,
26+
"@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
27+
"@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient": FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
28+
"@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
29+
"@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
30+
"@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
31+
"@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
32+
"@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
33+
"@payloadcms/richtext-lexical/client#LinkFeatureClient": LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
34+
"@payloadcms/plugin-seo/client#OverviewComponent": OverviewComponent_a8a977ebc872c5d5ea7ee689724c0860,
35+
"@payloadcms/plugin-seo/client#MetaTitleComponent": MetaTitleComponent_a8a977ebc872c5d5ea7ee689724c0860,
36+
"@payloadcms/plugin-seo/client#MetaImageComponent": MetaImageComponent_a8a977ebc872c5d5ea7ee689724c0860,
37+
"@payloadcms/plugin-seo/client#MetaDescriptionComponent": MetaDescriptionComponent_a8a977ebc872c5d5ea7ee689724c0860,
38+
"@payloadcms/plugin-seo/client#PreviewComponent": PreviewComponent_a8a977ebc872c5d5ea7ee689724c0860,
39+
"@/fields/slug/SlugComponent#SlugComponent": SlugComponent_92cc057d0a2abb4f6cf0307edf59f986,
40+
"@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
41+
"@payloadcms/richtext-lexical/client#BlocksFeatureClient": BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
42+
"@payloadcms/plugin-search/client#LinkToDoc": LinkToDoc_aead06e4cbf6b2620c5c51c9ab283634,
43+
"@/components/BeforeDashboard#default": default_1a7510af427896d367a49dbf838d2de6,
44+
"@/components/BeforeLogin#default": default_8a7ab0eb7ab5c511aba12e68480bfe5e
6245
}

‎templates/website/src/blocks/Form/Component.tsx

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -126,47 +126,49 @@ export const FormBlock: React.FC<
126126
)
127127

128128
return (
129-
<div className="container lg:max-w-[48rem] pb-20">
130-
<FormProvider {...formMethods}>
131-
{enableIntro && introContent && !hasSubmitted && (
132-
<RichText className="mb-8" content={introContent} enableGutter={false} />
133-
)}
134-
{!isLoading && hasSubmitted && confirmationType === 'message' && (
135-
<RichText content={confirmationMessage} />
136-
)}
137-
{isLoading && !hasSubmitted && <p>Loading, please wait...</p>}
138-
{error && <div>{`${error.status || '500'}: ${error.message || ''}`}</div>}
139-
{!hasSubmitted && (
140-
<form id={formID} onSubmit={handleSubmit(onSubmit)}>
141-
<div className="mb-4 last:mb-0">
142-
{formFromProps &&
143-
formFromProps.fields &&
144-
formFromProps.fields?.map((field, index) => {
145-
const Field: React.FC<any> = fields?.[field.blockType]
146-
if (Field) {
147-
return (
148-
<div className="mb-6 last:mb-0" key={index}>
149-
<Field
150-
form={formFromProps}
151-
{...field}
152-
{...formMethods}
153-
control={control}
154-
errors={errors}
155-
register={register}
156-
/>
157-
</div>
158-
)
159-
}
160-
return null
161-
})}
162-
</div>
163-
164-
<Button form={formID} type="submit" variant="default">
165-
{submitButtonLabel}
166-
</Button>
167-
</form>
168-
)}
169-
</FormProvider>
129+
<div className="container lg:max-w-[48rem]">
130+
{enableIntro && introContent && !hasSubmitted && (
131+
<RichText className="mb-8 lg:mb-12" content={introContent} enableGutter={false} />
132+
)}
133+
<div className="p-4 lg:p-6 border border-border rounded-[0.8rem]">
134+
<FormProvider {...formMethods}>
135+
{!isLoading && hasSubmitted && confirmationType === 'message' && (
136+
<RichText content={confirmationMessage} />
137+
)}
138+
{isLoading && !hasSubmitted && <p>Loading, please wait...</p>}
139+
{error && <div>{`${error.status || '500'}: ${error.message || ''}`}</div>}
140+
{!hasSubmitted && (
141+
<form id={formID} onSubmit={handleSubmit(onSubmit)}>
142+
<div className="mb-4 last:mb-0">
143+
{formFromProps &&
144+
formFromProps.fields &&
145+
formFromProps.fields?.map((field, index) => {
146+
const Field: React.FC<any> = fields?.[field.blockType]
147+
if (Field) {
148+
return (
149+
<div className="mb-6 last:mb-0" key={index}>
150+
<Field
151+
form={formFromProps}
152+
{...field}
153+
{...formMethods}
154+
control={control}
155+
errors={errors}
156+
register={register}
157+
/>
158+
</div>
159+
)
160+
}
161+
return null
162+
})}
163+
</div>
164+
165+
<Button form={formID} type="submit" variant="default">
166+
{submitButtonLabel}
167+
</Button>
168+
</form>
169+
)}
170+
</FormProvider>
171+
</div>
170172
</div>
171173
)
172174
}

‎templates/website/src/blocks/MediaBlock/Component.tsx

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ export const MediaBlock: React.FC<Props> = (props) => {
2525
enableGutter = true,
2626
imgClassName,
2727
media,
28-
position = 'default',
2928
staticImage,
3029
disableInnerContainer,
3130
} = props
@@ -38,25 +37,22 @@ export const MediaBlock: React.FC<Props> = (props) => {
3837
className={cn(
3938
'',
4039
{
41-
container: position === 'default' && enableGutter,
40+
container: enableGutter,
4241
},
4342
className,
4443
)}
4544
>
46-
{position === 'fullscreen' && (
47-
<div className="relative">
48-
<Media resource={media} src={staticImage} />
49-
</div>
50-
)}
51-
{position === 'default' && (
52-
<Media imgClassName={cn('rounded', imgClassName)} resource={media} src={staticImage} />
53-
)}
45+
<Media
46+
imgClassName={cn('border border-border rounded-[0.8rem]', imgClassName)}
47+
resource={media}
48+
src={staticImage}
49+
/>
5450
{caption && (
5551
<div
5652
className={cn(
5753
'mt-6',
5854
{
59-
container: position === 'fullscreen' && !disableInnerContainer,
55+
container: !disableInnerContainer,
6056
},
6157
captionClassName,
6258
)}

‎templates/website/src/blocks/MediaBlock/config.ts

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,6 @@ export const MediaBlock: Block = {
44
slug: 'mediaBlock',
55
interfaceName: 'MediaBlock',
66
fields: [
7-
{
8-
name: 'position',
9-
type: 'select',
10-
defaultValue: 'default',
11-
options: [
12-
{
13-
label: 'Default',
14-
value: 'default',
15-
},
16-
{
17-
label: 'Fullscreen',
18-
value: 'fullscreen',
19-
},
20-
],
21-
},
227
{
238
name: 'media',
249
type: 'upload',

‎templates/website/src/blocks/RelatedPosts/Component.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {
1919
<div className={clsx('container', className)}>
2020
{introContent && <RichText content={introContent} enableGutter={false} />}
2121

22-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8 items-stretch">
22+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 items-stretch">
2323
{docs?.map((doc, index) => {
2424
if (typeof doc === 'string') return null
2525

0 commit comments

Comments
 (0)