use astro collections
This commit is contained in:
parent
f806365baa
commit
b41404e86b
|
@ -13,7 +13,7 @@ export default defineConfig({
|
||||||
integrations: [tailwind(), react()],
|
integrations: [tailwind(), react()],
|
||||||
output: "hybrid",
|
output: "hybrid",
|
||||||
adapter: vercel({
|
adapter: vercel({
|
||||||
// imageService: true,
|
imageService: true,
|
||||||
webAnalytics: {
|
webAnalytics: {
|
||||||
enabled: true,
|
enabled: true,
|
||||||
},
|
},
|
||||||
|
@ -22,7 +22,7 @@ export default defineConfig({
|
||||||
},
|
},
|
||||||
functionPerRoute: true,
|
functionPerRoute: true,
|
||||||
}),
|
}),
|
||||||
image: {
|
// image: {
|
||||||
service: squooshImageService(),
|
// service: passthroughImageService(),
|
||||||
},
|
// },
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,50 +0,0 @@
|
||||||
---
|
|
||||||
import type { MarkdownInstance } from "astro";
|
|
||||||
import { Image } from "astro:assets";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
post: MarkdownInstance<Record<string, any>>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { post } = Astro.props;
|
|
||||||
const postId = post.url!.split("/")[2];
|
|
||||||
const images = import.meta.glob<{ default: ImageMetadata }>(
|
|
||||||
"/src/assets/img/work/*-thumb.{jpeg,jpg,png,gif}"
|
|
||||||
);
|
|
||||||
|
|
||||||
if (
|
|
||||||
!images[`/src/assets/img/work/${postId}-thumb.png`] &&
|
|
||||||
post.frontmatter.image
|
|
||||||
)
|
|
||||||
throw new Error(
|
|
||||||
`"/src/assets/img/work/${postId}-thumb.png" does not exist in glob: "/src/assets/work/**/*-thumb.{jpeg,jpg,png,gif}"`
|
|
||||||
);
|
|
||||||
---
|
|
||||||
|
|
||||||
<a
|
|
||||||
href={post.url}
|
|
||||||
class="border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex justify-between items-center mb-8"
|
|
||||||
>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<div class="flex flex-row space-x-2">
|
|
||||||
{
|
|
||||||
post.frontmatter.image && (
|
|
||||||
<Image
|
|
||||||
src={images[`/src/assets/img/work/${postId}-thumb.png`]()}
|
|
||||||
class="w-40 h-24 object-contain"
|
|
||||||
alt={post.frontmatter.title}
|
|
||||||
inferSize={true}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
<div class="flex flex-col space-y-1 max-w-96">
|
|
||||||
<h2 class="text-2xl font-bold mb-4">
|
|
||||||
{post.frontmatter.title}
|
|
||||||
</h2>
|
|
||||||
<p>{post.frontmatter.description}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h2 class="text-2xl font-bold mb-4">View →</h2>
|
|
||||||
</a>
|
|
15
src/content/config.ts
Normal file
15
src/content/config.ts
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import { defineCollection, z } from "astro:content";
|
||||||
|
|
||||||
|
const workCollection = defineCollection({
|
||||||
|
schema: ({ image }) =>
|
||||||
|
z.object({
|
||||||
|
title: z.string(),
|
||||||
|
description: z.string(),
|
||||||
|
image: image().optional(),
|
||||||
|
link: z.string().optional(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const collections = {
|
||||||
|
work: workCollection,
|
||||||
|
};
|
|
@ -1,5 +1,4 @@
|
||||||
---
|
---
|
||||||
layout: ../../../components/WorkLayout.astro
|
|
||||||
title: JackNet
|
title: JackNet
|
||||||
description: "My various servers and services I host in my dorm room."
|
description: "My various servers and services I host in my dorm room."
|
||||||
---
|
---
|
|
@ -1,5 +1,4 @@
|
||||||
---
|
---
|
||||||
layout: ../../../components/WorkLayout.astro
|
|
||||||
title: This Website
|
title: This Website
|
||||||
description: "The website you're currently on. Built with Astro, Tailwind CSS, and MDX."
|
description: "The website you're currently on. Built with Astro, Tailwind CSS, and MDX."
|
||||||
image: "thumb.png"
|
image: "thumb.png"
|
Before Width: | Height: | Size: 624 KiB After Width: | Height: | Size: 624 KiB |
|
@ -1,10 +1,29 @@
|
||||||
---
|
---
|
||||||
import { Image } from "astro:assets";
|
import { Image } from "astro:assets";
|
||||||
import Layout from "./Layout.astro";
|
import Layout from "../../../components/Layout.astro";
|
||||||
|
import { getCollection, getEntry } from "astro:content";
|
||||||
|
|
||||||
const { frontmatter } = Astro.props;
|
const { slug } = Astro.params;
|
||||||
|
|
||||||
const postId = frontmatter.url!.split("/")[2];
|
const post = await getEntry("work", slug as string);
|
||||||
|
|
||||||
|
if (!post) {
|
||||||
|
return {
|
||||||
|
status: 404,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const { Content, headings } = await post.render();
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const posts = await getCollection("work");
|
||||||
|
|
||||||
|
return posts.map((post) => ({
|
||||||
|
params: {
|
||||||
|
slug: post.slug,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
|
@ -40,27 +59,23 @@ const postId = frontmatter.url!.split("/")[2];
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{
|
{
|
||||||
frontmatter.image && (
|
post.data.image && (
|
||||||
<div class="col-span-2 border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex justify-between items-center mb-8">
|
<div class="col-span-2 border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex justify-between items-center mb-8">
|
||||||
<Image
|
<Image src={post.data.image} alt={post.data.title} width={960} />
|
||||||
src={import(`/src/assets/img/work/${postId}-thumb.png`)}
|
|
||||||
alt={frontmatter.title}
|
|
||||||
width={960}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
<div class="flex flex-row justify-between items-center col-span-2">
|
<div class="flex flex-row justify-between items-center col-span-2">
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-2xl font-bold">{frontmatter.title}</h2>
|
<h2 class="text-2xl font-bold">{post.data.title}</h2>
|
||||||
<p class="text-lg">{frontmatter.description}</p>
|
<p class="text-lg">{post.data.description}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{
|
{
|
||||||
frontmatter.link && (
|
post.data.link && (
|
||||||
<a
|
<a
|
||||||
href={frontmatter.link}
|
href={post.data.link}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="text-2xl font-bold cursor-pointer text-white bg-blue-500 rounded-md px-4 py-2 items-center flex flex-row gap-x-2"
|
class="text-2xl font-bold cursor-pointer text-white bg-blue-500 rounded-md px-4 py-2 items-center flex flex-row gap-x-2"
|
||||||
>
|
>
|
||||||
|
@ -87,6 +102,6 @@ const postId = frontmatter.url!.split("/")[2];
|
||||||
<article
|
<article
|
||||||
class="col-span-2 pb-12 prose max-w-full lg:prose-xl prose-h1:font-bold prose-h2:font-bold prose-invert break-words"
|
class="col-span-2 pb-12 prose max-w-full lg:prose-xl prose-h1:font-bold prose-h2:font-bold prose-invert break-words"
|
||||||
>
|
>
|
||||||
<slot />
|
<Content />
|
||||||
</article>
|
</article>
|
||||||
</Layout>
|
</Layout>
|
|
@ -2,8 +2,9 @@
|
||||||
import { Image } from "astro:assets";
|
import { Image } from "astro:assets";
|
||||||
import Layout from "../../components/Layout.astro";
|
import Layout from "../../components/Layout.astro";
|
||||||
import WorkCard from "@components/WorkCard.astro";
|
import WorkCard from "@components/WorkCard.astro";
|
||||||
|
import { getCollection } from "astro:content";
|
||||||
|
|
||||||
const posts = await Astro.glob("./**/*.md");
|
const posts = await getCollection("work");
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
|
@ -44,6 +45,32 @@ const posts = await Astro.glob("./**/*.md");
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-span-2">
|
<div class="col-span-2">
|
||||||
{posts.map((post) => <WorkCard post={post} />)}
|
{
|
||||||
|
posts.map((post) => (
|
||||||
|
<a
|
||||||
|
href={`/work/${post.slug}`}
|
||||||
|
class="border border-[#1E1B22] rounded-3xl p-8 gap-y-5 flex justify-between items-center mb-8"
|
||||||
|
>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<div class="flex flex-row space-x-2">
|
||||||
|
{post.data.image && (
|
||||||
|
<Image
|
||||||
|
src={post.data.image}
|
||||||
|
class="w-40 h-24 object-contain"
|
||||||
|
alt={post.data.title}
|
||||||
|
inferSize={true}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div class="flex flex-col space-y-1 max-w-96">
|
||||||
|
<h2 class="text-2xl font-bold mb-4">{post.data.title}</h2>
|
||||||
|
<p>{post.data.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-2xl font-bold mb-4">View →</h2>
|
||||||
|
</a>
|
||||||
|
))
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user