use cover instead of preview of coverSrc

pages/[...slug].tsx

@@ -62,7 +62,7 @@ export const getStaticProps = async (ctx: any) => {
     const breadcrumbSize = page?.breadcrumb?.length ?? 0
     const breadcrumb = breadcrumbSize < 2 ? null : page.breadcrumb
     const meta = (new MetaBuilder())
-        .setImage(page.preview)
+        .setImage(page.cover)
         .setTitle(page.title)
         .setDescription(description)
         .build()

pages/collective.tsx

@@ -109,15 +109,13 @@ export const getStaticProps = async (ctx: NextPageContext) => {
     const data: CardData[] = pages
         .filter(Boolean)
         .map(x => {
-            const image = x.preview.artifacts.large
-
             return {
                 title: x.title,
                 caption: x.description,
                 href: x.url,
                 imageAlt: title,
-                imageSrc: image.src,
-                imageSrcSet: imageSrcSet(image.src, [ImageSize.medium, ImageSize.small])
+                imageSrc: x.cover.src,
+                imageSrcSet: imageSrcSet(x.cover.src, [ImageSize.medium, ImageSize.small])
             }
         })
 

pages/document/[slug].tsx

@@ -1,16 +1,15 @@
-import React from 'react'
 import Head from 'next/head'
 import { App } from 'src/components/App'
-import Document from 'src/components/Document'
+import { File } from 'src/components/File'
 import { Share } from 'src/components/Share'
-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 { IMeta } from 'src/types'
+import { IMeta, FileDefinition } from 'src/types'
 
 type Props = {
-    data: any //(file)
+    data: FileDefinition
     meta: IMeta
 }
 
@@ -26,25 +25,28 @@ const Page: NextPage<Props> = props => {
             showAuthor={true}
         >
             <Head>
-                <title>{props.data.title}</title>
+                <title>{props.data.name}</title>
                 <Meta meta={props.meta} />
             </Head>
-            <Document {...props.data} />
+            <File {...props.data} />
             <Share />
         </App>
     )
 }
 
 export const getStaticProps = async (ctx: any) => {
-    const id = ctx.params.slug
-    const data = await requestGet(createApiUrl(`/api/files/${id}`), {})
+    const slug = ctx.params.slug
+    const data = await requestGet<FileDefinition>(createApiUrl(`/api/files/${slug}`), null)
+    const meta = (new MetaBuilder())
+        .setImage(data.cover)
+        .setTitle(data.name)
+        .setDescription(data.name)
+        .build()
 
     return {
         props: {
             data,
-            meta: meta({
-                // title: file.meta,
-            })
+            meta,
         }
     }
 }

pages/index.tsx

@@ -20,7 +20,7 @@ const Index: NextPage<IProps> = props => {
         title: item.title,
         featured: item.featured,
         date: new Date(item.date),
-        coverSrc: item.coverSrc,
+        coverSrc: item.cover?.src,
     }))
 
     return (

src/components/Document.js

@@ -1,23 +0,0 @@
-const React = require('react')
-const {ext, size} = require('../lib/file')
-const {titleCase} = require('../lib/string')
-
-const Document = ({title, url, imageUrl, fileUrl, fileName, fileSize}) => (
-	<div className="document">
-		<div className="document__image">
-			<a href={fileUrl} target="_blank" className="invisible">
-				<img src={imageUrl} alt={title}/>
-			</a>
-		</div>
-
-		<div className="document__file">
-			<span>{titleCase(title)}</span>
-		</div>
-
-		<div className="document__file-info">
-			<a href={fileUrl} target="_blank">{ext(fileName)} ({size(fileSize)})</a>
-		</div>
-	</div>
-)
-
-module.exports = Document

src/components/File/index.tsx

@@ -0,0 +1,25 @@
+import { FileDefinition } from 'src/types'
+import { ext, size } from 'src/lib/file'
+import { titleCase } from 'src/lib/string'
+
+export const File: React.SFC<FileDefinition> = props => (
+    <div className="document">
+        <h1>{titleCase(props.name)}</h1>
+
+        {!props.cover?.src ? null : (
+            <div className="document__image">
+                <a href={props.file.src} target="_blank" className="invisible">
+                    <img src={props.cover.src} alt={props.name} />
+                </a>
+            </div>
+        )}
+
+        <div className="document__file">
+            <span>{titleCase(props.name)}</span>
+        </div>
+
+        <div className="document__file-info">
+            <a href={props.file.src} target="_blank">{ext(props.file.name)} ({size(props.file.size)})</a>
+        </div>
+    </div>
+)

src/lib/meta.ts

@@ -66,11 +66,10 @@ export class MetaBuilder {
             return null
         }
 
-        const artifact = this.image.artifacts.fb
         return {
-            image: artifact.src,
-            imageWidth: artifact.width,
-            imageHeight: artifact.height,
+            image: this.image.src,
+            imageWidth: this.image.width,
+            imageHeight: this.image.height,
         }
     }
 }

src/rest.ts

@@ -27,7 +27,7 @@ export async function getPagesCardsByTags(tags: string[]): Promise<PageCardDto[]
         'title',
         'featured',
         'date',
-        'coverSrc'
+        'cover'
     ]
 
     const items = await getPagesByTags<PageCardDto>(tags, { fields, skip, limit, sortBy: '-date' })

src/types.ts

@@ -21,7 +21,20 @@ export type PageCardDto = {
     title: string
     featured: boolean
     date: string
-    coverSrc: string
+    cover?: ImageDefinition
+}
+
+export type FileDefinition = {
+    url: string
+    slug: string
+    name: string
+    cover?: ImageDefinition
+    file: {
+        name: string
+        size: string
+        type: string
+        src: string
+    }
 }
 
 export interface IPage {
@@ -30,7 +43,7 @@ export interface IPage {
     url: string
     data: string
     date: string
-    preview: ImageDefinition
+    cover: ImageDefinition
     description: string
     tokens: any[]
     tags: ITag[]
@@ -96,14 +109,14 @@ export type ImageArtifact = {
 }
 
 export type ImageDefinition = {
-    file: string
-    hash: string
-    artifacts: {
-        original: ImageArtifact
-        large?: ImageArtifact
-        big?: ImageArtifact
-        medium?: ImageArtifact
-        small?: ImageArtifact
-        fb?: ImageArtifact
-    }
+    width: number
+    height: number
+    src: string
+ 
+    // file: string
+    // hash: string
+    // artifacts: {
+    //     original: ImageArtifact
+    //     large?: ImageArtifact
+    // }
 }