Index: style updates, Events: European dates, CV/works_list: grey year headers

pages/cv.vue

@@ -29,11 +29,13 @@ const talksByYear = computed(() => {
         byLocation[key].push(talk)
       }
       
-      const groups = Object.values(byLocation).map(group => ({
-        location: group[0].location,
-        date: group[0].date,
-        titles: group.map(t => t.title)
-      }))
+      const groups = Object.values(byLocation)
+        .sort((a, b) => new Date(b[0].date) - new Date(a[0].date))
+        .map(group => ({
+          location: group[0].location,
+          date: group[0].date,
+          titles: group.map(t => t.title)
+        }))
       
       return { year, groups }
     })
@@ -379,8 +381,8 @@ useHead({
 
 .year-header {
   font-size: 12px;
-  font-weight: 600;
-  color: #333;
+  font-weight: 300;
+  color: #7F7F7F;
   margin-bottom: 6px;
 }
 

pages/events.vue

@@ -40,12 +40,15 @@
         <div class="px-5">
             <p class="text-lg">lectures</p>
 
-            <div class="leading-tight py-2 ml-3 text-sm" v-for="item in lectures">
-                <div class="gap-1">
-                    <div>
-                        {{ item.formatted_date }}: {{item.location}}
-                        <div v-for="talk in item.talks" class="ml-4 text-[#7F7F7F]">
-                            {{ talk.title }}
+            <div v-for="yearGroup in lecturesByYear" :key="yearGroup.year">
+                <p class="text-sm font-semibold mt-4 text-[#7F7F7F]">{{ yearGroup.year }}</p>
+                <div class="leading-tight py-2 ml-3 text-sm" v-for="item in yearGroup.talks">
+                    <div class="gap-1">
+                        <div>
+                            {{item.location}}
+                            <div v-for="talk in item.talks" class="ml-4 text-[#7F7F7F]">
+                                {{ talk.title }}
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -60,18 +63,18 @@
         transform: (events) => {
             for (const event of events) {
                 let date = new Date(event.start_date)
-                event.formatted_date = ("0" + (date.getMonth() + 1)).slice(-2) + "." + ("0" + date.getDate()).slice(-2) + "." + date.getFullYear()
+                event.formatted_date = ("0" + date.getDate()).slice(-2) + "." + ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear()
             }
             return events.sort((a,b) => new Date(b.start_date) - new Date(a.start_date))
         }
     })
 
-    const { data: lectures } = await useFetch('/api/talks', {
+    const { data: talksData } = await useFetch('/api/talks', {
         transform: (events) => {
             for (const event of events) {
                 let date = new Date(event.date)
                 event.date = date
-                event.formatted_date = ("0" + (date.getMonth() + 1)).slice(-2) + "." + ("0" + date.getDate()).slice(-2) + "." + date.getFullYear()
+                event.formatted_date = ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear()
                 if(typeof event.title === 'string' || event.title instanceof String) {event.talks = [{'title': event.title}]
                 } else {
                     let talks = []
@@ -85,6 +88,24 @@
         }
     })
 
+    const lecturesByYear = computed(() => {
+        if (!talksData.value) return []
+
+        const byYear = {}
+        for (const talk of talksData.value) {
+            const year = talk.date ? talk.date.getFullYear() : 'Unknown'
+            if (!byYear[year]) byYear[year] = []
+            byYear[year].push(talk)
+        }
+
+        return Object.keys(byYear)
+            .sort((a, b) => b - a)
+            .map(year => {
+                const talks = byYear[year].sort((a, b) => new Date(b.date) - new Date(a.date))
+                return { year, talks }
+            })
+    })
+
     useHead({
         titleTemplate: 'Michael Winter - Events - Performances and Lectures'
     })

pages/index.vue

@@ -5,10 +5,10 @@
       <p class="text-lg">pieces</p>
 
       <div class="py-2 ml-3" v-for="item in works">
-        <p class="font-thin">{{ item.year }}</p>
+        <p class="text-sm font-semibold mt-4 text-[#7F7F7F]">{{ item.year }}</p>
         <div class="leading-tight py-1 ml-3" v-for="work in item.works">
-          <div class="grid grid-cols-[65%,30%] gap-1 font-thin items-start">
-            <div class="italic text-sm">{{ work.title }}</div>
+          <div class="grid grid-cols-[65%,30%] gap-1 items-start">
+            <span v-html="work.title" class="italic text-sm"></span>
             <div class="inline-flex mt-[-4px]">
 
               <div>

pages/works_list.vue

@@ -42,7 +42,7 @@ function formatDate(dateStr) {
   if (!dateStr) return ''
   const date = new Date(dateStr)
   if (isNaN(date)) return dateStr
-  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+  return ("0" + date.getDate()).slice(-2) + "." + ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear()
 }
 
 useHead({
@@ -134,13 +134,13 @@ useHead({
 
 .cv-section h4 {
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 300;
   text-transform: uppercase;
   letter-spacing: 0.8px;
   margin: 0 0 10px 0;
   padding-bottom: 4px;
   border-bottom: 1px solid #ccc;
-  color: #222;
+  color: #7F7F7F;
 }
 
 .intro {