r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-22 22:55:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Changed article layout on home/writing pages

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Card.tsx
View File

@ -6,7 +6,6 @@ import {Props} from 'types'
type Card = { type Card = {
as?: ElementType as?: ElementType
className?: string className?: string
small?: boolean
children: ReactNode children: ReactNode
} }
@ -54,12 +53,11 @@ function ChevronRightIcon(props: Props) {
export function Card({ export function Card({
as: Component = 'div', as: Component = 'div',
className, className,
small,
children children
}: Card) { }: Card) {
return ( return (
<Component <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} {children}
</Component> </Component>

29
pages/index.tsx
View File

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

28
pages/writing/index.tsx
View File

@ -1,28 +1,27 @@
import React from 'react'
import {GetStaticProps} from 'next' import {GetStaticProps} from 'next'
import Head from 'next/head' import Head from 'next/head'
import {Card} from '@/components/Card' import {Card} from '@/components/Card'
import {SimpleLayout} from '@/components/layouts/SimpleLayout' import {SimpleLayout} from '@/components/layouts/SimpleLayout'
import {Views} from '@/components/Views'
import {Subscribe} from '@/components/Subscribe'
import {getAllArticles} from '@/lib/getAllArticles' import {getAllArticles} from '@/lib/getAllArticles'
import {formatDate} from '@/lib/formatDate' import {formatDate} from '@/lib/formatDate'
import {Article} from 'types' import {Article} from 'types'
function Article({article}: { article: Article }) { function Article({article}: { article: Article }) {
return ( return (
<article> <article>
<Card small={true}> <Card>
<Card.Title href={`/writing/${article.slug}`}> <Card.Title href={`/writing/${article.slug}`}>
{article.title} {article.title}
</Card.Title> </Card.Title>
<Card.Eyebrow <p className="flex order-first space-x-1 z-10 mb-3">
as="time" <Card.Eyebrow as="time" dateTime={article.date} decorate={false}>
dateTime={article.date} {formatDate(article.date)}
decorate={false} </Card.Eyebrow>
className="flex-shrink-0 md:order-last mb-3 md:mb-0" <Views slug={article.slug} shouldUpdateViews={false} className="text-sm text-zinc-500 dark:text-zinc-400"/>
> </p>
{formatDate(article.date)}
</Card.Eyebrow>
</Card> </Card>
</article> </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." 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" gradient="bg-gradient-to-r from-pink-500 to-violet-500"
> >
<div> <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"> <div className="max-w-3xl space-y-16 mt-6">
{articles.map((article) => ( {articles.map((article) => (
<Article key={article.slug} article={article}/> <Article key={article.slug} article={article}/>
))} ))}
</div> </div>
<div className="lg:pl-16 xl:pl-24">
<Subscribe/>
</div>
</div> </div>
</SimpleLayout> </SimpleLayout>
</> </>