16 projects description

.vscode/settings.json

@@ -15,5 +15,8 @@
   "explorer.fileNesting.expand": false,
   "explorer.fileNesting.patterns": {
     "package.json": "*"
+  },
+  "[astro]": {
+    "editor.defaultFormatter": "astro-build.astro-vscode"
   }
 }

package.json

@@ -13,4 +13,4 @@
     "prettier": "3.3.2",
     "prettier-plugin-astro": "^0.14.0"
   }
-}
+}

strapi/src/api/project-description/content-types/project-description/schema.json

@@ -0,0 +1,18 @@
+{
+  "kind": "singleType",
+  "collectionName": "project_descriptions",
+  "info": {
+    "singularName": "project-description",
+    "pluralName": "project-descriptions",
+    "displayName": "Project Description"
+  },
+  "options": {
+    "draftAndPublish": true
+  },
+  "pluginOptions": {},
+  "attributes": {
+    "Text": {
+      "type": "blocks"
+    }
+  }
+}

strapi/src/api/project-description/controllers/project-description.ts

@@ -0,0 +1,7 @@
+/**
+ * project-description controller
+ */
+
+import { factories } from '@strapi/strapi'
+
+export default factories.createCoreController('api::project-description.project-description');

strapi/src/api/project-description/routes/project-description.ts

@@ -0,0 +1,7 @@
+/**
+ * project-description router
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreRouter('api::project-description.project-description');

strapi/src/api/project-description/services/project-description.ts

@@ -0,0 +1,7 @@
+/**
+ * project-description service
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreService('api::project-description.project-description');

strapi/src/api/project/content-types/project/schema.json

@@ -0,0 +1,48 @@
+{
+  "kind": "collectionType",
+  "collectionName": "projects",
+  "info": {
+    "singularName": "project",
+    "pluralName": "projects",
+    "displayName": "Project"
+  },
+  "options": {
+    "draftAndPublish": true
+  },
+  "pluginOptions": {},
+  "attributes": {
+    "Name": {
+      "type": "string",
+      "required": true
+    },
+    "Description": {
+      "type": "blocks",
+      "required": true
+    },
+    "Images": {
+      "allowedTypes": [
+        "images"
+      ],
+      "type": "media",
+      "multiple": true,
+      "required": true
+    },
+    "technologies": {
+      "type": "relation",
+      "relation": "manyToMany",
+      "target": "api::technology.technology",
+      "inversedBy": "projects"
+    },
+    "Demo": {
+      "type": "component",
+      "repeatable": true,
+      "component": "link.link"
+    },
+    "Acronym": {
+      "type": "string",
+      "required": true,
+      "unique": true,
+      "maxLength": 8
+    }
+  }
+}

strapi/src/api/project/controllers/project.ts

@@ -0,0 +1,7 @@
+/**
+ * project controller
+ */
+
+import { factories } from '@strapi/strapi'
+
+export default factories.createCoreController('api::project.project');

strapi/src/api/project/routes/project.ts

@@ -0,0 +1,7 @@
+/**
+ * project router
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreRouter('api::project.project');

strapi/src/api/project/services/project.ts

@@ -0,0 +1,7 @@
+/**
+ * project service
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreService('api::project.project');

strapi/src/api/technology/content-types/technology/schema.json

@@ -0,0 +1,26 @@
+{
+  "kind": "collectionType",
+  "collectionName": "technologies",
+  "info": {
+    "singularName": "technology",
+    "pluralName": "technologies",
+    "displayName": "Technology"
+  },
+  "options": {
+    "draftAndPublish": true
+  },
+  "pluginOptions": {},
+  "attributes": {
+    "Name": {
+      "type": "string",
+      "required": true,
+      "unique": true
+    },
+    "projects": {
+      "type": "relation",
+      "relation": "manyToMany",
+      "target": "api::project.project",
+      "mappedBy": "technologies"
+    }
+  }
+}

strapi/src/api/technology/controllers/technology.ts

@@ -0,0 +1,7 @@
+/**
+ * technology controller
+ */
+
+import { factories } from '@strapi/strapi'
+
+export default factories.createCoreController('api::technology.technology');

strapi/src/api/technology/routes/technology.ts

@@ -0,0 +1,7 @@
+/**
+ * technology router
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreRouter('api::technology.technology');

strapi/src/api/technology/services/technology.ts

@@ -0,0 +1,7 @@
+/**
+ * technology service
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreService('api::technology.technology');

strapi/src/api/test-collection/content-types/test-collection/schema.json

@@ -0,0 +1,18 @@
+{
+  "kind": "collectionType",
+  "collectionName": "test_collections",
+  "info": {
+    "singularName": "test-collection",
+    "pluralName": "test-collections",
+    "displayName": "test-collection"
+  },
+  "options": {
+    "draftAndPublish": true
+  },
+  "pluginOptions": {},
+  "attributes": {
+    "yuh": {
+      "type": "string"
+    }
+  }
+}

strapi/src/api/test-collection/controllers/test-collection.ts

@@ -0,0 +1,7 @@
+/**
+ * test-collection controller
+ */
+
+import { factories } from '@strapi/strapi'
+
+export default factories.createCoreController('api::test-collection.test-collection');

strapi/src/api/test-collection/routes/test-collection.ts

@@ -0,0 +1,7 @@
+/**
+ * test-collection router
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreRouter('api::test-collection.test-collection');

strapi/src/api/test-collection/services/test-collection.ts

@@ -0,0 +1,7 @@
+/**
+ * test-collection service
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreService('api::test-collection.test-collection');

strapi/tsconfig.json

@@ -13,6 +13,7 @@
     ".tmp/",
     "src/admin/",
     "**/*.test.*",
-    "src/plugins/**"
+    "src/plugins/**",
+    "types/generated/**"
   ]
 }

web/.netlify/deploy/v1/config.json

@@ -1,5 +1 @@
-{
-  "images": {
-    "remote_images": ["https?://wdcc-website\\.fly\\.storage\\.tigris\\.dev/.*"]
-  }
-}
+{"images":{"remote_images":["https?://wdcc-website\\.fly\\.storage\\.tigris\\.dev/.*"]}}

web/package.json

@@ -26,7 +26,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.395.0",
-    "marked": "^12.0.1",
+    "marked": "^13.0.1",
     "marked-shiki": "^1.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

web/src/components/MarkdownComponent.astro

@@ -0,0 +1,6 @@
+---
+import { marked } from "marked";
+const content = marked.parse(Astro.props.content);
+---
+
+<article set:html={content} />

web/src/components/ProjectsCard.astro

@@ -0,0 +1,47 @@
+---
+import { Image } from "astro:assets";
+const { title, description, images, technologies, demoLink, viewDemoLink } =
+  Astro.props;
+
+function truncateDescription(desc: string) {
+  return desc.length > 1500 ? `${desc.substring(0, 1500)}...` : desc;
+}
+---
+
+<div
+  class="mt-5 flex flex-row gap-4 bg-blue-50 rounded-lg shadow-md p-4 border border-gray-200"
+>
+  <div class="w-1/3">
+    {
+      images.map((image: string) => (
+        <Image src={image} alt="project image" width={300} height={200} />
+      ))
+    }
+  </div>
+  <div class="w-2/3 relative">
+    <div class="mb-4 font-bold text-xl">
+      <h3>{title}</h3>
+    </div>
+    <div class="mb-4">
+      <p>{truncateDescription(description)}</p>
+    </div>
+    <div class="mb-4">
+      <h3 class="text-xl font-bold mb-2">Technologies</h3>
+      <ul class="list-disc pl-4">
+        {technologies.map((tech: string) => <li>{tech}</li>)}
+      </ul>
+    </div>
+    <div class="absolute bottom-4 right-4 flex space-x-2">
+      <a
+        href={demoLink}
+        class="border border-darkblue inline-block px-4 py-2 rounded-md bg-white text-darkblue hover:bg-opacity-75"
+        >More Details</a
+      >
+      <a
+        href={viewDemoLink}
+        class="inline-block px-4 py-2 rounded-md bg-darkblue text-white hover:bg-gray-300"
+        >View Demo</a
+      >
+    </div>
+  </div>
+</div>

web/src/global.css

@@ -26,6 +26,8 @@
     --radius: 0.5rem;
     --skyblue: 195, 100%, 90%;
     --skyblue-foreground: 195, 100%, 30%;
+    --darkblue: 217, 85%, 50%; /* HSL representation of #087DF1 */
+    --darkblue-foreground: 217, 85%, 40%; /* Adjusted for foreground, example */
   }
 
   .dark {
@@ -64,7 +66,7 @@
   }
 
   h2 {
-    @apply text-5xl font-extrabold leading-[3.75rem];
+    @apply text-center font-bold leading-[2.7625rem] md:leading-[4.2rem] lg:leading-[5.8rem] text-3xl md:text-4xl lg:text-5xl
   }
 
   h3 {

web/src/pages/projects/index.astro

@@ -0,0 +1,54 @@
+---
+import MarkdownComponent from "@/components/MarkdownComponent.astro";
+import ProjectsCard from "@/components/ProjectsCard.astro";
+import "@/global.css";
+import Layout from "@/layouts/layout.astro";
+import type { Project } from "@/types/types";
+import { extractProjectData } from "@/utils/mapToProjects";
+import fetchApi from "../../lib/strapi";
+const index = await fetchApi<any>({
+  endpoint: "projects?populate=*",
+  wrappedByKey: "data",
+});
+const projectDescription = await fetchApi<any>({
+  endpoint: "project-description?populate=*",
+  wrappedByKey: "data",
+});
+const projects: Project[] = extractProjectData(index);
+console.log(projects);
+const currentYear = new Date().getFullYear();
+const defaultDescription =
+  "**WDCC projects** provides an opportunity for students to apply the knowledge they have learned in courses and workshops in real life situations. Collaborate with other members in a team environment to build a project that will actually be deployed and used by others.";
+---
+
+<Layout
+  title="WDCC"
+  description="The Web Development & Consulting Club @ The University of Auckland"
+>
+  <div class="container">
+    <h2>WDCC Projects</h2>
+    <div class="mt-10">
+      <MarkdownComponent
+        content={projectDescription.attributes.Text[0].children[0].text ??
+          defaultDescription}
+      />
+    </div>
+    <div class="mt-10">
+      <h1 class="font-bold text-xl md:text-2xl lg:text-3xl">
+        Projects {currentYear}
+      </h1>
+    </div>
+    {
+      projects.map((project) => (
+        <ProjectsCard
+          title={project.title}
+          description={project.description}
+          images={project.images}
+          technologies={project.technologies}
+          demoLink={project.demoLink}
+          viewDemoLink={project.viewDemoLink}
+        />
+      ))
+    }
+  </div>
+</Layout>

web/src/types/types.ts

@@ -0,0 +1,9 @@
+export interface Project {
+  id: number;
+  title: string;
+  description: string;
+  images: string[];
+  technologies: string[];
+  demoLink: string;
+  viewDemoLink: string;
+}