Added page outline.

src/lib/components/Header.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import Emoji from './Emoji.svelte';
     import External from './External.svelte';
     import Link from './Link.svelte';
     import Social from './Social.svelte';
     import Image from './Thumbnail.svelte';
+
+    export let headers: [string, string][] = [];
+    export let activeid: string | undefined;
 </script>
 
 <section class="info">
@@ -83,6 +88,19 @@
     <br /><Link to="/wordplaypen" at={'/wordplaypen'}
         ><Emoji symbol="💬" /> <strong>Wordplaypen</strong></Link
     >
+
+    <div class="outline">
+        <ul>
+            {#each headers as [header, id]}
+                <li
+                    ><Link
+                        to={`${$page.url.pathname.replace(base, '')}#${id}`}
+                        active={id === activeid}>{header}</Link
+                    ></li
+                >
+            {/each}
+        </ul>
+    </div>
 </nav>
 
 <hr class="small-hr" />
@@ -111,7 +129,7 @@
         background-color: var(--border-color);
     }
 
-    :global(nav > .at) {
+    :global(nav .at) {
         background-color: var(--annotation-color);
     }
 
@@ -121,6 +139,16 @@
         flex-basis: 1;
     }
 
+    .outline li {
+        font-style: italic;
+        font-size: 80%;
+        list-style-type: square;
+    }
+
+    .outline ul {
+        padding-inline-start: calc(3 * var(--padding));
+    }
+
     @media only screen and (min-width: 800px) {
         nav {
             position: sticky;
@@ -139,6 +167,10 @@
             display: none;
         }
 
+        .outline {
+            display: none;
+        }
+
         nav {
             white-space: nowrap;
         }

src/lib/components/Link.svelte

@@ -4,6 +4,7 @@
 
     export let to: string;
     export let at: string | undefined = undefined;
+    export let active = false;
 
     $: path = $page.url.pathname;
 </script>
@@ -13,12 +14,16 @@
 {:else if to.startsWith('http')}
     <a href={to} target="_blank" rel="noreferrer"><slot /></a>
 {:else}
-    <a href={`${base}${to}`}><slot /></a>
+    <a href={`${base}${to}`} class={active ? 'at' : ''}><slot /></a>
 {/if}
 
 <style>
     /* So that components can style it. */
     span {
         display: inline-block;
     }
+
+    a:hover {
+        text-decoration: underline;
+    }
 </style>

src/lib/components/Page.svelte

@@ -1,16 +1,42 @@
 <script lang="ts">
     import Header from '$lib/components/Header.svelte';
     import Footer from '$lib/components/Footer.svelte';
+    import { navigating } from '$app/stores';
+    import { browser } from '$app/environment';
+
+    let headers: [string, string][] = [];
+    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) {
+        closestID = Array.from(document.getElementsByTagName('h2')).sort(
+            (h1, h2) =>
+                Math.abs(h1.offsetTop - scrollY) -
+                Math.abs(h2.offsetTop - scrollY)
+        )[0]?.id;
+    }
 </script>
 
 <div class="page">
-    <div class="header"><Header /></div>
+    <div class="header"><Header {headers} activeid={closestID} /></div>
     <div class="content">
         <slot />
         <Footer />
     </div>
 </div>
 
+<svelte:window bind:scrollY />
+
 <style>
     /* Small */
     @media only screen and (max-width: 800px) {

src/routes/(app)/+page.svelte

@@ -7,6 +7,7 @@
     import getPersonImagePath from '$lib/components/getPersonImage';
     import Emoji from '$lib/components/Emoji.svelte';
     import Title from '$lib/components/Title.svelte';
+    import Linkable from '$lib/components/Linkable.svelte';
 </script>
 
 <Title text="Research" />
@@ -61,7 +62,7 @@
     <em>everyone</em>.
 </p>
 
-<h2>Discoveries</h2>
+<Linkable id="discoveries">Discoveries</Linkable>
 
 <p>
     My lab and I have discovered many things since I started doing research in

src/routes/(app)/cer/+page.svelte

@@ -2,7 +2,6 @@
     import Section from '$lib/components/Section.svelte';
     import External from '$lib/components/External.svelte';
     import advisors from '$lib/models/advisors';
-    import SectionList from '$lib/components/SectionList.svelte';
     import Table from '../../../lib/components/Table.svelte';
     import Title from '$lib/components/Title.svelte';
 </script>
@@ -22,8 +21,6 @@
     >.
 </p>
 
-<SectionList path="/cer" />
-
 <p>
     Computing education research (CER), also known as computer science education
     (CSEd) research, is the study of how people learn and teach computing,
@@ -71,19 +68,18 @@
 
 <Section
     id="csed-v-cer"
-    header="What is the difference between CS education research and computing education research?"
+    header="What is the difference between 'CS' and 'computing'?"
 >
     <p>
-        The difference in these two phrases is in the difference between "CS"
-        and "Computing". CS generally refers to the historically core topics in
-        computer science research, such as theory, algorithms, data structures,
-        programming languages, and operating systems. But other fields began to
-        engage these ideas and identify their intersections to other fields. For
-        example, information science, a field long concerned with data,
-        information, and society, began to consider those topics from a computer
-        science perspective. Science began to apply computer science ideas to
-        data capture, storage, and analysis. Biology, as it began to see DNA as
-        a form of biological data, and apply algorithms to analyzing it, formed
+        CS generally refers to the historically core topics in computer science
+        research, such as theory, algorithms, data structures, programming
+        languages, and operating systems. But other fields began to engage these
+        ideas and identify their intersections to other fields. For example,
+        information science, a field long concerned with data, information, and
+        society, began to consider those topics from a computer science
+        perspective. Science began to apply computer science ideas to data
+        capture, storage, and analysis. Biology, as it began to see DNA as a
+        form of biological data, and apply algorithms to analyzing it, formed
         bioinformatics. Communication began to explore computer-mediated
         communication. Behavioral and brain scientists started using computers
         to model decisions, knowledge, and brain activity. And social scientists
@@ -120,7 +116,7 @@
 
 <Section
     id="comparison-to-other-fields"
-    header="How does computing education research compare to learning sciences, education research, and educational psychology?"
+    header="How does computing education research compare to related fields?"
 >
     <p>
         My background isn't in these fields, though I do collaborate with people
@@ -187,7 +183,7 @@
 
 <Section
     id="major-questions"
-    header="What are the overarching research questions in CER?"
+    header="What are major research questions in CER?"
 >
     <p>
         As with any research discipline, research questions can and should be
@@ -302,10 +298,7 @@
     </p>
 </Section>
 
-<Section
-    id="jobs"
-    header="What kinds of jobs do computing education researchers do?"
->
+<Section id="jobs" header="What jobs can computing education researchers get?">
     <p>
         Most computing education researchers are faculty in universities. Many
         of these faculty are tenure-track faculty like myself, which means a
@@ -458,7 +451,7 @@
 
 <Section
     id="doctoral-admissions"
-    header="For doctoral admissions, how important is it to demonstrate focus in a single research area?"
+    header="For doctoral admissions, how important is it to focus on a single research area?"
 >
     <p>
         Advisors differ on the criteria they use to select candidates.
@@ -497,10 +490,7 @@
     </p>
 </Section>
 
-<Section
-    id="getting-a-job"
-    header="Where can I find a CS education research job?"
->
+<Section id="getting-a-job" header="Where can I find a CER job?">
     <p>
         There are many places where global CS education-related jobs are posted:
     </p>
@@ -623,7 +613,7 @@
 
 <Section
     id="being-impactful"
-    header="What do I need to know to be an effective, impactful computing education researcher?"
+    header="What do I need to know to be an effective researcher?"
 >
     <p>
         First, you need to know some computing yourself. That doesn't mean you

src/routes/(app)/commitments/+page.svelte

@@ -6,6 +6,7 @@
     import DateRange from './DateRange.svelte';
     import months from './months';
     import Title from '$lib/components/Title.svelte';
+    import Linkable from '$lib/components/Linkable.svelte';
 
     let commits = $profile.getCommits();
     let weeks = $profile.getWeeklyCommits();
@@ -92,7 +93,12 @@
 
 <Table>
     <tbody>
-        <tr><td colSpan="3"><h3>Weekly commitments</h3></td></tr>
+        <tr
+            ><td colSpan="3"
+                ><Linkable id="weekly-commitments">Weekly commitments</Linkable
+                ></td
+            ></tr
+        >
         {#each indefiniteWeekly as commitment}
             <tr>
                 <td>
@@ -107,7 +113,11 @@
                 </td>
             </tr>
         {/each}
-        <tr><td colSpan="3"><h3>Annual commitments</h3></td></tr>
+        <tr
+            ><td colSpan="3"
+                ><Linkable id="annual">Annual commitments</Linkable></td
+            ></tr
+        >
         {#each indefiniteAnnually as commitment}
             <tr>
                 <td>
@@ -131,7 +141,11 @@
                 </td>
             </tr>
         {/each}
-        <tr><td colSpan="3"><h3>One-time commitments</h3></td></tr>
+        <tr
+            ><td colSpan="3"
+                ><Linkable id="one-time">One-time commitments</Linkable></td
+            ></tr
+        >
         <tr><td colSpan="3"><h4>Research</h4></td></tr>
         {#each definiteResearch as commitment}
             <tr>
@@ -195,7 +209,7 @@
     </tbody>
 </Table>
 
-<h3>Weekly workload</h3>
+<Linkable id="weekly">Weekly workload</Linkable>
 
 <p>
     Here's an estimate of how busy I'll be per week in the next two years. You

src/routes/(app)/faq/+page.svelte

@@ -4,7 +4,6 @@
     import Link from '$lib/components/Link.svelte';
     import Paper from '$lib/components/Paper.svelte';
     import { profile } from '$lib/models/stores';
-    import SectionList from '../../../lib/components/SectionList.svelte';
     import Title from '$lib/components/Title.svelte';
 
     $: guide = $profile.getPublication('practicalguide');
@@ -14,8 +13,6 @@
 
 <h1> These are questions I'm frequently asked. </h1>
 
-<SectionList path="/faq" />
-
 <Section
     id="recommendations"
     header="Will you write me a letter of recommendation?"