feat: wire up remaining head data, csrf token

Anthonysidesapp · May 19, 2021 · 2fc3e7e · 2fc3e7e
1 parent 791bc80
commit 2fc3e7e
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 29 deletions.
diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx
@@ -7,16 +7,43 @@ import { ScrollButton } from 'components/ScrollButton'
 import { SupportSection } from 'components/SupportSection'
 import { DeprecationBanner } from 'components/DeprecationBanner'
 import { useMainContext } from 'components/context/MainContext'
+import { useTranslation } from './hooks/useTranslation'
+import { useVersion } from './hooks/useVersion'
 
 type Props = { children?: React.ReactNode }
 export const DefaultLayout = (props: Props) => {
-  const { builtAssets, expose } = useMainContext()
+  const { builtAssets, expose, page, error } = useMainContext()
+  const { currentVersion } = useVersion()
+  const { t } = useTranslation('errors')
   return (
     <div className="d-lg-flex">
       <Head>
+        {error === '404' ? (
+          <title>{t('oops')}</title>
+        ) : currentVersion !== 'homepage' && page.fullTitle ? (
+          <title>{page.fullTitle}</title>
+        ) : null}
+
         <link rel="stylesheet" href={builtAssets.main.css} />
         <script id="expose" type="application/json" dangerouslySetInnerHTML={{ __html: expose }} />
         <script src={builtAssets.main.js} />
+
+        {/* For Google and Bots */}
+        {page.introPlainText && <meta name="description" content={page.introPlainText} />}
+
+        {page.topics.length > 0 && <meta name="keywords" content={page.topics.join(',')} />}
+
+        {page.hidden && <meta name="robots" content="noindex" />}
+
+        {page.languageVariants.map((languageVariant) => {
+          return (
+            <link
+              rel="alternate"
+              hrefLang={languageVariant.hreflang}
+              href={`https://docs.github.com${languageVariant.href}`}
+            />
+          )
+        })}
       </Head>
       <SidebarNav />
 

diff --git a/components/context/MainContext.tsx b/components/context/MainContext.tsx
@@ -103,15 +103,22 @@ export type MainContextT = {
   productSiteTree?: ProductSiteTree
   productSiteTreeNew?: SiteTreePage
   featureFlags: FeatureFlags
-  pageHidden: boolean
-  pagePermalinks?: Array<{
-    languageCode: string
-    relativePath: string
-    title: string
-    pageVersionTitle: string
-    pageVersion: string
-    href: string
-  }>
+  page: {
+    languageVariants: Array<{ name: string; code: string; hreflang: string; href: string }>
+    topics: Array<string>
+    fullTitle?: string
+    introPlainText?: string
+    hidden: boolean
+    permalinks?: Array<{
+      languageCode: string
+      relativePath: string
+      title: string
+      pageVersionTitle: string
+      pageVersion: string
+      href: string
+    }>
+  }
+
   enterpriseServerVersions: Array<string>
 }
 
@@ -137,17 +144,23 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
     airGap: req.context.AIRGAP || false,
     currentCategory: req.context.currentCategory || '',
     relativePath: req.context.page?.relativePath,
-    pagePermalinks: req.context.page?.permalinks.map((obj: any) =>
-      pick(obj, [
-        'title',
-        'pageVersionTitle',
-        'pageVersion',
-        'href',
-        'relativePath',
-        'languageCode',
-      ])
-    ),
-    pageHidden: req.context.page.hidden || false,
+    page: {
+      languageVariants: req.context.page.languageVariants,
+      fullTitle: req.context.page.fullTitle,
+      topics: req.context.page.topics || [],
+      introPlainText: req.context.page?.introPlainText,
+      permalinks: req.context.page?.permalinks.map((obj: any) =>
+        pick(obj, [
+          'title',
+          'pageVersionTitle',
+          'pageVersion',
+          'href',
+          'relativePath',
+          'languageCode',
+        ])
+      ),
+      hidden: req.context.page.hidden || false,
+    },
     enterpriseServerReleases: JSON.parse(JSON.stringify(req.context.enterpriseServerReleases)),
     enterpriseServerVersions: req.context.enterpriseServerVersions,
     currentLanguage: req.context.currentLanguage,

diff --git a/pages/[versionId]/[productId]/index.tsx b/pages/[versionId]/[productId]/index.tsx
@@ -12,7 +12,6 @@ import {
   ProductLandingContext,
   useProductLandingContext,
 } from 'components/context/ProductLandingContext'
-import { getThemeProps } from 'components/lib/getThemeProps'
 
 import { LandingHero } from 'components/landing/LandingHero'
 import { FeaturedArticles } from 'components/landing/FeaturedArticles'
@@ -101,7 +100,6 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
 
   return {
     props: {
-      themeProps: getThemeProps(req),
       mainContext: getMainContextFromRequest(req),
       productLandingContext: getProductLandingContextFromRequest(req),
     },

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,13 +1,16 @@
 import React, { useEffect } from 'react'
-import { AppProps } from 'next/app'
+import App from 'next/app'
+import type { AppProps, AppContext } from 'next/app'
 import Head from 'next/head'
 import { useTheme, ThemeProvider } from '@primer/components'
+import { getThemeProps } from 'components/lib/getThemeProps'
 
 import '@primer/css/index.scss'
 
 import { defaultThemeProps } from 'components/lib/getThemeProps'
 
-const App: React.FC<AppProps> = ({ Component, pageProps }) => {
+type MyAppProps = AppProps & { csrfToken: string, themeProps: typeof defaultThemeProps }
+const MyApp = ({ Component, pageProps, csrfToken, themeProps }: MyAppProps) => {
   return (
     <>
       <Head>
@@ -27,16 +30,24 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
           content="c1kuD-K2HIVF635lypcsWPoD4kilo5-jA_wBFyT4uMY"
         />
 
-        <meta name="csrf-token" content="$CSRFTOKEN$" />
+        <meta name="csrf-token" content={csrfToken} />
       </Head>
       <ThemeProvider>
-        <SetTheme themeProps={pageProps.themeProps} />
+        <SetTheme themeProps={themeProps} />
         <Component {...pageProps} />
       </ThemeProvider>
     </>
   )
 }
 
+MyApp.getInitialProps = async (appContext: AppContext) => {
+  const { ctx } = appContext
+  // calls page's `getInitialProps` and fills `appProps.pageProps`
+  const appProps = await App.getInitialProps(appContext);
+
+  return { ...appProps, themeProps: getThemeProps(ctx.req), csrfToken: (ctx.req as any).csrfToken() }
+}
+
 const SetTheme = ({ themeProps }: { themeProps: typeof defaultThemeProps }) => {
   // Cause primer/components to re-evaluate the 'auto' color mode on client side render
   const { setColorMode } = useTheme()
@@ -48,4 +59,4 @@ const SetTheme = ({ themeProps }: { themeProps: typeof defaultThemeProps }) => {
   return null
 }
 
-export default App
+export default MyApp
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -19,7 +19,6 @@ export default class MyDocument extends Document {
       return {
         ...initialProps,
         cssThemeProps: getThemeProps(ctx.req, 'css'),
-        themeProps: getThemeProps(ctx.req),
         styles: (
           <>
             {initialProps.styles}