From 39435c9fe8ae3f677a98bb7c1b34d57591a3d23d Mon Sep 17 00:00:00 2001
From: "Amy J. Ko" <ajko@uw.edu>
Date: Sun, 17 Mar 2024 17:08:16 -0700
Subject: [PATCH] Polished header outline.

---
 src/data/Amy.ts                            |  1 +
 src/lib/components/Header.svelte           |  4 +++-
 src/lib/components/Page.svelte             | 19 +++++++++----------
 src/routes/(app)/essays/+page.svelte       | 15 ++++++++++++++-
 src/routes/(app)/publications/+page.svelte |  9 +++++----
 src/routes/(app)/talks/+page.svelte        | 14 +++++++++++++-
 6 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/src/data/Amy.ts b/src/data/Amy.ts
index dd633f09..c8cac203 100644
--- a/src/data/Amy.ts
+++ b/src/data/Amy.ts
@@ -4400,6 +4400,7 @@ export const Amy: ProfileSpec = {
         '2021': 'Informatics program chair; COVID-19; gender transition',
         '2022': 'Informatics program chair; gender transition; sabbatical (Summer/Fall)',
         '2023': 'Sabbatical (Winter/Spring/Summer)',
+        '2024': 'Informatics program chair; Associate Dean for Academics',
     },
 };
 
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index df31ae53..f55eae26 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -96,7 +96,9 @@
                     <li
                         ><Link
                             to={`${$page.url.pathname.replace(base, '')}#${id}`}
-                            active={id === activeid}>{header}</Link
+                            active={id === activeid}
+                            >{header.substring(0, 32) +
+                                (header.length > 32 ? '…' : '')}</Link
                         ></li
                     >
                 {/each}
diff --git a/src/lib/components/Page.svelte b/src/lib/components/Page.svelte
index 9b34c481..7e9ef5de 100644
--- a/src/lib/components/Page.svelte
+++ b/src/lib/components/Page.svelte
@@ -8,17 +8,16 @@
     let closestID: string | undefined = undefined;
     let scrollY: number;
 
-    $: if (browser && typeof document !== undefined && $navigating === null) {
-        headers = Array.from(document.getElementsByTagName('h2'))
-            .map((a) =>
-                a instanceof HTMLElement
-                    ? [a.innerText.replaceAll('🔗', '').trim(), a.id]
-                    : undefined
-            )
-            .filter((a): a is [string, string] => a !== undefined);
-    }
-
     $: if (scrollY >= 0) {
+        if (browser && typeof document !== undefined && $navigating === null) {
+            headers = Array.from(document.getElementsByTagName('h2'))
+                .map((a) =>
+                    a instanceof HTMLElement
+                        ? [a.innerText.replaceAll('🔗', '').trim(), a.id]
+                        : undefined
+                )
+                .filter((a): a is [string, string] => a !== undefined);
+        }
         closestID = Array.from(document.getElementsByTagName('h2')).sort(
             (h1, h2) =>
                 Math.abs(h1.offsetTop - scrollY) -
diff --git a/src/routes/(app)/essays/+page.svelte b/src/routes/(app)/essays/+page.svelte
index 51c3c535..fd01dd6f 100644
--- a/src/routes/(app)/essays/+page.svelte
+++ b/src/routes/(app)/essays/+page.svelte
@@ -6,9 +6,19 @@
     import Image from '$lib/components/Thumbnail.svelte';
     import type { PostTagType } from '../../../lib/models/Post';
     import Title from '$lib/components/Title.svelte';
+    import Linkable from '$lib/components/Linkable.svelte';
 
     let filter: Record<string, PostTagType> = {};
 
+    $: posts = $profile.getPosts(
+        (post) => !('topic' in filter) || post.tags.includes(filter.topic),
+        (post) =>
+            -(
+                $profile.getPostMonthYear(post).year * 12 +
+                $profile.getPostMonthYear(post).month
+            )
+    );
+
     function setFilter(tag: Record<string, PostTagType>) {
         filter = tag;
     }
@@ -35,8 +45,11 @@
 
 <Facets facets={$profile.getPostTags()} update={setFilter} />
 
-{#each $profile.getPosts( (post) => !('topic' in filter) || post.tags.includes(filter.topic), (post) => -($profile.getPostMonthYear(post).year * 12 + $profile.getPostMonthYear(post).month) ) as post}
+{#each posts as post, index}
     {@const date = $profile.getPostMonthYear(post)}
+    {#if index === 0 || date.year !== $profile.getPostMonthYear(posts[index - 1]).year}
+        <Linkable id={`${date.year}`}>{date.year}</Linkable>
+    {/if}
     <Block link={post.url} header={post.title}>
         <svelte:fragment slot="image">
             {#if post.img}
diff --git a/src/routes/(app)/publications/+page.svelte b/src/routes/(app)/publications/+page.svelte
index e92108e1..087d349d 100644
--- a/src/routes/(app)/publications/+page.svelte
+++ b/src/routes/(app)/publications/+page.svelte
@@ -9,6 +9,7 @@
     import { scrollToHash } from '$lib/models/utilities';
     import Alert from '../../../lib/components/Alert.svelte';
     import Title from '$lib/components/Title.svelte';
+    import Linkable from '$lib/components/Linkable.svelte';
 
     let selection: Record<string, string> = {};
 
@@ -84,11 +85,11 @@
 <!-- // Create a list of publications, inserting year headers when the year changes. -->
 {#each pubs as pub, index}
     {#if index === 0 || pubs[index - 1].year !== pub.year}
-        <h3
-            >{pub.year}{#if $profile.getYearContexts()[pub.year]}<small>
-                    &mdash; <em>{$profile.getYearContexts()[pub.year]}</em
+        <Linkable id={`${pub.year}`}>
+            {pub.year}{#if $profile.getYearContexts()[pub.year]}<small>
+                    &ndash; <em>{$profile.getYearContexts()[pub.year]}</em
                     ></small
-                >{/if}</h3
+                >{/if}</Linkable
         >
     {/if}
 
diff --git a/src/routes/(app)/talks/+page.svelte b/src/routes/(app)/talks/+page.svelte
index 6284e417..53a51914 100644
--- a/src/routes/(app)/talks/+page.svelte
+++ b/src/routes/(app)/talks/+page.svelte
@@ -6,6 +6,12 @@
     import Image from '$lib/components/Thumbnail.svelte';
     import Link from '$lib/components/Link.svelte';
     import Title from '$lib/components/Title.svelte';
+    import Linkable from '$lib/components/Linkable.svelte';
+
+    $: talks = $profile.getTalks(
+        undefined,
+        (talk) => -parseDate(talk.date).getTime()
+    );
 
     const months = [
         'Jan',
@@ -27,8 +33,14 @@
 
 <h1> These are my upcoming and past keynotes and invited talks. </h1>
 
-{#each $profile.getTalks(undefined, (talk) => -parseDate(talk.date).getTime()) as talk}
+{#each talks as talk, index}
     {@const date = parseDate(talk.date)}
+    {#if index === 0 || date.getFullYear() !== parseDate(talks[index - 1].date).getFullYear()}
+        <Linkable id={`${date.getFullYear()}`}>
+            {date.getFullYear()}</Linkable
+        >
+    {/if}
+
     <Block
         link={talk.recording
             ? talk.recording