Dynamic page titles.

src/lib/components/Title.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    export let text: string;
+</script>
+
+<svelte:head>
+    <title>Amy J. Ko - {text}</title>
+</svelte:head>

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

@@ -6,8 +6,11 @@
     import Block from '$lib/components/Block.svelte';
     import getPersonImagePath from '$lib/components/getPersonImage';
     import Emoji from '$lib/components/Emoji.svelte';
+    import Title from '$lib/components/Title.svelte';
 </script>
 
+<Title text="Research" />
+
 <h1>
     I study our individual and collective struggle to understand computing and
     harness it for play, power, equity, and justice.

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

@@ -4,6 +4,7 @@
     import Link from '$lib/components/Link.svelte';
 
     import { profile } from '$lib/models/stores';
+    import Title from '$lib/components/Title.svelte';
 
     $: pubCount =
         Math.round(
@@ -24,6 +25,8 @@
     ).length;
 </script>
 
+<Title text="Biography" />
+
 <h1>Professional and personal takes on my professorly life.</h1>
 
 <Linkable id="tiny">Tiny Bio</Linkable>

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

@@ -4,8 +4,11 @@
     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>
 
+<Title text="CER FAQ" />
+
 <h1> This is my computing education research FAQ. </h1>
 
 <p>

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

@@ -3,6 +3,7 @@
     import External from '$lib/components/External.svelte';
     import { profile } from '$lib/models/stores';
     import Image from '$lib/components/Thumbnail.svelte';
+    import Title from '$lib/components/Title.svelte';
 
     const offerings = $profile
         .getClasses(
@@ -30,6 +31,8 @@
         });
 </script>
 
+<Title text="Classes" />
+
 <h1> These are classes I teach. </h1>
 
 {#each offerings as offering}

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

@@ -5,6 +5,7 @@
     import Bar from './Bar.svelte';
     import DateRange from './DateRange.svelte';
     import months from './months';
+    import Title from '$lib/components/Title.svelte';
 
     let commits = $profile.getCommits();
     let weeks = $profile.getWeeklyCommits();
@@ -73,6 +74,8 @@
         );
 </script>
 
+<Title text="Commitments" />
+
 <h1> This is my commitment calendar. </h1>
 
 <p>

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

@@ -1,8 +1,11 @@
 <script lang="ts">
     import Block from '$lib/components/Block.svelte';
     import Image from '$lib/components/Thumbnail.svelte';
+    import Title from '$lib/components/Title.svelte';
 </script>
 
+<Title text="Communities" />
+
 <h1>
     These are communities I work with to do research, advocate, and have impact.
 </h1>

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

@@ -2,8 +2,11 @@
     import Block from '$lib/components/Block.svelte';
     import External from '$lib/components/External.svelte';
     import Image from '$lib/components/Thumbnail.svelte';
+    import Title from '$lib/components/Title.svelte';
 </script>
 
+<Title text="Contacting Me" />
+
 <h1> There are many ways to reach me: </h1>
 
 <Block link="https://goo.gl/maps/7c3irRBubGvXYEtZ8" header="Office hours">

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

@@ -5,6 +5,7 @@
     import { profile } from '$lib/models/stores';
     import Image from '$lib/components/Thumbnail.svelte';
     import type { PostTagType } from '../../../lib/models/Post';
+    import Title from '$lib/components/Title.svelte';
 
     let filter: Record<string, PostTagType> = {};
 
@@ -13,6 +14,8 @@
     }
 </script>
 
+<Title text="Essays" />
+
 <h1>
     I <External to="https://amyjko.medium.com">blog</External> on my lab's Medium
     publication, <External to="https://medium.com/bits-and-behavior"

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

@@ -5,10 +5,13 @@
     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');
 </script>
 
+<Title text="FAQ" />
+
 <h1> These are questions I'm frequently asked. </h1>
 
 <SectionList path="/faq" />

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

@@ -5,8 +5,11 @@
     import { parseDate } from '$lib/models/Profile';
     import Image from '$lib/components/Thumbnail.svelte';
     import Link from '$lib/components/Link.svelte';
+    import Title from '$lib/components/Title.svelte';
 </script>
 
+<Title text="Funding" />
+
 <h1> My students and I receive funding from many sources. </h1>
 
 <Block link="https://ischool.uw.edu" header="The Information School">

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

@@ -3,8 +3,11 @@
     import External from '$lib/components/External.svelte';
     import { profile } from '$lib/models/stores';
     import Image from '$lib/components/Thumbnail.svelte';
+    import Title from '$lib/components/Title.svelte';
 </script>
 
+<Title text="Impact" />
+
 <h1> I actively share my research and expertise with the world. </h1>
 
 {#each $profile.getPopulations() as population}

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

@@ -5,6 +5,7 @@
     import External from '$lib/components/External.svelte';
     import { onMount } from 'svelte';
     import { scrollToHash } from '$lib/models/utilities';
+    import Title from '$lib/components/Title.svelte';
 
     onMount(() => {
         scrollToHash();
@@ -18,6 +19,8 @@
     }
 </script>
 
+<Title text="Lab" />
+
 <h1>
     I direct the <em>Code & Cognition Lab</em>.
 </h1>

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

@@ -3,6 +3,7 @@
     import Linkable from '$lib/components/Linkable.svelte';
     import Alert from '$lib/components/Alert.svelte';
     import Link from '$lib/components/Link.svelte';
+    import Title from '$lib/components/Title.svelte';
 </script>
 
 <Alert>
@@ -18,6 +19,8 @@
     >.
 </Alert>
 
+<Title text="Lablets" />
+
 <h1>
     <strike
         >Are you an undergraduate or masters student at UW that wants to join

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

@@ -8,6 +8,7 @@
     import { profile } from '$lib/models/stores';
     import { scrollToHash } from '$lib/models/utilities';
     import Alert from '../../../lib/components/Alert.svelte';
+    import Title from '$lib/components/Title.svelte';
 
     let selection: Record<string, string> = {};
 
@@ -52,6 +53,8 @@
         );
 </script>
 
+<Title text="Publications" />
+
 <h1> These are my academic publications. </h1>
 
 <p>

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

@@ -5,6 +5,7 @@
     import { parseDate } from '$lib/models/Profile';
     import Image from '$lib/components/Thumbnail.svelte';
     import Link from '$lib/components/Link.svelte';
+    import Title from '$lib/components/Title.svelte';
 
     const months = [
         'Jan',
@@ -22,6 +23,8 @@
     ];
 </script>
 
+<Title text="Talks" />
+
 <h1> These are my upcoming and past keynotes and invited talks. </h1>
 
 {#each $profile.getTalks(undefined, (talk) => -parseDate(talk.date).getTime()) as talk}

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

@@ -2,8 +2,11 @@
     import Trip from '$lib/models/Trip.svelte';
     import { profile } from '$lib/models/stores';
     import { parseDate } from '$lib/models/Profile';
+    import Title from '$lib/components/Title.svelte';
 </script>
 
+<Title text="Travel" />
+
 <h1> Below are upcoming and past trips. </h1>
 
 <p> I frequently travel to share my research, ideas, and experiences. </p>

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

@@ -4,8 +4,11 @@
     import Alert from '$lib/components/Alert.svelte';
     import Link from '../../../lib/components/Link.svelte';
     import Emoji from '$lib/components/Emoji.svelte';
+    import Title from '$lib/components/Title.svelte';
 </script>
 
+<Title text="Wordplaypen" />
+
 <h1>
     Are you a University of Washington undergraduate interested in making
     programming languages more playful, global, and accessible?

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

@@ -7,6 +7,7 @@
     import Image from '$lib/components/Thumbnail.svelte';
     import Wrap from './Wrap.svelte';
     import Table from '$lib/components/Table.svelte';
+    import Title from '$lib/components/Title.svelte';
 
     let refereed = $profile.getPublications(
         (pub) =>
@@ -18,6 +19,8 @@
 
 <Image url={'/images/headshots/ajko.jpg'} alt="Headshot of Amy J. Ko" />
 
+<Title text="Curriculum Vita" />
+
 <h1>Amy J. Ko, Ph.D.</h1>
 Professor
 <br />The Information School