From 488ea6ec06f4ace9600c5dd53c09cf9f35ad48d4 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 25 Feb 2020 02:01:57 +0300 Subject: [PATCH] article related pages meta update and other improvements --- pages/article/[slug].tsx | 2 +- pages/articles/[slug].tsx | 26 +++++++++++--------------- pages/index.tsx | 17 ++++++++--------- src/components/ArticleGrid/index.tsx | 6 ++++-- src/lib/meta.ts | 24 ++++++++++++++++-------- src/types.ts | 2 +- 6 files changed, 41 insertions(+), 36 deletions(-) diff --git a/pages/article/[slug].tsx b/pages/article/[slug].tsx index 8e8ded5a..f8deabe6 100644 --- a/pages/article/[slug].tsx +++ b/pages/article/[slug].tsx @@ -6,7 +6,7 @@ import { Meta } from 'src/components/Meta' import { MetaBuilder } from 'src/lib/meta' import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib' import { NextPage } from 'next' -import { IArticle } from 'src/types' +import { IArticle, IMeta } from 'src/types' type Props = { title: string diff --git a/pages/articles/[slug].tsx b/pages/articles/[slug].tsx index cc8dce36..4d31efc9 100644 --- a/pages/articles/[slug].tsx +++ b/pages/articles/[slug].tsx @@ -2,17 +2,18 @@ import Head from 'next/head' import { range } from 'lodash' import { App } from 'src/components/App' import { ArticleGrid } from 'src/components/ArticleGrid' -import { meta } from 'src/lib/meta' +import { MetaBuilder } from 'src/lib/meta' import { Meta } from 'src/components/Meta' import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib' import { NextPage } from 'next' +import { IArticle } from 'src/types' const pageSize = Number(process.env.APP_ARTICLES_PAGE_SIZE) type Props = { meta: any title: string - data: any //(list of article) + data: IArticle[] nextPage: number prevPage: number } @@ -42,20 +43,19 @@ const Page: NextPage = props => { } export const unstable_getStaticProps = async (ctx: any) => { - // const page = parseInt(ctx.query.page) const page = parseInt(ctx.params.slug) - const res = await requestGet>( - createApiUrl(`/api/articles?page=${page}&pageSize=${pageSize}`), - null - ) + const res = await requestGet>(createApiUrl(`/api/articles?page=${page}&pageSize=${pageSize}`), null) if (!res) { return null } - const data = res.items || [] - const nextPage = (res as any).nextPage - const prevPage = (res as any).prevPage + const data = (res.items || []) + const nextPage = res.nextPage + const prevPage = res.prevPage const title = 'События' + const meta = (new MetaBuilder()) + .setTitle(title) + .build() return { props: { @@ -63,16 +63,12 @@ export const unstable_getStaticProps = async (ctx: any) => { nextPage, prevPage, title, - meta: meta({ - title, - }) + meta, } } } export const unstable_getStaticPaths = async () => { - console.log('call articles unstable_getStaticPaths') - const urls = await requestGet>(createApiUrl(`/api/articles/urls`), null) if (!urls) { return null diff --git a/pages/index.tsx b/pages/index.tsx index c0bf8e06..64e2f261 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,7 +3,7 @@ import { App } from 'src/components/App' import { Meta } from 'src/components/Meta' import { ArticleGrid } from 'src/components/ArticleGrid' import { HudozkaTitle } from 'src/components/HudozkaTitle' -import { meta } from 'src/lib/meta' +import { meta, MetaBuilder } from 'src/lib/meta' import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib' import { NextPage } from 'next' import { IArticle } from 'src/types' @@ -45,13 +45,15 @@ export const unstable_getStaticProps = async () => { const pageSize = process.env.APP_ARTICLES_PAGE_SIZE const res = await requestGet>(createApiUrl(`/api/articles?page=${page}&pageSize=${pageSize}`), null) const articles = (res.items || []) - .map(x => ({ - ...x, - featured: ['2019-kotiki', 'veloparking'].includes(x.id) - })) const nextPage = res.nextPage const prevPage = res.prevPage const title = 'Шлиссельбургская ДХШ' + const meta = (new MetaBuilder()) + .setTitle(title) + .setData({ + url: '/', + }) + .build() return { props: { @@ -59,10 +61,7 @@ export const unstable_getStaticProps = async () => { nextPage, prevPage, title, - meta: meta({ - title, - url: '/', - }) + meta, } } } diff --git a/src/components/ArticleGrid/index.tsx b/src/components/ArticleGrid/index.tsx index 780ad842..2758ff68 100644 --- a/src/components/ArticleGrid/index.tsx +++ b/src/components/ArticleGrid/index.tsx @@ -29,7 +29,9 @@ export const ArticleGrid: React.FC = ({ articles, nextPage, pr {articles.map((article, i) => { const gridColumn = article.featured ? 'span 2' : 'auto' const layout: CardLayout = article.featured ? 'featured' : 'simple' - const srcSet = article.preview.set.map(({ url, density }) => `${url} ${density}x`).join(' ') + const preview = article.preview.artifacts.medium + const src = preview.src + const srcSet = preview.set.map(({ url, density }) => `${url} ${density}x`).join(' ') const content = !article.featured ? ( @@ -52,7 +54,7 @@ export const ArticleGrid: React.FC = ({ articles, nextPage, pr href={article.url} img={{ alt: article.title, - src: article.preview.src, + src, srcSet, }} layout={layout} diff --git a/src/lib/meta.ts b/src/lib/meta.ts index 078209fd..338f5a16 100644 --- a/src/lib/meta.ts +++ b/src/lib/meta.ts @@ -51,18 +51,26 @@ export class MetaBuilder { } build() { - const artifact = this.image.artifacts.fb - const image = { - image: artifact.src, - imageWidth: artifact.width, - imageHeight: artifact.height, - } + const image = this.buildImage() return meta({ ...this.data, ...image, - title: this.title, - description: this.description, + title: this.title ?? undefined, + description: this.description ?? undefined, }) } + + private buildImage() { + if (!this.image) { + return null + } + + const artifact = this.image.artifacts.fb + return { + image: artifact.src, + imageWidth: artifact.width, + imageHeight: artifact.height, + } + } } diff --git a/src/types.ts b/src/types.ts index 990c421f..baf86823 100644 --- a/src/types.ts +++ b/src/types.ts @@ -66,7 +66,7 @@ export interface IArticle { featured: boolean url: string title: string - preview: IImage + preview: ImageDefinition } export type Person = {