Changed project page banner

Naapperas · Dec 25, 2023 · 8ad014a · 8ad014a
1 parent d628541
commit 8ad014a
Show file tree

Hide file tree

Showing 11 changed files with 1,173 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,9 +10,14 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/check": "^0.3.4",
     "@astrojs/tailwind": "^5.0.4",
     "astro": "^4.0.7",
     "astro-icon": "^0.8.2",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.3"
+  },
+  "devDependencies": {
+    "@astrojs/ts-plugin": "^1.3.1"
   }
 }
diff --git a/src/components/Project/AcademicInfo.astro b/src/components/Project/AcademicInfo.astro
@@ -21,20 +21,29 @@ const mapSemesterOrdinal = (
 };
 ---
 
-<section class="">
-    <h2 class="">Academic info</h2>
-    <div class="pl-3">
+<section class="flex flex-col gap-1">
+    <h2 class="font-bold text-xl">Academic info:</h2>
+    <div class="">
         <p class="">
-            Course: {academicData.course.fullName}{" "}
+            <span class="font-bold">Course</span>: {
+                academicData.course.fullName
+            }{" "}
             <span class="">({academicData.course.code})</span>
         </p>
         <p class="">
-            {academicData.course.year} -{" "}
+            <span class="font-bold">Year</span>:
+            {academicData.course.year}
+        </p>
+        <p>
+            <span class="font-bold">Semester</span>:
             {`${mapSemesterOrdinal(academicData.course.semester)} semester`}
         </p>
         {
             academicData.marks !== undefined ? (
-                <p class="">Grade: {academicData.marks}/20</p>
+                <p class="">
+                    <span class="font-bold">Grade</span>: {academicData.marks}
+                    /20
+                </p>
             ) : null
         }
     </div>

diff --git a/src/components/Project/Banner.astro b/src/components/Project/Banner.astro
@@ -0,0 +1,54 @@
+---
+import { Image } from "astro:assets";
+import type { CollectionEntry } from "astro:content";
+import Icon from "../Icons/Icon.astro";
+
+// Make this so alt is required if bannerImage is present
+export interface Props {
+    bannerImage: CollectionEntry<"project">["data"]["previewImage"];
+    deployment?: CollectionEntry<"project">["data"]["deployment"];
+    alt?: string;
+}
+
+const { bannerImage, alt, deployment } = Astro.props;
+---
+
+<div class="relative group flex md:w-2/3">
+    {
+        bannerImage ? (
+            <>
+                <Image
+                    class="md:object-cover md:object-left"
+                    src={bannerImage}
+                    alt={alt ?? null}
+                />
+                {deployment && (
+                    <div class="invisible group-hover:visible flex absolute z-40 w-full h-full top-0 bg-color-background-light bg-opacity-50 justify-center items-center">
+                        <a href={deployment.url}>
+                            <Icon
+                                pack="tabler"
+                                name="external-link"
+                                iconClasses={["w-20", "h-20"]}
+                            />
+                        </a>
+                    </div>
+                )}
+            </>
+        ) : (
+            <>
+                {deployment && (
+                    <div class="flex flex-col absolute z-40 w-full h-full top-0 bg-color-background-light bg-opacity-50 justify-center items-center">
+                        <p>Click the link to navigate to the website.</p>
+                        <a href={deployment.url}>
+                            <Icon
+                                pack="tabler"
+                                name="external-link"
+                                iconClasses={["w-20", "h-20"]}
+                            />
+                        </a>
+                    </div>
+                )}
+            </>
+        )
+    }
+</div>
diff --git a/src/components/Project/Members.astro b/src/components/Project/Members.astro
@@ -9,24 +9,24 @@ export interface Props {
 const { members } = Astro.props;
 ---
 
-<section class="">
-  <h2 class="">Other people that developed this project:</h2>
-  <ul class="flex flex-col gap-2 pl-3">
+<section class="flex flex-col gap-1">
+  <h2 class="font-bold text-xl">Other people that developed this project:</h2>
+  <ul class="flex flex-col gap-2">
     {
       members.map(({ githubUrl, name }) => (
         <li class="inline-flex items-center gap-1">
           {githubUrl ? (
             <>
-              <Github iconClasses={["w-6 h-6"]} />
+              <Github iconClasses={["w-8 h-8"]} />
               <a
                 href={githubUrl}
-                class="hover:underline hover:underline-offset-2"
+                class="hover:underline hover:underline-offset-2 text-lg"
               >
                 {name}
               </a>
             </>
           ) : (
-            <p class="">{name}</p>
+            <p class="text-lg">{name}</p>
           )}
         </li>
       ))

diff --git a/src/components/Project/TechStack/Simple.astro b/src/components/Project/TechStack/Simple.astro
@@ -8,8 +8,8 @@ export interface Props {
 const { techStack } = Astro.props;
 ---
 
-<h2 class="text-lg">Technologies used:</h2>
-<ul class="technology-list flex gap-3">
+<h2 class="text-xl font-bold text-center">Technologies used:</h2>
+<ul class="flex gap-5 justify-between">
     {
         techStack.map((tech) => (
             <li class="p-1 inline-flex items-center">

diff --git a/src/components/Project/TechStack/index.astro b/src/components/Project/TechStack/index.astro
@@ -11,12 +11,12 @@ export interface Props {
 const { techStack } = Astro.props;
 ---
 
-<section class="project-technologies">
+<section class="self-center flex flex-col gap-2">
     {
         Array.isArray(techStack) ? (
             <Simple techStack={techStack} />
         ) : (
             <Detailed techStack={techStack} />
         )
     }
-</section>
+</section>
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -1,6 +1,9 @@
 import { defineCollection, z, type ImageFunction } from 'astro:content';
 
-const techSchema = z.string();
+import { type IconTags, icons } from '../components/Icons/index.astro';
+
+const [firstTag, ...tags] = Object.keys(icons) as (keyof typeof icons)[]
+const techSchema = z.enum([firstTag, ...tags]);
 
 export type Tech = z.infer<typeof techSchema>;
 

diff --git a/src/content/project/atrellado.md b/src/content/project/atrellado.md
@@ -17,7 +17,6 @@ techStack:
   - "laravel"
   - "vite"
   - "typescript"
-  - "Blade"
   - "postgresql"
   - "php"
 otherMembers:

diff --git a/src/pages/projects/[project].astro b/src/pages/projects/[project].astro
@@ -1,13 +1,12 @@
 ---
 import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
 import { getCollection } from "astro:content";
-import { Image } from "astro:assets";
-
 import Layout from "../../layouts/Content.astro";
 
 import TechStack from "../../components/Project/TechStack/index.astro";
 import Members from "../../components/Project/Members.astro";
 import AcademicInfo from "../../components/Project/AcademicInfo.astro";
+import Banner from "../../components/Project/Banner.astro";
 
 export const getStaticPaths = (async () => {
   const projects = await getCollection("project");
@@ -20,37 +19,37 @@ export const getStaticPaths = (async () => {
 
 export type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
-const { entry: projectMetada } = Astro.props;
-
-const project = projectMetada.data;
+const {
+  entry: { data: project },
+} = Astro.props;
 ---
 
 <Layout title={`Project - ${project.name}`} bgColor="bg-color-background-light">
-  {
-    project.previewImage ? (
-      <Image class="" src={project.previewImage} alt={project.name} />
-    ) : (
-      <p>Boas</p>
-    )
-  }
-  <section class="px-10n">
-    <header class="">
-      <h1 class="">{project.name}</h1>
-      <p class="">{project.description}</p>
-    </header>
-    {
-      project.academicData || project.otherMembers ? (
-        <section class="flex justify-around">
-          {project.academicData ? (
-            <AcademicInfo academicData={project.academicData} />
-          ) : null}
-          {project.otherMembers ? (
-            <Members members={project.otherMembers} />
-          ) : null}
-        </section>
-      ) : null
-    }
-
-    {project.techStack ? <TechStack techStack={project.techStack} /> : null}
-  </section>
+  <div class="flex flex-col flex-1 md:flex-row">
+    <Banner
+      bannerImage={project.previewImage}
+      alt={project.name}
+      deployment={project.deployment}
+    />
+    <section class="px-10 py-2 md:w-1/3 md:flex md:flex-col md:justify-between">
+      <header class="flex flex-col gap-3">
+        <h1 class="font-bold text-3xl">{project.name}</h1>
+        <p class="">{project.description}</p>
+      </header>
+      {
+        project.academicData || project.otherMembers ? (
+          <>
+            {project.academicData ? (
+              <AcademicInfo academicData={project.academicData} />
+            ) : null}
+            {project.otherMembers ? (
+              <Members members={project.otherMembers} />
+            ) : null}
+          </>
+        ) : null
+      }
+
+      {project.techStack ? <TechStack techStack={project.techStack} /> : null}
+    </section>
+  </div>
 </Layout>
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,3 +1,11 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx":"preserve",
+    "plugins": [
+      {
+        "name": "@astrojs/ts-plugin"
+      }
+    ]
+  }
 }