Changed article layout on home/writing pages

This commit is contained in:
r-freeman 2023-02-04 23:12:00 +00:00
parent 8ac2804674
commit 33fe6df320
3 changed files with 31 additions and 30 deletions

View File

@ -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>

View File

@ -1,3 +1,4 @@
import React from 'react'
import Head from 'next/head'
import {GetStaticProps} from 'next'
import {Card} from '@/components/Card'
@ -18,19 +19,19 @@ import {Article} from 'types'
function Article(article: Article) {
return (
<Card as="article">
<Card.Title href={`/writing/${article.slug}`}>
{article.title}
</Card.Title>
<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.Description>{article.description}</Card.Description>
<Card.Cta>Read more</Card.Cta>
</Card>
<article>
<Card>
<Card.Title href={`/writing/${article.slug}`}>
{article.title}
</Card.Title>
<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>
)
}
@ -147,7 +148,7 @@ export const getStaticProps: GetStaticProps = async () => {
return {
props: {
articles: (await getAllArticles())
.slice(0, 1)
.slice(0, 3)
.map(({component, ...meta}) => meta),
}
}

View File

@ -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"
>
{formatDate(article.date)}
</Card.Eyebrow>
<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>
</>