Add Blog callout CMS blocks

This commit is contained in:
Fede Álvarez 2022-07-06 18:07:22 +02:00
parent e42e49b2bc
commit a81ad0952c
5 changed files with 149 additions and 17 deletions

View File

@ -30,6 +30,14 @@ fragment BlogPost on BlogPostRecord {
label
url
}
... on Callout01Record {
id
text
}
... on Callout02Record {
id
text
}
}
}
image {

View File

@ -104,7 +104,11 @@ export type AuthorRecord_SeoMetaTagsArgs = {
locale?: InputMaybe<SiteLocale>
}
export type BlogPostModelContentBlocksField = CtaRecord | ImageRecord
export type BlogPostModelContentBlocksField =
| CtaRecord
| ImageRecord
| Callout01Record
| Callout02Record
export type BlogPostModelContentField = {
__typename?: 'BlogPostModelContentField'
@ -343,6 +347,44 @@ export type CtaRecord = {
url?: Maybe<Scalars['String']>
}
export type Callout01Record = {
__typename?: 'Callout01Record'
_createdAt: Scalars['DateTime']
_firstPublishedAt?: Maybe<Scalars['DateTime']>
_isValid: Scalars['BooleanType']
_modelApiKey: Scalars['String']
_publicationScheduledAt?: Maybe<Scalars['DateTime']>
_publishedAt?: Maybe<Scalars['DateTime']>
/** SEO meta tags */
_seoMetaTags: Array<Tag>
_status: ItemStatus
_unpublishingScheduledAt?: Maybe<Scalars['DateTime']>
_updatedAt: Scalars['DateTime']
createdAt: Scalars['DateTime']
id: Scalars['ItemId']
text?: Maybe<Scalars['String']>
updatedAt: Scalars['DateTime']
}
export type Callout02Record = {
__typename?: 'Callout01Record'
_createdAt: Scalars['DateTime']
_firstPublishedAt?: Maybe<Scalars['DateTime']>
_isValid: Scalars['BooleanType']
_modelApiKey: Scalars['String']
_publicationScheduledAt?: Maybe<Scalars['DateTime']>
_publishedAt?: Maybe<Scalars['DateTime']>
/** SEO meta tags */
_seoMetaTags: Array<Tag>
_status: ItemStatus
_unpublishingScheduledAt?: Maybe<Scalars['DateTime']>
_updatedAt: Scalars['DateTime']
createdAt: Scalars['DateTime']
id: Scalars['ItemId']
text?: Maybe<Scalars['String']>
updatedAt: Scalars['DateTime']
}
/** Record of type Cta (cta) */
export type CtaRecord_SeoMetaTagsArgs = {
locale?: InputMaybe<SiteLocale>
@ -2586,6 +2628,16 @@ export type BlogPostFragment = {
height?: any | null
} | null
}
| {
__typename: 'Callout01Record'
id: any
text?: string | null
}
| {
__typename: 'Callout02Record'
id: any
text?: string | null
}
>
} | null
image?: {
@ -2691,6 +2743,16 @@ export type GetBlogPostsQuery = {
height?: any | null
} | null
}
| {
__typename: 'Callout01Record'
id: any
text?: string | null
}
| {
__typename: 'Callout02Record'
id: any
text?: string | null
}
>
} | null
image?: {
@ -2759,6 +2821,16 @@ export type SingleBlogPostQuery = {
height?: any | null
} | null
}
| {
__typename: 'Callout01Record'
id: any
text?: string | null
}
| {
__typename: 'Callout02Record'
id: any
text?: string | null
}
>
} | null
image?: {
@ -2826,6 +2898,14 @@ export const BlogPostFragmentDoc = gql`
label
url
}
... on Callout01Record {
id
text
}
... on Callout02Record {
id
text
}
}
}
image {

View File

@ -586,6 +586,16 @@
"kind": "OBJECT",
"name": "ImageRecord",
"ofType": null
},
{
"kind": "OBJECT",
"name": "Callout01Record",
"ofType": null
},
{
"kind": "OBJECT",
"name": "Callout02Record",
"ofType": null
}
]
},
@ -11793,11 +11803,7 @@
"name": "include",
"description": "Directs the executor to include this field or fragment only when the `if` argument is true.",
"isRepeatable": false,
"locations": [
"FIELD",
"FRAGMENT_SPREAD",
"INLINE_FRAGMENT"
],
"locations": ["FIELD", "FRAGMENT_SPREAD", "INLINE_FRAGMENT"],
"args": [
{
"name": "if",
@ -11821,11 +11827,7 @@
"name": "skip",
"description": "Directs the executor to skip this field or fragment when the `if` argument is true.",
"isRepeatable": false,
"locations": [
"FIELD",
"FRAGMENT_SPREAD",
"INLINE_FRAGMENT"
],
"locations": ["FIELD", "FRAGMENT_SPREAD", "INLINE_FRAGMENT"],
"args": [
{
"name": "if",
@ -11849,9 +11851,7 @@
"name": "specifiedBy",
"description": "Exposes a URL that specifies the behavior of this scalar.",
"isRepeatable": false,
"locations": [
"SCALAR"
],
"locations": ["SCALAR"],
"args": [
{
"name": "url",
@ -11873,4 +11873,4 @@
}
]
}
}
}

View File

@ -106,6 +106,40 @@
}
}
.callout {
&__01 {
@include respond-to('mobile') {
padding: tovw(20px, 'default', 20px);
}
padding: tovw(40px, 'default', 25px);
margin-bottom: tovw(44px, 'default', 35px);
border: 1px solid var(--color-accent);
background-color: rgb(0 0 244 / 0.3);
border-radius: 8px;
p {
margin: tovw(10px, 'default', 6px) 0;
}
}
&__02 {
@include respond-to('mobile') {
padding: tovw(20px, 'default', 20px);
}
padding: tovw(40px, 'default', 25px);
margin-bottom: tovw(44px, 'default', 35px);
border: 1px solid var(--color-grey-light);
background-color: transparent;
border-radius: 8px;
p {
margin: tovw(10px, 'default', 6px) 0;
}
}
}
.img {
margin: tovw(136px, 'default', 72px) auto;

View File

@ -8,8 +8,18 @@ import s from './blog.module.scss'
export const renderBlock = ({ record }) => {
switch (record.__typename) {
case 'CalloutRecord':
return <Marked>{record.content ?? ''}</Marked>
case 'Callout01Record':
return (
<div className={s.callout__01}>
<Marked>{record.text ?? ''}</Marked>
</div>
)
case 'Callout02Record':
return (
<div className={s.callout__02}>
<Marked>{record.text ?? ''}</Marked>
</div>
)
case 'ImageRecord':
return (
<div className={s.img}>