marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portfolio): add field notes section bridging to blog

Browse Source
This commit is contained in:
kbot
2026-07-06 20:33:10 -05:00
parent c1a5d2ea0d
commit ed94a782a3
1 changed files with 33 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
components/portfolio/FieldNotes.tsx
View File

@@ -26,45 +26,49 @@ export function FieldNotes({ posts }: FieldNotesProps) {
className="border-y border-blacksite-line bg-blacksite-bg2 px-4 py-24 text-blacksite-text sm:px-6 lg:px-8" className="border-y border-blacksite-line bg-blacksite-bg2 px-4 py-24 text-blacksite-text sm:px-6 lg:px-8"
> >
<div className="mx-auto max-w-7xl"> <div className="mx-auto max-w-7xl">
<div className="mb-10 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"> <div className="mb-10 max-w-4xl">
<div> <div>
<p className="section-label mb-3">FIELD NOTES /.04</p> <p className="section-label mb-3">FIELD NOTES /.04</p>
<h2 className="font-display text-4xl font-semibold tracking-[-0.04em] text-blacksite-text sm:text-6xl"> <h2 className="font-display text-4xl font-semibold tracking-[-0.04em] text-blacksite-text sm:text-6xl">
Blog telemetry from the archive. Blog telemetry from the archive.
</h2> </h2>
</div> </div>
<Link
href="/blog/"
className="section-label w-fit rounded-md border border-blacksite-line px-4 py-3 !text-blacksite-text transition-colors hover:border-signal-cyan/70 hover:!text-signal-cyan focus-visible:outline-signal-cyan"
>
All field notes →
</Link>
</div> </div>
{recentPosts.length > 0 ? ( {recentPosts.length > 0 ? (
<div className="divide-y divide-blacksite-line border-y border-blacksite-line"> <>
{recentPosts.map((post) => ( <div className="divide-y divide-blacksite-line border-y border-blacksite-line">
<Link {recentPosts.map((post) => (
key={post.slug} <Link
href={`/blog/${post.slug}/`} key={post.slug}
className="group grid gap-3 px-0 py-6 transition-colors hover:bg-blacksite-surface/55 focus-visible:outline-signal-cyan sm:grid-cols-[12rem_minmax(0,1fr)] sm:px-4" href={`/blog/${post.slug}/`}
> className="group grid gap-3 px-0 py-6 transition-colors hover:bg-blacksite-surface/55 focus-visible:outline-signal-cyan sm:grid-cols-[12rem_minmax(0,1fr)] sm:px-4"
<time className="section-label pt-1" dateTime={post.date}> >
{formatPostDate(post.date)} <time className="section-label pt-1" dateTime={post.date}>
</time> {formatPostDate(post.date)}
<span className="min-w-0"> </time>
<span className="block font-display text-2xl font-medium tracking-[-0.03em] text-blacksite-text transition-colors group-hover:text-signal-cyan group-focus-visible:text-signal-cyan"> <span className="min-w-0">
{post.title} <span className="block font-display text-2xl font-medium tracking-[-0.03em] text-blacksite-text transition-colors group-hover:text-signal-cyan group-focus-visible:text-signal-cyan">
</span> {post.title}
{post.excerpt && (
<span className="mt-2 block max-w-3xl text-sm leading-6 text-blacksite-muted">
{post.excerpt}
</span> </span>
)} {post.excerpt && (
</span> <span className="mt-2 block max-w-3xl text-sm leading-6 text-blacksite-muted">
{post.excerpt}
</span>
)}
</span>
</Link>
))}
</div>
<div className="mt-8 flex justify-end">
<Link
href="/blog/"
className="section-label rounded-md border border-blacksite-line px-4 py-3 !text-blacksite-text transition-colors hover:border-signal-cyan/70 hover:!text-signal-cyan focus-visible:outline-signal-cyan"
>
All field notes →
</Link> </Link>
))} </div>
</div> </>
) : ( ) : (
<div className="border border-dashed border-blacksite-line bg-blacksite-surface/45 p-8 sm:p-10"> <div className="border border-dashed border-blacksite-line bg-blacksite-surface/45 p-8 sm:p-10">
<p className="section-label mb-5 !text-blacksite-text"> <p className="section-label mb-5 !text-blacksite-text">
@@ -74,7 +78,7 @@ export function FieldNotes({ posts }: FieldNotesProps) {
href="/blog/" href="/blog/"
className="section-label inline-flex rounded-md border border-blacksite-line px-4 py-3 !text-blacksite-text transition-colors hover:border-signal-cyan/70 hover:!text-signal-cyan focus-visible:outline-signal-cyan" className="section-label inline-flex rounded-md border border-blacksite-line px-4 py-3 !text-blacksite-text transition-colors hover:border-signal-cyan/70 hover:!text-signal-cyan focus-visible:outline-signal-cyan"
> >
Visit archive → All field notes →
</Link> </Link>
</div> </div>
)} )}