data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

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

Browse source 
* feat(title): add dynamic document title

fixes #490 and #643

* fix code style
This commit is contained in:
Nolan Lawson 2018-11-12 18:28:43 -08:00 committed by GitHub
parent eee2eb288b
commit 62ac7330fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 106 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
routes/_components/Title.html Normal file
View file

@ -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>

6
routes/accounts/[accountId].html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Profile</title>
</svelte:head>
<Title name="Profile" />
<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: () => ({

6
routes/accounts/[accountId]/followers.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Followers</title>
</svelte:head>
<Title name="Followers" />
<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: () => ({

6
routes/accounts/[accountId]/follows.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Follows</title>
</svelte:head>
<Title name="Follows" />
<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: () => ({

6
routes/blocked.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Blocked users</title>
</svelte:head>
<Title name="Blocked users" />
<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: () => ({

6
routes/community/index.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Community</title>
</svelte:head>
<Title name="Community" />
<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: () => ({

6
routes/favorites.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Favorites</title>
</svelte:head>
<Title name="Favorites" />
<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: () => ({

6
routes/federated.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Federated</title>
</svelte:head>
<Title name="Federated" />
<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: () => ({

6
routes/index.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Home</title>
</svelte:head>
<Title name="Home" />
<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: () => ({

6
routes/lists/[listId].html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – List</title>
</svelte:head>
<Title name="List" />
<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: () => ({

6
routes/local.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Local</title>
</svelte:head>
<Title name="Local" />
<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: () => ({

6
routes/muted.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Muted users</title>
</svelte:head>
<Title name="Muted users" />
<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: () => ({

6
routes/notifications.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Notifications</title>
</svelte:head>
<Title name="Notifications" />
<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: () => ({

6
routes/pinned.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Pinned toots</title>
</svelte:head>
<Title name="Pinned toots" />
<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: () => ({

6
routes/requests.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Follow requests</title>
</svelte:head>
<Title name="Follow requests" />
<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: () => ({

6
routes/search.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Search</title>
</svelte:head>
<Title name="Search" />
<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: () => ({

6
routes/settings/about.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – About</title>
</svelte:head>
<Title name="About" settingsPage={true} />
<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: () => ({

6
routes/settings/general.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – General Settings</title>
</svelte:head>
<Title name="General Settings" settingsPage={true} />
<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: () => ({

6
routes/settings/index.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Settings</title>
</svelte:head>
<Title name="Settings" settingsPage={true} />
<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: () => ({

6
routes/settings/instances/[instanceName].html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Instance</title>
</svelte:head>
<Title name="{params.instanceName}" settingsPage={true} />
<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: () => ({

6
routes/settings/instances/add.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Add instance</title>
</svelte:head>
<Title name="Add instance" settingsPage={true} />
<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: () => ({

6
routes/settings/instances/index.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Instances</title>
</svelte:head>
<Title name="Instances" settingsPage={true} />
<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: () => ({

6
routes/statuses/[statusId]/favorites.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Favorites</title>
</svelte:head>
<Title name="Favorites" />
<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: () => ({

6
routes/statuses/[statusId]/index.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Status</title>
</svelte:head>
<Title name="Status" />
<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: () => ({

6
routes/statuses/[statusId]/reblogs.html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Reblogs</title>
</svelte:head>
<Title name="Reblogs" />
<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: () => ({

6
routes/tags/[tagName].html
View file

@ -1,17 +1,17 @@
<svelte:head>
<title>Pinafore – Hashtag</title>
</svelte:head>
<Title name="Hashtag" />
<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: () => ({

6
tests/spec/102-notifications.js
View file

@ -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')
})

2
tests/utils.js
View file

@ -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))