Merge branch 'main' of https://github.com/github/docs-internal into grace-header-styling

Author: gracepark

assets/images/help/codespaces/add-prebuilt-container-command.png

@@ -11,7 +11,7 @@ import { useTranslation } from './hooks/useTranslation'
 
 type Props = { children?: React.ReactNode }
 export const DefaultLayout = (props: Props) => {
-  const { builtAssets, expose, page, error, isHomepageVersion } = useMainContext()
+  const { builtAssets, page, error, isHomepageVersion } = useMainContext()
   const { t } = useTranslation('errors')
   return (
     <div className="d-lg-flex">
@@ -22,7 +22,6 @@ export const DefaultLayout = (props: Props) => {
           <title>{page.fullTitle}</title>
         ) : null}
 
-        <script id="expose" type="application/json" dangerouslySetInnerHTML={{ __html: expose }} />
         <script src={builtAssets.main.js} />
 
         {/* For Google and Bots */}

assets/images/help/codespaces/codespaces-commad-palette.png

@@ -30,14 +30,11 @@ export function Search({ isStandalone = false, updateSearchParams = true, childr
   const { currentVersion } = useVersion()
 
   // Figure out language and version for index
-  const { expose } = useMainContext()
-  const {
-    searchOptions: { languages, versions, nonEnterpriseDefaultVersion },
-  } = JSON.parse(expose)
+  const { languages, searchVersions, nonEnterpriseDefaultVersion } = useMainContext()
   const router = useRouter()
   // fall back to the non-enterprise default version (FPT currently) on the homepage, 404 page, etc.
-  const version = versions[currentVersion] || versions[nonEnterpriseDefaultVersion]
-  const language = (languages.includes(router.locale) && router.locale) || 'en'
+  const version = searchVersions[currentVersion] || searchVersions[nonEnterpriseDefaultVersion]
+  const language = (Object.keys(languages).includes(router.locale || '') && router.locale) || 'en'
 
   // If the user shows up with a query in the URL, go ahead and search for it
   useEffect(() => {

assets/images/help/codespaces/codespaces-logs.png

@@ -1,4 +1,4 @@
-import { Tooltip, Link } from '@primer/components'
+import { Tooltip } from '@primer/components'
 import { PrinterIcon } from './PrinterIcon'
 
 type Props = {
@@ -10,10 +10,8 @@ export const ArticleTitle = ({ children }: Props) => {
       <h1 className="my-4 border-bottom-0">{children}</h1>
       <div className="d-none d-lg-block ml-2">
         <Tooltip aria-label="Print this article" noDelay direction="n">
-          <Link
-            as="button"
-            underline={false}
-            muted
+          <button
+            className="btn-link Link--muted"
             onClick={() => {
               try {
                 document.execCommand('print', false)
@@ -23,7 +21,7 @@ export const ArticleTitle = ({ children }: Props) => {
             }}
           >
             <PrinterIcon />
-          </Link>
+          </button>
         </Tooltip>
       </div>
     </div>

assets/images/help/codespaces/codespaces-stop.png

@@ -69,7 +69,6 @@ export type MainContextT = {
     article?: BreadcrumbT
   }
   builtAssets: { main: { js: string } }
-  expose: string
   activeProducts: Array<ProductT>
   currentProduct?: ProductT
   currentLayoutName: string
@@ -106,12 +105,14 @@ export type MainContextT = {
   }
 
   enterpriseServerVersions: Array<string>
+
+  searchVersions: Record<string, string>
+  nonEnterpriseDefaultVersion: string
 }
 
 export const getMainContextFromRequest = (req: any): MainContextT => {
   return {
     builtAssets: { main: { js: req.context.builtAssets.main.js } },
-    expose: req.context.expose,
     breadcrumbs: req.context.breadcrumbs || {},
     activeProducts: req.context.activeProducts,
     currentProduct: req.context.productMap[req.context.currentProduct] || null,
@@ -179,6 +180,8 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
       ? getCurrentProductTree(req.context.currentProductTree)
       : null,
     featureFlags: {},
+    searchVersions: req.context.searchVersions,
+    nonEnterpriseDefaultVersion: req.context.nonEnterpriseDefaultVersion,
   }
 }
 

assets/images/help/codespaces/codespaces-view-menu.png

@@ -48,7 +48,6 @@ export type ProductLandingContextT = {
     viewAllHref?: string // If provided, adds a "View All ->" to the header
     articles: Array<FeaturedLink>
   }>
-  changelog: { label: string; prefix: string }
   changelogUrl?: string
   whatsNewChangelog?: Array<{ href: string; title: string; date: string }>
   tocItems: Array<TocItem>
@@ -85,7 +84,6 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
       'beta_product',
       'intro',
       'product_video',
-      'changelog',
     ]),
     product: {
       href: productTree.href,

components/DefaultLayout.tsx

@@ -1,3 +1,4 @@
+import pick from 'lodash/pick'
 import { createContext, useContext } from 'react'
 
 export type TocItem = {
@@ -26,10 +27,13 @@ export const useTocLandingContext = (): TocLandingContextT => {
 }
 
 export const getTocLandingContextFromRequest = (req: any): TocLandingContextT => {
+  console.log(req.context.genericTocFlat, req.context.genericTocNested)
   return {
     title: req.context.page.title,
     introPlainText: req.context.page.introPlainText,
-    tocItems: req.context.genericTocFlat || req.context.genericTocNested || [],
+    tocItems: (req.context.genericTocFlat || req.context.genericTocNested || []).map((obj: any) =>
+      pick(obj, ['fullPath', 'title', 'intro'])
+    ),
     variant: req.context.genericTocFlat ? 'expanded' : 'compact',
   }
 }

components/Search.tsx

@@ -1,5 +1,6 @@
 import { RepoIcon } from '@primer/octicons-react'
 import { CodeExample } from 'components/context/ProductLandingContext'
+import { TruncateLines } from 'components/TruncateLines'
 
 type Props = {
   example: CodeExample
@@ -28,7 +29,9 @@ export const CodeExampleCard = ({ example }: Props) => {
       </div>
       <footer className="border-top p-4 color-text-secondary d-flex flex-items-center">
         <RepoIcon className="flex-shrink-0" />
-        <span className="ml-2 text-mono text-small color-text-link">{example.href}</span>
+        <TruncateLines as="span" maxLines={1} className="ml-2 text-mono text-small color-text-link line-break-anywhere">
+          {example.href}
+        </TruncateLines>
       </footer>
     </a>
   )

components/article/ArticleTitle.tsx

@@ -8,12 +8,8 @@ import { useTranslation } from 'components/hooks/useTranslation'
 import { TruncateLines } from 'components/TruncateLines'
 
 export const FeaturedArticles = () => {
-  const {
-    featuredArticles = [],
-    changelog,
-    whatsNewChangelog,
-    changelogUrl,
-  } = useProductLandingContext()
+  const { featuredArticles = [], whatsNewChangelog, changelogUrl } = useProductLandingContext()
+  const hasWhatsNewChangelog = whatsNewChangelog && whatsNewChangelog.length > 0
   const { t } = useTranslation('toc')
 
   return (
@@ -22,7 +18,7 @@ export const FeaturedArticles = () => {
         return (
           <div
             key={section.label + i}
-            className={cx('col-12 mb-4 mb-lg-0', changelog ? 'col-lg-4' : 'col-lg-6')}
+            className={cx('col-12 mb-4 mb-lg-0', hasWhatsNewChangelog ? 'col-lg-4' : 'col-lg-6')}
           >
             <ArticleList
               title={section.label}
@@ -33,8 +29,8 @@ export const FeaturedArticles = () => {
         )
       })}
 
-      {changelog && (
-        <div className={cx('col-12 mb-4 mb-lg-0', changelog ? 'col-lg-4' : 'col-lg-6')}>
+      {hasWhatsNewChangelog && (
+        <div className={cx('col-12 mb-4 mb-lg-0 col-lg-4')}>
           <ArticleList
             title={t('whats_new')}
             viewAllHref={changelogUrl}

components/context/MainContext.tsx

@@ -68,7 +68,7 @@ export const ProductLanding = () => {
         </div>
       )}
 
-      <LandingSection sectionLink="all-docs" title={`All ${shortTitle} Docs`}>
+      <LandingSection sectionLink="all-docs" title={`All ${shortTitle} docs`}>
         <ProductArticlesList />
       </LandingSection>
     </DefaultLayout>