refactor: Update Course component to include teacher information

src/components/Course.astro

@@ -1,6 +1,6 @@
 ---
 let { course } = Astro.props;
-let { title, website, description, provider } = course;
+let { title, website, description, provider, teacher } = course;
 ---
 <article class="course">
     <!-- <pre>{JSON.stringify(course, null, 2)}</pre> -->
@@ -10,8 +10,13 @@ let { title, website, description, provider } = course;
     the provider's name as text -->
     {provider.map((provider: { website: string | URL; name: unknown; }, index: any) => 
         provider.website 
-            ? <a href={provider.website} class="course__provider" key={index}>{provider.name}</a>
-            : <span class="course__provider" key={index}>{provider.name}</span>
+            ? <span class="course__provider"> Provider: <a href={provider.website} key={index}>{provider.name}</a></span>
+            : <span class="course__provider" key={index}>Provider: {provider.name}</span>
+    )}
+    {teacher.map((teacher: { website: string | URL; name: unknown; }, index: any) => 
+    teacher.website 
+        ? <span class="course__teacher">Teacher: <a href={teacher.website} key={index}>{teacher.name}</a></span>
+        : <span class="course__teacher" key={index}>Teacher: {teacher.name}</span>
     )}
     <p class="course__description">{description}</p>
     <a href={website}>Find out more<span class="sr-only"> about {title}</span></a>

src/getCourses.js

@@ -4,19 +4,21 @@ import { sanityClient } from "sanity:client";
 async function getCourses() {
   try {
     // Fetch all courses from Sanity that are not drafts
-    // The 'provider' field is an array of references, so we use 'provider[]->' to dereference each reference and get the actual data
+    // The 'provider' and 'teacher' fields are arrays of references, so we use 'provider[]->' and 'teacher[]->' to dereference each reference and get the actual data
     const courses = await sanityClient.fetch(`*[_type == "course" && !(_id in path("drafts.**"))]{
       ...,
-      "provider": provider[]-> 
+      "provider": provider[]->,
+      "teacher": teacher[]->
     }`);
 
     // Map over the courses
-    // For each course, we spread the existing course data and then check if 'provider' exists
-    // If 'provider' exists, we map over it and return the provider data
-    // If 'provider' doesn't exist, we return an empty array
+    // For each course, we spread the existing course data and then check if 'provider' and 'teacher' exist
+    // If 'provider' or 'teacher' exist, we map over them and return the provider or teacher data
+    // If 'provider' or 'teacher' don't exist, we return an empty array
     return courses.map(course => ({
       ...course,
       provider: course.provider ? course.provider.map(provider => provider) : [],
+      teacher: course.teacher ? course.teacher.map(teacher => teacher) : [],
     }));
   } catch (error) {
     // If an error occurs, log it to the console and throw an error

src/layouts/BaseLayout.astro

@@ -12,6 +12,9 @@ import '../styles/styles.css';
     <meta name="generator" content="Astro" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{title ? `${title} - a11y.courses` : "a11y.courses"}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
     <script
       src="https://kit.fontawesome.com/ad02fca329.js"
       crossorigin="anonymous"></script>

src/pages/index.astro

@@ -10,19 +10,21 @@ const courses = await getCourses();
 console.log(courses);
 ---
 <BaseLayout>
-  <h1>a11y.courses</h1>
-  {/* Checking if courses is an array and if it has any elements */}
-  {Array.isArray(courses) && courses.length > 0 ? (
-    <ul>
-      {/* Rendering a Course component for each course */}
-      {courses.map((course, index) => (
-        <li key={index}>
-          <Course course={course} />
-        </li>
-      ))}
-    </ul>
-  ) : (
-    // If there are no courses, display a message
-    <p>There are no courses to display</p>
-  )}
+  <main>
+    <h1 class="sr-only">Accessibility Courses</h1>
+    {/* Checking if courses is an array and if it has any elements */}
+    {Array.isArray(courses) && courses.length > 0 ? (
+      <ul role="list">
+        {/* Rendering a Course component for each course */}
+        {courses.map((course, index) => (
+          <li key={index}>
+            <Course course={course} />
+          </li>
+        ))}
+      </ul>
+    ) : (
+      // If there are no courses, display a message
+      <p>There are no courses to display.</p>
+    )}
+  </main>
 </BaseLayout>

src/styles/typo.css

@@ -1,13 +1,23 @@
 body {
     color: var(--color-text);
+    font-family: "Atkinson Hyperlegible", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: var(--step-0);
 }
 
 h1 {
-    font-size: var(--step-5);
+    font-size: var(--step-3);
+    font-family: "Poppins", sans-serif;
 }
 h2 {
-    font-size: var(--step-4);
+    font-size: var(--step-2);
+    font-family: "Poppins", sans-serif;
 }
 h3 {
     font-size: var(--step-3);
+}
+
+small {
+    font-size: var(--step--1);
 }