mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45:41 +00:00
Changed article layout on home/writing pages
This commit is contained in:
parent
8ac2804674
commit
33fe6df320
@ -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>
|
||||
|
@ -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),
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
</>
|
||||
|
Loading…
Reference in New Issue
Block a user