Demo Site: Add createImageSizes helper

demo/site/src/common/blocks/TextImageBlock.tsx

@@ -1,6 +1,8 @@
 "use client";
 import { PropsWithData, withPreview } from "@comet/cms-site";
 import { TextImageBlockData } from "@src/blocks.generated";
+import { PageLayout } from "@src/layout/PageLayout";
+import { createImageSizes } from "@src/util/createImageSizes";
 import styled, { css } from "styled-components";
 
 import { DamImageBlock } from "./DamImageBlock";
@@ -11,7 +13,7 @@ export const TextImageBlock = withPreview(
         return (
             <Root $imagePosition={imagePosition}>
                 <ImageContainer>
-                    <DamImageBlock data={image} aspectRatio={imageAspectRatio} sizes="50vw" />
+                    <DamImageBlock data={image} aspectRatio={imageAspectRatio} sizes={createImageSizes({ xs: "100vw", md: "30vw" })} />
                 </ImageContainer>
                 <TextContainer>
                     <RichTextBlock data={text} />
@@ -22,11 +24,21 @@ export const TextImageBlock = withPreview(
     { label: "Text/Image" },
 );
 
+export const PageContentTextImageBlock = (props: PropsWithData<TextImageBlockData>) => (
+    <PageLayout>
+        <TextImageBlock {...props} />
+    </PageLayout>
+);
+
 const Root = styled.div<{ $imagePosition: TextImageBlockData["imagePosition"] }>`
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     gap: 20px;
 
+    ${({ theme }) => theme.breakpoints.md.mediaQuery} {
+        flex-direction: row;
+    }
+
     ${({ $imagePosition }) =>
         $imagePosition === "left" &&
         css`
@@ -35,6 +47,7 @@ const Root = styled.div<{ $imagePosition: TextImageBlockData["imagePosition"] }>
 `;
 
 const ImageContainer = styled.div`
+    position: relative;
     flex: 1;
 `;
 

demo/site/src/documents/pages/blocks/PageContentBlock.tsx

@@ -11,7 +11,7 @@ import { SpaceBlock } from "@src/common/blocks/SpaceBlock";
 import { PageContentStandaloneCallToActionListBlock } from "@src/common/blocks/StandaloneCallToActionListBlock";
 import { PageContentStandaloneHeadingBlock } from "@src/common/blocks/StandaloneHeadingBlock";
 import { StandaloneMediaBlock } from "@src/common/blocks/StandaloneMediaBlock";
-import { TextImageBlock } from "@src/common/blocks/TextImageBlock";
+import { PageContentTextImageBlock } from "@src/common/blocks/TextImageBlock";
 import { BillboardTeaserBlock } from "@src/documents/pages/blocks/BillboardTeaserBlock";
 import { ColumnsBlock } from "@src/documents/pages/blocks/ColumnsBlock";
 import { ContentGroupBlock } from "@src/documents/pages/blocks/ContentGroupBlock";
@@ -42,7 +42,7 @@ const supportedBlocks: SupportedBlocks = {
     newsDetail: (props) => <NewsDetailBlock data={props} />,
     image: (props) => <DamImageBlock data={props} aspectRatio="inherit" />,
     layout: (props) => <LayoutBlock data={props} />,
-    textImage: (props) => <TextImageBlock data={props} />,
+    textImage: (props) => <PageContentTextImageBlock data={props} />,
     fullWidthImage: (props) => <FullWidthImageBlock data={props} />,
 };
 

demo/site/src/news/blocks/NewsContentBlock.tsx

@@ -3,13 +3,13 @@ import { NewsContentBlockData } from "@src/blocks.generated";
 import { DamImageBlock } from "@src/common/blocks/DamImageBlock";
 import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
 import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
-import { TextImageBlock } from "@src/common/blocks/TextImageBlock";
+import { PageContentTextImageBlock } from "@src/common/blocks/TextImageBlock";
 
 const supportedBlocks: SupportedBlocks = {
     heading: (props) => <HeadingBlock data={props} />,
     richText: (props) => <RichTextBlock data={props} />,
     image: (props) => <DamImageBlock data={props} aspectRatio="inherit" />,
-    textImage: (props) => <TextImageBlock data={props} />,
+    textImage: (props) => <PageContentTextImageBlock data={props} />,
 };
 
 export const NewsContentBlock = ({ data }: PropsWithData<NewsContentBlockData>) => {

demo/site/src/theme.ts

@@ -78,7 +78,7 @@ export const theme = {
 
 export default theme;
 
-type Theme = typeof theme;
+export type Theme = typeof theme;
 
 declare module "styled-components" {
     // eslint-disable-next-line @typescript-eslint/no-empty-interface

demo/site/src/util/createImageSizes.ts

@@ -0,0 +1,22 @@
+import theme, { Theme } from "@src/theme";
+
+type BreakpointWidths = { xs: string | number } & Partial<Record<keyof Theme["breakpoints"], string | number>>;
+
+export function createImageSizes(breakpointWidths: BreakpointWidths) {
+    const sizes: string[] = [];
+    const breakpoints = Object.entries(theme.breakpoints).reverse();
+    const defaultSize = breakpointWidths.xs;
+
+    breakpoints.forEach(([breakpointKey, breakpointValue]) => {
+        const size = breakpointWidths[breakpointKey];
+        const minWidth = breakpointValue.value;
+
+        if (size !== undefined) {
+            sizes.push(`(min-width: ${minWidth}px) ${typeof size === "string" ? size : `${size}px`}`);
+        }
+    });
+
+    sizes.push(`(min-width: 0px) ${typeof defaultSize === "string" ? defaultSize : `${defaultSize}px`}`);
+
+    return sizes.join(", ");
+}