implement new project view

components/ProjectGridItem.vue

@@ -1,14 +1,12 @@
 <template>
   <div
-    class="relative bg-white border border-gray-200 rounded-lg overflow-hidden aspect-square hover:shadow-lg transition-shadow duration-200 cursor-pointer"
+    class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow duration-200 cursor-pointer"
   >
-    <div class="absolute top-0 left-0 w-full aspect-video">
+    <div class="relative w-full aspect-square">
       <img :src="imageSrc" :alt="imageAlt" class="w-full h-full object-cover" />
     </div>
 
-    <div
-      class="absolute bottom-0 left-0 w-full bg-white bg-opacity-90 p-4 text-center text-lg font-semibold text-black max-h-[44.75%] overflow-hidden"
-    >
+    <div class="p-4 text-center text-2xl font-semibold text-black line-clamp-2">
       <slot>{{ text }}</slot>
     </div>
   </div>

pages/index.vue

@@ -10,11 +10,11 @@
       <UploadProjectCard />
 
       <ProjectGridItem
-        v-for="project in data"
-        :key="project.id"
+        v-for="project in data.projects"
+        :key="project.slug"
         :imageSrc="project.imageUrl"
-        :imageAlt="project.title"
-        :text="project.title"
+        :imageAlt="project.projectName"
+        :text="project.projectName"
       />
     </div>
   </div>

server/api/projects.get.js

@@ -1,23 +1,24 @@
 import { defineEventHandler } from "h3";
+import { connectDB } from "~~/server/db/mongo";
 
 export default defineEventHandler(async (_) => {
-  const items = [
-    {
-      id: "1",
-      imageUrl: "https://placehold.co/600x400",
-      title: "Sample Project 1",
-    },
-    {
-      id: "2",
-      imageUrl: "https://placehold.co/600x400",
-      title: "Sample 2",
-    },
-    {
-      id: "3",
-      imageUrl: "https://placehold.co/600x400",
-      title: "Sample Project 3",
-    },
-  ];
+  const db = await connectDB();
 
-  return items;
+  const projects = await db
+    .collection("projects_v2")
+    .find()
+    .project({ slug: 1, projectName: 1, _id: 0 })
+    .toArray();
+
+  const response = projects.map((project) => {
+    return {
+      slug: project.slug,
+      projectName: project.projectName,
+      imageUrl: `/api/project/${project.slug}/preview`,
+    };
+  });
+
+  return {
+    projects: response,
+  };
 });

server/api/upload.js

@@ -13,7 +13,7 @@ export default defineEventHandler(async (event) => {
     const slug = standardSlugify(projectName);
 
     const imageField = fields.find((field) => field.name === "image");
-    const imageBase64 = getImageAsBase64(imageField);
+    const imageBuffer = getImageBuffer(imageField);
 
     const dxfFileFields = fields.filter((field) => field.name === "dxf");
     const dxfStrings = getDxfStringArray(dxfFileFields);
@@ -22,7 +22,7 @@ export default defineEventHandler(async (event) => {
     await db.collection("projects_v2").insertOne({
       slug: slug,
       projectName: projectName,
-      image: imageBase64,
+      image: imageBuffer,
       dxf: dxfStrings,
     });
 
@@ -53,7 +53,7 @@ function getProjectName(field) {
   return projectName;
 }
 
-function getImageAsBase64(field) {
+function getImageBuffer(field) {
   const imageBuffer = field?.data;
   if (!imageBuffer) {
     throw createError({
@@ -62,7 +62,7 @@ function getImageAsBase64(field) {
     });
   }
 
-  return imageBuffer.toString("base64");
+  return imageBuffer;
 }
 
 function getDxfStringArray(fields) {