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 = {
|
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>
|
||||||
|
@ -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),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
Loading…
Reference in New Issue
Block a user