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

Changed layout of writing page

Browse Source
This commit is contained in:
r-freeman 2023-01-05 20:03:09 +00:00
parent 46be576d86
commit 596e364aca
3 changed files with 81 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/components/Card.jsx
View File

@ -2,93 +2,94 @@ import Link from 'next/link'
import clsx from 'clsx' import clsx from 'clsx'
function ChevronRightIcon(props) { function ChevronRightIcon(props) {
return ( return (
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}> <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}>
<path <path
d="M6.75 5.75 9.25 8l-2.5 2.25" d="M6.75 5.75 9.25 8l-2.5 2.25"
strokeWidth="1.5" strokeWidth="1.5"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
) )
} }
export function Card({ as: Component = 'div', className, children }) { export function Card({as: Component = 'div', className, small, children}) {
return ( return (
<Component <Component
className={clsx(className, 'group relative flex flex-col items-start')} className={clsx(className, 'group relative flex flex-col items-start', small && 'md:flex-row justify-between')}
> >
{children} {children}
</Component> </Component>
) )
} }
Card.Link = function CardLink({ children, ...props }) { Card.Link = function CardLink({children, ...props}) {
return ( return (
<> <>
<div className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" /> <div
<Link {...props}> className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl"/>
<span className="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" /> <Link {...props}>
<span className="relative z-10">{children}</span> <span className="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl"/>
</Link> <span className="relative z-10">{children}</span>
</> </Link>
) </>
)
} }
Card.Title = function CardTitle({ as: Component = 'h2', href, children }) { Card.Title = function CardTitle({as: Component = 'h2', href, children}) {
return ( return (
<Component className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"> <Component className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
{href ? <Card.Link href={href}>{children}</Card.Link> : children} {href ? <Card.Link href={href}>{children}</Card.Link> : children}
</Component> </Component>
) )
} }
Card.Description = function CardDescription({ children }) { Card.Description = function CardDescription({children}) {
return ( return (
<p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400"> <p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
{children} {children}
</p> </p>
) )
} }
Card.Cta = function CardCta({ children }) { Card.Cta = function CardCta({children}) {
return ( return (
<div <div
aria-hidden="true" aria-hidden="true"
className="relative z-10 mt-4 flex items-center text-sm font-medium text-zinc-400 group-hover:text-indigo-500 dark:text-zinc-200" className="relative z-10 mt-4 flex items-center text-sm font-medium text-zinc-400 group-hover:text-indigo-500 dark:text-zinc-200"
> >
{children} {children}
<ChevronRightIcon className="ml-1 h-4 w-4 stroke-current" /> <ChevronRightIcon className="ml-1 h-4 w-4 stroke-current"/>
</div> </div>
) )
} }
Card.Eyebrow = function CardEyebrow({ Card.Eyebrow = function CardEyebrow({
as: Component = 'p', as: Component = 'p',
decorate = false, decorate = false,
className, className,
children, children,
...props ...props
}) { }) {
return ( return (
<Component <Component
className={clsx( className={clsx(
className, className,
'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-500 dark:text-zinc-400', 'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-500 dark:text-zinc-400',
decorate && 'pl-3.5' decorate && 'pl-3.5'
)} )}
{...props} {...props}
>
{decorate && (
<span
className="absolute inset-y-0 left-0 flex items-center"
aria-hidden="true"
> >
<span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" /> {decorate && (
<span
className="absolute inset-y-0 left-0 flex items-center"
aria-hidden="true"
>
<span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"/>
</span> </span>
)} )}
{children} {children}
</Component> </Component>
) )
} }

2
src/pages/index.jsx
View File

@ -245,7 +245,7 @@ export async function getStaticProps() {
return { return {
props: { props: {
articles: (await getAllArticles()) articles: (await getAllArticles())
.slice(0, 2) .slice(0, 1)
.map(({component, ...meta}) => meta), .map(({component, ...meta}) => meta),
}, },
} }

19
src/pages/writing/index.jsx
View File

@ -7,29 +7,20 @@ import {formatDate} from '@/lib/formatDate'
function Article({article}) { function Article({article}) {
return ( return (
<article className="md:grid md:grid-cols-4 md:items-baseline"> <article>
<Card className="md:col-span-3"> <Card small={true}>
<Card.Title href={`/writing/${article.slug}`}> <Card.Title href={`/writing/${article.slug}`}>
{article.title} {article.title}
</Card.Title> </Card.Title>
<Card.Eyebrow <Card.Eyebrow
as="time" as="time"
dateTime={article.date} dateTime={article.date}
className="md:hidden"
decorate={false} decorate={false}
className="flex-shrink-0 order-last md:ml-4"
> >
{formatDate(article.date)} {formatDate(article.date)}
</Card.Eyebrow> </Card.Eyebrow>
<Card.Description>{article.description}</Card.Description>
<Card.Cta>Read article</Card.Cta>
</Card> </Card>
<Card.Eyebrow
as="time"
dateTime={article.date}
className="mt-1 hidden md:block"
>
{formatDate(article.date)}
</Card.Eyebrow>
</article> </article>
) )
} }
@ -57,8 +48,8 @@ export default function ArticlesIndex({articles}) {
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 className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40"> <div>
<div className="flex max-w-3xl flex-col space-y-16"> <div className="max-w-3xl space-y-16">
{articles.map((article) => ( {articles.map((article) => (
<Article key={article.slug} article={article}/> <Article key={article.slug} article={article}/>
))} ))}