Add project photo caption

ferdinandsalis · Oct 26, 2024 · 68f546a · 68f546a
1 parent 22f1210
commit 68f546a
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 17 deletions.
diff --git a/app/routes/_index/route.tsx b/app/routes/_index/route.tsx
@@ -492,7 +492,7 @@ function TestimonialCard({ idx, ...entry }: TestimonialCardProps) {
           <p className="font-bold text-primary md:text-body-md">
             {entry.name}
             {'  '}
-            <span className="align-super font-bold text-secondary">
+            <span className="font-greek align-super font-bold text-secondary">
               {alphabetMap[entry.year?.letter ?? '']}
             </span>{' '}
           </p>

diff --git a/app/routes/aktuelles/route.tsx b/app/routes/aktuelles/route.tsx
@@ -318,7 +318,7 @@ function YearCard({ letter, startedAt, mentor, photos, plan }: Year) {
       className="flex flex-wrap rounded-md bg-card shadow-md"
     >
       <div className="relative flex flex-1 flex-col p-6">
-        <div className="text-1xl absolute right-14 top-10 scale-[7] font-black lowercase text-primary opacity-10">
+        <div className="text-1xl font-greek absolute right-14 top-10 scale-[7] font-black lowercase text-primary opacity-10">
           {alphabetMap[letter]}
         </div>
 

diff --git a/app/routes/curriculum/route.tsx b/app/routes/curriculum/route.tsx
@@ -1,4 +1,5 @@
 import { useLoaderData } from '@remix-run/react'
+import { InfoIcon } from 'lucide-react'
 import React from 'react'
 import {
   Carousel,
@@ -50,11 +51,20 @@ function YearSection({
   year: {
     title: string
     description: string
-    projects: any[]
+    projects: { _id: string; name: string; photos: any[] }[]
     externalExams: string[]
   }
   yearNumber: number
 }) {
+  const photos = React.useMemo(() => {
+    return year.projects.flatMap(p => {
+      if (p.photos && p.photos.length > 0) {
+        return p.photos.map(photo => ({ ...photo, projectName: p.name }))
+      }
+      return []
+    })
+  }, [year.projects])
+
   return (
     <article className="space-y-8 pt-4">
       <hgroup>
@@ -72,9 +82,7 @@ function YearSection({
         <ProjectsList projects={year.projects} />
         <ExternalExamsList exams={year.externalExams} />
       </div>
-      <div>
-        <YearCarousel photos={year.projects.flatMap(p => p.photos)} />
-      </div>
+      <div>{year.projects.length > 0 && <YearCarousel photos={photos} />}</div>
     </article>
   )
 }
@@ -90,7 +98,7 @@ function ProjectsList({
         Projekte
       </h2>
       <ul className="list-inside list-disc" aria-label="Projekte">
-        {projects?.map(project => <li key={project._id}>{project.name}</li>)}
+        {projects?.map(project => <li key={project.name}>{project.name}</li>)}
       </ul>
     </div>
   )
@@ -127,17 +135,25 @@ function YearCarousel({ photos }: { photos: any[] }) {
           {photos?.map(photo =>
             photo?.asset ? (
               <CarouselItem
-                key={photo._key}
+                key={photo._id}
                 className="pl-2 sm:basis-1/2 md:basis-1/3"
               >
-                <img
-                  src={urlFor(photo)
-                    .height(512)
-                    .width(512)
-                    .format('webp')
-                    .url()}
-                  className="rounded object-cover shadow"
-                />
+                <div className="group relative overflow-hidden rounded">
+                  <img
+                    src={urlFor(photo)
+                      .height(512)
+                      .width(512)
+                      .format('webp')
+                      .url()}
+                    className="rounded object-cover shadow"
+                  />
+                  <div className="absolute bottom-0 left-0 right-0 flex appearance-none items-center justify-start gap-1 bg-black/10 p-1.5 px-3 font-condensed">
+                    <span className="text-xs text-card drop-shadow">
+                      {photo.projectName}
+                      {photo.caption ? `, ${photo.caption}` : ''}
+                    </span>
+                  </div>
+                </div>
               </CarouselItem>
             ) : null,
           )}

diff --git a/app/sanity/schema/year.ts b/app/sanity/schema/year.ts
@@ -48,7 +48,7 @@ export const ALPHABET: GreekLetter[] = [
   { name: 'xi', symbol: 'ξ' },
   { name: 'omikron', symbol: 'ο' },
   { name: 'pi', symbol: 'π' },
-  { name: 'hho', symbol: 'ρ' },
+  { name: 'rho', symbol: 'ρ' },
   { name: 'sigma', symbol: 'σ' },
   { name: 'tau', symbol: 'τ' },
   { name: 'ypsilon', symbol: 'υ' },

diff --git a/app/utils/extended-theme.ts b/app/utils/extended-theme.ts
@@ -7,6 +7,13 @@ export const extendedTheme = {
   fontFamily: {
     sans: ['Museo Sans', 'Museo Sans Fallback'],
     condensed: ['Museo Sans Condensed', 'Museo Sans Condensed Fallback'],
+    greek: [
+      'Segoe UI',
+      'Helvetica Neue',
+      'Arial Unicode MS',
+      'Lucida Grande',
+      'sans-serif',
+    ],
   },
   fontSize: {
     // 1rem = 16px