Styled project pages (for now)

src/components/Icons/Gitlab.astro

@@ -0,0 +1,10 @@
+---
+import Icon, { type Props as IconProps } from "./Icon.astro";
+
+type Props = Pick<IconProps, "iconClasses">;
+
+const { iconClasses } = Astro.props;
+---
+
+<!-- We cannot use the 'logos' pack because of the icon colors -->
+<Icon pack="mdi" name="gitlab" iconClasses={iconClasses} title="Github" />

src/components/Icons/index.astro

@@ -1,5 +1,6 @@
 ---
 import Github from "./Github.astro";
+import Gitlab from "./Gitlab.astro";
 import Laravel from "./Laravel.astro";
 import Close from "./Close.astro";
 import Hamburger from "./Hamburger.astro";
@@ -18,6 +19,7 @@ import type { Props as IconProps } from "./Icon.astro";
 
 export const icons = {
   github: Github,
+  gitlab: Gitlab,
   laravel: Laravel,
   close: Close,
   menu: Hamburger,

src/components/Project/Banner.astro

@@ -13,7 +13,7 @@ export interface Props {
 const { bannerImage, alt, deployment } = Astro.props;
 ---
 
-<div class="relative group flex md:w-2/3">
+<div class="relative group flex lg:w-2/3">
     {
         bannerImage ? (
             <>

src/components/Project/UpstreamLink.astro

@@ -0,0 +1,20 @@
+---
+import type { CollectionEntry } from "astro:content";
+
+import Github from "../Icons/Github.astro";
+import Gitlab from "../Icons/Gitlab.astro";
+
+export interface Props {
+    upstreamLink: CollectionEntry<"project">["data"]["upstreamLink"];
+}
+
+const { upstreamLink } = Astro.props;
+---
+
+{
+    upstreamLink.indexOf("github") != -1 ? (
+        <Github />
+    ) : upstreamLink.indexOf("gitlab") != -1 ? (
+        <Gitlab />
+    ) : null
+}

src/content/config.ts

@@ -2,7 +2,7 @@ import { defineCollection, z, type ImageFunction } from 'astro:content';
 
 import { icons } from '../components/Icons/index.astro';
 
-const [firstTag, ...tags] = typedKeys(icons);
+const [firstTag, ...tags] = Object.keys(icons) as (keyof typeof icons)[]
 const techSchema = z.enum([firstTag, ...tags]);
 
 export type Tech = z.infer<typeof techSchema>;

src/env.d.ts

@@ -1,12 +1,2 @@
 /// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />
-
-/**
- * Returns the keys of an object, correctly typed.
- * 
- * @param obj the object whose keys we want to get
- * @returns the keys of the object
- */
-function typedKeys<K>(obj: K): (keyof K)[] {
-    return Object.keys(obj) as (keyof typeof obj)[];
-}
+/// <reference types="astro/client" />

src/pages/projects/[project].astro

@@ -7,6 +7,7 @@ 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";
+import UpstreamLink from "../../components/Project/UpstreamLink.astro";
 
 export const getStaticPaths = (async () => {
   const projects = await getCollection("project");
@@ -25,15 +26,25 @@ const {
 ---
 
 <Layout title={`Project - ${project.name}`} bgColor="bg-color-background-light">
-  <div class="flex flex-col flex-1 md:flex-row">
+  <div class="flex flex-col flex-1 lg: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">
+    <section
+      class="px-10 py-2 mt-5 lg:mt-0 lg:w-1/3 gap-5 lg:gap-0 flex flex-col lg:justify-between"
+    >
       <header class="flex flex-col gap-3">
-        <h1 class="font-bold text-3xl">{project.name}</h1>
+        <h1 class="font-bold text-3xl inline-flex items-center gap-1">
+          <a
+            class="hover:underline hover:underline-offset-2"
+            href={project.upstreamLink}
+          >
+            {project.name}
+          </a>
+          <UpstreamLink upstreamLink={project.upstreamLink} />
+        </h1>
         <p class="">{project.description}</p>
       </header>
       {