Changed article layout on home/writing pages

components/Card.tsx

@@ -6,7 +6,6 @@ import {Props} from 'types'
 type Card = {
     as?: ElementType
     className?: string
-    small?: boolean
     children: ReactNode
 }
 
@@ -54,12 +53,11 @@ function ChevronRightIcon(props: Props) {
 export function Card({
                          as: Component = 'div',
                          className,
-                         small,
                          children
                      }: Card) {
     return (
         <Component
-            className={clsx(className, 'group relative flex flex-col items-baseline', small && 'md:flex-row justify-between')}
+            className={clsx(className, 'group relative flex flex-col items-baseline')}
         >
             {children}
         </Component>

pages/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import Head from 'next/head'
 import {GetStaticProps} from 'next'
 import {Card} from '@/components/Card'
@@ -18,7 +19,8 @@ import {Article} from 'types'
 
 function Article(article: Article) {
     return (
-        <Card as="article">
+        <article>
+            <Card>
                 <Card.Title href={`/writing/${article.slug}`}>
                     {article.title}
                 </Card.Title>
@@ -28,9 +30,8 @@ function Article(article: Article) {
                     </Card.Eyebrow>
                     <Views slug={article.slug} shouldUpdateViews={false} className="text-sm text-zinc-500 dark:text-zinc-400"/>
                 </p>
-            <Card.Description>{article.description}</Card.Description>
-            <Card.Cta>Read more</Card.Cta>
             </Card>
+        </article>
     )
 }
 
@@ -147,7 +148,7 @@ export const getStaticProps: GetStaticProps = async () => {
     return {
         props: {
             articles: (await getAllArticles())
-                .slice(0, 1)
+                .slice(0, 3)
                 .map(({component, ...meta}) => meta),
         }
     }

pages/writing/index.tsx

@@ -1,28 +1,27 @@
+import React from 'react'
 import {GetStaticProps} from 'next'
 import Head from 'next/head'
-
 import {Card} from '@/components/Card'
 import {SimpleLayout} from '@/components/layouts/SimpleLayout'
+import {Views} from '@/components/Views'
+import {Subscribe} from '@/components/Subscribe'
 import {getAllArticles} from '@/lib/getAllArticles'
 import {formatDate} from '@/lib/formatDate'
-
 import {Article} from 'types'
 
 function Article({article}: { article: Article }) {
     return (
         <article>
-            <Card small={true}>
+            <Card>
                 <Card.Title href={`/writing/${article.slug}`}>
                     {article.title}
                 </Card.Title>
-                <Card.Eyebrow
-                    as="time"
-                    dateTime={article.date}
-                    decorate={false}
-                    className="flex-shrink-0 md:order-last mb-3 md:mb-0"
-                >
+                <p className="flex order-first space-x-1 z-10 mb-3">
+                    <Card.Eyebrow as="time" dateTime={article.date} decorate={false}>
                         {formatDate(article.date)}
                     </Card.Eyebrow>
+                    <Views slug={article.slug} shouldUpdateViews={false} className="text-sm text-zinc-500 dark:text-zinc-400"/>
+                </p>
             </Card>
         </article>
     )
@@ -51,12 +50,15 @@ export default function ArticlesIndex({articles}: { articles: Article[] }) {
                 intro="All of my long-form thoughts on software engineering, and more, displayed in chronological order."
                 gradient="bg-gradient-to-r from-pink-500 to-violet-500"
             >
-                <div>
-                    <div className="max-w-3xl space-y-16">
+                <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
+                    <div className="max-w-3xl space-y-16 mt-6">
                         {articles.map((article) => (
                             <Article key={article.slug} article={article}/>
                         ))}
                     </div>
+                    <div className="lg:pl-16 xl:pl-24">
+                        <Subscribe/>
+                    </div>
                 </div>
             </SimpleLayout>
         </>