jack/jackmerrill.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: build errors

Browse Source
This commit is contained in:
Jack Merrill 2023-06-14 22:50:42 -05:00
parent f4318dcda8
commit ac779e3fd4
No known key found for this signature in database
GPG Key ID: B8E3CDF57DD80CA5
3 changed files with 53 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/blog/[id]/page.tsx
View File

@ -20,13 +20,13 @@ export default async function Page({
slug: q.slug("slug"), slug: q.slug("slug"),
publishedAt: q.date(), publishedAt: q.date(),
content: q.string(), content: q.string(),
mainImage: q("mainImage").grabOne$("asset->url", q.string()), mainImage: q("mainImage").grabOne$("asset->url", q.string().optional()),
}) })
.slice(0, 1); .slice(0, 1);
const post = schema.parse(await client.fetch(query))[0]; const post = schema.parse(await client.fetch(query))[0];
const r = post.mainImage.match(/(?<width>\d+)x(?<height>\d+)/); const r = post.mainImage?.match(/(?<width>\d+)x(?<height>\d+)/);
return ( return (
<div className="flex flex-col items-center justify-center min-h-screen py-2"> <div className="flex flex-col items-center justify-center min-h-screen py-2">
@ -44,13 +44,15 @@ export default async function Page({
</h2> </h2>
</div> </div>
</div> </div>
<Image {post.mainImage && (
className="object-cover w-full h-full" <Image
src={post.mainImage} className="object-cover w-full h-full"
alt={post.title} src={post.mainImage}
width={parseInt(r?.groups?.width ?? "400")} alt={post.title}
height={parseInt(r?.groups?.height ?? "400")} width={parseInt(r?.groups?.width ?? "400")}
/> height={parseInt(r?.groups?.height ?? "400")}
/>
)}
</div> </div>
</div> </div>

45
src/app/blog/page.tsx
View File

@ -13,11 +13,12 @@ export default async function Page() {
subtitle: q.string(), subtitle: q.string(),
slug: q.slug("slug"), slug: q.slug("slug"),
publishedAt: q.date(), publishedAt: q.date(),
mainImage: q("mainImage").grabOne$("asset->url", q.string()), mainImage: q("mainImage").grabOne$("asset->url", q.string().optional()),
categories: q("categories") categories: q("categories")
.filter() .filter()
.deref() .deref()
.grabOne$("title", q.string()), .grabOne$("title", q.string())
.nullable(),
}); });
const posts = schema.parse(await client.fetch(query)); const posts = schema.parse(await client.fetch(query));
@ -38,7 +39,7 @@ export default async function Page() {
<div className="dark:bg-zinc-900"> <div className="dark:bg-zinc-900">
<section className="grid grid-cols-2 gap-4 py-8 mx-auto max-w-7xl"> <section className="grid grid-cols-2 gap-4 py-8 mx-auto max-w-7xl">
{posts.map((post) => { {posts.map((post) => {
const r = post.mainImage.match(/(?<width>\d+)x(?<height>\d+)/); const r = post.mainImage?.match(/(?<width>\d+)x(?<height>\d+)/);
return ( return (
<Link <Link
@ -46,26 +47,30 @@ export default async function Page() {
className="flex flex-col items-center justify-center pb-4 space-y-4 overflow-hidden transition-all duration-150 rounded-md dark:bg-zinc-800 hover:scale-105" className="flex flex-col items-center justify-center pb-4 space-y-4 overflow-hidden transition-all duration-150 rounded-md dark:bg-zinc-800 hover:scale-105"
href={`/blog/${post.slug}`} href={`/blog/${post.slug}`}
> >
<Image {post.mainImage && (
src={post.mainImage} <Image
alt={post.title} src={post.mainImage}
width={parseInt(r?.groups?.width ?? "400")} alt={post.title}
height={parseInt(r?.groups?.height ?? "400")} width={parseInt(r?.groups?.width ?? "400")}
/> height={parseInt(r?.groups?.height ?? "400")}
/>
)}
<h3 className="text-xl font-semibold">{post.title}</h3> <h3 className="text-xl font-semibold">{post.title}</h3>
<p className="text-lg">{post.subtitle}</p> <p className="text-lg">{post.subtitle}</p>
<p className="text-md text-zinc-400"> {post.categories && post.categories.length > 0 && (
Categories: <p className="text-md text-zinc-400">
{post.categories.map((category) => ( Categories:
<span {post.categories.map((category) => (
key={category} <span
className="px-2 py-1 ml-2 text-sm font-semibold text-white bg-indigo-500 rounded-md" key={category}
> className="px-2 py-1 ml-2 text-sm font-semibold text-white bg-indigo-500 rounded-md"
{category} >
</span> {category}
))} </span>
</p> ))}
</p>
)}
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<time <time

31
src/app/projects/page.tsx
View File

@ -17,7 +17,8 @@ export default async function Page() {
categories: q("categories") categories: q("categories")
.filter() .filter()
.deref() .deref()
.grabOne$("title", q.string()), .grabOne$("title", q.string())
.nullable(),
}); });
const projects = projectSchema.parse(await client.fetch(projectQuery)); const projects = projectSchema.parse(await client.fetch(projectQuery));
@ -59,19 +60,21 @@ export default async function Page() {
<p className="text-lg">{project.subtitle}</p> <p className="text-lg">{project.subtitle}</p>
</div> </div>
<p className="flex-grow"> <div className="flex-grow">
<div className="flex flex-wrap flex-grow gap-1 text-md dark:text-zinc-400 text-slate-600"> {project.categories && project.categories.length > 0 && (
<span className="w-full">Categories:</span> <div className="flex flex-wrap flex-grow gap-1 text-md dark:text-zinc-400 text-slate-600">
{project.categories.map((category) => ( <span className="w-full">Categories:</span>
<span {project.categories.map((category) => (
key={category} <span
className="px-2 py-1 text-sm font-semibold text-white bg-indigo-500 rounded-md" key={category}
> className="px-2 py-1 text-sm font-semibold text-white bg-indigo-500 rounded-md"
{category} >
</span> {category}
))} </span>
</div> ))}
</p> </div>
)}
</div>
<div className="flex items-center mt-auto space-x-2"> <div className="flex items-center mt-auto space-x-2">
<time <time