Refactored document-title handler

no issue
- moved `document-title` Route extension's functionality into the `ui` service
  - updates the title each time the router service emits a route changed event
  - `ui.updateDocumentTitle()` can now be called directly from components rather than the confusing `this.send('updateDocumentTitle')` bubbling behaviour
- refactored the `titleToken` implementation to use the now-formalised `RouteInfo`'s `metadata` field (https://github.com/emberjs/rfcs/blob/master/text/0398-RouteInfo-Metadata.md#appendix-a)

app/controllers/editor.js

@@ -472,7 +472,7 @@ export default Controller.extend({
             yield this.autosave.perform();
         }
 
-        this.send('updateDocumentTitle');
+        this.ui.updateDocumentTitle();
     }),
 
     generateSlug: task(function* () {

app/controllers/settings/general.js

@@ -20,6 +20,7 @@ export default Controller.extend({
     notifications: service(),
     session: service(),
     settings: service(),
+    ui: service(),
 
     availableTimezones: null,
     iconExtensions: null,
@@ -272,9 +273,8 @@ export default Controller.extend({
             let settings = yield this.settings.save();
             config.set('blogTitle', settings.get('title'));
 
-            // this forces the document title to recompute after
-            // a blog title change
-            this.send('updateDocumentTitle');
+            // this forces the document title to recompute after a blog title change
+            this.ui.updateDocumentTitle();
 
             return settings;
         } catch (error) {

app/router.js

@@ -1,15 +1,12 @@
 import EmberRouter from '@ember/routing/router';
 import config from './config/environment';
-import documentTitle from 'ghost-admin/utils/document-title';
 import ghostPaths from 'ghost-admin/utils/ghost-paths';
 
 const Router = EmberRouter.extend({
     location: config.locationType, // use HTML5 History API instead of hash-tag based URLs
     rootURL: ghostPaths().adminRoot // admin interface lives under sub-directory /ghost
 });
 
-documentTitle();
-
 Router.map(function () {
     this.route('home', {path: '/'});
 

app/routes/about.js

@@ -1,5 +1,9 @@
 import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
 
 export default AuthenticatedRoute.extend({
-    titleToken: 'About'
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'About'
+        };
+    }
 });

app/routes/application.js

@@ -185,10 +185,6 @@ export default Route.extend(ApplicationRouteMixin, ShortcutsRoute, {
         }
     },
 
-    title(tokens) {
-        return `${tokens.join(' - ')} - ${this.get('config.blogTitle')}`;
-    },
-
     sessionAuthenticated() {
         if (this.get('session.skipAuthSuccessHandler')) {
             return;

app/routes/editor.js

@@ -81,8 +81,12 @@ export default AuthenticatedRoute.extend(ShortcutsRoute, {
         }
     },
 
-    titleToken() {
-        return this.get('controller.post.title') || 'Editor';
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: () => {
+                return this.get('controller.post.title') || 'Editor';
+            }
+        };
     },
 
     _blurAndScheduleAction(func) {

app/routes/editor/new.js

@@ -19,5 +19,11 @@ export default AuthenticatedRoute.extend({
     setupController(controller, newPost) {
         let editor = this.controllerFor('editor');
         editor.setPost(newPost);
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            mainClasses: ['editor-new']
+        };
     }
 });

app/routes/error404.js

@@ -3,11 +3,16 @@ import Route from '@ember/routing/route';
 export default Route.extend({
     controllerName: 'error',
     templateName: 'error',
-    titleToken: 'Error',
 
     model() {
         return {
             status: 404
         };
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Error'
+        };
     }
 });

app/routes/members.js

@@ -4,8 +4,6 @@ import {inject as service} from '@ember/service';
 export default AuthenticatedRoute.extend({
     config: service(),
 
-    titleToken: 'Members',
-
     // redirect to posts screen if:
     // - developer experiments aren't enabled
     // - TODO: members is disabled?
@@ -27,5 +25,11 @@ export default AuthenticatedRoute.extend({
     setupController(controller) {
         this._super(...arguments);
         controller.fetchMembers.perform();
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Members'
+        };
     }
 });

app/routes/pages.js

@@ -1,6 +1,11 @@
 import PostsRoute from './posts';
 
 export default PostsRoute.extend({
-    titleToken: 'Pages',
-    modelName: 'page'
+    modelName: 'page',
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Pages'
+        };
+    }
 });

app/routes/posts.js

@@ -25,7 +25,6 @@ export default AuthenticatedRoute.extend({
         }
     },
 
-    titleToken: 'Posts',
     modelName: 'post',
 
     perPage: 30,
@@ -103,6 +102,12 @@ export default AuthenticatedRoute.extend({
         }
     },
 
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Posts'
+        };
+    },
+
     _getTypeFilters(type) {
         let status = '[draft,scheduled,published]';
 

app/routes/settings/code-injection.js

@@ -5,8 +5,6 @@ import {inject as service} from '@ember/service';
 export default AuthenticatedRoute.extend(CurrentUserSettings, {
     settings: service(),
 
-    titleToken: 'Settings - Code injection',
-
     beforeModel() {
         this._super(...arguments);
         return this.get('session.user')
@@ -34,5 +32,11 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
                 return;
             }
         }
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Settings - Code injection'
+        };
     }
 });

app/routes/settings/design.js

@@ -7,8 +7,6 @@ import {inject as service} from '@ember/service';
 export default AuthenticatedRoute.extend(CurrentUserSettings, {
     settings: service(),
 
-    titleToken: 'Settings - Design',
-
     beforeModel() {
         this._super(...arguments);
         return this.get('session.user')
@@ -52,5 +50,11 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
         activateTheme(theme) {
             return this.controller.send('activateTheme', theme);
         }
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Settings - Design'
+        };
     }
 });

app/routes/settings/general.js

@@ -7,8 +7,6 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
     config: service(),
     settings: service(),
 
-    titleToken: 'Settings - General',
-
     beforeModel() {
         this._super(...arguments);
         return this.get('session.user')
@@ -50,5 +48,11 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
             }
         }
 
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Settings - General'
+        };
     }
 });

app/routes/settings/integration.js

@@ -5,8 +5,6 @@ import {inject as service} from '@ember/service';
 export default AuthenticatedRoute.extend(CurrentUserSettings, {
     router: service(),
 
-    titleToken: 'Settings - Integrations',
-
     init() {
         this._super(...arguments);
         this.router.on('routeWillChange', (transition) => {
@@ -56,5 +54,11 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
                 return;
             }
         }
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Settings - Integrations'
+        };
     }
 });

app/routes/settings/integrations.js

@@ -5,8 +5,6 @@ import {inject as service} from '@ember/service';
 export default AuthenticatedRoute.extend(CurrentUserSettings, {
     settings: service(),
 
-    titleToken: 'Settings - Integrations',
-
     beforeModel() {
         this._super(...arguments);
         return this.get('session.user')
@@ -18,5 +16,11 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
         // kick off the background fetch of integrations so that we can
         // show the screen immediately
         controller.fetchIntegrations.perform();
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Settings - Integrations'
+        };
     }
 });

app/routes/settings/integrations/amp.js

@@ -5,8 +5,6 @@ import {inject as service} from '@ember/service';
 export default AuthenticatedRoute.extend(CurrentUserSettings, {
     settings: service(),
 
-    titleToken: 'AMP',
-
     beforeModel() {
         this._super(...arguments);
         return this.get('session.user')
@@ -30,6 +28,12 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
                 return;
             }
         }
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'AMP'
+        };
     }
 
 });

app/routes/settings/integrations/slack.js

@@ -5,8 +5,6 @@ import {inject as service} from '@ember/service';
 export default AuthenticatedRoute.extend(CurrentUserSettings, {
     settings: service(),
 
-    titleToken: 'Slack',
-
     beforeModel() {
         this._super(...arguments);
         return this.get('session.user')
@@ -31,5 +29,11 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
                 return;
             }
         }
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Slack'
+        };
     }
 });

app/routes/settings/integrations/unsplash.js

@@ -7,8 +7,6 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
     config: service(),
     settings: service(),
 
-    titleToken: 'Unsplash',
-
     // reload settings to ensure we have latest values and pre-configure
     // Unsplash to be active if the server doesn't have any unsplash setting
     beforeModel() {
@@ -51,5 +49,11 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
                 return;
             }
         }
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Unsplash'
+        };
     }
 });

app/routes/settings/integrations/zapier.js

@@ -2,8 +2,6 @@ import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
 import CurrentUserSettings from '../../../mixins/current-user-settings';
 
 export default AuthenticatedRoute.extend(CurrentUserSettings, {
-    titleToken: 'Zapier',
-
     beforeModel() {
         this._super(...arguments);
         return this.get('session.user')
@@ -18,5 +16,11 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
         return this
             .controllerFor('settings.integrations')
             .integrationModelHook('slug', 'zapier', this, transition);
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Zapier'
+        };
     }
 });

app/routes/settings/labs.js

@@ -5,8 +5,6 @@ import {inject as service} from '@ember/service';
 export default AuthenticatedRoute.extend(CurrentUserSettings, {
     settings: service(),
 
-    titleToken: 'Settings - Labs',
-
     beforeModel() {
         this._super(...arguments);
         return this.get('session.user')
@@ -22,5 +20,11 @@ export default AuthenticatedRoute.extend(CurrentUserSettings, {
         if (isExiting) {
             controller.reset();
         }
+    },
+
+    buildRouteInfoMetadata() {
+        return {
+            titleToken: 'Settings - Labs'
+        };
     }
 });