article related pages meta update and other improvements

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

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> = props => {
 }
 
 export const unstable_getStaticProps = async (ctx: any) => {
-    // const page = parseInt(ctx.query.page)
     const page = parseInt(ctx.params.slug)
-    const res = await requestGet<IResponseItems<any[]>>(
-        createApiUrl(`/api/articles?page=${page}&pageSize=${pageSize}`),
-        null
-    )
+    const res = await requestGet<IResponseItems<IArticle>>(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<IResponseItems<string>>(createApiUrl(`/api/articles/urls`), null)
     if (!urls) {
         return null

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<IResponseItems<IArticle>>(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,
         }
     }
 }

src/components/ArticleGrid/index.tsx

@@ -29,7 +29,9 @@ export const ArticleGrid: React.FC<ArticleGridProps> = ({ 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<ArticleGridProps> = ({ articles, nextPage, pr
                             href={article.url}
                             img={{
                                 alt: article.title,
-                                src: article.preview.src,
+                                src,
                                 srcSet,
                             }}
                             layout={layout}

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,
+        }
+    }
 }

src/types.ts

@@ -66,7 +66,7 @@ export interface IArticle {
     featured: boolean
     url: string
     title: string
-    preview: IImage
+    preview: ImageDefinition
 }
 
 export type Person = {