Cleanup featuredLinks usage, fix insights page, better ArticleList (github#19872)

* cleanup featuredLinks usage, fix insights page, better ArticleList component

Author: mikesurowiec

Diff for: components/context/ProductLandingContext.tsx

@@ -39,7 +39,7 @@ export type ProductLandingContextT = {
     overview?: string
   } | null
   product_video?: string
-  guideCards: Array<FeaturedLink>
+  featuredLinks: Record<string, Array<FeaturedLink>>
   productCodeExamples: Array<CodeExample>
   productUserExamples: Array<{ username: string; description: string }>
   productCommunityExamples: Array<{ repo: string; description: string }>
@@ -74,6 +74,22 @@ export const useProductLandingContext = (): ProductLandingContextT => {
   return context
 }
 
+export const getFeaturedLinksFromReq = (req: any): Record<string, Array<FeaturedLink>> => {
+  return Object.fromEntries(
+    Object.entries(req.context.featuredLinks || {}).map(([key, entries]) => {
+      return [
+        key,
+        (entries as Array<any>).map((entry) => ({
+          href: entry.href,
+          title: entry.title,
+          intro: entry.intro,
+          authors: entry.page.authors || [],
+        })),
+      ]
+    })
+  )
+}
+
 export const getProductLandingContextFromRequest = (req: any): ProductLandingContextT => {
   const productTree = req.context.currentProductTree
   const page = req.context.page
@@ -113,16 +129,7 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
         }
       : null,
 
-    guideCards: (req.context.featuredLinks ? req.context.featuredLinks.guideCards || [] : []).map(
-      (link: any) => {
-        return {
-          href: link.href,
-          title: link.title,
-          intro: link.intro,
-          authors: link.page.authors || [],
-        }
-      }
-    ),
+    featuredLinks: getFeaturedLinksFromReq(req),
 
     tocItems: req.context.tocItems || [],
 

Diff for: components/context/TocLandingContext.tsx

@@ -1,5 +1,6 @@
 import pick from 'lodash/pick'
 import { createContext, useContext } from 'react'
+import { FeaturedLink, getFeaturedLinksFromReq } from './ProductLandingContext'
 
 export type TocItem = {
   fullPath: string
@@ -13,6 +14,7 @@ export type TocLandingContextT = {
   productCallout: string
   tocItems: Array<TocItem>
   variant?: 'compact' | 'expanded'
+  featuredLinks: Record<string, Array<FeaturedLink>>
 }
 
 export const TocLandingContext = createContext<TocLandingContextT | null>(null)
@@ -36,5 +38,7 @@ export const getTocLandingContextFromRequest = (req: any): TocLandingContextT =>
       pick(obj, ['fullPath', 'title', 'intro'])
     ),
     variant: req.context.genericTocFlat ? 'expanded' : 'compact',
+
+    featuredLinks: getFeaturedLinksFromReq(req),
   }
 }

Diff for: components/landing/ArticleList.tsx

@@ -0,0 +1,80 @@
+import cx from 'classnames'
+import dayjs from 'dayjs'
+
+import { Link } from 'components/Link'
+import { ArrowRightIcon } from '@primer/octicons-react'
+import { FeaturedLink } from 'components/context/ProductLandingContext'
+import { TruncateLines } from 'components/TruncateLines'
+
+type Props = {
+  title?: string
+  viewAllHref?: string
+  articles: Array<FeaturedLink>
+  variant?: 'compact' | 'spaced'
+  titleVariant?: 'large' | 'default'
+}
+export const ArticleList = ({
+  title,
+  viewAllHref,
+  articles,
+  variant = 'compact',
+  titleVariant = 'default',
+}: Props) => {
+  return (
+    <>
+      {title && (
+        <div className="mb-4 d-flex flex-items-baseline">
+          <h3
+            className={cx(
+              titleVariant === 'large'
+                ? 'f4 text-normal text-mono text-uppercase'
+                : 'f5 text-normal text-mono underline-dashed color-text-secondary'
+            )}
+          >
+            {title}
+          </h3>
+          {viewAllHref && (
+            <Link href={viewAllHref} className="ml-4">
+              View all <ArrowRightIcon size={14} className="v-align-middle" />
+            </Link>
+          )}
+        </div>
+      )}
+
+      <ul className="list-style-none">
+        {articles.map((link) => {
+          return (
+            <li key={link.href} className={cx(variant === 'compact' && 'border-top')}>
+              <Link
+                href={link.href}
+                className="link-with-intro Bump-link--hover no-underline d-block py-3"
+              >
+                <h4 className="link-with-intro-title">
+                  <span dangerouslySetInnerHTML={{ __html: link.title }} />
+                  <span className="Bump-link-symbol">→</span>
+                </h4>
+                {!link.hideIntro && link.intro && (
+                  <TruncateLines
+                    as="p"
+                    maxLines={variant === 'spaced' ? 6 : 2}
+                    className="link-with-intro-intro color-text-secondary mb-0 mt-1"
+                  >
+                    <span dangerouslySetInnerHTML={{ __html: link.intro }} />
+                  </TruncateLines>
+                )}
+                {link.date && (
+                  <time
+                    className="tooltipped tooltipped-n color-text-tertiary text-mono mt-1"
+                    aria-label={dayjs(link.date).format('LLL')}
+                  >
+                    {dayjs(link.date).format('MMMM DD')}
+                  </time>
+                )}
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </>
+  )
+}

Diff for: components/landing/FeaturedArticles.tsx

@@ -1,11 +1,8 @@
 import cx from 'classnames'
-import dayjs from 'dayjs'
 
-import { Link } from 'components/Link'
-import { ArrowRightIcon } from '@primer/octicons-react'
-import { FeaturedLink, useProductLandingContext } from 'components/context/ProductLandingContext'
+import { useProductLandingContext } from 'components/context/ProductLandingContext'
 import { useTranslation } from 'components/hooks/useTranslation'
-import { TruncateLines } from 'components/TruncateLines'
+import { ArticleList } from './ArticleList'
 
 export const FeaturedArticles = () => {
   const { featuredArticles = [], whatsNewChangelog, changelogUrl } = useProductLandingContext()
@@ -22,6 +19,7 @@ export const FeaturedArticles = () => {
           >
             <ArticleList
               title={section.label}
+              titleVariant="large"
               viewAllHref={section.viewAllHref}
               articles={section.articles}
             />
@@ -33,6 +31,7 @@ export const FeaturedArticles = () => {
         <div className={cx('col-12 mb-4 mb-lg-0 col-lg-4')}>
           <ArticleList
             title={t('whats_new')}
+            titleVariant="large"
             viewAllHref={changelogUrl}
             articles={(whatsNewChangelog || []).map((link) => {
               return {
@@ -47,61 +46,3 @@ export const FeaturedArticles = () => {
     </div>
   )
 }
-
-type ArticleListProps = {
-  title?: string
-  viewAllHref?: string
-  articles: Array<FeaturedLink>
-  maxLines?: number
-}
-export const ArticleList = ({ title, viewAllHref, articles, maxLines = 2 }: ArticleListProps) => {
-  return (
-    <>
-      {title && (
-        <div className="featured-links-heading mb-4 d-flex flex-items-baseline">
-          <h3 className="f4 text-normal text-mono text-uppercase">{title}</h3>
-          {viewAllHref && (
-            <Link href={viewAllHref} className="ml-4">
-              View all <ArrowRightIcon size={14} className="v-align-middle" />
-            </Link>
-          )}
-        </div>
-      )}
-
-      <ul className="list-style-none">
-        {articles.map((link) => {
-          return (
-            <li key={link.href} className="border-top">
-              <Link
-                href={link.href}
-                className="link-with-intro Bump-link--hover no-underline d-block py-3"
-              >
-                <h4 className="link-with-intro-title">
-                  <span dangerouslySetInnerHTML={{ __html: link.title }} />
-                  <span className="Bump-link-symbol">→</span>
-                </h4>
-                {!link.hideIntro && link.intro && (
-                  <TruncateLines
-                    as="p"
-                    maxLines={maxLines}
-                    className="link-with-intro-intro color-text-secondary mb-0 mt-1"
-                  >
-                    <span dangerouslySetInnerHTML={{ __html: link.intro }} />
-                  </TruncateLines>
-                )}
-                {link.date && (
-                  <time
-                    className="tooltipped tooltipped-n color-text-tertiary text-mono mt-1"
-                    aria-label={dayjs(link.date).format('LLL')}
-                  >
-                    {dayjs(link.date).format('MMMM DD')}
-                  </time>
-                )}
-              </Link>
-            </li>
-          )
-        })}
-      </ul>
-    </>
-  )
-}

Diff for: components/landing/GuideCards.tsx

@@ -10,17 +10,18 @@ import { GuideCard } from 'components/landing/GuideCard'
 export const GuideCards = () => {
   const router = useRouter()
   const { currentCategory } = useMainContext()
-  const { guideCards, hasGuidesPage } = useProductLandingContext()
+  const { featuredLinks, hasGuidesPage } = useProductLandingContext()
+
   const routePath = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
 
-  if (!guideCards) {
+  if (!featuredLinks.guideCards) {
     return null
   }
 
   return (
     <div>
       <div className="d-lg-flex gutter-lg flex-items-stretch">
-        {(guideCards || []).map((guide) => {
+        {(featuredLinks.guideCards || []).map((guide) => {
           return <GuideCard key={guide.href} guide={guide} />
         })}
       </div>

Diff for: components/landing/ProductArticlesList.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames'
 import { useState } from 'react'
 
-import { ChevronUpIcon } from '@primer/octicons-react'
+import { ChevronDownIcon } from '@primer/octicons-react'
 
 import { ProductTreeNode, useMainContext } from 'components/context/MainContext'
 import { Link } from 'components/Link'
@@ -22,13 +22,13 @@ export const ProductArticlesList = () => {
           return null
         }
 
-        return <ArticleList key={treeNode.href + i} treeNode={treeNode} />
+        return <ProductTreeNodeList key={treeNode.href + i} treeNode={treeNode} />
       })}
     </div>
   )
 }
 
-const ArticleList = ({ treeNode }: { treeNode: ProductTreeNode }) => {
+const ProductTreeNodeList = ({ treeNode }: { treeNode: ProductTreeNode }) => {
   const [isShowingMore, setIsShowingMore] = useState(false)
 
   return (
@@ -61,7 +61,7 @@ const ArticleList = ({ treeNode }: { treeNode: ProductTreeNode }) => {
       {!isShowingMore && treeNode.childPages.length > maxArticles && (
         <button onClick={() => setIsShowingMore(true)} className="btn-link Link--secondary">
           Show {treeNode.childPages.length - maxArticles} more{' '}
-          <ChevronUpIcon className="v-align-text-bottom" />
+          <ChevronDownIcon className="v-align-text-bottom" />
         </button>
       )}
     </div>

Diff for: components/landing/ProductLanding.tsx

@@ -19,7 +19,7 @@ export const ProductLanding = () => {
   const { isEnterpriseServer } = useVersion()
   const {
     shortTitle,
-    guideCards,
+    featuredLinks,
     productUserExamples,
     productCommunityExamples,
     productCodeExamples,
@@ -60,7 +60,7 @@ export const ProductLanding = () => {
         </LandingSection>
       )}
 
-      {guideCards.length > 0 && (
+      {featuredLinks.guideCards?.length > 0 && (
         <div className="color-bg-tertiary py-6">
           <LandingSection title={t('guides')} sectionLink="guides-2" className="my-6">
             <GuideCards />

Diff for: components/landing/TocLanding.tsx

@@ -4,9 +4,14 @@ import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
 import { Breadcrumbs } from 'components/Breadcrumbs'
 import { useTocLandingContext } from 'components/context/TocLandingContext'
 import { ArticleTitle } from 'components/article/ArticleTitle'
+import { ArticleList } from 'components/landing/ArticleList'
+import { useTranslation } from 'components/hooks/useTranslation'
 
 export const TocLanding = () => {
-  const { title, introPlainText, tocItems, productCallout, variant } = useTocLandingContext()
+  const { title, introPlainText, tocItems, productCallout, variant, featuredLinks } =
+    useTocLandingContext()
+  const { t } = useTranslation('toc')
+
   return (
     <DefaultLayout>
       <div className="container-xl px-3 px-md-6 my-4 my-lg-4">
@@ -24,7 +29,7 @@ export const TocLanding = () => {
 
         <div className="article-grid-container">
           <div>
-            <div className="mt-8">
+            <div className="mt-7">
               <ArticleTitle>{title}</ArticleTitle>
 
               <div className="lead-mktg">
@@ -42,6 +47,28 @@ export const TocLanding = () => {
             <div className="border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0" />
 
             <div className={variant === 'expanded' ? 'mt-7' : 'mt-2'}>
+              {featuredLinks.gettingStarted && featuredLinks.popular && (
+                <div className="pb-8 container-xl">
+                  <div className="gutter gutter-xl-spacious clearfix">
+                    <div className="col-12 col-lg-6 mb-md-4 mb-lg-0 float-left">
+                      <ArticleList
+                        title={t('getting_started')}
+                        variant="spaced"
+                        articles={featuredLinks.gettingStarted}
+                      />
+                    </div>
+
+                    <div className="col-12 col-lg-6 float-left">
+                      <ArticleList
+                        title={t('popular')}
+                        variant="spaced"
+                        articles={featuredLinks.popular}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+
               <TableOfContents items={tocItems} variant={variant} />
             </div>
           </div>