From cf53f2e9d2af23387f6b80b1a6f77bc826ddd684 Mon Sep 17 00:00:00 2001
From: Diego Assencio <dassencio@github.com>
Date: Wed, 2 Jun 2021 18:16:49 +0200
Subject: [PATCH 1/2] Fix Enterprise Owner controls for GitHub Enterprise
 Server (#19668)

Co-authored-by: hubwriter <hubwriter@github.com>
---
 .../managing-users-in-your-enterprise/roles-in-an-enterprise.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/github/setting-up-and-managing-your-enterprise/managing-users-in-your-enterprise/roles-in-an-enterprise.md b/content/github/setting-up-and-managing-your-enterprise/managing-users-in-your-enterprise/roles-in-an-enterprise.md
index 29ed554e92..008ba202a4 100644
--- a/content/github/setting-up-and-managing-your-enterprise/managing-users-in-your-enterprise/roles-in-an-enterprise.md
+++ b/content/github/setting-up-and-managing-your-enterprise/managing-users-in-your-enterprise/roles-in-an-enterprise.md
@@ -26,7 +26,7 @@ For more information about adding people to your enterprise, see "{% if currentV
 
 Enterprise owners have complete control over the enterprise and can take every action, including:
 - Managing administrators
-- {% if currentVersion == "free-pro-team@latest" %}Adding and removing {% elsif currentVersion == "github-ae@latest" %}Managing{% endif %} organizations {% if currentVersion == "free-pro-team@latest" %}to and from {% elsif currentVersion == "github-ae@latest" %} in{% endif %} the enterprise
+- {% if currentVersion == "free-pro-team@latest" %}Adding and removing {% elsif currentVersion == "github-ae@latest" or currentVersion ver_gt "enterprise-server@2.20" %}Managing{% endif %} organizations {% if currentVersion == "free-pro-team@latest" %}to and from {% elsif currentVersion == "github-ae@latest" or currentVersion ver_gt "enterprise-server@2.20" %} in{% endif %} the enterprise
 - Managing enterprise settings
 - Enforcing policy across organizations
 {% if currentVersion == "free-pro-team@latest" %}- Managing billing settings{% endif %}

From e0d9a061a336b449df442f0dc79aab8e6ddf0a61 Mon Sep 17 00:00:00 2001
From: Mike Surowiec <mikesurowiec@users.noreply.github.com>
Date: Wed, 2 Jun 2021 09:28:39 -0700
Subject: [PATCH 2/2] React category / sub-landing page (#19635)

Re-work routes to use GlobalPage, implements TocLanding, bundle of minor cleanup / fixes
---
 components/Breadcrumbs.tsx                    |   2 +-
 components/HeaderNotifications.tsx            |   2 +-
 components/LanguagePicker.tsx                 |   8 +-
 components/ScrollButton.tsx                   |  11 -
 components/TruncateLines.tsx                  |   9 +-
 components/article/ArticleTitle.tsx           |  31 +++
 components/article/ArticleVersionPicker.tsx   |  68 +++--
 components/article/PrinterIcon.tsx            |  20 ++
 components/context/MainContext.tsx            |   2 +
 components/context/ProductLandingContext.tsx  |  11 +-
 components/context/TocLandingContext.tsx      |  33 +++
 components/landing/FeaturedArticles.tsx       |   4 +-
 components/landing/GuideCards.tsx             |   3 +-
 components/landing/ProductArticlesList.tsx    |   2 +-
 components/landing/ProductLanding.tsx         |  64 +++++
 components/landing/TableOfContents.tsx        |  28 +-
 components/landing/TocLanding.tsx             |  55 ++++
 components/product/SidebarProduct.tsx         | 254 +++++++++---------
 .../[productId]/[...restPage]/index.tsx       |   5 +
 pages/[versionId]/[productId]/index.tsx       | 138 +++-------
 stylesheets/index.scss                        |   1 +
 stylesheets/lists.scss                        |   4 +
 stylesheets/opacity.scss                      |   6 +
 stylesheets/utilities.scss                    |   7 +
 24 files changed, 463 insertions(+), 305 deletions(-)
 create mode 100644 components/article/ArticleTitle.tsx
 create mode 100644 components/article/PrinterIcon.tsx
 create mode 100644 components/context/TocLandingContext.tsx
 create mode 100644 components/landing/ProductLanding.tsx
 create mode 100644 components/landing/TocLanding.tsx
 create mode 100644 pages/[versionId]/[productId]/[...restPage]/index.tsx
 create mode 100644 stylesheets/utilities.scss

diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
index a6cdae79e0..090a1321ae 100644
--- a/components/Breadcrumbs.tsx
+++ b/components/Breadcrumbs.tsx
@@ -12,7 +12,7 @@ export type BreadcrumbT = {
 type Props = {}
 export const Breadcrumbs = (props: Props) => {
   const router = useRouter()
-  const pathWithLocale = `/${router.locale}${router.asPath}`
+  const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
   const { breadcrumbs } = useMainContext()
 
   return (
diff --git a/components/HeaderNotifications.tsx b/components/HeaderNotifications.tsx
index 4e6d296af2..735b87576f 100644
--- a/components/HeaderNotifications.tsx
+++ b/components/HeaderNotifications.tsx
@@ -70,7 +70,7 @@ export const HeaderNotifications = () => {
   return (
     <>
       {allNotifications.map(({ type, content }, i) => {
-        const isLast = i !== allNotifications.length - 1
+        const isLast = i === allNotifications.length - 1
         return (
           <div
             className={cx(
diff --git a/components/LanguagePicker.tsx b/components/LanguagePicker.tsx
index acc77a296a..915acb89b9 100644
--- a/components/LanguagePicker.tsx
+++ b/components/LanguagePicker.tsx
@@ -12,7 +12,13 @@ export const LanguagePicker = () => {
 
   return (
     <div className="ml-4 d-flex flex-justify-center flex-items-center">
-      <Dropdown css>
+      <Dropdown
+        css={`
+          ul {
+            width: unset;
+          }
+        `}
+      >
         <summary>
           {selectedLang.nativeName || selectedLang.name}
           <Dropdown.Caret />
diff --git a/components/ScrollButton.tsx b/components/ScrollButton.tsx
index 7694e9a2ae..a32bd2fc60 100644
--- a/components/ScrollButton.tsx
+++ b/components/ScrollButton.tsx
@@ -45,17 +45,6 @@ export const ScrollButton = () => {
       >
         <ChevronUpIcon />
       </button>
-      <style jsx>{`
-        .opacity-0 {
-          opacity: 0;
-        }
-        .opacity-100 {
-          opacity: 1;
-        }
-        .transition-200 {
-          transition: 200ms;
-        }
-      `}</style>
     </div>
   )
 }
diff --git a/components/TruncateLines.tsx b/components/TruncateLines.tsx
index 7f29bdb707..f2685ddad1 100644
--- a/components/TruncateLines.tsx
+++ b/components/TruncateLines.tsx
@@ -8,14 +8,15 @@ type Props = {
   className?: string
 }
 export const TruncateLines = (props: Props) => {
-  const Component = props.as || 'div'
+  const { as, maxLines, className, children } = props
+  const Component = as || 'div'
   return (
-    <Component className={cx('root', props.className)}>
-      {props.children}
+    <Component className={cx('root', className)}>
+      {children}
       <style jsx>{`
         .root {
           display: -webkit-box;
-          -webkit-line-clamp: ${props.maxLines};
+          -webkit-line-clamp: ${maxLines};
           -webkit-box-orient: vertical;
           overflow: hidden;
         }
diff --git a/components/article/ArticleTitle.tsx b/components/article/ArticleTitle.tsx
new file mode 100644
index 0000000000..52a0789c59
--- /dev/null
+++ b/components/article/ArticleTitle.tsx
@@ -0,0 +1,31 @@
+import { Tooltip, Link } from '@primer/components'
+import { PrinterIcon } from './PrinterIcon'
+
+type Props = {
+  children: React.ReactNode
+}
+export const ArticleTitle = ({ children }: Props) => {
+  return (
+    <div className="d-flex flex-items-baseline flex-justify-between">
+      <h1 className="my-4">{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
+            onClick={() => {
+              try {
+                document.execCommand('print', false)
+              } catch (e) {
+                window.print()
+              }
+            }}
+          >
+            <PrinterIcon />
+          </Link>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
diff --git a/components/article/ArticleVersionPicker.tsx b/components/article/ArticleVersionPicker.tsx
index 0ab7bcc300..c6aa8e70d2 100644
--- a/components/article/ArticleVersionPicker.tsx
+++ b/components/article/ArticleVersionPicker.tsx
@@ -17,42 +17,40 @@ export const ArticleVersionPicker = () => {
   }
 
   return (
-    <div className="d-none d-lg-flex flex-justify-end">
-      <Dropdown
-        css={`
-          ul {
-            width: unset;
+    <Dropdown
+      css={`
+        ul {
+          width: unset;
+        }
+      `}
+    >
+      <summary className="f4 h5-mktg btn-outline-mktg btn-mktg p-2">
+        <span className="d-md-none d-xl-inline-block">{t('article_version')}</span>{' '}
+        {allVersions[currentVersion].versionTitle}
+        <Dropdown.Caret />
+      </summary>
+      <Dropdown.Menu direction="sw">
+        {(page.permalinks || []).map((permalink) => {
+          if (permalink.pageVersion === 'homepage') {
+            return null
           }
-        `}
-      >
-        <summary className="f4 h5-mktg btn-outline-mktg btn-mktg p-2">
-          <span className="d-md-none d-xl-inline-block">{t('article_version')}</span>{' '}
-          {allVersions[currentVersion].versionTitle}
-          <Dropdown.Caret />
-        </summary>
-        <Dropdown.Menu direction="sw">
-          {(page.permalinks || []).map((permalink) => {
-            if (permalink.pageVersion === 'homepage') {
-              return null
-            }
 
-            return (
-              <Dropdown.Item key={permalink.href}>
-                <Link href={permalink.href}>
-                  <a>{permalink.pageVersionTitle}</a>
-                </Link>
-              </Dropdown.Item>
-            )
-          })}
-          <div className="pb-1">
-            <Link href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}>
-              <a className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap">
-                See all Enterprise releases
-              </a>
-            </Link>
-          </div>
-        </Dropdown.Menu>
-      </Dropdown>
-    </div>
+          return (
+            <Dropdown.Item key={permalink.href}>
+              <Link href={permalink.href}>
+                <a>{permalink.pageVersionTitle}</a>
+              </Link>
+            </Dropdown.Item>
+          )
+        })}
+        <div className="pb-1">
+          <Link href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}>
+            <a className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap">
+              See all Enterprise releases
+            </a>
+          </Link>
+        </div>
+      </Dropdown.Menu>
+    </Dropdown>
   )
 }
diff --git a/components/article/PrinterIcon.tsx b/components/article/PrinterIcon.tsx
new file mode 100644
index 0000000000..ee5a9206c4
--- /dev/null
+++ b/components/article/PrinterIcon.tsx
@@ -0,0 +1,20 @@
+// From https://heroicons.com
+export const PrinterIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={18}
+      width={18}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
+      />
+    </svg>
+  )
+}
diff --git a/components/context/MainContext.tsx b/components/context/MainContext.tsx
index 5b985162eb..bb52892ef8 100644
--- a/components/context/MainContext.tsx
+++ b/components/context/MainContext.tsx
@@ -84,6 +84,7 @@ export type MainContextT = {
   currentProductTree?: CurrentProductTree
   featureFlags: FeatureFlags
   page: {
+    documentType: string
     languageVariants: Array<{ name: string; code: string; hreflang: string; href: string }>
     topics: Array<string>
     fullTitle?: string
@@ -126,6 +127,7 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
     relativePath: req.context.page?.relativePath,
     page: {
       languageVariants: req.context.page.languageVariants,
+      documentType: req.context.page.documentType,
       fullTitle: req.context.page.fullTitle,
       topics: req.context.page.topics || [],
       introPlainText: req.context.page?.introPlainText,
diff --git a/components/context/ProductLandingContext.tsx b/components/context/ProductLandingContext.tsx
index df9df83853..c3fb14ac40 100644
--- a/components/context/ProductLandingContext.tsx
+++ b/components/context/ProductLandingContext.tsx
@@ -70,8 +70,9 @@ export const useProductLandingContext = (): ProductLandingContextT => {
 
 export const getProductLandingContextFromRequest = (req: any): ProductLandingContextT => {
   const productTree = req.context.currentProductTree
+  const page = req.context.page
   return {
-    ...pick(req.context.page, [
+    ...pick(page, [
       'title',
       'shortTitle',
       'introPlainText',
@@ -96,11 +97,11 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
       })
     ),
 
-    introLinks: productTree.page.introLinks
+    introLinks: page.introLinks
       ? {
-          quickstart: productTree.page.introLinks.quickstart,
-          reference: productTree.page.introLinks.reference,
-          overview: productTree.page.introLinks.overview,
+          quickstart: page.introLinks.quickstart,
+          reference: page.introLinks.reference,
+          overview: page.introLinks.overview,
         }
       : null,
 
diff --git a/components/context/TocLandingContext.tsx b/components/context/TocLandingContext.tsx
new file mode 100644
index 0000000000..a747c91ef1
--- /dev/null
+++ b/components/context/TocLandingContext.tsx
@@ -0,0 +1,33 @@
+import { createContext, useContext } from 'react'
+
+export type TocItem = {
+  fullPath: string
+  title: string
+  intro?: string
+}
+
+export type TocLandingContextT = {
+  title: string
+  introPlainText: string
+  tocItems: Array<TocItem>
+}
+
+export const TocLandingContext = createContext<TocLandingContextT | null>(null)
+
+export const useTocLandingContext = (): TocLandingContextT => {
+  const context = useContext(TocLandingContext)
+
+  if (!context) {
+    throw new Error('"useTocLandingContext" may only be used inside "TocLandingContext.Provider"')
+  }
+
+  return context
+}
+
+export const getTocLandingContextFromRequest = (req: any): TocLandingContextT => {
+  return {
+    title: req.context.page.title,
+    introPlainText: req.context.page.introPlainText,
+    tocItems: req.context.tocItems || [],
+  }
+}
diff --git a/components/landing/FeaturedArticles.tsx b/components/landing/FeaturedArticles.tsx
index 8e8eca6109..f427ed8cef 100644
--- a/components/landing/FeaturedArticles.tsx
+++ b/components/landing/FeaturedArticles.tsx
@@ -78,7 +78,7 @@ const ArticleList = ({ title, viewAllHref, articles }: ArticleListProps) => {
               <Link href={link.href}>
                 <a className="link-with-intro Bump-link--hover no-underline d-block py-3">
                   <h4 className="link-with-intro-title">
-                    {link.title}
+                    <span dangerouslySetInnerHTML={{ __html: link.title }} />
                     <span className="Bump-link-symbol">→</span>
                   </h4>
                   {!link.hideIntro && link.intro && (
@@ -87,7 +87,7 @@ const ArticleList = ({ title, viewAllHref, articles }: ArticleListProps) => {
                       maxLines={2}
                       className="link-with-intro-intro color-text-secondary mb-0 mt-1"
                     >
-                      {link.intro}
+                      <span dangerouslySetInnerHTML={{ __html: link.intro }} />
                     </TruncateLines>
                   )}
                   {link.date && (
diff --git a/components/landing/GuideCards.tsx b/components/landing/GuideCards.tsx
index e185216164..b3e42dded8 100644
--- a/components/landing/GuideCards.tsx
+++ b/components/landing/GuideCards.tsx
@@ -11,6 +11,7 @@ export const GuideCards = () => {
   const router = useRouter()
   const { currentCategory } = useMainContext()
   const { guideCards } = useProductLandingContext()
+  const routePath = `/${router.asPath.split('?')[0]}` // remove query string
 
   if (!guideCards) {
     return null
@@ -25,7 +26,7 @@ export const GuideCards = () => {
       </div>
 
       {!currentCategory && (
-        <Link href={`${router.asPath}/guides`}>
+        <Link href={`${routePath}/guides`}>
           <a className="btn btn-outline float-right">
             Explore guides <ArrowRightIcon />
           </a>
diff --git a/components/landing/ProductArticlesList.tsx b/components/landing/ProductArticlesList.tsx
index 90f469dd9a..dc590ad4f9 100644
--- a/components/landing/ProductArticlesList.tsx
+++ b/components/landing/ProductArticlesList.tsx
@@ -47,7 +47,7 @@ const ArticleList = ({ page }: { page: CurrentProductTree }) => {
           return (
             <li
               key={grandchildPage.href + index}
-              className={cx('mb-3', index >= maxArticles ? 'd-none' : null)}
+              className={cx('mb-3', (!isShowingMore && index >= maxArticles) ? 'd-none' : null)}
             >
               <Link href={grandchildPage.href}>
                 <a>{grandchildPage.page.title}</a>
diff --git a/components/landing/ProductLanding.tsx b/components/landing/ProductLanding.tsx
new file mode 100644
index 0000000000..777a5eb24a
--- /dev/null
+++ b/components/landing/ProductLanding.tsx
@@ -0,0 +1,64 @@
+import { DefaultLayout } from 'components/DefaultLayout'
+import { useProductLandingContext } from 'components/context/ProductLandingContext'
+
+import { LandingHero } from 'components/landing/LandingHero'
+import { FeaturedArticles } from 'components/landing/FeaturedArticles'
+import { GuideCards } from 'components/landing/GuideCards'
+import { SponsorsExamples } from 'components/landing/SponsorsExamples'
+import { CommunityExamples } from 'components/landing/CommunityExamples'
+import { CodeExamples } from 'components/landing/CodeExamples'
+import { LandingSection } from 'components/landing/LandingSection'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { ProductArticlesList } from 'components/landing/ProductArticlesList'
+
+export const ProductLanding = () => {
+  const { shortTitle, guideCards, productUserExamples, productCommunityExamples, productCodeExamples } =
+    useProductLandingContext()
+  const { t } = useTranslation('product_landing')
+
+  return (
+    <DefaultLayout>
+      <LandingSection className="pt-3">
+        <LandingHero />
+      </LandingSection>
+
+      <LandingSection>
+        <FeaturedArticles />
+      </LandingSection>
+
+      {productCodeExamples.length > 0 && (
+        <LandingSection title={t('code_examples')} className="my-6">
+          <CodeExamples />
+        </LandingSection>
+      )}
+
+      {productCommunityExamples.length > 0 && (
+        <LandingSection title={t('communities_using_discussions')} className="my-6">
+          <CommunityExamples />
+        </LandingSection>
+      )}
+
+      {productUserExamples.length > 0 && (
+        <LandingSection title={t('sponsor_community')} className="my-6">
+          <SponsorsExamples />
+        </LandingSection>
+      )}
+
+      {/* {% if currentVersion contains 'enterprise-server' and currentProduct == 'admin' %}
+      {% include product-releases %}
+      {% endif %} */}
+
+      {guideCards.length > 0 && (
+        <div className="color-bg-tertiary py-6 my-8">
+          <LandingSection title={t('guides')} className="my-6">
+            <GuideCards />
+          </LandingSection>
+        </div>
+      )}
+
+      <LandingSection sectionLink="all-docs" title={`All ${shortTitle} Docs`}>
+        <ProductArticlesList />
+      </LandingSection>
+    </DefaultLayout>
+  )
+}
diff --git a/components/landing/TableOfContents.tsx b/components/landing/TableOfContents.tsx
index 14f4f1514f..5e8955fcda 100644
--- a/components/landing/TableOfContents.tsx
+++ b/components/landing/TableOfContents.tsx
@@ -4,19 +4,29 @@ import cx from 'classnames'
 
 import type { TocItem } from '../context/ProductLandingContext'
 
-export const TableOfContents = (props: { items?: Array<TocItem> }) => {
+type Props = {
+  items: Array<TocItem>
+  variant?: 'compact' | 'expanded'
+}
+export const TableOfContents = (props: Props) => {
+  const { items, variant = 'expanded' } = props
   const router = useRouter()
 
   return (
-    <div>
-      {(props.items || []).map((obj) => {
-        if (!obj) {
+    <ul className={cx(variant === 'compact' ? 'list-style-inside pl-2' : 'list-style-none')}>
+      {(items || []).map((item) => {
+        if (!item) {
           return null
         }
-        const { fullPath: href, title, intro } = obj
+
+        const { fullPath: href, title, intro } = item
         const isActive = router.pathname === href
-        return (
-          <div key={href} className={cx('mb-5', isActive && 'color-auto-gray-4')}>
+        return variant === 'compact' ? (
+          <li key={href} className="f4 my-1">
+            <Link href={href}>{title}</Link>
+          </li>
+        ) : (
+          <li key={href} className={cx('mb-5', isActive && 'color-auto-gray-4')}>
             <Link href={href}>
               <a className="Bump-link--hover no-underline d-block py-1 border-bottom color-border-primary">
                 <h4>
@@ -26,9 +36,9 @@ export const TableOfContents = (props: { items?: Array<TocItem> }) => {
               </a>
             </Link>
             {intro && <p className="f4 mt-3" dangerouslySetInnerHTML={{ __html: intro }} />}
-          </div>
+          </li>
         )
       })}
-    </div>
+    </ul>
   )
 }
diff --git a/components/landing/TocLanding.tsx b/components/landing/TocLanding.tsx
new file mode 100644
index 0000000000..0f225f9137
--- /dev/null
+++ b/components/landing/TocLanding.tsx
@@ -0,0 +1,55 @@
+import { Grid } from '@primer/components'
+
+import { DefaultLayout } from 'components/DefaultLayout'
+import { TableOfContents } from 'components/landing/TableOfContents'
+import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
+import { Breadcrumbs } from 'components/Breadcrumbs'
+import { useTocLandingContext } from 'components/context/TocLandingContext'
+import { ArticleTitle } from 'components/article/ArticleTitle'
+
+type Props = {
+  variant?: 'compact' | 'expanded'
+}
+export const TocLanding = ({ variant = 'expanded' }: Props) => {
+  const { title, introPlainText, tocItems } = useTocLandingContext()
+  return (
+    <DefaultLayout>
+      <div className="container-xl px-3 px-md-6 my-4 my-lg-4">
+        <div className="d-lg-flex flex-justify-between">
+          <div className="d-block d-lg-none">
+            <ArticleVersionPicker />
+          </div>
+          <div className="d-flex flex-items-center">
+            <Breadcrumbs />
+          </div>
+          <div className="d-none d-lg-block">
+            <ArticleVersionPicker />
+          </div>
+        </div>
+
+        <Grid
+          gridTemplateColumns="minmax(500px, 720px) minmax(220px, 1fr)"
+          gridTemplateRows="auto 1fr"
+          gridGap={16}
+        >
+          <div>
+            <div className="mt-8">
+              <ArticleTitle>{title}</ArticleTitle>
+
+              <div className="lead-mktg">
+                <p>{introPlainText}</p>
+              </div>
+            </div>
+
+            <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'}>
+              <TableOfContents items={tocItems} variant={variant} />
+            </div>
+          </div>
+          <div></div>
+        </Grid>
+      </div>
+    </DefaultLayout>
+  )
+}
diff --git a/components/product/SidebarProduct.tsx b/components/product/SidebarProduct.tsx
index a4472a6a49..de584a0bee 100644
--- a/components/product/SidebarProduct.tsx
+++ b/components/product/SidebarProduct.tsx
@@ -1,16 +1,12 @@
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import cx from 'classnames'
+import { useDetails, Details } from '@primer/components'
+import { ChevronDownIcon } from '@primer/octicons-react'
 
-import { useMainContext } from 'components/context/MainContext'
+import { CurrentProductTree, useMainContext } from 'components/context/MainContext'
 import { AllProductsLink } from 'components/product/AllProductsLink'
-// <!--
-//   Styling note:
 
-//   Categories, Maptopics, and Articles list items get a class of `active` when they correspond to content
-//   hierarchy of the current page. If an item's URL is also the same as the current URL, the item
-//   also gets an `is-current-page` class.
-//  -->
 export const SidebarProduct = () => {
   const router = useRouter()
   const { currentProductTree: currentProductTree } = useMainContext()
@@ -29,7 +25,7 @@ export const SidebarProduct = () => {
         <>
           <li title="" className="sidebar-product mb-2">
             <Link href={currentProductTree.href}>
-              <a className="pl-4 pr-5 pb-1 f4 color-text-primary">{productTitle}</a>
+              <a className="pl-4 pr-5 pb-1 f4 color-text-primary no-underline">{productTitle}</a>
             </Link>
           </li>
 
@@ -53,135 +49,17 @@ export const SidebarProduct = () => {
                   >
                     {isStandaloneCategory ? (
                       <Link href={childPage.href}>
-                        <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">
+                        <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary no-underline">
                           {childTitle}
                         </a>
                       </Link>
                     ) : (
-                      <details
-                        className={cx('dropdown-withArrow details details-reset')}
-                        open={routePath.includes(childPage.href) || i < 3}
-                      >
-                        <summary>
-                          <div className="d-flex flex-justify-between">
-                            <Link href={childPage.href}>
-                              <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">
-                                {childTitle}
-                              </a>
-                            </Link>
-                            {i < 3 && (
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                className="octicon flex-shrink-0 arrow mr-3"
-                                style={{ marginTop: 7 }}
-                                viewBox="0 0 16 16"
-                                width="16"
-                                height="16"
-                              >
-                                {' '}
-                                <path
-                                  fillRule="evenodd"
-                                  clipRule="evenodd"
-                                  d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"
-                                ></path>
-                              </svg>
-                            )}
-                          </div>
-                        </summary>
-                        {routePath.includes(childPage.href) || i < 3 ? (
-                          <>
-                            {/* <!-- some categories have maptopics with child articles --> */}
-                            {childPage.childPages[0].page.documentType === 'mapTopic' ? (
-                              <ul className="sidebar-topics list-style-none position-relative">
-                                {childPage.childPages.map((grandchildPage, i) => {
-                                  const grandchildTitle =
-                                    grandchildPage.renderedShortTitle ||
-                                    grandchildPage.renderedFullTitle
-                                  const isActive = routePath.includes(grandchildPage.href)
-                                  const isCurrent = routePath === grandchildPage.href
-                                  return (
-                                    <li
-                                      key={childPage.href + i}
-                                      className={cx(
-                                        'sidebar-maptopic',
-                                        isActive && 'active',
-                                        isCurrent && 'is-current-page'
-                                      )}
-                                    >
-                                      <Link href={grandchildPage.href}>
-                                        <a className="pl-4 pr-5 py-2 color-text-primary">{grandchildTitle}</a>
-                                      </Link>
-                                      <ul className="sidebar-articles my-2">
-                                        {grandchildPage.childPages.map(
-                                          (greatgrandchildPage, i, arr) => {
-                                            const greatgrandchildTitle =
-                                              greatgrandchildPage.renderedShortTitle ||
-                                              greatgrandchildPage.renderedFullTitle
-                                            const isLast = i === arr.length - 1
-                                            const isActive = routePath.includes(
-                                              greatgrandchildPage.href
-                                            )
-                                            const isCurrent = routePath === greatgrandchildPage.href
-                                            return (
-                                              <li
-                                                key={greatgrandchildPage.href + i}
-                                                className={cx(
-                                                  'sidebar-article',
-                                                  isActive && 'active',
-                                                  isCurrent && 'is-current-page'
-                                                )}
-                                              >
-                                                <Link href={greatgrandchildPage.href}>
-                                                  <a
-                                                    className={cx(
-                                                      'pl-6 pr-5 py-1 color-text-primary',
-                                                      isLast && 'pb-2'
-                                                    )}
-                                                  >
-                                                    {greatgrandchildTitle}
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            )
-                                          }
-                                        )}
-                                      </ul>
-                                    </li>
-                                  )
-                                })}
-                              </ul>
-                            ) : childPage.childPages[0].page.documentType == 'article' ? (
-                              <ul className="sidebar-articles list-style-none">
-                                {/* <!-- some categories have no maptopics, only articles --> */}
-                                {childPage.childPages.map((grandchildPage, i, arr) => {
-                                  const grandchildTitle =
-                                    grandchildPage.renderedShortTitle ||
-                                    grandchildPage.renderedFullTitle
-                                  const isLast = i === arr.length - 1
-                                  const isActive = routePath.includes(grandchildPage.href)
-                                  const isCurrent = routePath === grandchildPage.href
-                                  return (
-                                    <li
-                                      key={grandchildPage.href + i}
-                                      className={cx(
-                                        'sidebar-article',
-                                        isActive && 'active',
-                                        isCurrent && 'is-current-page'
-                                      )}
-                                    >
-                                      <Link href={grandchildPage.href}>
-                                        <a className={cx('pl-6 pr-5 py-1 color-text-primary', isLast && 'pb-2')}>
-                                          {grandchildTitle}
-                                        </a>
-                                      </Link>
-                                    </li>
-                                  )
-                                })}
-                              </ul>
-                            ) : null}
-                          </>
-                        ) : null}
-                      </details>
+                      <CollapsibleSection
+                        index={i}
+                        routePath={routePath}
+                        title={childTitle}
+                        page={childPage}
+                      />
                     )}
                   </li>
                 )
@@ -193,3 +71,113 @@ export const SidebarProduct = () => {
     </>
   )
 }
+
+type SectionProps = {
+  index: number
+  routePath: string
+  page: CurrentProductTree
+  title: string
+}
+const CollapsibleSection = (props: SectionProps) => {
+  const { routePath, index, title, page } = props
+  const isDefaultOpen = routePath.includes(page.href) || index < 3
+  const { getDetailsProps, open: isOpen } = useDetails({ defaultOpen: isDefaultOpen })
+  return (
+    <Details {...getDetailsProps()} className="details-reset">
+      <summary>
+        <div className="d-flex flex-justify-between">
+          <Link href={page.href}>
+            <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary no-underline">
+              {title}
+            </a>
+          </Link>
+          {page.childPages.length > 0 && (
+            <span style={{ marginTop: 7 }} className="flex-shrink-0 pr-3">
+              <ChevronDownIcon className={cx('opacity-60', isOpen && 'rotate-180')} />
+            </span>
+          )}
+        </div>
+      </summary>
+      {/* <!-- some categories have maptopics with child articles --> */}
+      {page.childPages[0].page.documentType === 'mapTopic' ? (
+        <ul className="sidebar-topics list-style-none position-relative">
+          {page.childPages.map((childPage, i) => {
+            const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
+            const isActive = routePath.includes(childPage.href)
+            const isCurrent = routePath === childPage.href
+            return (
+              <li
+                key={childPage.href + i}
+                className={cx(
+                  'sidebar-maptopic',
+                  isActive && 'active',
+                  isCurrent && 'is-current-page'
+                )}
+              >
+                <Link href={childPage.href}>
+                  <a className="pl-4 pr-5 py-2 color-text-primary no-underline">{childTitle}</a>
+                </Link>
+                <ul className="sidebar-articles my-2">
+                  {childPage.childPages.map((grandchildPage, i, arr) => {
+                    const grandchildTitle =
+                      grandchildPage.renderedShortTitle || grandchildPage.renderedFullTitle
+                    const isLast = i === arr.length - 1
+                    const isActive = routePath.includes(grandchildPage.href)
+                    const isCurrent = routePath === grandchildPage.href
+                    return (
+                      <li
+                        key={grandchildPage.href + i}
+                        className={cx(
+                          'sidebar-article',
+                          isActive && 'active',
+                          isCurrent && 'is-current-page'
+                        )}
+                      >
+                        <Link href={grandchildPage.href}>
+                          <a
+                            className={cx(
+                              'pl-6 pr-5 py-1 color-text-primary no-underline',
+                              isLast && 'pb-2'
+                            )}
+                          >
+                            {grandchildTitle}
+                          </a>
+                        </Link>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </li>
+            )
+          })}
+        </ul>
+      ) : page.childPages[0].page.documentType == 'article' ? (
+        <ul className="sidebar-articles list-style-none">
+          {/* <!-- some categories have no maptopics, only articles --> */}
+          {page.childPages.map((childPage, i, arr) => {
+            const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
+            const isLast = i === arr.length - 1
+            const isActive = routePath.includes(childPage.href)
+            const isCurrent = routePath === childPage.href
+            return (
+              <li
+                key={childPage.href + i}
+                className={cx(
+                  'sidebar-article',
+                  isActive && 'active',
+                  isCurrent && 'is-current-page'
+                )}
+              >
+                <Link href={childPage.href}>
+                  <a className={cx('pl-6 pr-5 py-1 color-text-primary no-underline', isLast && 'pb-2')}>
+                    {childTitle}
+                  </a>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+    </Details>
+  )
+}
diff --git a/pages/[versionId]/[productId]/[...restPage]/index.tsx b/pages/[versionId]/[productId]/[...restPage]/index.tsx
new file mode 100644
index 0000000000..12a339e33a
--- /dev/null
+++ b/pages/[versionId]/[productId]/[...restPage]/index.tsx
@@ -0,0 +1,5 @@
+import GlobalPage from '../index'
+
+export { getServerSideProps } from '../index'
+
+export default GlobalPage
\ No newline at end of file
diff --git a/pages/[versionId]/[productId]/index.tsx b/pages/[versionId]/[productId]/index.tsx
index 26ca776b69..2ba64d13b6 100644
--- a/pages/[versionId]/[productId]/index.tsx
+++ b/pages/[versionId]/[productId]/index.tsx
@@ -1,126 +1,61 @@
 import { GetServerSideProps } from 'next'
-import { Grid } from '@primer/components'
 
 import {
   MainContextT,
   MainContext,
   getMainContextFromRequest,
 } from 'components/context/MainContext'
-import { DefaultLayout } from 'components/DefaultLayout'
 import {
   getProductLandingContextFromRequest,
   ProductLandingContextT,
   ProductLandingContext,
-  useProductLandingContext,
 } from 'components/context/ProductLandingContext'
 
-import { LandingHero } from 'components/landing/LandingHero'
-import { FeaturedArticles } from 'components/landing/FeaturedArticles'
-import { GuideCards } from 'components/landing/GuideCards'
-import { SponsorsExamples } from 'components/landing/SponsorsExamples'
-import { CommunityExamples } from 'components/landing/CommunityExamples'
-import { CodeExamples } from 'components/landing/CodeExamples'
-import { LandingSection } from 'components/landing/LandingSection'
-import { useTranslation } from 'components/hooks/useTranslation'
-import { ProductArticlesList } from 'components/landing/ProductArticlesList'
-import { TableOfContents } from 'components/landing/TableOfContents'
-import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
+import { ProductLanding } from 'components/landing/ProductLanding'
+import { TocLanding } from 'components/landing/TocLanding'
+import {
+  getTocLandingContextFromRequest,
+  TocLandingContext,
+  TocLandingContextT,
+} from 'components/context/TocLandingContext'
 
 type Props = {
   mainContext: MainContextT
   productLandingContext: ProductLandingContextT
+  tocLandingContext: TocLandingContextT
 }
-const ProductPage = ({ mainContext, productLandingContext }: Props) => {
-  return (
-    <MainContext.Provider value={mainContext}>
+const GlobalPage = ({ mainContext, productLandingContext, tocLandingContext }: Props) => {
+  const { currentLayoutName, page, relativePath } = mainContext
+
+  let content
+  if (currentLayoutName === 'product-landing') {
+    content = (
       <ProductLandingContext.Provider value={productLandingContext}>
-        {mainContext.currentLayoutName === 'product-landing' ? (
-          <ProductLanding />
-        ) : (
-          <TocProductLanding />
-        )}
+        <ProductLanding />
       </ProductLandingContext.Provider>
-    </MainContext.Provider>
-  )
+    )
+  } else if (currentLayoutName === 'product-sublanding') {
+    content = <p>todo: product sub-landing</p>
+  } else if (relativePath?.endsWith('index.md')) {
+    content = (
+      <TocLandingContext.Provider value={tocLandingContext}>
+        <TocLanding
+          variant={
+            page.documentType === 'category' || relativePath === 'github/index.md'
+              ? 'compact'
+              : 'expanded'
+          }
+        />
+      </TocLandingContext.Provider>
+    )
+  } else {
+    content = <p>article / fallback rendering</p>
+  }
+
+  return <MainContext.Provider value={mainContext}>{content}</MainContext.Provider>
 }
 
-const ProductLanding = () => {
-  const { title, guideCards, productUserExamples, productCommunityExamples, productCodeExamples } =
-    useProductLandingContext()
-  const { t } = useTranslation('product_landing')
-
-  return (
-    <DefaultLayout>
-      <LandingSection className="pt-3">
-        <LandingHero />
-      </LandingSection>
-
-      <LandingSection>
-        <FeaturedArticles />
-      </LandingSection>
-
-      {productCodeExamples.length > 0 && (
-        <LandingSection title={t('code_examples')} className="my-6">
-          <CodeExamples />
-        </LandingSection>
-      )}
-
-      {productCommunityExamples.length > 0 && (
-        <LandingSection title={t('communities_using_discussions')} className="my-6">
-          <CommunityExamples />
-        </LandingSection>
-      )}
-
-      {productUserExamples.length > 0 && (
-        <LandingSection title={t('sponsor_community')} className="my-6">
-          <SponsorsExamples />
-        </LandingSection>
-      )}
-
-      {guideCards.length > 0 && (
-        <div className="color-bg-tertiary py-6 my-8">
-          <LandingSection title={t('guides')} className="my-6">
-            <GuideCards />
-          </LandingSection>
-        </div>
-      )}
-
-      <LandingSection sectionLink="all-docs" title={`All ${title} Docs`}>
-        <ProductArticlesList />
-      </LandingSection>
-    </DefaultLayout>
-  )
-}
-
-const TocProductLanding = () => {
-  const { title, introPlainText, tocItems } = useProductLandingContext()
-  return (
-    <DefaultLayout>
-      <Grid
-        className="container-xl px-3 px-md-6 my-4 my-lg-4 container-xl "
-        gridTemplateColumns="minmax(500px, 720px) minmax(220px, 1fr)"
-        gridTemplateRows="auto 1fr"
-        gridGap={16}
-      >
-        <div>
-          <h1 className="my-4">{title}</h1>
-          <div className="lead-mktg">
-            <p>{introPlainText}</p>
-          </div>
-
-          <div className="mt-7">
-            <TableOfContents items={tocItems} />
-          </div>
-        </div>
-        <div>
-          <ArticleVersionPicker />
-        </div>
-      </Grid>
-    </DefaultLayout>
-  )
-}
-
-export default ProductPage
+export default GlobalPage
 
 export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
   const req = context.req as any
@@ -129,6 +64,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
     props: {
       mainContext: getMainContextFromRequest(req),
       productLandingContext: getProductLandingContextFromRequest(req),
+      tocLandingContext: getTocLandingContextFromRequest(req),
     },
   }
 }
diff --git a/stylesheets/index.scss b/stylesheets/index.scss
index e57e2add2f..a31df1f68c 100644
--- a/stylesheets/index.scss
+++ b/stylesheets/index.scss
@@ -39,3 +39,4 @@ $marketing-font-path: "/dist/fonts/";
 @import "tables.scss";
 @import "toggle-images-button.scss";
 @import "underline-dashed.scss";
+@import "utilities.scss";
diff --git a/stylesheets/lists.scss b/stylesheets/lists.scss
index 05d488dc87..531310696c 100644
--- a/stylesheets/lists.scss
+++ b/stylesheets/lists.scss
@@ -1,6 +1,10 @@
 /* Numbered procedures (step 1, step 2, ...)
 ------------------------------------------------------------------------------*/
 
+.list-style-inside {
+  list-style: inside;
+}
+
 .markdown-body ol {
   counter-reset: li;
   list-style: none;
diff --git a/stylesheets/opacity.scss b/stylesheets/opacity.scss
index a2b96b4cd7..7da1e628e1 100644
--- a/stylesheets/opacity.scss
+++ b/stylesheets/opacity.scss
@@ -1,6 +1,12 @@
+.opacity-0 {
+  opacity: 0;
+}
 .opacity-60 {
   opacity: 0.6;
 }
 .opacity-70 {
   opacity: 0.7;
 }
+.opacity-100 {
+  opacity: 1;
+}
diff --git a/stylesheets/utilities.scss b/stylesheets/utilities.scss
new file mode 100644
index 0000000000..bdbd4c7a49
--- /dev/null
+++ b/stylesheets/utilities.scss
@@ -0,0 +1,7 @@
+.transition-200 {
+  transition: 200ms
+}
+
+.rotate-180 {
+  transform: rotateX(180deg)
+}