Merge pull request #331 from jwplayer/fix/seo-score

fix(seo): fix seo score

.github/workflows/firebase-live.yml

@@ -16,6 +16,6 @@ jobs:
         run: yarn &&  MODE=demo yarn build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: "${{ secrets.GITHUB_TOKEN }}"
-          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
           channelId: live

.github/workflows/firebase-preview.yml

@@ -1,20 +1,35 @@
-name: 'Firebase Preview'
+name: Preview and Lighthouse
 
 on:
   pull_request:
-    branches: [ 'develop', 'feat/*', 'feature/*', 'release' ]
+    branches: ['develop', 'feat/*', 'feature/*', 'release']
 
 jobs:
   build_and_preview:
+    name: Build and preview
     runs-on: ubuntu-latest
+    outputs:
+      output1: ${{ steps.firebase_hosting_preview.outputs.details_url }}
     steps:
       - uses: actions/checkout@v2
-      - name: Build
+      - name: Build Preview Link
         env:
           APP_PLAYER_LICENSE_KEY: ${{ secrets.PLAYER_LICENSE_KEY }}
         run: yarn && MODE=preview yarn build
       - uses: FirebaseExtended/action-hosting-deploy@v0
+        id: firebase_hosting_preview
         with:
-          repoToken: "${{ secrets.GITHUB_TOKEN }}"
-          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
           expires: 30d
+
+  lhci:
+    name: Lighthouse
+    runs-on: ubuntu-latest
+    needs: build_and_preview
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Lighthouse CI
+        run: sudo yarn global add @lhci/[email protected]
+      - name: Run Lighthouse CI
+        run: lhci autorun --collect.url=${{ needs.build_and_preview.outputs.output1 }}?app-config=gnnuzabk --config=./lighthouserc.js

.gitignore

@@ -9,6 +9,7 @@ yarn-error.log
 .firebase
 firebase-debug.log
 .stylelintcache
+.lighthouseci
 
 # os or editor
 .idea

lighthouserc.js

@@ -1,16 +1,19 @@
 module.exports = {
   ci: {
     collect: {
-      url: ['http://127.0.0.1:4000'],
-      startServerCommand: 'http-server ./build -p 4000 -g',
-      startServerReadyPattern: 'Available on',
-      numberOfRuns: 1,
+      numberOfRuns: 3,
     },
     upload: {
       target: 'temporary-public-storage',
     },
     assert: {
-      preset: 'lighthouse:no-pwa',
+      assertions: {
+        'categories:performance': ['warn', { minScore: 0.9 }],
+        'categories:seo': ['error', { minScore: 0.9 }],
+        'categories:accessibility': ['warn', { minScore: 0.9 }],
+        'categories:best-practices': ['warn', { minScore: 0.9 }],
+        'categories:pwa': ['warn', { minScore: 0.9 }],
+      },
     },
   },
 };

public/locales/en/common.json

@@ -12,6 +12,7 @@
     "confirm": "Yes"
   },
   "default_site_name": "My OTT Application",
+  "default_description": "JW OTT Webapp is an open-source, dynamically generated video website.",
   "filter_videos_by": "Filter videos by {{name}}",
   "filter_videos_by_genre": "Filter videos by genre",
   "home": "Home",

public/locales/en/demo.json

@@ -1,5 +1,6 @@
 {
   "app_config_not_found": "Invalid or Missing App Config",
+  "app_config_learn_more": "Learn more about App Configs",
   "cancel_config_id": "Cancel",
   "click_to_unselect_config": "(click here to unselect this config)",
   "currently_previewing_config": "You are currently previewing config: '{{configSource}}'",

public/locales/es/common.json

@@ -12,6 +12,7 @@
     "confirm": "Sí"
   },
   "default_site_name": "Mi aplicación OTT",
+  "default_description": "",
   "filter_videos_by": "Filtrar videos por {{name}}",
   "filter_videos_by_genre": "Filtrar videos por género",
   "home": "Inicio",

public/locales/es/demo.json

@@ -1,5 +1,6 @@
 {
   "app_config_not_found": "Configuración de aplicación inválida o no encontrada",
+  "app_config_learn_more": "",
   "cancel_config_id": "Cancelar",
   "click_to_unselect_config": "(haz clic aquí para deseleccionar esta configuración)",
   "currently_previewing_config": "Actualmente estás previsualizando la configuración: '{{configSource}}'",

src/components/Button/Button.tsx

@@ -28,6 +28,7 @@ type Props = {
   disabled?: boolean;
   busy?: boolean;
   id?: string;
+  as?: 'button' | 'a';
 } & React.AriaAttributes;
 
 const Button: React.FC<Props> = ({
@@ -43,6 +44,7 @@ const Button: React.FC<Props> = ({
   busy,
   type,
   to,
+  as = 'button',
   onClick,
   className,
   ...rest

src/components/DemoConfigDialog/DemoConfigDialog.tsx

@@ -2,14 +2,14 @@ import React, { ChangeEventHandler, MouseEventHandler, useEffect, useState } fro
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
 import type { UseQueryResult } from 'react-query';
+import { Helmet } from 'react-helmet';
 
 import styles from './DemoConfigDialog.module.scss';
 
 import ErrorPage from '#components/ErrorPage/ErrorPage';
 import TextField from '#components/TextField/TextField';
 import Button from '#components/Button/Button';
 import { getConfigNavigateCallback } from '#src/utils/configOverride';
-import Link from '#components/Link/Link';
 import ConfirmationDialog from '#components/ConfirmationDialog/ConfirmationDialog';
 import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
 import type { Config } from '#types/Config';
@@ -136,16 +136,22 @@ const DemoConfigDialog = ({ selectedConfigSource, configQuery }: Props) => {
 
   return (
     <>
+      {!configQuery.isSuccess && (
+        <Helmet>
+          <meta name="description" content="Enter the App Config ID" />
+        </Helmet>
+      )}
       {configQuery.isSuccess && (
         <div className={styles.note}>
           <div>{t('currently_previewing_config', { configSource: selectedConfigSource })}</div>
-          <Link onClick={clearConfig}>{t('click_to_unselect_config')}</Link>
+          <Button variant="text" label={t('click_to_unselect_config')} onClick={clearConfig} />
         </div>
       )}
       {!configQuery.isSuccess && (
         <div className={styles.configModal}>
           <ErrorPage
             title={t('app_config_not_found')}
+            learnMoreLabel={t('app_config_learn_more')}
             helpLink={'https://docs.jwplayer.com/platform/docs/ott-create-an-app-config'}
             error={typeof state.error === 'string' ? undefined : state.error}
           >

src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap

@@ -8,11 +8,13 @@ exports[`<DemoConfigDialog> > renders and matches snapshot 1`] = `
     <div>
       currently_previewing_config
     </div>
-    <a
-      class="_link_a14c64"
+    <button
+      class="_button_f8f296 _default_f8f296 _text_f8f296"
     >
-      click_to_unselect_config
-    </a>
+      <span>
+        click_to_unselect_config
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -104,7 +106,7 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
               rel="noreferrer"
               target="_blank"
             >
-              learn_more
+              app_config_learn_more
             </a>
           </p>
         </main>

src/containers/Layout/Layout.tsx

@@ -26,6 +26,7 @@ const Layout = () => {
   const { t, i18n } = useTranslation('common');
   const { config, accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
   const { menu, assets, siteName, description, styling, features } = config;
+  const metaDescription = description || t('default_description');
   const { clientId } = useClientIntegration();
   const { searchPlaylist } = features || {};
   const { footerText } = styling || {};
@@ -105,11 +106,11 @@ const Layout = () => {
     <div className={styles.layout}>
       <Helmet>
         <title>{siteName}</title>
-        <meta name="description" content={description} />
-        <meta property="og:description" content={description} />
+        <meta name="description" content={metaDescription} />
+        <meta property="og:description" content={metaDescription} />
         <meta property="og:title" content={siteName} />
         <meta name="twitter:title" content={siteName} />
-        <meta name="twitter:description" content={description} />
+        <meta name="twitter:description" content={metaDescription} />
       </Helmet>
       <div className={styles.main}>
         <Header