feat: header title, course section, add students

src/components/CourseCard.astro

@@ -1,5 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
+import { campi } from '../content/config';
 import type { CollectionEntry } from 'astro:content';
 
 export interface Props {
@@ -26,23 +27,35 @@ const {
     data: {
       name,
       addresses,
+      abbreviation,
+      campus,
       level: { compact },
     },
   },
-} = Astro.props;
+}: Props = Astro.props;
 
 const links = icons
-  .filter((link) => addresses[link.name])
-  .map((link) => ({
-    ...link,
-    url: addresses[link.name],
+  .filter((icon) => addresses && addresses[icon.name as keyof typeof addresses])
+  .map((icon) => ({
+    ...icon,
+    url: addresses && addresses[icon.name as keyof typeof addresses],
   }));
 ---
 
 <div class="subject-card rounded-md overflow-hidden shadow-lg bg-gray-100 p-4">
-  <a href={addresses.homepage} target="_blank">
-    <h1 class="text-lg font-bold mb-4">{compact} em {name}</h1>
+  <a href={addresses?.homepage} target="_blank">
+    <h1 class="text-lg font-bold mb-4">
+      {compact} em {name}
+    </h1>
   </a>
+  <p class="mb-4">
+    <span
+      class="text-sm text-gray-700 bg-white my-2 mr-1 py-1 px-2 rounded-full"
+    >
+      {campi[campus]}
+    </span>
+  </p>
+
   <div class="flex justify-start pb-2">
     {
       links.map((link) => (

src/components/Header.astro

@@ -1,21 +1,24 @@
 ---
+import { string } from 'astro/zod';
+
 export interface MenuItem {
   name: string;
   link: string;
 }
 
 export interface Props {
   menu: MenuItem[];
+  title: string;
 }
 
-const { menu } = Astro.props;
+const { menu, title }: Props = Astro.props;
 ---
 
 <header
-  class="bg-[url('/imgs/ifpb-jp.png')] bg-[#0B3314]/70 bg-cover bg-blend-multiply h-[30vh] min-h-[300px] px-8"
+  class="flex flex-col items-center justify-center relative bg-[url('/imgs/ifpb-jp.png')] bg-[#0B3314]/70 bg-cover bg-blend-multiply h-[30vh] min-h-[300px] px-8"
 >
   <div
-    class="container lg:max-w-screen-lg mx-auto py-4 flex justify-between items-center"
+    class="container lg:max-w-screen-lg mx-auto py-4 flex justify-between items-center absolute top-0"
   >
     <a href="/">
       <img src="/imgs/ifpb-logo.svg" alt="Logo do IFPB" class="w-7" />
@@ -30,4 +33,5 @@ const { menu } = Astro.props;
       }
     </ul>
   </div>
+  <h1 class="text-4xl text-white">{title}</h1>
 </header>

src/components/StudentCard.astro

@@ -54,7 +54,7 @@ const links = icons
     </a>
   </figure>
   <div>
-    <div class="px-6 py-2">
+    <div class="px-4 py-2">
       <div class="font-bold text-sm">{student.data.name.compact}</div>
     </div>
     <div class="flex justify-center pb-2">

src/components/SubjectCard.astro

@@ -3,6 +3,7 @@ import { getCollection } from 'astro:content';
 import Icon from 'astro-icon';
 
 import type { CollectionEntry } from 'astro:content';
+import { campi } from '../content/config';
 
 export interface Props {
   subject: CollectionEntry<'subjects'>;
@@ -14,9 +15,9 @@ const {
   subject: {
     data: { name, description, course, professors, addresses },
   },
-} = Astro.props;
+}: Props = Astro.props;
 
-const link = addresses?.homepage || addresses.repository;
+const link = addresses?.homepage || addresses?.repository;
 
 const getCourseByAbbreviation = (abbreviation: string) => {
   return courses.find((course) => course?.data?.abbreviation === abbreviation);
@@ -25,26 +26,43 @@ const getCourseByAbbreviation = (abbreviation: string) => {
 
 <div class="relative bg-gray-100 mb-4 p-4 border-l-8 border-green-900">
   <a href={link}>
-    <h2 class="text-2xl font-bold mb-4 pr-2">{name}</h2>
+    <h2 class="text-2xl font-bold inline-block mb-4 pr-2">{name}</h2>
   </a>
   <h2 class="text-lg font-semibold mb-1">Curso</h2>
   <p class="mb-4">
     {getCourseByAbbreviation(course)?.data?.level?.full} em{' '}
     {getCourseByAbbreviation(course)?.data?.name}
-    <span class="uppercase">
-      ({getCourseByAbbreviation(course)?.data?.campus})
-    </span>
+  </p>
+  <h2 class="text-lg font-semibold mb-1">Campus</h2>
+  <p class="mb-4">
+    {campi[getCourseByAbbreviation(course)?.data?.campus as keyof typeof campi]}
   </p>
   <h2 class="text-lg font-semibold mb-1">Professores</h2>
   <p class="mb-4">{professors.join(', ')}</p>
   <h2 class="text-lg font-semibold mb-1">Descrição</h2>
   <p class="mb-4">{description}</p>
-  <div class="absolute top-4 right-4">
-    <a
-      href={addresses.repository}
-      class="hover:text-gray-600 transition duration-500"
-    >
-      <Icon name="mdi:github" size={30} class="github-project-link" />
-    </a>
+  <h2 class="text-lg font-semibold mb-1">Links</h2>
+  <ul class="mb-4">
+    {
+      Object.entries(addresses).map(([name, link]) => (
+        <li>
+          <a class="underline" href={link}>
+            {name}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+  <div class="absolute top-4 right-4 z-10">
+    {
+      addresses?.repository && (
+        <a
+          href={addresses?.repository}
+          class="hover:cursor-pointer hover:text-gray-600 transition duration-500"
+        >
+          <Icon name="mdi:github" size={30} class="github-project-link" />
+        </a>
+      )
+    }
   </div>
 </div>

src/content/config.ts

@@ -6,7 +6,16 @@ const id = z.number().refine((num) => {
   return [12, 11, 7].includes(length);
 });
 
-const campus = z.enum(['ifpb-jp', 'ifpb-cg', 'ifpb-gb', 'reitoria']);
+export const campi = {
+  'ifpb-jp': 'João Pessoa',
+  'ifpb-cg': 'Campina Grande',
+  'ifpb-gb': 'Guarabira',
+  reitoria: 'Reitoria',
+};
+
+const campusCode = Object.keys(campi) as [keyof typeof campi];
+
+const campus = z.enum(campusCode);
 
 const course = z.enum([
   'cstsi',
@@ -96,7 +105,9 @@ const subjectCollection = defineCollection({
     course,
     campus,
     professors: z.array(z.string()),
-    addresses: addresses.optional(),
+    addresses: addresses.extend({
+      repository: z.string().url().optional(),
+    }),
   }),
 });
 

src/content/students/alana-morais-20052370067.md

@@ -0,0 +1,17 @@
+---
+id: 20052370067
+name:
+  compact: Alana Morais
+  full: Alana Marques de Morais
+avatar: https://github.com/alanammorais.png
+occupations:
+- id: 20052370067
+  type: student
+  campus: ifpb-jp
+  course: cstsi
+  isFinished: true
+addresses:
+  github: https://github.com/alanammorais
+  linkedin: https://www.linkedin.com/in/alana-morais/
+  email: [email protected]
+---

src/content/students/joffily-ferreira-20142370040.md

@@ -0,0 +1,18 @@
+---
+id: 20142370040
+name:
+  compact: Joffily Ferreira
+  full: Joffily Ferreira dos Santos
+avatar: https://github.com/joffilyfe.png
+occupations:
+- id: 20142370040
+  type: student
+  campus: ifpb-jp
+  course: cstsi
+  isFinished: true
+addresses:
+  email: [email protected]
+  github: https://github.com/joffilyfe
+  linkedin: https://www.linkedin.com/in/joffily/
+  twitter: https://twitter.com/joffilyfe
+---

src/content/students/mariana-veríssimo-20142370201.md

@@ -0,0 +1,18 @@
+---
+id: 20142370201
+name:
+  compact: Marianna Soares
+  full: Marianna Soares Veríssimo
+avatar: https://github.com/mariannave.png
+occupations:
+- id: 20142370201
+  type: student
+  campus: ifpb-jp
+  course: cstsi
+  isFinished: true
+addresses:
+  github: https://github.com/mariannave
+  linkedin: https://www.linkedin.com/in/mariannave/
+  twitter: https://www.twitter.com/mariannaveri/
+  email: [email protected]
+---

src/content/students/mauricio-linhares-20031037029.md

@@ -2,7 +2,7 @@
 id: 20031037029
 name:
   compact: Mauricio Linhares
-  full: Mauricio Linhares de Aragao Junior
+  full: Maurício Linhares de Aragão Junior
 avatar: https://github.com/mauricio.png
 occupations:
 - id: 20031037029

src/content/students/victor-ausgusto-20111370420.md

@@ -0,0 +1,17 @@
+---
+id: 20111370420
+name:
+  compact: Victor Augusto
+  full: Victor Augusto Pinto Costa
+avatar: https://github.com/augustovictor.png
+occupations:
+- id: 20111370420
+  type: student
+  campus: ifpb-jp
+  course: cstsi
+  isFinished: true
+addresses:
+  github: https://github.com/augustovictor
+  linkedin: https://www.linkedin.com/in/augustovictor/
+  email: [email protected]
+---

src/pages/index.astro

@@ -48,15 +48,15 @@ const students = await getCollection('students');
 ---
 
 <SimpleLayout title="Github do IFPB">
-  <Header menu={menu} />
+  <Header menu={menu} title="Departamento de Informática" />
   <main>
-    <section id="courses" class="courses-section bg-white px-8 py-16">
+    <section id="courses" class="courses-section bg-white px-8 py-28">
       <div class="container lg:max-w-screen-lg mx-auto flex flex-col gap-10">
         <div>
           <h2 class="text-4xl font-bold mb-4">Cursos</h2>
           <p class="mb-4">
-            Aqui você encontra os cursos ofertadas no Departamento de
-            Informática do campus João Pessoa.
+            Venha conhecer os cursos ofertadas no Departamento de Informática do
+            IFPB.
           </p>
         </div>
         <div
@@ -67,7 +67,7 @@ const students = await getCollection('students');
         </div>
       </div>
     </section>
-    <section id="subjects" class="subjects-section bg-[#0B3314] px-8 py-16">
+    <section id="subjects" class="subjects-section bg-[#0B3314] px-8 py-28">
       <div
         class="container lg:max-w-screen-lg mx-auto flex flex-col md:flex-row gap-10"
       >
@@ -93,14 +93,14 @@ const students = await getCollection('students');
         </div>
       </div>
     </section>
-    <section id="projects" class="projects-section bg-white px-8 py-16">
+    <section id="projects" class="projects-section bg-white px-8 py-28">
       <div
         class="container lg:max-w-screen-lg mx-auto flex flex-col md:flex-row gap-10"
       >
         <div class="-order-1 md:order-1">
           <h2 class="text-4xl font-bold mb-4">Projetos</h2>
           <p class="mb-4">
-            Esse é um preview dos vários projetos feitos pelos nossos alunos.
+            Esse é um portal dos vários projetos feitos pelos nossos alunos.
           </p>
           <p>
             <a
@@ -119,20 +119,20 @@ const students = await getCollection('students');
         </div>
       </div>
     </section>
-    <!-- <section id="research" class="research-section bg-white px-8 py-16">
+    <!-- <section id="research" class="research-section bg-white px-8 py-28">
     </section> -->
     <section
       id="students"
-      class="students-section bg-black text-white px-8 py-16"
+      class="students-section bg-black text-white px-8 py-28"
     >
       <div
         class="container lg:max-w-screen-lg mx-auto flex flex-col md:flex-row gap-10"
       >
         <div>
           <h2 class="text-4xl font-bold mb-4">Alunos</h2>
           <p class="mb-4">
-            Aqui você poderá encontrar portfólio e contato de estudantes e
-            egressos de vários cursos do IFPB.
+            Aqui você poderá encontrar portfólio e contato de estudantes do
+            IFPB.
           </p>
           <p>
             <a

src/pages/subjects/index.astro

@@ -17,21 +17,13 @@ const menu = [
     link: '#subjects',
   },
 ];
-
-
 ---
 
 <SimpleLayout title="Disciplinas">
-  <Header menu={menu} />
+  <Header menu={menu} title="Departamento de Informática" />
   <main class="container lg:max-w-screen-lg mx-auto pt-16 px-2">
     <h1 id="subjects" class="text-4xl font-bold mb-16">Disciplinas</h1>
-    {
-      subjects.map(
-        (subject) => (
-          <SubjectCard subject={subject} />
-        )
-      )
-    }
+    {subjects.map((subject) => <SubjectCard subject={subject} />)}
   </main>
   <Footer />
 </SimpleLayout>