change post list layout

src/components/LinkCard.tsx

@@ -5,23 +5,22 @@ import {
   CardContent,
   Typography,
 } from '@material-ui/core';
-import { markdownToText, theme } from '@zoonk/utils';
+import { isInternal, markdownToText, theme } from '@zoonk/utils';
 
 interface LinkCardProps {
   site: Post.Link;
 }
 
 const LinkCard = ({ site }: LinkCardProps) => {
   const { description, image, title, url } = site;
-  const isInternal = url.includes('zoonk.org') || url.startsWith('/');
 
   return (
     <Card variant="outlined">
       <CardActionArea
         component="a"
         href={url}
-        target={isInternal ? '_self' : '_blank'}
-        rel={isInternal ? undefined : 'noopener noreferrer'}
+        target={isInternal(url) ? '_self' : '_blank'}
+        rel={isInternal(url) ? undefined : 'noopener noreferrer'}
       >
         <CardContent style={{ display: 'flex' }}>
           {image && (

src/components/LinkView.tsx

@@ -1,4 +1,5 @@
 import { Link } from '@material-ui/core';
+import { isInternal } from '@zoonk/utils';
 
 interface LinkViewProps {
   children: React.ReactNode;
@@ -9,12 +10,10 @@ interface LinkViewProps {
  * Custom link renderer for markdown viewer.
  */
 const LinkView = ({ children, href }: LinkViewProps) => {
-  const isInternal = href.includes('zoonk.org') || href.startsWith('/');
-
   return (
     <Link
       href={href}
-      target={isInternal ? '_self' : '_blank'}
+      target={isInternal(href) ? '_self' : '_blank'}
       rel="noopener noreferrer"
     >
       {children}

src/components/PostList.tsx

@@ -1,4 +1,4 @@
-import { List } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import { Post } from '@zoonk/models';
 import PostListItem from './PostListItem';
 
@@ -11,15 +11,13 @@ interface PostListProps {
  */
 const PostList = ({ items }: PostListProps) => {
   return (
-    <List disablePadding>
-      {items.map((item, index) => (
-        <PostListItem
-          key={item.id}
-          divider={index !== items.length - 1}
-          item={item}
-        />
+    <Grid container spacing={1}>
+      {items.map((item) => (
+        <Grid item xs={12} key={item.id}>
+          <PostListItem item={item} />
+        </Grid>
       ))}
-    </List>
+    </Grid>
   );
 };
 

src/components/PostListItem.tsx

@@ -1,51 +1,85 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+import { Post } from '@zoonk/models';
+import NextLink from 'next/link';
 import {
-  Avatar,
+  Card,
+  CardContent,
   Link,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
+  makeStyles,
   Typography,
 } from '@material-ui/core';
-import NextLink from 'next/link';
-import { Post } from '@zoonk/models';
-import { getPostImage, theme } from '@zoonk/utils';
-import PostIcon from './PostIcon';
+import {
+  getDomainFromUrl,
+  getPostImage,
+  isInternal,
+  markdownToText,
+  theme,
+} from '@zoonk/utils';
 import PostListMeta from './PostListMeta';
 
+const useStyles = makeStyles(() => ({
+  content: {
+    '&:last-child': {
+      paddingBottom: 16,
+    },
+  },
+}));
+
 interface PostListItemProps {
-  divider?: boolean;
   item: Post.Get;
 }
 
-/**
- * Display a single post as a list item.
- */
-const PostListItem = ({ divider, item }: PostListItemProps) => {
-  const { category, content, cover, title } = item;
+const PostListItem = ({ item }: PostListItemProps) => {
+  const classes = useStyles();
+  const { content, cover, id, sites, title } = item;
   const image = cover || getPostImage(content);
 
   return (
-    <ListItem alignItems="flex-start" divider={divider} disableGutters>
-      <ListItemAvatar>
-        <Avatar
-          src={image || undefined}
-          style={{ backgroundColor: theme.palette.primary.main }}
-        >
-          <PostIcon category={category} />
-        </Avatar>
-      </ListItemAvatar>
-      <ListItemText
-        disableTypography
-        primary={
-          <NextLink href="/posts/[id]" as={`/posts/${item.id}`} passHref>
+    <Card variant="outlined">
+      <CardContent style={{ display: 'flex' }} className={classes.content}>
+        {image && (
+          <NextLink href="/posts/[id]" as={`/posts/${id}`} passHref>
+            <a
+              style={{
+                background: `url(${image}) no-repeat center center`,
+                backgroundSize: 'cover',
+                width: '100px',
+                minWidth: '100px',
+                marginRight: theme.spacing(1),
+              }}
+            />
+          </NextLink>
+        )}
+
+        <div style={{ minWidth: 0 }}>
+          <NextLink href="/posts/[id]" as={`/posts/${id}`} passHref>
             <Link color="textPrimary">
-              <Typography style={{ fontSize: '1.15rem' }}>{title}</Typography>
+              <Typography gutterBottom={sites.length > 0} variant="h6" noWrap>
+                {title}
+              </Typography>
             </Link>
           </NextLink>
-        }
-        secondary={<PostListMeta post={item} />}
-      />
-    </ListItem>
+
+          {sites.slice(0, 3).map(({ url }) => (
+            <Link
+              key={url}
+              href={url}
+              target={isInternal(url) ? '_self' : '_blank'}
+              rel={isInternal(url) ? undefined : 'noopener noreferrer'}
+              style={{ marginRight: theme.spacing(1) }}
+            >
+              {getDomainFromUrl(url)}
+            </Link>
+          ))}
+
+          <Typography variant="body2" gutterBottom>
+            {markdownToText(content?.slice(0, 200) || '')}
+          </Typography>
+
+          <PostListMeta post={item} />
+        </div>
+      </CardContent>
+    </Card>
   );
 };
 

src/utils/links.ts

@@ -22,3 +22,10 @@ export const getDomainFromUrl = (url: string): string => {
     return 'unknown';
   }
 };
+
+/**
+ * Check if an URL is internal or external.
+ */
+export const isInternal = (url: string): boolean => {
+  return url.includes('zoonk.org') || url.startsWith('/');
+};