feat(title): add dynamic document title (#645)

* feat(title): add dynamic document title

fixes #490 and #643

* fix code style

routes/_components/Title.html

@@ -0,0 +1,24 @@
+<svelte:head>
+  <title>{instanceIndicator} · {name}{notificationsIndicator}</title>
+</svelte:head>
+<script>
+  import { store } from '../_store/store'
+
+  export default {
+    data: () => ({
+      settingsPage: false
+    }),
+    store: () => store,
+    computed: {
+      instanceIndicator: ({ $isUserLoggedIn, $currentInstance, settingsPage }) => (
+        // If the user is not logged in, or if they're on a settings page (which
+        // is more general than instance-specific), of if this is server-rendered, then
+        // show "Pinafore". Otherwise show the instance name.
+        `${($isUserLoggedIn && !settingsPage && $currentInstance) ? $currentInstance : 'Pinafore'}`
+      ),
+      notificationsIndicator: ({ $hasNotifications, $numberOfNotifications }) => (
+        $hasNotifications ? ` (${$numberOfNotifications})` : ''
+      )
+    }
+  }
+</script>

routes/accounts/[accountId].html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Profile" />
-  <title>Pinafore – Profile</title>
-</svelte:head>
 <Layout page='tags'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/accounts/[accountId].html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/accounts/[accountId]/followers.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Followers" />
-  <title>Pinafore – Followers</title>
-</svelte:head>
 <Layout page='tags'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/accounts/[accountId]/followers.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/accounts/[accountId]/follows.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Follows" />
-  <title>Pinafore – Follows</title>
-</svelte:head>
 <Layout page='tags'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/accounts/[accountId]/follows.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/blocked.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Blocked users" />
-  <title>Pinafore – Blocked users</title>
-</svelte:head>
 <Layout page='blocked'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/blocked.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/community/index.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Community" />
-  <title>Pinafore – Community</title>
-</svelte:head>
 <Layout page='community'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/community/index.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/favorites.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Favorites" />
-  <title>Pinafore – Favorites</title>
-</svelte:head>
 <Layout page='favorites'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/favorites.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/federated.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Federated" />
-  <title>Pinafore – Federated</title>
-</svelte:head>
 <Layout page='federated'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/federated.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/index.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Home" />
-	<title>Pinafore – Home</title>
-</svelte:head>
 <Layout page='home'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/index.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/lists/[listId].html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="List" />
-  <title>Pinafore – List</title>
-</svelte:head>
 <Layout page='lists/{params.listId}'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/lists/[listId].html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/local.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Local" />
-  <title>Pinafore – Local</title>
-</svelte:head>
 <Layout page='local'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/local.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/muted.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Muted users" />
-  <title>Pinafore – Muted users</title>
-</svelte:head>
 <Layout page='muted'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/muted.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/notifications.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Notifications" />
-	<title>Pinafore – Notifications</title>
-</svelte:head>
 <Layout page='notifications'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/notifications.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/pinned.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Pinned toots" />
-  <title>Pinafore – Pinned toots</title>
-</svelte:head>
 <Layout page='pinned'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/pinned.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/requests.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Follow requests" />
-  <title>Pinafore – Follow requests</title>
-</svelte:head>
 <Layout page='muted'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/requests.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/search.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Search" />
-  <title>Pinafore – Search</title>
-</svelte:head>
 <Layout page='search'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/search.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/settings/about.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="About" settingsPage={true} />
-  <title>Pinafore – About</title>
-</svelte:head>
 <Layout page='settings'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/settings/about.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/settings/general.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="General Settings" settingsPage={true} />
-  <title>Pinafore – General Settings</title>
-</svelte:head>
 <Layout page='settings'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/settings/general.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/settings/index.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Settings" settingsPage={true} />
-  <title>Pinafore – Settings</title>
-</svelte:head>
 <Layout page='settings'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/settings/index.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/settings/instances/[instanceName].html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="{params.instanceName}" settingsPage={true} />
-  <title>Pinafore – Instance</title>
-</svelte:head>
 <Layout page='settings'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/settings/instances/[instanceName].html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/settings/instances/add.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Add instance" settingsPage={true} />
-  <title>Pinafore – Add instance</title>
-</svelte:head>
 <Layout page='settings'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/settings/instances/add.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/settings/instances/index.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Instances" settingsPage={true} />
-  <title>Pinafore – Instances</title>
-</svelte:head>
 <Layout page='settings'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/settings/instances/index.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/statuses/[statusId]/favorites.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Favorites" />
-  <title>Pinafore – Favorites</title>
-</svelte:head>
 <Layout page='favorites'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/statuses/[statusId]/favorites.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/statuses/[statusId]/index.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Status" />
-  <title>Pinafore – Status</title>
-</svelte:head>
 <Layout page='statuses' >
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/statuses/[statusId]/index.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/statuses/[statusId]/reblogs.html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Reblogs" />
-  <title>Pinafore – Reblogs</title>
-</svelte:head>
 <Layout page='reblogs'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/statuses/[statusId]/reblogs.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

routes/tags/[tagName].html

@@ -1,17 +1,17 @@
-<svelte:head>
+<Title name="Hashtag" />
-  <title>Pinafore – Hashtag</title>
-</svelte:head>
 <Layout page='tags'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/tags/[tagName].html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({

tests/spec/102-notifications.js

@@ -1,6 +1,6 @@
 import { loginAsFoobar } from '../roles'
 import {
-  getNthStatus, getUrl, homeNavButton, notificationsNavButton
+  getNthStatus, getTitleText, getUrl, homeNavButton, notificationsNavButton
 } from '../utils'
 import { favoriteStatusAs, postAs } from '../serverActions'
 
@@ -12,15 +12,19 @@ test('shows unread notifications', async t => {
   await loginAsFoobar(t)
   await t
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
+    .expect(getTitleText()).eql('localhost:3000 · Home')
   await favoriteStatusAs('admin', id)
   await t
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (1)')
+    .expect(getTitleText()).eql('localhost:3000 · Home (1)')
     .click(notificationsNavButton)
     .expect(getUrl()).contains('/notifications')
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (current page)')
+    .expect(getTitleText()).eql('localhost:3000 · Notifications')
     .expect(getNthStatus(0).innerText).contains('somebody please favorite this to validate me')
     .expect(getNthStatus(0).innerText).match(/admin\s+favorited your status/)
   await t
     .click(homeNavButton)
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
+    .expect(getTitleText()).eql('localhost:3000 · Home')
 })

tests/utils.js

@@ -79,6 +79,8 @@ export const getActiveElementInsideNthStatus = exec(() => {
   return ''
 })
 
+export const getTitleText = exec(() => document.head.querySelector('title').innerHTML)
+
 export const goBack = exec(() => window.history.back())
 
 export const forceOffline = exec(() => window.__forceOnline(false))