feat: display images with doc items(blogs)

ccontrols · May 16, 2021 · 33d7c45 · 33d7c45
1 parent 249ce07
commit 33d7c45
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 21 deletions.
diff --git a/core/core/src/document.ts b/core/core/src/document.ts
@@ -318,7 +318,7 @@ export const dateToLocalString = (date?: Date): string =>
  */
 export type DocInfo = Pick<
   Document,
-  'title' | 'description' | 'type' | 'tags' | 'date' | 'author'
+  'title' | 'description' | 'type' | 'tags' | 'date' | 'author' | 'image'
 > & {
   /**
    * following fields are useful for highlighting search results

diff --git a/ui/app/src/DocumentsList/DocumentsList.tsx b/ui/app/src/DocumentsList/DocumentsList.tsx
@@ -49,6 +49,7 @@ export const DocumentsList: FC<DocumentsListProps> = ({ pages, type }) => {
         {pages.map(doc => (
           <Box as="li" key={doc.title} variant="documentslist.listitem">
             <DocumentItem
+              showImage={true}
               item={{
                 ...doc,
                 link: getDocPath(doc.type || defDocType, doc, store, doc.title),

diff --git a/ui/blocks/src/DocumentItem/DocumentItem.tsx b/ui/blocks/src/DocumentItem/DocumentItem.tsx
@@ -1,10 +1,9 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box, Text, BoxProps } from 'theme-ui';
+import { jsx, Box, Text, BoxProps, Image, Theme } from 'theme-ui';
 import {
   defDocType,
   dateToLocalString,
-  SearchFields,
   DocInfo,
 } from '@component-controls/core';
 import { Subtitle, Markdown, Link } from '@component-controls/components';
@@ -16,16 +15,18 @@ export interface DocumentItemProps {
    * document to be displayed
    */
   item: DocInfo;
+
   /**
-   * when search results, the search fields can be highlighted
+   * if true, will also display the doc image
    */
-  highlight?: SearchFields;
+  showImage?: boolean;
 }
 /**
  * displays a single doument item
  */
 export const DocumentItem: FC<DocumentItemProps & BoxProps> = ({
   item,
+  showImage,
   ...rest
 }) => {
   const {
@@ -39,6 +40,7 @@ export const DocumentItem: FC<DocumentItemProps & BoxProps> = ({
     author,
     authorLink,
     link,
+    image,
   } = item;
   const dateNode = date ? (
     <Box variant="documentitem.info.inner">
@@ -69,26 +71,35 @@ export const DocumentItem: FC<DocumentItemProps & BoxProps> = ({
   ) : null;
   return (
     <Box variant="documentitem.container" {...rest}>
-      <Box variant="documentitem.titlerow">
+      {showImage && image && (
         <Link href={link}>
-          <Subtitle
-            sx={{ mr: 1 }}
-            dangerouslySetInnerHTML={{ __html: title }}
-          />
+          <Box variant="documentitem.imageBox">
+            <Image src={image} alt={title} variant="documentitem.image" />
+          </Box>
         </Link>
-        <PageTypeTag type={type} raw={rawType} />
-      </Box>
-      {description && typeof description === 'string' ? (
-        <Markdown>{description}</Markdown>
-      ) : (
-        description
       )}
-      {(tagsNode || dateNode) && (
-        <Box variant="documentitem.info.container">
-          {dateNode || <div />}
-          {tagsNode}
+      <Box variant="documentitem.content">
+        <Box variant="documentitem.titlerow">
+          <Link href={link}>
+            <Subtitle
+              sx={{ mr: 1 }}
+              dangerouslySetInnerHTML={{ __html: title }}
+            />
+          </Link>
+          <PageTypeTag type={type} raw={rawType} />
         </Box>
-      )}
+        {description && typeof description === 'string' ? (
+          <Markdown>{description}</Markdown>
+        ) : (
+          description
+        )}
+        {(tagsNode || dateNode) && (
+          <Box variant="documentitem.info.container">
+            {dateNode || <div />}
+            {tagsNode}
+          </Box>
+        )}
+      </Box>
     </Box>
   );
 };
diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -1199,6 +1199,24 @@ export const theme: ControlsTheme = {
   },
   documentitem: {
     container: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    imageBox: {
+      width: '180px',
+      height: '180px',
+      py: 2,
+      pr: 3,
+      display: 'flex',
+      alignItems: 'center',
+    },
+    image: {
+      objectFit: 'cover',
+      border: (t: Theme): string => ` 1px solid  ${t.colors?.shadow}`,
+    },
+    content: {
+      flex: '1',
       display: 'flex',
       flexDirection: 'column',
       py: 2,