feat(platform): add descriptions and titles to each route

packages/components/package.json

@@ -26,8 +26,12 @@
     "query-string": "^7.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "rxjs": "^7.5.6"
+  },
+  "devDependencies": {
+    "@types/react-helmet": "^6.1.5"
   }
 }

packages/components/src/helmet/index.tsx

@@ -0,0 +1,60 @@
+/*
+Copyright 2022 ByteDance and/or its affiliates.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { compact } from 'lodash'
+import type { FC } from 'react'
+import { Helmet as ReactHelmet } from 'react-helmet'
+
+import Logo from './logo.png'
+
+type Props = {
+  title?: string
+  description?: string
+  keywords?: string[]
+}
+
+const DEFAULT_TITLE = 'Perfsee'
+const DEFAULT_DESCRIPTION = 'Perfsee is set of tools for measuring and debugging performance of frontend applications'
+const DEFAULT_KEYWORDS = ['perfsee', 'performance', 'frontend', 'webpack', 'lighthouse']
+
+export const Helmet: FC<Props> = (props) => {
+  const { title = DEFAULT_TITLE, description = DEFAULT_DESCRIPTION, keywords = DEFAULT_KEYWORDS } = props
+
+  const keywordsString = compact(keywords).join(', ')
+
+  return (
+    <ReactHelmet defaultTitle={DEFAULT_TITLE}>
+      {title && <title>{title}</title>}
+      {description && <meta name="description" content={description} />}
+      {keywordsString && <meta name="keywords" content={keywordsString} />}
+
+      <meta property="og:title" content={title} />
+      <meta property="og:type" content="website" />
+      <meta property="og:description" content={description} />
+
+      <meta property="og:image" content={Logo} />
+      <meta property="og:image:type" content="image/png" />
+      <meta property="og:image:width" content="960" />
+      <meta property="og:image:height" content="960" />
+      <meta property="og:image:alt" content="Perfsee Logo" />
+
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={Logo} />
+    </ReactHelmet>
+  )
+}

packages/components/src/index.ts

@@ -56,6 +56,8 @@ export * from './format-markdown-link'
 export * from './donut-chart'
 export * from './modal'
 export * from './pop-confirm'
+export * from './helmet'
+export * from './route'
 
 // if any of the components imported ever by non-async modules, then all components will be loaded in sync mode
 // which would involve a lot of useless downloading traffic.

packages/components/src/route/index.tsx

@@ -0,0 +1,63 @@
+/*
+Copyright 2022 ByteDance and/or its affiliates.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useMemo } from 'react'
+import { Route as ReactRoute } from 'react-router'
+import type { RouteProps as ReactRouteProps } from 'react-router'
+
+import { titleFactory as titleFactories } from '@perfsee/shared/routes'
+
+import { Helmet } from '../helmet'
+
+interface RouteProps extends ReactRouteProps {
+  title?: (data: any) => string
+  // transferred by Switch component
+  computedMatch?: any
+}
+
+export const Route = (props: RouteProps) => {
+  const { title, path, computedMatch, ...routeProps } = props
+
+  const titleFactory = useMemo(() => {
+    if (!title) {
+      if (typeof path === 'string') {
+        return titleFactories[path] as (data: any) => string | undefined
+      }
+      return undefined
+    } else {
+      return title
+    }
+  }, [path, title])
+
+  const titleString = useMemo(() => {
+    if (!titleFactory) {
+      return null
+    }
+
+    return titleFactory(computedMatch?.params ?? {})
+  }, [computedMatch?.params, titleFactory])
+
+  if (titleString) {
+    return (
+      <>
+        <Helmet title={titleString} />
+        <ReactRoute path={path} {...routeProps} />
+      </>
+    )
+  }
+
+  return <ReactRoute path={path} {...routeProps} />
+}

packages/platform/src/modules/bundle/index.tsx

@@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Switch, Redirect, Route } from 'react-router'
+import { Switch, Redirect } from 'react-router'
 
+import { Route } from '@perfsee/components'
 import { lazy } from '@perfsee/platform/common'
 import { staticPath } from '@perfsee/shared/routes'
 

packages/platform/src/modules/competitor/index.tsx

@@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Switch, Redirect, Route } from 'react-router'
+import { Switch, Redirect } from 'react-router'
 
+import { Route } from '@perfsee/components'
 import { staticPath } from '@perfsee/shared/routes'
 
 import { Competitor } from './competitor'

packages/platform/src/modules/lab/index.tsx

@@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Switch, Redirect, Route } from 'react-router'
+import { Switch, Redirect } from 'react-router'
 
+import { Route } from '@perfsee/components'
 import { staticPath } from '@perfsee/shared/routes'
 
 import { ComparisonBox } from '../components/comparison-box'

packages/platform/src/modules/me/index.tsx

@@ -17,9 +17,9 @@ limitations under the License.
 import { Icon, PersonaSize, Stack, Text } from '@fluentui/react'
 import { useModule, useModuleState } from '@sigi/react'
 import { useCallback, useEffect } from 'react'
-import { Link, Route, Switch } from 'react-router-dom'
+import { Link, Switch } from 'react-router-dom'
 
-import { BodyContainer, BodyPadding } from '@perfsee/components'
+import { BodyContainer, BodyPadding, Route } from '@perfsee/components'
 import { staticPath } from '@perfsee/shared/routes'
 
 import { ConnectedAccount, ConnectedAccountsModule, UserModule } from '../shared'

packages/platform/src/modules/project/features.tsx

@@ -17,10 +17,10 @@ limitations under the License.
 import { Spinner, SpinnerSize } from '@fluentui/react'
 import { useModule, useModuleState } from '@sigi/react'
 import { memo, useEffect, useMemo } from 'react'
-import { useParams, Redirect, Route } from 'react-router'
+import { useParams, Redirect } from 'react-router'
 import { Switch } from 'react-router-dom'
 
-import { NotFound } from '@perfsee/components'
+import { NotFound, Route } from '@perfsee/components'
 import { Permission } from '@perfsee/schema'
 import { staticPath, RouteTypes, pathFactory } from '@perfsee/shared/routes'
 

packages/platform/src/modules/project/settings/index.tsx

@@ -112,6 +112,12 @@ export const Settings = () => {
     )
   }, [onLinkClick, settingName])
 
+  useEffect(() => {
+    if (!settingName) {
+      history.push(generateProjectRoute(pathFactory.project.settings, { settingName: 'basic' }))
+    }
+  }, [generateProjectRoute, history, settingName])
+
   return (
     <div style={{ padding: '0 20px' }}>
       <Breadcrumb items={breadcrumbItems} />

packages/platform/src/routes/routes.tsx

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Route, Switch } from 'react-router'
+import { Switch } from 'react-router'
 
-import { NotFound } from '@perfsee/components'
+import { NotFound, Route } from '@perfsee/components'
 import { staticPath } from '@perfsee/shared/routes'
 
 import { LoginRedirect } from '../modules/login/login-redirect'

packages/shared/src/routes/router.ts

@@ -12,6 +12,10 @@ function makePathsFrom<Params = void>(path: string) {
   return compile(path) as PathMaker<Params, Params extends void ? false : true>
 }
 
+function makeTitlesFrom(title: string, data: Record<string, any>) {
+  return title.replace(/\{(.*?)\}/g, (match, key) => data[key] ?? match)
+}
+
 export interface RouteTypes {
   home: void
   docs: { home: void; api: void }
@@ -162,3 +166,55 @@ export const pathFactory = {
     ),
   },
 }
+
+export const titleFactory = {
+  '/': (data: Record<string, any>) => makeTitlesFrom('Perfsee', data),
+  '/docs': (data: Record<string, any>) => makeTitlesFrom('Perfsee', data),
+  '/docs/api': (data: Record<string, any>) => makeTitlesFrom('Perfsee', data),
+  '/features': (data: Record<string, any>) => makeTitlesFrom('Perfsee', data),
+  '/features/bundle': (data: Record<string, any>) => makeTitlesFrom('Perfsee', data),
+  '/features/lab': (data: Record<string, any>) => makeTitlesFrom('Perfsee', data),
+  '/features/source': (data: Record<string, any>) => makeTitlesFrom('Perfsee', data),
+  '/projects': (data: Record<string, any>) => makeTitlesFrom('Projects | Perfsee', data),
+  '/404': (data: Record<string, any>) => makeTitlesFrom('Not found | Perfsee', data),
+  '/status': (data: Record<string, any>) => makeTitlesFrom('Status | Perfsee', data),
+  '/license': (data: Record<string, any>) => makeTitlesFrom('License | Perfsee', data),
+  '/applications': (data: Record<string, any>) => makeTitlesFrom('Perfsee', data),
+  '/edit-password': (data: Record<string, any>) => makeTitlesFrom('Edit password | Perfsee', data),
+  '/reset-password': (data: Record<string, any>) => makeTitlesFrom('Reset password | Perfsee', data),
+  '/me': (data: Record<string, any>) => makeTitlesFrom('Me | Perfsee', data),
+  '/me/connected-accounts': (data: Record<string, any>) => makeTitlesFrom('Connected Accounts | Me | Perfsee', data),
+  '/me/billing': (data: Record<string, any>) => makeTitlesFrom('Billing | Me | Perfsee', data),
+  '/me/access-token': (data: Record<string, any>) => makeTitlesFrom('Access token | Me | Perfsee', data),
+  '/login': (data: Record<string, any>) => makeTitlesFrom('Login | Perfsee', data),
+  '/import/github': (data: Record<string, any>) => makeTitlesFrom('Import github | Perfsee', data),
+  '/register': (data: Record<string, any>) => makeTitlesFrom('Register | Perfsee', data),
+  '/projects/:projectId': (data: Record<string, any>) => makeTitlesFrom('{projectId} | Perfsee', data),
+  '/projects/:projectId/:feature?': (data: Record<string, any>) =>
+    makeTitlesFrom('{feature} | {projectId} | Perfsee', data),
+  '/projects/:projectId/home': (data: Record<string, any>) => makeTitlesFrom('Home | {projectId} | Perfsee', data),
+  '/projects/:projectId/statistics': (data: Record<string, any>) =>
+    makeTitlesFrom('Statistics | {projectId} | Perfsee', data),
+  '/projects/:projectId/statistics/artifacts': (data: Record<string, any>) =>
+    makeTitlesFrom('Artifacts | Statistics | {projectId} | Perfsee', data),
+  '/projects/:projectId/statistics/snapshots': (data: Record<string, any>) =>
+    makeTitlesFrom('Snapshots | Statistics | {projectId} | Perfsee', data),
+  '/projects/:projectId/bundle': (data: Record<string, any>) => makeTitlesFrom('Bundle | {projectId} | Perfsee', data),
+  '/projects/:projectId/bundle/:bundleId': (data: Record<string, any>) =>
+    makeTitlesFrom('Bundle #{bundleId} | Bundle | {projectId} | Perfsee', data),
+  '/projects/:projectId/bundle/:bundleId/bundle-content': (data: Record<string, any>) =>
+    makeTitlesFrom('Bundle content #{bundleId} | Bundle | {projectId} | Perfsee', data),
+  '/projects/:projectId/lab': (data: Record<string, any>) => makeTitlesFrom('Lab | {projectId} | Perfsee', data),
+  '/projects/:projectId/lab/reports/:reportId/:tabName?': (data: Record<string, any>) =>
+    makeTitlesFrom('Report #{reportId} | Lab | {projectId} | Perfsee', data),
+  '/projects/:projectId/competitor': (data: Record<string, any>) =>
+    makeTitlesFrom('Competitor | {projectId} | Perfsee', data),
+  '/projects/:projectId/competitor/reports/:tabName': (data: Record<string, any>) =>
+    makeTitlesFrom('Competitor Report | Competitor | {projectId} | Perfsee', data),
+  '/projects/:projectId/source': (data: Record<string, any>) => makeTitlesFrom('Source | {projectId} | Perfsee', data),
+  '/projects/:projectId/report': (data: Record<string, any>) => makeTitlesFrom('Report | {projectId} | Perfsee', data),
+  '/projects/:projectId/settings/:settingName?': (data: Record<string, any>) =>
+    makeTitlesFrom('Setting {settingName} | {projectId} | Perfsee', data),
+  '/projects/:projectId/jobs/:type/:entityId': (data: Record<string, any>) =>
+    makeTitlesFrom('{type} job #{entityId} | {projectId} | Perfsee', data),
+}