Use datocms astro components instead of own components by JopMolenaar · Pull Request #335 · voorhoede/head-start

JopMolenaar · 2026-04-01T10:58:48Z

Changes

Use datocms astro components instead of own components

datocms/astro for structuredText structuredText docs/astro
datocms/astro for Image component images docs/astro
Updates docs

Associated issue

Resolves #333

How to test

Structured text:

Check if nothing breaks when making content in a textblock in random blocks where this component is used.
Compare it to the main branch (changes in primary and view it in preview)

Image component:

Check if nothing breaks when using images in blocks.
Test vector and bitmap images
Try to manipulate an img so that it doesn't load and check if the fallback is shown as it should be.

Checklist

I have performed a self-review of my own code
I have made sure that my PR is easy to review (not too big, includes comments)
I have made updated relevant documentation files (in project README, docs/, etc)
I have added a decision log entry if the change affects the architecture or changes a significant technology
I have notified a reviewer

cloudflare-workers-and-pages · 2026-04-01T11:08:00Z

Deploying head-start with Cloudflare Pages

Latest commit:	`3a947f9`
Status:	✅ Deploy successful!
Preview URL:	https://3fda8dfd.head-start.pages.dev
Branch Preview URL:	https://feat-use-datocms-astro-compo.head-start.pages.dev

View logs

Copilot

Pull request overview

This PR migrates the project’s Structured Text and image rendering to the official @datocms/astro components, removing the custom StructuredText implementation and updating blocks/docs accordingly.

Changes:

Replaced the custom StructuredText renderer with a new src/components/Text/Text.astro wrapper around @datocms/astro/StructuredText, including node overrides and record/block mappings.
Updated the Image block to use @datocms/astro’s Image component and adjusted GraphQL fragments/tests for the new data shape.
Removed the legacy src/components/StructuredText/* implementation and updated usage/docs across blocks.

Reviewed changes

Copilot reviewed 33 out of 37 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/components/Text/Text.test.ts	Updates the tested component import for the new Text wrapper.
src/components/Text/Text.astro	New Structured Text wrapper using `@datocms/astro/StructuredText` with overrides/mappings.
src/components/Text/README.md	Documents new Text/StructuredText usage and override behavior.
src/components/Text/nodes/Paragraph.astro	Adds paragraph override with centered styling support.
src/components/Text/nodes/ItemLink.astro	Aligns item-link rendering with record-based props.
src/components/Text/nodes/Heading.astro	Keeps heading behavior while enforcing h2+ levels.
src/components/Text/nodes/Code.astro	Updates code rendering to a safer `<pre><code>` output.
src/components/Text/nodes/Block.astro	Adds block renderer to route structured-text blocks through `~/blocks/Blocks.astro`.
src/components/StructuredText/StructuredText.d.ts	Removes legacy StructuredText typing helper.
src/components/StructuredText/StructuredText.astro	Removes legacy StructuredText component implementation.
src/components/StructuredText/README.md	Removes legacy StructuredText documentation.
src/components/StructuredText/Nodes/ThematicBreak.astro	Removes legacy node component.
src/components/StructuredText/Nodes/Span.astro	Removes legacy node component.
src/components/StructuredText/Nodes/Root.astro	Removes legacy node component.
src/components/StructuredText/Nodes/ListItem.astro	Removes legacy node component.
src/components/StructuredText/Nodes/List.astro	Removes legacy node component.
src/components/StructuredText/Nodes/Link.test.ts	Removes legacy Link node test.
src/components/StructuredText/Nodes/Link.astro	Removes legacy Link node component.
src/components/StructuredText/Nodes/InlineBlock.astro	Removes legacy inline block node component.
src/components/StructuredText/Nodes/Blockquote.astro	Removes legacy node component.
src/components/StructuredText/Node.astro	Removes legacy recursive node renderer.
src/components/LinkToRecord/LinkToRecord.astro	Extends record linking to support `VariableRecord` rendering.
src/blocks/TextImageBlock/TextImageBlock.astro	Switches to shared `~/components/Text/Text.astro`.
src/blocks/TextBlock/TextBlock.astro	Switches to shared `~/components/Text/Text.astro`.
src/blocks/TextBlock/Text.astro	Removes legacy shared TextBlock StructuredText adapter.
src/blocks/TextBlock/README.md	Updates docs to reflect the moved Text logic.
src/blocks/TextBlock/nodes/InlineItem.astro	Removes legacy inline item renderer (variable/link handling).
src/blocks/TextBlock/nodes/Heading.astro	Removes legacy heading override implementation.
src/blocks/ListBlock/ListBlockFragment.graphql	Adds `links` selection for list-item structured text.
src/blocks/ListBlock/ListBlock.astro	Switches to shared `~/components/Text/Text.astro`.
src/blocks/ImageBlock/README.md	Updates docs to reference DatoCMS Astro image handling.
src/blocks/ImageBlock/ImageBlock.test.ts	Updates expectations for the new image output/styling behavior.
src/blocks/ImageBlock/ImageBlock.fragment.graphql	Adds `srcSet` to the image responsive payload.
src/blocks/ImageBlock/Image.client.ts	Removes custom element behavior previously used for load handling.
src/blocks/ImageBlock/Image.astro	Migrates image rendering to `@datocms/astro` Image and updates fallback styling.
package.json	Adds `@datocms/astro` dependency.
package-lock.json	Locks `@datocms/astro` and transitive dependencies.

Comments suppressed due to low confidence (1)

src/components/Text/Text.test.ts:6

Text.astro expects a data prop, but this test renders the component without providing any props. That will pass undefined into @datocms/astro’s StructuredText and is likely to throw at runtime, causing the test to fail. Pass a minimal valid Structured Text value in renderToFragment options (or update Text.astro to safely handle missing/null data).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-03T08:48:36Z

+const astroImageData = {
+  src: image.url,
+  srcSet: image.responsiveImage?.srcSet ?? null,
+  title: image.title,
+  width: image.width,
+  height: image.height,
+  alt: altText,
+  base64: image.responsiveImage?.base64 || '',
+};


AstroImage is fed srcSet from image.responsiveImage?.srcSet, but some GraphQL fragments in the repo still fetch responsiveImage without srcSet (e.g. TextImageBlock.fragment.graphql currently selects aspectRatio + base64 only). In those cases image.responsiveImage will be truthy, you’ll take the bitmap branch, and srcSet becomes null, which may break the DatoCMS image component. Ensure all fragments that supply image.responsiveImage also include the fields required by @datocms/astro (at least srcSet), or change the condition to only use AstroImage when the required fields are present.

@JopMolenaar did you check this?

@milailijevic Yes, TextImageBlock.fragment.graphql is now also fetching srcSet, and if I search on responsiveImage, all of them have srcSet in it.
But even when srcSet is missing, AstroImage has its own buildSrcSet function, so it won't break anything.

Copilot · 2026-04-03T08:48:36Z

 const locale = getLocale() as SiteLocale;
-const href = getHref({ locale, record });
+const href = getHref({ locale, record: record as RecordRoute });
 ---


href is computed for every record via record as RecordRoute, even when the record is a VariableRecord (where href isn’t used) and despite getHref not accepting VariableRecord in its type. Consider computing href only in the non-FileRecord/non-VariableRecord branch (or extending RecordRoute/getHref to include VariableRecord) to avoid the unsafe cast and unnecessary work.

…in code block

…ify translation string

milailijevic · 2026-04-17T12:30:22Z

@@ -1 +1 @@
 fragment ImageBlock on ImageBlockRecord {


maybe using imgixParams here to limit the full size of it and set the q to 80 as we previously had

fragment ImageBlock on ImageBlockRecord { id image { responsiveImage( imgixParams: { auto: [format, compress], q: 80, fit: max, w: 1200} ) { srcSet src base64 alt title width height } } }

and then just use const astroImageData = image.responsiveImage ?? null; in Image.astro.

This is just an idea, it scales the image with dpr as in this example but limiting the biggest one is the issue here.
https://www.datocms-assets.com/145765/1730394116-head-start-cover.jpg?auto=format%2Ccompress&dpr=0.25&fit=max&q=80&w=1200

The maxW param doesn't work without the fit=crop

having imgixParams: { auto: [format, compress], q: 80, fit: max, w: 1200} in the query works fine, but the params stay the same except from the dpr

milailijevic · 2026-04-17T12:43:36Z

    }
    value
  }
  image {


should follow the same structure as in ImageBlock.fragment.graphql if you change it

milailijevic · 2026-04-17T12:46:22Z

+export type Props = Omit<HTMLAttributes<'a'>, 'href'> & {
  openInNewTab?: boolean;
-  record: RecordRoute;
+  record: RecordRoute | VariableRecord;


Rebase to main, the VariableRecord type is not used here anymore

… block

JopMolenaar force-pushed the feat/use-datocms-astro-components-instead-of-own-components branch from 7c8b6f5 to ad393eb Compare April 1, 2026 11:07

JopMolenaar added the 🧹 Tidy up label Apr 1, 2026

JopMolenaar self-assigned this Apr 1, 2026

JopMolenaar force-pushed the feat/use-datocms-astro-components-instead-of-own-components branch from bae5999 to 38dc91a Compare April 1, 2026 15:48

JopMolenaar marked this pull request as ready for review April 3, 2026 08:39

Copilot AI review requested due to automatic review settings April 3, 2026 08:39

Copilot started reviewing on behalf of JopMolenaar April 3, 2026 08:40 View session

Copilot AI reviewed Apr 3, 2026

View reviewed changes

JopMolenaar force-pushed the feat/use-datocms-astro-components-instead-of-own-components branch 2 times, most recently from a3c1884 to 025863a Compare April 9, 2026 14:47

JopMolenaar requested a review from milailijevic April 15, 2026 07:30

JopMolenaar added 13 commits April 15, 2026 11:18

fix(): basic version of using astro StructuredText

e37fe6b

fix(): StructuredText cleanup with astro version

0169464

chore(): todo and spacing

cc69a85

fix(): added datocms/astro image

ef9403c

fix(): cleaner class name and formatting

0a82f43

fix(): list block text import with new structure

a9d94c1

fix(): variable block in new structured text component

2160dd2

fix(): added links in listText query, listblock

82a46ad

fix(): lint-code in test file fix, validate html fix bc of raw value …

cc07d02

…in code block

fix(): bumb up text headings to minimum lvl 2

6b8d0e8

fix(): unit test fix image block

ddc70bd

fix(): updated docs

bce0686

fix(): image scrSet in query, removed image-component element, string…

3223e9e

…ify translation string

JopMolenaar force-pushed the feat/use-datocms-astro-components-instead-of-own-components branch from 025863a to 3223e9e Compare April 15, 2026 09:18

milailijevic requested changes Apr 17, 2026

View reviewed changes

fix(): removes variable block from link record bc it became an inline…

3a947f9

… block

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use datocms astro components instead of own components#335

Use datocms astro components instead of own components#335
JopMolenaar wants to merge 14 commits intomainfrom
feat/use-datocms-astro-components-instead-of-own-components

JopMolenaar commented Apr 1, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Apr 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 3, 2026

Uh oh!

milailijevic Apr 3, 2026

Uh oh!

JopMolenaar Apr 9, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 3, 2026

Uh oh!

milailijevic Apr 17, 2026

Uh oh!

milailijevic Apr 17, 2026

Uh oh!

milailijevic Apr 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

JopMolenaar commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Associated issue

How to test

Checklist

Uh oh!

cloudflare-workers-and-pages Bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying head-start with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

milailijevic Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

JopMolenaar Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

milailijevic Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

milailijevic Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

milailijevic Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JopMolenaar commented Apr 1, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Apr 1, 2026 •

edited

Loading

JopMolenaar Apr 9, 2026 •

edited

Loading