Skip to content

Commit df2e7b1

Browse files
Infi-KnightInfi-Knight
authored
feat: Callout Text component (#17)
* ambassador: add "Erica Hargreave" * ambassador: unpublish "Erica Hargreave" * ambassador: add "Erica Hargreave" * cohort: add "Ambassadors 2025" * cohort: delete "Ambassadors 2025" * cohort: add "Ambassadors 2025" * ambassador: add "Caroline Sinders" * cohort: delete "Ambassadors 2025" * cohort: add "Ambassadors 2024" * cohort: delete "Ambassadors 2024" * cohort: add "Ambassadors 2025" * page: add "test-ambassadors" (en) * page: unpublish "test-ambassadors" (en) * page: add "test-ambassadors" (en) * page: unpublish "test-ambassadors" (en) * page: add "test-ambassadors" (en) * page: unpublish "test-ambassadors" (en) * page: add "test-ambassadors" (en) * page: delete "test-ambassadors" (en) * wip: ambassador and associated content * cohort: add "alumni" * page: add "ambassadors" (en) * page: unpublish "ambassadors" (en) * page: add "ambassadors" (en) * page: unpublish "ambassadors" (en) * page: add "ambassadors" (en) * remove cohort * page: unpublish "ambassadors" (en) * page: add "ambassadors" (en) * page: unpublish "ambassadors" (en) * page: add "ambassadors" (en) * page: unpublish "ambassadors" (en) * page: add "ambassadors" (en) * page: unpublish "ambassadors" (en) * page: add "ambassadors" (en) * page: unpublish "ambassadors" (en) * page: add "ambassadors" (en) * page: add "test-ambs" (en) * page: delete "test-ambs" (en) * page: add "test-page" (en) * page: unpublish "test-page" (en) * page: add "test-page" (en) * page: unpublish "test-page" (en) * page: add "test-page" (en) * ambassador: unpublish "Erica Hargreave" * ambassador: add "Erica Hargreave" * ambassador: unpublish "Erica Hargreave" * ambassador: add "Erica Hargreave" * setup lifecycle and page to serialise and render ambassador * page: unpublish "test-page" (en) * page: add "test-page" (en) * page: unpublish "test-page" (en) * page: add "test-page" (en) * use ordering from strapi instead of sorting * page: unpublish "test-page" (en) * page: add "test-page" (en) * page: unpublish "test-page" (en) * page: add "test-page" (en) * fix page previews * fix linter error * lint and format * format & lint * ambassador: add "Jeremiah Lee" * ambassador: add "Kokayi Issa" * page: unpublish "test-page" (en) * page: add "test-page" (en) * page: unpublish "test-page" (en) * page: add "test-page" (en) * page: unpublish "test-page" (en) * page: add "test-page" (en) * page: unpublish "test-page" (en) * page: add "test-page" (en) * page: delete "test-page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * update readme with preview setup * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * wip: blockquote * update readme * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * use non-rich text for quote src, styling fixes * wip: callout text * page: unpublish "test page" (en) * page: add "test page" (en) * page: unpublish "test page" (en) * page: add "test page" (en) * remove @astrojs/tailwind, fixes npm i * Component - blockquote (#11) Add BlockQuote as a component * fix paths * remove unused page * cleanup * cleanup
1 parent 77df5fd commit df2e7b1

12 files changed

Lines changed: 108 additions & 5 deletions

File tree

‎cms/src/api/foundation-page/content-types/foundation-page/schema.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@
6161
"blocks.cta-banner",
6262
"blocks.ambassador",
6363
"blocks.ambassadors-grid",
64-
"blocks.blockquote"
64+
"blocks.blockquote",
65+
"blocks.callout-text"
6566
],
6667
"pluginOptions": { "i18n": { "localized": true } }
6768
}

‎cms/src/components/blocks/callout-text.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"collectionName": "components_blocks_callout_texts",
3+
"info": {
4+
"displayName": "Callout Text",
5+
"icon": "megaphone",
6+
"description": "Highlighted text block with larger font size for emphasis"
7+
},
8+
"options": {},
9+
"attributes": {
10+
"content": {
11+
"type": "richtext",
12+
"required": true
13+
}
14+
}
15+
}

‎cms/src/serializers/blocks/callout-text.serializer.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import isHtml from 'is-html'
2+
import { htmlToMarkdown } from '../../utils/mdx'
3+
4+
export function serialize(block: { content: string }): string {
5+
if (!block.content) return ''
6+
7+
const content = (
8+
isHtml(block.content) ? htmlToMarkdown(block.content) : block.content
9+
)
10+
.trim()
11+
.replace(/\{/g, '\\{')
12+
.replace(/\}/g, '\\}')
13+
14+
return `<CalloutText>\n${content}\n</CalloutText>`
15+
}

‎cms/src/serializers/blocks/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { serialize as paragraph } from './paragraph.serializer'
1212
import { serialize as ambassador } from './ambassador.serializer'
1313
import { serialize as ambassadorsGrid } from './ambassadors-grid.serializer'
1414
import { serialize as blockquote } from './blockquote.serializer'
15+
import { serialize as calloutText } from './callout-text.serializer'
1516

1617
const SERIALIZERS: Record<string, (block: unknown) => string> = {
1718
'blocks.cards-grid': cardsGrid,
@@ -22,7 +23,8 @@ const SERIALIZERS: Record<string, (block: unknown) => string> = {
2223
'blocks.paragraph': paragraph,
2324
'blocks.ambassador': ambassador,
2425
'blocks.ambassadors-grid': ambassadorsGrid,
25-
'blocks.blockquote': blockquote
26+
'blocks.blockquote': blockquote,
27+
'blocks.callout-text': calloutText
2628
}
2729

2830
export function serializeContent(

‎cms/src/utils/pageLifecycle.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,13 @@ async function fetchPublished(
185185
seo: { populate: '*' },
186186
content: {
187187
on: {
188+
'blocks.paragraph': {},
189+
'blocks.callout-text': {},
190+
'blocks.blockquote': {},
191+
'blocks.cards-grid': {},
192+
'blocks.card-links-grid': {},
193+
'blocks.carousel': {},
194+
'blocks.cta-banner': {},
188195
'blocks.ambassador': {
189196
populate: { ambassador: { populate: { photo: true } } }
190197
},

‎cms/types/generated/components.d.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,18 @@ export interface BlocksBlockquote extends Struct.ComponentSchema {
4545
}
4646
}
4747

48+
export interface BlocksCalloutText extends Struct.ComponentSchema {
49+
collectionName: 'components_blocks_callout_texts'
50+
info: {
51+
description: 'Highlighted text block with larger font size for emphasis'
52+
displayName: 'Callout Text'
53+
icon: 'megaphone'
54+
}
55+
attributes: {
56+
content: Schema.Attribute.RichText & Schema.Attribute.Required
57+
}
58+
}
59+
4860
export interface BlocksCard extends Struct.ComponentSchema {
4961
collectionName: 'components_blocks_cards'
5062
info: {
@@ -693,6 +705,7 @@ declare module '@strapi/strapi' {
693705
'blocks.ambassador': BlocksAmbassador
694706
'blocks.ambassadors-grid': BlocksAmbassadorsGrid
695707
'blocks.blockquote': BlocksBlockquote
708+
'blocks.callout-text': BlocksCalloutText
696709
'blocks.card': BlocksCard
697710
'blocks.card-link': BlocksCardLink
698711
'blocks.card-links-grid': BlocksCardLinksGrid

‎cms/types/generated/contentTypes.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -665,7 +665,8 @@ export interface ApiFoundationPageFoundationPage
665665
'blocks.cta-banner',
666666
'blocks.ambassador',
667667
'blocks.ambassadors-grid',
668-
'blocks.blockquote'
668+
'blocks.blockquote',
669+
'blocks.callout-text'
669670
]
670671
> &
671672
Schema.Attribute.SetPluginOptions<{

‎src/components/blocks/CalloutTextBlock.astro‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
/**
3+
* Callout Text Block for Dynamic Zones (SSR Preview)
4+
* Passes Strapi richtext content to the presentational component
5+
*/
6+
7+
import CalloutText from '../callout/CalloutText.astro'
8+
9+
interface Props {
10+
content: string
11+
}
12+
13+
const { content } = Astro.props
14+
---
15+
16+
<CalloutText content={content} />

‎src/components/blocks/DynamicZone.astro‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import CtaBanner from './CtaBanner.astro'
1515
import AmbassadorBlock from './AmbassadorBlock.astro'
1616
import AmbassadorsGridBlock from './AmbassadorsGridBlock.astro'
1717
import BlockquoteBlock from './BlockquoteBlock.astro'
18+
import CalloutTextBlock from './CalloutTextBlock.astro'
1819
1920
interface Block {
2021
__component: string
@@ -36,7 +37,8 @@ const componentMap: Record<string, any> = {
3637
'blocks.cta-banner': CtaBanner,
3738
'blocks.ambassador': AmbassadorBlock,
3839
'blocks.ambassadors-grid': AmbassadorsGridBlock,
39-
'blocks.blockquote': BlockquoteBlock
40+
'blocks.blockquote': BlockquoteBlock,
41+
'blocks.callout-text': CalloutTextBlock
4042
}
4143
4244
const resolvedBlocks = blocks

‎src/components/callout/CalloutText.astro‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
import { parseMarkdown } from '@/utils/mdx'
3+
4+
interface Props {
5+
content?: string
6+
}
7+
8+
const { content } = Astro.props
9+
10+
const htmlContent = content ? await parseMarkdown(content) : null
11+
---
12+
13+
<div
14+
class="mb-space-s text-step-2 [&_p]:text-step-2 [&_p]:mb-space-xs [&_strong]:font-semibold [&_em]:italic [&_a]:text-primary [&_a]:underline"
15+
>
16+
{htmlContent ? <Fragment set:html={htmlContent} /> : <slot />}
17+
</div>
18+
19+
<style>
20+
/* Astro automatically scopes this to divs in THIS component only */
21+
div :global(p:last-child) {
22+
margin-bottom: 0;
23+
}
24+
</style>

0 commit comments

Comments
 (0)