Better Expo/example wrapper title (#102)

Summary: Pull Request resolved: #102 Changing the document title for the Expo and example wrapper pages to show the Expo Snack slug or the example slug in the page title rather than a generic page title. Reviewed By: chrisklaiber Differential Revision: D38477091 fbshipit-source-id: 750f68db4445bf197220d8a7fe351dcd247940d4
facebookresearch · Aug 6, 2022 · dc64c7b · dc64c7b · vercel · Aug 6, 2022
1 parent 4f0f293
commit dc64c7b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/website/src/components/ExampleLandingPage.js b/website/src/components/ExampleLandingPage.js
@@ -7,7 +7,8 @@
  * @format
  */
 
-import React from 'react';
+import Head from '@docusaurus/Head';
+import * as React from 'react';
 import {useEffect} from 'react';
 import LandingPageHeader from './LandingPageHeader';
 
@@ -30,7 +31,9 @@ export default function ExampleLandingPage({match, history}) {
 
   return (
     <div>
+      <Head title={`${slug} | PlayTorch Example`} />
       <LandingPageHeader
+        heroTitle={slug}
         nameOfSharedItem="example"
         urlToOpenInPlayTorch={`playtorch://example?example=${slug}`}
       />

diff --git a/website/src/components/ExpoSnackLandingPage.js b/website/src/components/ExpoSnackLandingPage.js
@@ -7,12 +7,13 @@
  * @format
  */
 
-import React from 'react';
-import clsx from 'clsx';
+import Head from '@docusaurus/Head';
 import ExpoSnack from '@site/src/components/ExpoSnack';
+import clsx from 'clsx';
+import * as React from 'react';
 import styles from './ExpoSnackLandingPage.module.css';
-import RedirectStarterSnack from './RedirectStarterSnack';
 import LandingPageHeader from './LandingPageHeader';
+import RedirectStarterSnack from './RedirectStarterSnack';
 
 export default function ExpoSnackLandingPage({match}) {
   const {expoSnackPath} = match.params;
@@ -23,7 +24,9 @@ export default function ExpoSnackLandingPage({match}) {
 
   return (
     <div>
+      <Head title={`${expoSnackPath} | PlayTorch Snack`} />
       <LandingPageHeader
+        heroTitle={expoSnackPath}
         nameOfSharedItem="snack"
         urlToOpenInPlayTorch={`playtorch://snack?snackUrl=exp://exp.host/${expoSnackPath}`}
       />

diff --git a/website/src/components/LandingPageHeader.js b/website/src/components/LandingPageHeader.js
@@ -27,6 +27,7 @@ function AppStoreButton({href, LogoComponent, label}) {
 }
 
 export default function LandingPageHeader({
+  heroTitle,
   urlToOpenInPlayTorch,
   nameOfSharedItem,
 }) {
@@ -37,7 +38,7 @@ export default function LandingPageHeader({
       <div className="col col--10 col--offset--1">
         <div className="hero">
           <div className="container">
-            <h1 className="hero__title">PlayTorch</h1>
+            <h1 className="hero__title">{heroTitle}</h1>
             <p className="hero__subtitle">
               PlayTorch is a framework for rapidly creating cross-platform
               mobile AI experiences.