Revert "Fix homepage versions dropdown" (#20087)

components/SidebarNav.tsx

@@ -10,7 +10,7 @@ import { useVersion } from './hooks/useVersion'
 
 export const SidebarNav = () => {
   const router = useRouter()
-  const { error, relativePath } = useMainContext()
+  const { error, relativePath, isHomepageVersion } = useMainContext()
   const { t } = useTranslation('header')
 
   return (
@@ -39,7 +39,7 @@ export const SidebarNav = () => {
       <nav>
         {error === '404' || relativePath === 'index.md' ? (
           <ul className="sidebar-products mt-4">
-            {<AllProductsLink />}
+            {!isHomepageVersion && <AllProductsLink />}
             <SidebarHomepage />
           </ul>
         ) : (
@@ -66,12 +66,12 @@ export const SidebarNav = () => {
 const SidebarHomepage = () => {
   const router = useRouter()
   const { currentVersion } = useVersion()
-  const { activeProducts } = useMainContext()
+  const { activeProducts, isHomepageVersion } = useMainContext()
 
   return (
     <>
       {activeProducts.map((product) => {
-        if (!product.versions?.includes(currentVersion) && !product.external) {
+        if (!product.versions?.includes(currentVersion) && !isHomepageVersion) {
           return null
         }
 

components/article/ArticleVersionPicker.tsx

@@ -31,6 +31,10 @@ export const ArticleVersionPicker = () => {
       </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}>{permalink.pageVersionTitle}</Link>

components/context/MainContext.tsx

@@ -115,7 +115,7 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
     activeProducts: req.context.activeProducts,
     currentProduct: req.context.productMap[req.context.currentProduct] || null,
     currentLayoutName: req.context.currentLayoutName,
-    isHomepageVersion: req.context.page?.documentType === 'homepage',
+    isHomepageVersion: req.context.currentVersion === 'homepage',
     error: req.context.error ? req.context.error.toString() : '',
     data: {
       ui: req.context.site.data.ui,

components/landing/HomepageVersionPicker.tsx

@@ -6,6 +6,7 @@ import { ChevronDownIcon } from '@primer/octicons-react'
 import { Link } from 'components/Link'
 import { useMainContext } from 'components/context/MainContext'
 import { useVersion } from 'components/hooks/useVersion'
+import { useTranslation } from 'components/hooks/useTranslation'
 
 type Props = {
   variant?: 'inline'
@@ -14,13 +15,14 @@ export const HomepageVersionPicker = ({ variant }: Props) => {
   const router = useRouter()
   const { currentVersion } = useVersion()
   const { getDetailsProps } = useDetails({})
-  const { allVersions, page, enterpriseServerVersions } = useMainContext()
+  const { allVersions, page, enterpriseServerVersions, isHomepageVersion } = useMainContext()
+  const { t } = useTranslation('homepage')
 
   if (page.permalinks && page.permalinks.length <= 1) {
     return null
   }
 
-  const label = allVersions[currentVersion].versionTitle
+  const label = isHomepageVersion ? t('version_picker') : allVersions[currentVersion].versionTitle
 
   if (variant === 'inline') {
     return (
@@ -33,6 +35,9 @@ export const HomepageVersionPicker = ({ variant }: Props) => {
         </summary>
         <div>
           {(page.permalinks || []).map((permalink) => {
+            if (permalink.pageVersion === 'homepage') {
+              return null
+            }
             return (
               <Link
                 key={permalink.href}
@@ -73,6 +78,10 @@ export const HomepageVersionPicker = ({ variant }: Props) => {
       </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}>{permalink.pageVersionTitle}</Link>

includes/head.html

@@ -1,7 +1,7 @@
 <head>
   {% comment %} For human readers {% endcomment %}
   <meta charset="utf-8" />
-  <title>{% if error == '404' %}{% data ui.errors.oops %}{% elsif page.documentType == 'homepage' and currentVersion == 'free-pro-team@latest' %}GitHub Documentation{% elsif page.fullTitle %}{{ page.fullTitle }}{% else %}GitHub Documentation{% endif %}</title>
+  <title>{% if error == '404' %}{% data ui.errors.oops %}{% elsif currentVersion == 'homepage' %}GitHub Documentation{% elsif page.fullTitle %}{{ page.fullTitle }}{% else %}GitHub Documentation{% endif %}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="alternate icon" type="image/png" href="/assets/images/site/favicon.png">
   <link rel="icon" type="image/svg+xml" href="/assets/images/site/favicon.svg">

includes/header-version-switcher.html

@@ -6,17 +6,23 @@
     <details class="dropdown-withArrow position-relative details details-reset mr-md-3 close-when-clicked-outside">
       <summary class="py-2 color-text-primary" role="button" aria-label="Toggle versions list">
         <div class="d-flex flex-items-center flex-justify-between">
+          {% if currentVersion == 'homepage' %}
+          {% data ui.homepage.version_picker %}
+          {% else %}
           {{ allVersions[currentVersion].versionTitle }}
+          {% endif %}
           <svg class="arrow ml-md-1" width="14px" height="8px" viewBox="0 0 14 8" xml:space="preserve" fill="none" stroke="currentColor"><path d="M1,1l6.2,6L13,1"></path></svg>
         </div>
       </summary>
       <div id="versions-selector" class="position-md-absolute nav-desktop-langDropdown p-md-4 right-md-n4 top-md-6" style="z-index: 6;">
       {% for permalink in page.permalinks %}
+      {% unless permalink.pageVersion == 'homepage' %}
       <a
       href="{{ permalink.href }}"
       class="d-block py-2 no-underline {% if currentPath == permalink.href %}active{% else %}Link--primary{% endif %}"
       style="white-space: nowrap"
       >{{ allVersions[permalink.pageVersion].versionTitle }}</a>
+      {% endunless %}
       {% endfor %}
       {% include all-enterprise-releases-link %}
       </div>

includes/landing.html

@@ -20,7 +20,7 @@
       <h2 class="text-mono f5 text-normal color-text-secondary text-md-center mb-4">{% data ui.homepage.explore_by_product %}</h2>
       <div class="d-flex flex-wrap gutter gutter-xl-spacious">
       {% for product in activeProducts %}
-      {% if product.versions contains currentVersion %}
+      {% if product.versions contains currentVersion or currentVersion == 'homepage' %}
       <div class="d-flex flex-column col-12 col-sm-6 col-lg-3 pb-4">
         <a class="btn-mktg flex-auto d-flex flex-items-center btn-outline-mktg btn-large-mktg ws-normal " href="{% unless product.external %}/{{ currentLanguage }}{% endunless %}{% if product.versions contains currentVersion %}/{{currentVersion}}/{{product.id}}{% else %}{{product.href}}{% endif %}" {% if product.external %}target="_blank"{% endif %}>{{ product.name }}
       {% if product.external %}

lib/path-utils.js

@@ -36,7 +36,7 @@ function getVersionStringFromPath (href) {
 
   // Return immediately if this is a link to the homepage
   if (href === '/') {
-    return nonEnterpriseDefaultVersion
+    return 'homepage'
   }
 
   // Get the first segment

lib/permalink.js

@@ -2,6 +2,7 @@ const assert = require('assert')
 const path = require('path')
 const patterns = require('./patterns')
 const allVersions = require('./all-versions')
+const nonEnterpriseDefaultVersion = require('./non-enterprise-default-version')
 const removeFPTFromPath = require('./remove-fpt-from-path')
 
 class Permalink {
@@ -26,10 +27,24 @@ class Permalink {
     assert(languageCode, 'languageCode is required')
 
     const permalinks = applicableVersions
+      // skip the Dotcom homepage here because a special homepage permalink is added below
+      .filter(pageVersion => !(pageVersion === nonEnterpriseDefaultVersion && relativePath === 'index.md'))
       .map(pageVersion => {
         return new Permalink(languageCode, pageVersion, relativePath, title)
       })
 
+    // special permalink for homepage
+    if (relativePath === 'index.md') {
+      const homepagePermalink = {
+        ...permalinks[0],
+        href: '/' + languageCode,
+        pageVersion: 'homepage',
+        pageVersionTitle: permalinks[0].title,
+        homepage: true
+      }
+      permalinks.push(homepagePermalink)
+    }
+
     return permalinks
   }
 

middleware/context.js

@@ -52,6 +52,13 @@ module.exports = async function contextualize (req, res, next) {
   req.context.siteTree = siteTree
   req.context.pages = pageMap
 
+  // TODO we should create new data directories for these example files instead of using variable files
+  if (productMap[req.context.currentProduct]) {
+    req.context.productCodeExamples = req.context.site.data.variables[`${productMap[req.context.currentProduct].id}_code_examples`]
+    req.context.productCommunityExamples = req.context.site.data.variables[`${productMap[req.context.currentProduct].id}_community_examples`]
+    req.context.productUserExamples = req.context.site.data.variables[`${productMap[req.context.currentProduct].id}_user_examples`]
+  }
+
   // JS + CSS asset paths
   req.context.builtAssets = builtAssets
 

pages/index.tsx

@@ -44,7 +44,7 @@ type LandingPageProps = {
 function LandingPage(props: LandingPageProps) {
   const router = useRouter()
   const { gettingStartedLinks, popularLinks } = props
-  const { activeProducts } = useMainContext()
+  const { activeProducts, isHomepageVersion } = useMainContext()
   const { currentVersion } = useVersion()
   const { t } = useTranslation(['homepage', 'search', 'toc'])
   return (
@@ -80,7 +80,7 @@ function LandingPage(props: LandingPageProps) {
           </h2>
           <div className="d-flex flex-wrap gutter gutter-xl-spacious">
             {activeProducts.map((product) => {
-              if (!product.versions?.includes(currentVersion) && !product.external) {
+              if (!product.versions?.includes(currentVersion) && !isHomepageVersion) {
                 return null
               }
 

tests/unit/page.js

@@ -268,7 +268,7 @@ describe('Page class', () => {
         basePath: path.join(__dirname, '../../content'),
         languageCode: 'en'
       })
-      expect(page.permalinks.find(permalink => permalink.pageVersion === nonEnterpriseDefaultVersion).href).toBe('/en')
+      expect(page.permalinks.find(permalink => permalink.pageVersion === 'homepage').href).toBe('/en')
       expect(page.permalinks.find(permalink => permalink.pageVersion === `enterprise-server@${enterpriseServerReleases.oldestSupported}`).href).toBe(`/en/enterprise-server@${enterpriseServerReleases.oldestSupported}`)
     })
 

tests/unit/permalink.js

@@ -7,6 +7,7 @@ const getApplicableVersions = require('../../lib/get-applicable-versions')
 // Permalink.derive requires: languageCode, relativePath, title, versions (<- FM prop)
 
 describe('Permalink class', () => {
+  // We can only use Permalink.derive to get the special 'homepage' permalink
   test('derives info for unversioned homepage', () => {
     const versions = {
       'free-pro-team': '*',
@@ -14,7 +15,7 @@ describe('Permalink class', () => {
     }
     const permalinks = Permalink.derive('en', 'index.md', 'Hello World', getApplicableVersions(versions))
     expect(permalinks.length).toBeGreaterThan(1)
-    const homepagePermalink = permalinks.find(permalink => permalink.pageVersion === nonEnterpriseDefaultVersion)
+    const homepagePermalink = permalinks.find(permalink => permalink.pageVersion === 'homepage')
     expect(homepagePermalink.href).toBe('/en')
   })
 

tests/unit/versions.js

@@ -30,10 +30,10 @@ describe('versions middleware', () => {
 
   test('adds res.context.currentVersion string', async () => {
     let currentVersion = await getJSON('/en?json=currentVersion')
-    expect(currentVersion).toBe(nonEnterpriseDefaultVersion)
+    expect(currentVersion).toBe('homepage')
 
     currentVersion = await getJSON(`/en/${nonEnterpriseDefaultVersion}?json=currentVersion`)
-    expect(currentVersion).toBe(nonEnterpriseDefaultVersion)
+    expect(currentVersion).toBe('homepage')
 
     currentVersion = await getJSON(`/en/enterprise-server@${latest}?json=currentVersion`)
     expect(currentVersion).toBe(`enterprise-server@${latest}`)