diff --git a/pages/index.tsx b/pages/index.tsx index e47a29ea..d4856456 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -4,9 +4,10 @@ import { Meta } from 'src/components/Meta' import { PageGrid } from 'src/components/PageGrid' import { HudozkaTitle } from 'src/components/HudozkaTitle' import { MetaBuilder } from 'src/lib/meta' -import { getPagesCardsByTags } from 'src/rest' import { NextPage } from 'next' import { IMeta, PageCardData, PageCardDto } from 'src/types' +import { apiGet } from '@/next-lib' +import { createHomeCards } from '@/remote/factory' type Props = { title: string @@ -16,11 +17,16 @@ type Props = { const Index: NextPage = props => { const items = props.items.map(item => ({ + id: item.id, url: item.url, title: item.title, featured: item.featured, date: new Date(item.date), - coverSrc: item.cover?.src, + cover: { + src: item.cover.src, + width: item.cover.width, + height: item.cover.height, + } })) return ( @@ -47,11 +53,9 @@ const Index: NextPage = props => { } export const getStaticProps = async () => { - const items = await getPagesCardsByTags([ - 'event', - 'album', - 'post', - ]) + const url = 'https://hudozka.tmshv.com/home' + const items = await apiGet(createHomeCards)(url, []) + const title = 'Шлиссельбургская ДХШ' const meta = (new MetaBuilder()) .setTitle(title) diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index a6644bb8..63df9442 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -2,7 +2,6 @@ import s from './styles.module.css' import cx from 'classnames' import Link from 'next/link' -import { Image } from '../Image' const layoutClass = { simple: s.simple, @@ -13,11 +12,7 @@ export type CardLayout = 'simple' | 'featured' export type CardProps = { style?: React.CSSProperties href: string - img: { - alt: string - src: string - srcSet: string - } + cover: React.ReactNode layout: CardLayout } @@ -26,11 +21,7 @@ export const Card: React.FC = props => (
- {props.img.alt} + {props.cover}
diff --git a/src/components/Card/styles.module.css b/src/components/Card/styles.module.css index 90a3d1d0..02057bd9 100644 --- a/src/components/Card/styles.module.css +++ b/src/components/Card/styles.module.css @@ -31,18 +31,6 @@ height: 100%; } -.image img { - width: 100%; - height: 100%; - object-fit: cover; - - transition: all 150ms ease-out; - - position: absolute; - top: 0; - left: 0; -} - .body { background-color: var(--color-back); padding: var(--size-m); diff --git a/src/components/PageGrid/index.tsx b/src/components/PageGrid/index.tsx index dd2b308d..d6f564a7 100644 --- a/src/components/PageGrid/index.tsx +++ b/src/components/PageGrid/index.tsx @@ -1,3 +1,4 @@ +import Image from 'next/image' import { ImageSize, PageCardData } from 'src/types' import { CardGrid } from '../CardGrid' import { Card, CardLayout } from '../Card' @@ -13,75 +14,53 @@ export type PageGridProps = { } export const PageGrid: React.FC = props => { - const [page, setPage] = useState(1) - const i = page * 24 - const items = props.items.slice(0, i) - const onMore = useCallback(() => { - setPage(x => x + 1) - }, []) - const hasMore = i < props.items.length - return ( - <> - - {items.map((item, i) => { - const gridColumn = item.featured ? 'span 2' : 'auto' - const layout: CardLayout = item.featured ? 'featured' : 'simple' - const cover = item.coverSrc ?? process.env.APP_CARD_DEFAULT_IMAGE - const src = cover - const srcSet = imageSrcSet(src, [ImageSize.large, ImageSize.medium, ImageSize.small]) + + {props.items.map(item => { + const gridColumn = item.featured ? 'span 2' : 'auto' + const layout: CardLayout = item.featured ? 'featured' : 'simple' - const content = !item.featured - ? ( - - {item.title} - + const content = !item.featured + ? ( + + {item.title} + + {!item.date ? null : ( {item.date} - - ) : ( - item.title - ) - - return ( - - {content} - + )} + + ) : ( + item.title ) - })} - - - - - - - + + return ( + + )} + layout={layout} + style={{ + gridColumn, + }} + > + {content} + + ) + })} + ) } diff --git a/src/remote/factory.ts b/src/remote/factory.ts index e6d36b6e..8f9af4f8 100644 --- a/src/remote/factory.ts +++ b/src/remote/factory.ts @@ -1,7 +1,7 @@ import { getResizedUrl, imageSrc } from "@/lib/image"; -import { IPage, Token } from "@/types"; +import { IPage, PageCardDto, Token } from "@/types"; import { asItem } from "./lib"; -import { StrapiComponent, StrapiPage } from "./types"; +import { StrapiComponent, StrapiHome, StrapiPage, StrapiPageCard } from "./types"; export function createPageTokens(components: StrapiComponent[]): Token[] { return components.map(component => { @@ -86,4 +86,29 @@ export function createPage(res: StrapiPage | StrapiPage[]): IPage { // breadcrumb?: [], featured: false, } +} + +function isCardFeatured(card: StrapiPageCard): boolean { + return card.layout === 'big' || card.layout === 'medium' +} + +export function createHomeCards(data: StrapiHome): PageCardDto[] { + // const cover = item.coverSrc ?? process.env.APP_CARD_DEFAULT_IMAGE + + return data.cards.map(card => { + 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: '', + } + } + }) } \ No newline at end of file diff --git a/src/remote/types.ts b/src/remote/types.ts index 70529d4e..5f289890 100644 --- a/src/remote/types.ts +++ b/src/remote/types.ts @@ -110,4 +110,19 @@ export type StrapiPage = { // ], // "breadcrumbs": [], // "breadcrumbRelations": [] +} + +export type StrapiHome = { + id: number, + title: string + cards: StrapiPageCard[] + // "created_at": "2021-02-04T04:12:38.291Z", + // "updated_at": "2021-02-04T16:28:30.961Z", +} + +export type StrapiPageCard = { + __component: 'hudozka.page-card', + id: number, + page: StrapiPage, + layout: 'small' | 'medium' | 'big', } \ No newline at end of file diff --git a/src/rest.ts b/src/rest.ts deleted file mode 100644 index a8f0fc91..00000000 --- a/src/rest.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { createApiUrl, requestGet, IResponseItems } from './next-lib' -import { IPage, PageCardData, PageCardDto } from './types' -import { queryList } from './lib/url' - -export type QuerySlice = { - skip: number - limit: number - sortBy: string - fields?: string[] -} - -export async function getPagesByTags(tags: string[], { skip, limit, sortBy, fields }: QuerySlice) { - const tag = queryList('tag', tags) - const field = queryList('field', fields ?? []) - - const url = `/api/pages/tags?${tag}&${field}&skip=${skip}&limit=${limit}&sortBy=${sortBy}` - const res = await requestGet>(createApiUrl(url), null) - - return res?.items -} - -export async function getPagesCardsByTags(tags: string[]): Promise { - const skip = 0 - const limit = 1000 - const fields = [ - 'url', - 'title', - 'featured', - 'date', - 'cover' - ] - - const items = await getPagesByTags(tags, { fields, skip, limit, sortBy: '-date' }) - if (!Array.isArray(items)) { - return [] - } - - return items -} diff --git a/src/types.ts b/src/types.ts index c3b8bcdb..ffb3ca26 100644 --- a/src/types.ts +++ b/src/types.ts @@ -9,14 +9,16 @@ export interface IBreadcumbsPart { } export type PageCardData = { + id: number url: string title: string date: Date featured?: boolean - coverSrc?: string + cover?: ImageDefinition } export type PageCardDto = { + id: number url: string title: string featured: boolean