strapi card grid support

pages/[...slug].tsx

@@ -15,6 +15,7 @@ import { Html } from 'src/components/Html'
 import { Youtube } from '@/components/Youtube'
 import { createPage, createPageUrls } from '@/remote/factory'
 import { paramsToSlug } from '@/remote/lib'
+import { PageGrid } from '@/components/PageGrid'
 
 async function getUrls() {
     let urls = []
@@ -147,6 +148,14 @@ const Index: NextPage<Props> = props => (
                                 <File key={i} {...x.data} />
                             )
 
+                        case 'grid':
+                            return (
+                                <PageGrid
+                                    key={i}
+                                    items={x.data.items}
+                                />
+                            )
+
                         default:
                             return (
                                 <pre key={i}>

pages/index.tsx

@@ -15,42 +15,27 @@ type Props = {
     items: PageCardDto[]
 }
 
-const Index: NextPage<Props> = props => {
-    const items = props.items.map<PageCardData>(item => ({
-        id: item.id,
-        url: item.url,
-        title: item.title,
-        featured: item.featured,
-        date: new Date(item.date),
-        cover: {
-            src: item.cover.src,
-            width: item.cover.width,
-            height: item.cover.height,
-        }
-    }))
+const Index: NextPage<Props> = props => (
+    <App
+        showAuthor={true}
+        wide={true}
+    >
+        <Head>
+            <title>{props.title}</title>
+            <Meta meta={props.meta} />
+        </Head>
 
-    return (
-        <App
-            showAuthor={true}
-            wide={true}
-        >
-            <Head>
-                <title>{props.title}</title>
-                <Meta meta={props.meta} />
-            </Head>
+        <HudozkaTitle
+            style={{
+                marginBottom: 'var(--size-l)'
+            }}
+        />
 
-            <HudozkaTitle
-                style={{
-                    marginBottom: 'var(--size-l)'
-                }}
-            />
-
-            <PageGrid
-                items={items}
-            />
-        </App>
-    )
-}
+        <PageGrid
+            items={props.items}
+        />
+    </App>
+)
 
 export const getStaticProps = async () => {
     const url = 'https://hudozka.tmshv.com/home'

src/components/PageGrid/index.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { ImageSize, PageCardData } from 'src/types'
+import { ImageSize, PageCardData, PageCardDto } from 'src/types'
 import { CardGrid } from '../CardGrid'
 import { Card, CardLayout } from '../Card'
 import { Date } from './Date'
@@ -10,7 +10,7 @@ import { Button } from '../Button'
 import { useState, useCallback } from 'react'
 
 export type PageGridProps = {
-    items: PageCardData[]
+    items: PageCardDto[]
 }
 
 export const PageGrid: React.FC<PageGridProps> = props => {

src/remote/factory.ts

@@ -1,7 +1,7 @@
 import { getResizedUrl } from "@/lib/image";
 import { IPage, ITag, PageCardDto, Token } from "@/types";
 import { asItem } from "./lib";
-import { StrapiComponentEmbed, StrapiComponent, StrapiHome, StrapiPage, StrapiPageCard } from "./types";
+import { StrapiComponentEmbed, StrapiComponent, StrapiHome, StrapiPage, StrapiPageCard, StrapiComponentCardGrid } from "./types";
 
 export function createPageUrls(pages: StrapiPage[]) {
     return {
@@ -76,6 +76,15 @@ export function createPageTokens(components: StrapiComponent[]): Token[] {
                 return createEmbed(component)
             }
 
+            case 'hudozka.card-grid': {
+                return {
+                    token: 'grid',
+                    data: {
+                        items: component.items.map(createCardGrid)
+                    }
+                }
+            }
+
             default:
                 return {
                     token: 'text',
@@ -132,6 +141,25 @@ function isCardFeatured(card: StrapiPageCard): boolean {
     return card.layout === 'big' || card.layout === 'medium'
 }
 
+export function createCardGrid(card: StrapiPageCard): PageCardDto {
+    // const cover = item.coverSrc ?? process.env.APP_CARD_DEFAULT_IMAGE
+
+    return {
+        id: card.id,
+        // id: card.page.id,
+        url: card.page.slug,
+        title: card.page.title,
+        featured: isCardFeatured(card),
+        date: card.page.date,
+        cover: {
+            src: card.page.cover.url,
+            width: card.page.cover.width,
+            height: card.page.cover.height,
+            // alt: '',
+        }
+    }
+
+
 export function createHomeCards(data: StrapiHome): PageCardDto[] {
     // const cover = item.coverSrc ?? process.env.APP_CARD_DEFAULT_IMAGE
 

src/remote/types.ts

@@ -73,11 +73,18 @@ export type StrapiComponentEmbed = {
     src: string,
 }
 
+export type StrapiComponentCardGrid = {
+    __component: "hudozka.card-grid",
+    id: number,
+    items: StrapiPageCard[],
+}
+
 export type StrapiComponent =
     | StrapiComponentText
     | StrapiComponentImage
     | StrapiComponentDocument
     | StrapiComponentEmbed
+    | StrapiComponentCardGrid
 
 export type StrapiTag = {
     id: number,

src/types.ts

@@ -158,4 +158,18 @@ export type InstagramToken = {
     }
 }
 
-export type Token = TextToken | ImageToken | FileToken | HtmlToken | YoutubeToken | InstagramToken
+export type GridToken = {
+    token: 'grid'
+    data: {
+        items: PageCardDto[]
+    }
+}
+
+export type Token =
+    | TextToken
+    | ImageToken
+    | FileToken
+    | HtmlToken
+    | YoutubeToken
+    | InstagramToken
+    | GridToken