refactor: move to content collection - portfolio

hrgui · Apr 7, 2024 · 3ff9f62 · 3ff9f62
1 parent cb97b4c
commit 3ff9f62
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 14 deletions.
diff --git a/.astro/types.d.ts b/.astro/types.d.ts
@@ -131,6 +131,64 @@ declare module "astro:content" {
     >;
 
   type ContentEntryMap = {
+    portfolio: {
+      "angryBirds.md": {
+        id: "angryBirds.md";
+        slug: "angryBirds";
+        body: string;
+        collection: "portfolio";
+        data: InferEntrySchema<"portfolio">;
+      } & { render(): Render[".md"] };
+      "chord-charts.md": {
+        id: "chord-charts.md";
+        slug: "chord-charts";
+        body: string;
+        collection: "portfolio";
+        data: InferEntrySchema<"portfolio">;
+      } & { render(): Render[".md"] };
+      "imaginary-pet-shop.md": {
+        id: "imaginary-pet-shop.md";
+        slug: "imaginary-pet-shop";
+        body: string;
+        collection: "portfolio";
+        data: InferEntrySchema<"portfolio">;
+      } & { render(): Render[".md"] };
+      "infinite-scroll-demo.md": {
+        id: "infinite-scroll-demo.md";
+        slug: "infinite-scroll-demo";
+        body: string;
+        collection: "portfolio";
+        data: InferEntrySchema<"portfolio">;
+      } & { render(): Render[".md"] };
+      "kirby.md": {
+        id: "kirby.md";
+        slug: "kirby";
+        body: string;
+        collection: "portfolio";
+        data: InferEntrySchema<"portfolio">;
+      } & { render(): Render[".md"] };
+      "tips.md": {
+        id: "tips.md";
+        slug: "tips";
+        body: string;
+        collection: "portfolio";
+        data: InferEntrySchema<"portfolio">;
+      } & { render(): Render[".md"] };
+      "viterbi.md": {
+        id: "viterbi.md";
+        slug: "viterbi";
+        body: string;
+        collection: "portfolio";
+        data: InferEntrySchema<"portfolio">;
+      } & { render(): Render[".md"] };
+      "vkey.md": {
+        id: "vkey.md";
+        slug: "vkey";
+        body: string;
+        collection: "portfolio";
+        data: InferEntrySchema<"portfolio">;
+      } & { render(): Render[".md"] };
+    };
     posts: {
       "apollo-client-testing-gotchas.md": {
         id: "apollo-client-testing-gotchas.md";

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -10,7 +10,49 @@ const postsCollection = defineCollection({
     hidden: z.boolean().optional(),
   }),
 });
+
+const portfolioItemsCollection = defineCollection({
+  type: "content",
+  schema: z.object({
+    date: z.string().optional(),
+    title: z.string().optional(),
+    category: z.string().optional(),
+    githubUrl: z.string().optional(),
+    images: z
+      .array(
+        z.object({
+          src: z.string(),
+          thumbnail: z.string(),
+        })
+      )
+      .optional(),
+    demoUrl: z.string().optional(),
+    url: z.string().optional(),
+    urls: z.array(z.string()).optional(),
+    thumbnail: z.string().optional(),
+    iframe: z
+      .object({
+        scrolling: z.string(),
+        height: z.number().optional(),
+        src: z.string(),
+        // Define the shape of PortfolioIframe
+      })
+      .optional(), // Assuming PortfolioIframe is another Zod schema
+    whatIDid: z.array(z.string()).optional(),
+    technologiesUsed: z
+      .array(
+        z.object({
+          type: z.string(),
+          value: z.number(),
+          // Define the shape of PortfolioTechnology
+        })
+      )
+      .optional(), // Assuming PortfolioTechnology is another Zod schema
+  }),
+});
+
 // Export a single `collections` object to register your collection(s)
 export const collections = {
   posts: postsCollection,
+  portfolio: portfolioItemsCollection,
 };
diff --git a/src/pages/portfolio/angryBirds.md → src/content/portfolio/angryBirds.md b/src/pages/portfolio/angryBirds.md → src/content/portfolio/angryBirds.md
@@ -1,6 +1,5 @@
 ---
 {
-  layout: "../../layouts/portfolio.astro",
   title: "Red (Angry Birds) (CSS3 Challenge)",
   slug: "angryBirds",
   thumbnail: "/images/portfolio/angryBirds.webp",

diff --git a/src/pages/portfolio/chord-charts.md → src/content/portfolio/chord-charts.md b/src/pages/portfolio/chord-charts.md → src/content/portfolio/chord-charts.md
@@ -1,6 +1,5 @@
 ---
 {
-  layout: "../../layouts/portfolio.astro",
   category: "github",
   title: "chord-charts",
   slug: "chord-charts",

diff --git a/src/pages/portfolio/imaginary-pet-shop.md → src/content/portfolio/imaginary-pet-shop.md b/src/pages/portfolio/imaginary-pet-shop.md → src/content/portfolio/imaginary-pet-shop.md
@@ -1,6 +1,5 @@
 ---
 {
-  layout: "../../layouts/portfolio.astro",
   category: "github",
   title: "imaginary-pet-shop",
   slug: "imaginary-pet-shop",

diff --git a/src/pages/portfolio/infinite-scroll-demo.md → ...content/portfolio/infinite-scroll-demo.md b/src/pages/portfolio/infinite-scroll-demo.md → ...content/portfolio/infinite-scroll-demo.md
@@ -1,6 +1,5 @@
 ---
 {
-  layout: "../../layouts/portfolio.astro",
   category: "github",
   title: "infinite-scroll-demo",
   slug: "infinite-scroll-demo",

diff --git a/src/pages/portfolio/kirby.md → src/content/portfolio/kirby.md b/src/pages/portfolio/kirby.md → src/content/portfolio/kirby.md
@@ -1,6 +1,5 @@
 ---
 {
-  layout: "../../layouts/portfolio.astro",
   title: "Kirby (CSS3 Challenge)",
   slug: "kirby",
   category: "github",

diff --git a/src/pages/portfolio/tips.md → src/content/portfolio/tips.md b/src/pages/portfolio/tips.md → src/content/portfolio/tips.md
@@ -1,6 +1,5 @@
 ---
 {
-  layout: "../../layouts/portfolio.astro",
   category: "github",
   title: "tips",
   slug: "tips",

diff --git a/src/pages/portfolio/viterbi.md → src/content/portfolio/viterbi.md b/src/pages/portfolio/viterbi.md → src/content/portfolio/viterbi.md
@@ -1,6 +1,5 @@
 ---
 {
-  layout: "../../layouts/portfolio.astro",
   category: "work",
   title: "USC Viterbi School of Engineering",
   slug: "viterbi",

diff --git a/src/pages/portfolio/vkey.md → src/content/portfolio/vkey.md b/src/pages/portfolio/vkey.md → src/content/portfolio/vkey.md
@@ -1,6 +1,5 @@
 ---
 {
-  layout: "../../layouts/portfolio.astro",
   title: "VKEY",
   slug: "vkey",
   category: "work",

diff --git a/src/layouts/portfolio.astro b/src/layouts/portfolio.astro
@@ -4,12 +4,14 @@ import "styles/globals.css";
 import AppLayout from "~/components/app/AppLayout";
 import PortfolioEntry from "~/components/portfolio/PortfolioEntry";
 import Head from "~/layouts/components/Head.astro";
+import { PortfolioFrontmatter } from "~/types/frontmatter";
 
 const { title, description, content } = Astro.props;
 
 export type Props = {
   title?: string;
   description?: string;
+  content?: PortfolioFrontmatter;
 };
 ---
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import { getCollection } from "astro:content";
 import DefaultPageLayout from "layouts/default.astro";
 import { PortfolioFrontmatter } from "types/frontmatter";
 import { Education } from "~/components/app/home/sections/Education";
@@ -9,9 +10,7 @@ import { PortfolioShowcase } from "~/components/app/portfolio/PortfolioShowcase"
 
 const description = `Hi! I'm Harman. I am a developer who loves to make cool and awesome web applications that rock the world.`;
 
-const portfolioItems = await Astro.glob<PortfolioFrontmatter>(
-  "./portfolio/*.md"
-);
+const portfolioItems = await getCollection("portfolio");
 ---
 
 <DefaultPageLayout description={description}>
@@ -20,6 +19,8 @@ const portfolioItems = await Astro.glob<PortfolioFrontmatter>(
   <TechnicalSkills />
   <Education />
   <PortfolioShowcase
-    items={portfolioItems.map((portfolioItem) => portfolioItem.frontmatter)}
+    items={portfolioItems.map(
+      (item) => ({ ...item.data, slug: item.slug } as PortfolioFrontmatter)
+    )}
   />
 </DefaultPageLayout>
diff --git a/src/pages/portfolio/[...slug].astro b/src/pages/portfolio/[...slug].astro
@@ -0,0 +1,21 @@
+---
+import { getCollection } from "astro:content";
+import MarkdownPostLayout from "../../layouts/portfolio.astro";
+import { PortfolioFrontmatter } from "~/types/frontmatter";
+
+export async function getStaticPaths() {
+  const blogEntries = await getCollection("portfolio");
+  return blogEntries.map((entry) => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+const { title } = entry.data;
+---
+
+<MarkdownPostLayout title={title} content={entry.data as PortfolioFrontmatter}>
+  <Content />
+</MarkdownPostLayout>
diff --git a/src/pages/portfolio/index.astro b/src/pages/portfolio/index.astro
@@ -1,4 +1,5 @@
 ---
+import { getCollection } from "astro:content";
 import DefaultPageLayout from "layouts/default.astro";
 import { PortfolioFrontmatter } from "types/frontmatter";
 import PortfolioShowcase from "~/components/app/portfolio/PortfolioShowcase";
@@ -7,7 +8,7 @@ import SubPageHeader from "~/components/layout/SubPageHeader";
 const title = `Portfolio`;
 const description = `View Harman's showcase of work as a developer.`;
 
-const items = await Astro.glob<PortfolioFrontmatter>("./*.md");
+const items = await getCollection("portfolio");
 ---
 
 <DefaultPageLayout title={title} description={description}>
@@ -19,6 +20,8 @@ const items = await Astro.glob<PortfolioFrontmatter>("./*.md");
   </SubPageHeader>
   <PortfolioShowcase
     hasTitle={false}
-    items={items.map((item) => item.frontmatter)}
+    items={items.map(
+      (item) => ({ ...item.data, slug: item.slug } as PortfolioFrontmatter)
+    )}
   />
 </DefaultPageLayout>