Add title to pages with missing title in Web UI (#19322)

app/javascript/mastodon/containers/mastodon.js

@@ -1,21 +1,24 @@
-import React from 'react';
-import { Provider } from 'react-redux';
 import PropTypes from 'prop-types';
-import configureStore from '../store/configureStore';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { IntlProvider, addLocaleData } from 'react-intl';
+import { Provider as ReduxProvider } from 'react-redux';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { ScrollContext } from 'react-router-scroll-4';
-import UI from '../features/ui';
+import configureStore from 'mastodon/store/configureStore';
-import { fetchCustomEmojis } from '../actions/custom_emojis';
+import UI from 'mastodon/features/ui';
-import { hydrateStore } from '../actions/store';
+import { fetchCustomEmojis } from 'mastodon/actions/custom_emojis';
-import { connectUserStream } from '../actions/streaming';
+import { hydrateStore } from 'mastodon/actions/store';
-import { IntlProvider, addLocaleData } from 'react-intl';
+import { connectUserStream } from 'mastodon/actions/streaming';
-import { getLocale } from '../locales';
+import ErrorBoundary from 'mastodon/components/error_boundary';
-import initialState from '../initial_state';
+import initialState, { title as siteTitle } from 'mastodon/initial_state';
-import ErrorBoundary from '../components/error_boundary';
+import { getLocale } from 'mastodon/locales';
 
 const { localeData, messages } = getLocale();
 addLocaleData(localeData);
 
+const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`;
+
 export const store = configureStore();
 const hydrateAction = hydrateStore(initialState);
 
@@ -73,15 +76,17 @@ export default class Mastodon extends React.PureComponent {
 
     return (
       <IntlProvider locale={locale} messages={messages}>
-        <Provider store={store}>
+        <ReduxProvider store={store}>
           <ErrorBoundary>
             <BrowserRouter basename='/web'>
               <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
                 <Route path='/' component={UI} />
               </ScrollContext>
             </BrowserRouter>
+
+            <Helmet defaultTitle={title} titleTemplate={`%s - ${title}`} />
           </ErrorBoundary>
-        </Provider>
+        </ReduxProvider>
       </IntlProvider>
     );
   }

app/javascript/mastodon/features/about/index.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import Column from 'mastodon/components/column';
 import LinkFooter from 'mastodon/features/ui/components/link_footer';
 import { Helmet } from 'react-helmet';
-import { title } from 'mastodon/initial_state';
 
 const messages = defineMessages({
   title: { id: 'column.about', defaultMessage: 'About' },
@@ -25,7 +24,7 @@ class About extends React.PureComponent {
         <LinkFooter />
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );

app/javascript/mastodon/features/account/components/header.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import Button from 'mastodon/components/button';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { autoPlayGif, me, title, domain } from 'mastodon/initial_state';
+import { autoPlayGif, me, domain } from 'mastodon/initial_state';
 import classNames from 'classnames';
 import Icon from 'mastodon/components/icon';
 import IconButton from 'mastodon/components/icon_button';
@@ -372,7 +372,7 @@ class Header extends ImmutablePureComponent {
         </div>
 
         <Helmet>
-          <title>{titleFromAccount(account)} - {title}</title>
+          <title>{titleFromAccount(account)}</title>
         </Helmet>
       </div>
     );

app/javascript/mastodon/features/bookmarked_statuses/index.js

@@ -1,15 +1,16 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from '../../actions/bookmarks';
-import Column from '../ui/components/column';
-import ColumnHeader from '../../components/column_header';
-import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
-import StatusList from '../../components/status_list';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
 import { debounce } from 'lodash';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'mastodon/actions/bookmarks';
+import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
+import ColumnHeader from 'mastodon/components/column_header';
+import StatusList from 'mastodon/components/status_list';
+import Column from 'mastodon/features/ui/components/column';
 
 const messages = defineMessages({
   heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
@@ -95,6 +96,10 @@ class Bookmarks extends ImmutablePureComponent {
           emptyMessage={emptyMessage}
           bindToDocument={!multiColumn}
         />
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.heading)}</title>
+        </Helmet>
       </Column>
     );
   }

app/javascript/mastodon/features/community_timeline/index.js

@@ -10,7 +10,6 @@ import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import { connectCommunityStream } from '../../actions/streaming';
 import { Helmet } from 'react-helmet';
-import { title } from 'mastodon/initial_state';
 
 const messages = defineMessages({
   title: { id: 'column.community', defaultMessage: 'Local timeline' },
@@ -145,7 +144,7 @@ class CommunityTimeline extends React.PureComponent {
         />
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );

app/javascript/mastodon/features/direct_timeline/index.js

@@ -1,12 +1,13 @@
-import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import Column from '../../components/column';
+import React from 'react';
-import ColumnHeader from '../../components/column_header';
+import { Helmet } from 'react-helmet';
-import { mountConversations, unmountConversations, expandConversations } from '../../actions/conversations';
-import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connectDirectStream } from '../../actions/streaming';
+import { connect } from 'react-redux';
+import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
+import { mountConversations, unmountConversations, expandConversations } from 'mastodon/actions/conversations';
+import { connectDirectStream } from 'mastodon/actions/streaming';
+import Column from 'mastodon/components/column';
+import ColumnHeader from 'mastodon/components/column_header';
 import ConversationsListContainer from './containers/conversations_list_container';
 
 const messages = defineMessages({
@@ -94,6 +95,10 @@ class DirectTimeline extends React.PureComponent {
           prepend={<div className='follow_requests-unlocked_explanation'><span><FormattedMessage id='compose_form.encryption_warning' defaultMessage='Posts on Mastodon are not end-to-end encrypted. Do not share any dangerous information over Mastodon.' /> <a href='/terms' target='_blank'><FormattedMessage id='compose_form.direct_message_warning_learn_more' defaultMessage='Learn more' /></a></span></div>}
           emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
         />
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.title)}</title>
+        </Helmet>
       </Column>
     );
   }

app/javascript/mastodon/features/directory/index.js

@@ -13,7 +13,6 @@ import RadioButton from 'mastodon/components/radio_button';
 import LoadMore from 'mastodon/components/load_more';
 import ScrollContainer from 'mastodon/containers/scroll_container';
 import LoadingIndicator from 'mastodon/components/loading_indicator';
-import { title } from 'mastodon/initial_state';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
@@ -169,7 +168,7 @@ class Directory extends React.PureComponent {
         {multiColumn && !pinned ? <ScrollContainer scrollKey='directory'>{scrollableArea}</ScrollContainer> : scrollableArea}
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );

app/javascript/mastodon/features/explore/index.js

@@ -12,7 +12,6 @@ import Suggestions from './suggestions';
 import Search from 'mastodon/features/compose/containers/search_container';
 import SearchResults from './results';
 import { Helmet } from 'react-helmet';
-import { title } from 'mastodon/initial_state';
 
 const messages = defineMessages({
   title: { id: 'explore.title', defaultMessage: 'Explore' },
@@ -84,7 +83,7 @@ class Explore extends React.PureComponent {
               </Switch>
 
               <Helmet>
-                <title>{intl.formatMessage(messages.title)} - {title}</title>
+                <title>{intl.formatMessage(messages.title)}</title>
               </Helmet>
             </React.Fragment>
           )}

app/javascript/mastodon/features/explore/results.js

@@ -10,7 +10,6 @@ import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';
 import { List as ImmutableList } from 'immutable';
 import LoadMore from 'mastodon/components/load_more';
 import LoadingIndicator from 'mastodon/components/loading_indicator';
-import { title } from 'mastodon/initial_state';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
@@ -118,7 +117,7 @@ class Results extends React.PureComponent {
         </div>
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title, { q })} - {title}</title>
+          <title>{intl.formatMessage(messages.title, { q })}</title>
         </Helmet>
       </React.Fragment>
     );

app/javascript/mastodon/features/favourited_statuses/index.js

@@ -1,15 +1,16 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { fetchFavouritedStatuses, expandFavouritedStatuses } from '../../actions/favourites';
-import Column from '../ui/components/column';
-import ColumnHeader from '../../components/column_header';
-import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
-import StatusList from '../../components/status_list';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
 import { debounce } from 'lodash';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
+import { fetchFavouritedStatuses, expandFavouritedStatuses } from 'mastodon/actions/favourites';
+import ColumnHeader from 'mastodon/components/column_header';
+import StatusList from 'mastodon/components/status_list';
+import Column from 'mastodon/features/ui/components/column';
 
 const messages = defineMessages({
   heading: { id: 'column.favourites', defaultMessage: 'Favourites' },
@@ -95,6 +96,10 @@ class Favourites extends ImmutablePureComponent {
           emptyMessage={emptyMessage}
           bindToDocument={!multiColumn}
         />
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.heading)}</title>
+        </Helmet>
       </Column>
     );
   }

app/javascript/mastodon/features/favourites/index.js

@@ -1,16 +1,16 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import LoadingIndicator from '../../components/loading_indicator';
-import { fetchFavourites } from '../../actions/interactions';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import AccountContainer from '../../containers/account_container';
+import { connect } from 'react-redux';
-import Column from '../ui/components/column';
+import ColumnHeader from 'mastodon/components/column_header';
-import ScrollableList from '../../components/scrollable_list';
 import Icon from 'mastodon/components/icon';
-import ColumnHeader from '../../components/column_header';
+import { fetchFavourites } from 'mastodon/actions/interactions';
+import LoadingIndicator from 'mastodon/components/loading_indicator';
+import ScrollableList from 'mastodon/components/scrollable_list';
+import AccountContainer from 'mastodon/containers/account_container';
+import Column from 'mastodon/features/ui/components/column';
 
 const messages = defineMessages({
   refresh: { id: 'refresh', defaultMessage: 'Refresh' },

app/javascript/mastodon/features/getting_started/index.js

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { me, title, showTrends } from '../../initial_state';
+import { me, showTrends } from '../../initial_state';
 import { fetchFollowRequests } from 'mastodon/actions/accounts';
 import { List as ImmutableList } from 'immutable';
 import NavigationContainer from '../compose/containers/navigation_container';
@@ -137,7 +137,7 @@ class GettingStarted extends ImmutablePureComponent {
         {(multiColumn && showTrends) && <TrendsContainer />}
 
         <Helmet>
-          <title>{intl.formatMessage(messages.menu)} - {title}</title>
+          <title>{intl.formatMessage(messages.menu)}</title>
         </Helmet>
       </Column>
     );

app/javascript/mastodon/features/hashtag_timeline/index.js

@@ -14,7 +14,6 @@ import { isEqual } from 'lodash';
 import { fetchHashtag, followHashtag, unfollowHashtag } from 'mastodon/actions/tags';
 import Icon from 'mastodon/components/icon';
 import classNames from 'classnames';
-import { title } from 'mastodon/initial_state';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
@@ -228,7 +227,7 @@ class HashtagTimeline extends React.PureComponent {
         />
 
         <Helmet>
-          <title>{`#${id}`} - {title}</title>
+          <title>#{id}</title>
         </Helmet>
       </Column>
     );

app/javascript/mastodon/features/home_timeline/index.js

@@ -15,7 +15,6 @@ import classNames from 'classnames';
 import IconWithBadge from 'mastodon/components/icon_with_badge';
 import NotSignedInIndicator from 'mastodon/components/not_signed_in_indicator';
 import { Helmet } from 'react-helmet';
-import { title } from 'mastodon/initial_state';
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
@@ -167,7 +166,7 @@ class HomeTimeline extends React.PureComponent {
         ) : <NotSignedInIndicator />}
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );

app/javascript/mastodon/features/list_timeline/index.js

@@ -1,21 +1,22 @@
-import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import StatusListContainer from '../ui/containers/status_list_container';
-import Column from '../../components/column';
-import ColumnBackButton from '../../components/column_back_button';
-import ColumnHeader from '../../components/column_header';
-import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { connectListStream } from '../../actions/streaming';
+import { connect } from 'react-redux';
-import { expandListTimeline } from '../../actions/timelines';
+import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
-import { fetchList, deleteList, updateList } from '../../actions/lists';
+import { fetchList, deleteList, updateList } from 'mastodon/actions/lists';
-import { openModal } from '../../actions/modal';
+import { openModal } from 'mastodon/actions/modal';
-import MissingIndicator from '../../components/missing_indicator';
+import { connectListStream } from 'mastodon/actions/streaming';
-import LoadingIndicator from '../../components/loading_indicator';
+import { expandListTimeline } from 'mastodon/actions/timelines';
+import Column from 'mastodon/components/column';
+import ColumnBackButton from 'mastodon/components/column_back_button';
+import ColumnHeader from 'mastodon/components/column_header';
 import Icon from 'mastodon/components/icon';
+import LoadingIndicator from 'mastodon/components/loading_indicator';
+import MissingIndicator from 'mastodon/components/missing_indicator';
 import RadioButton from 'mastodon/components/radio_button';
+import StatusListContainer from 'mastodon/features/ui/containers/status_list_container';
 
 const messages = defineMessages({
   deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
@@ -208,6 +209,10 @@ class ListTimeline extends React.PureComponent {
           emptyMessage={<FormattedMessage id='empty_column.list' defaultMessage='There is nothing in this list yet. When members of this list post new statuses, they will appear here.' />}
           bindToDocument={!multiColumn}
         />
+
+        <Helmet>
+          <title>{title}</title>
+        </Helmet>
       </Column>
     );
   }

app/javascript/mastodon/features/lists/index.js

@@ -1,18 +1,19 @@
-import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import LoadingIndicator from '../../components/loading_indicator';
-import Column from '../ui/components/column';
-import ColumnBackButtonSlim from '../../components/column_back_button_slim';
-import { fetchLists } from '../../actions/lists';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import ColumnLink from '../ui/components/column_link';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import ColumnSubheading from '../ui/components/column_subheading';
+import { connect } from 'react-redux';
-import NewListForm from './components/new_list_form';
 import { createSelector } from 'reselect';
-import ScrollableList from '../../components/scrollable_list';
+import { fetchLists } from 'mastodon/actions/lists';
+import ColumnBackButtonSlim from 'mastodon/components/column_back_button_slim';
+import LoadingIndicator from 'mastodon/components/loading_indicator';
+import ScrollableList from 'mastodon/components/scrollable_list';
+import Column from 'mastodon/features/ui/components/column';
+import ColumnLink from 'mastodon/features/ui/components/column_link';
+import ColumnSubheading from 'mastodon/features/ui/components/column_subheading';
+import NewListForm from './components/new_list_form';
 
 const messages = defineMessages({
   heading: { id: 'column.lists', defaultMessage: 'Lists' },
@@ -76,6 +77,10 @@ class Lists extends ImmutablePureComponent {
             <ColumnLink key={list.get('id')} to={`/lists/${list.get('id')}`} icon='list-ul' text={list.get('title')} />,
           )}
         </ScrollableList>
+
+        <Helmet>
+          <title>{intl.formatMessage(messages.heading)}</title>
+        </Helmet>
       </Column>
     );
   }

app/javascript/mastodon/features/notifications/index.js

@@ -28,7 +28,6 @@ import compareId from 'mastodon/compare_id';
 import NotificationsPermissionBanner from './components/notifications_permission_banner';
 import NotSignedInIndicator from 'mastodon/components/not_signed_in_indicator';
 import { Helmet } from 'react-helmet';
-import { title } from 'mastodon/initial_state';
 
 const messages = defineMessages({
   title: { id: 'column.notifications', defaultMessage: 'Notifications' },
@@ -281,7 +280,7 @@ class Notifications extends React.PureComponent {
         {scrollContainer}
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );

app/javascript/mastodon/features/privacy_policy/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { title } from 'mastodon/initial_state';
 import { Helmet } from 'react-helmet';
 import { FormattedMessage, FormattedDate, injectIntl, defineMessages } from 'react-intl';
 import Column from 'mastodon/components/column';
@@ -51,7 +50,7 @@ class PrivacyPolicy extends React.PureComponent {
         </div>
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );

app/javascript/mastodon/features/public_timeline/index.js

@@ -10,7 +10,6 @@ import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import { connectPublicStream } from '../../actions/streaming';
 import { Helmet } from 'react-helmet';
-import { title } from 'mastodon/initial_state';
 
 const messages = defineMessages({
   title: { id: 'column.public', defaultMessage: 'Federated timeline' },
@@ -148,7 +147,7 @@ class PublicTimeline extends React.PureComponent {
         />
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title)} - {title}</title>
+          <title>{intl.formatMessage(messages.title)}</title>
         </Helmet>
       </Column>
     );

app/javascript/mastodon/features/status/index.js

@@ -56,7 +56,7 @@ import { openModal } from '../../actions/modal';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { HotKeys } from 'react-hotkeys';
-import { boostModal, deleteModal, title } from '../../initial_state';
+import { boostModal, deleteModal } from '../../initial_state';
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
 import Icon from 'mastodon/components/icon';
@@ -658,7 +658,7 @@ class Status extends ImmutablePureComponent {
         </ScrollContainer>
 
         <Helmet>
-          <title>{titleFromStatus(status)} - {title}</title>
+          <title>{titleFromStatus(status)}</title>
         </Helmet>
       </Column>
     );

app/javascript/mastodon/features/ui/index.js

@@ -54,9 +54,8 @@ import {
   About,
   PrivacyPolicy,
 } from './util/async-components';
-import { me, title } from '../../initial_state';
+import { me } from '../../initial_state';
 import { closeOnboarding, INTRODUCTION_VERSION } from 'mastodon/actions/onboarding';
-import { Helmet } from 'react-helmet';
 import Header from './components/header';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
@@ -575,10 +574,6 @@ class UI extends React.PureComponent {
           <LoadingBarContainer className='loading-bar' />
           <ModalContainer />
           <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
-
-          <Helmet>
-            <title>{title}</title>
-          </Helmet>
         </div>
       </HotKeys>
     );