use cover instead of preview of coverSrc

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