From 052a540cdb6ae4d1189f24838fd3efd706dfb66d Mon Sep 17 00:00:00 2001 From: Emily Gould <4822039+emilyistoofunky@users.noreply.github.com> Date: Tue, 9 Mar 2021 10:04:45 -0600 Subject: [PATCH] Getting started category landing page (#17841) * Start building out landing page in index file * Add articles * Add a couple more popular articles * Tweak intro to cover more audiences * Add TOC back with new organization * Update content/github/getting-started-with-github/index.md * Category as product guides section * Update breadcrumbs.js * Update server.js * Update product-landing.html * Remove TOC listing * Revert removing TOC * Update index.md * Update index.md * Update content/github/getting-started-with-github/index.md * Apply suggestions from code review Co-authored-by: Laura Coursen Co-authored-by: Kevin Heis Co-authored-by: Laura Coursen --- .../getting-started-with-github/index.md | 61 ++++++++++++++----- includes/all-articles-category.html | 32 ++++++++++ ...rticles.html => all-articles-product.html} | 0 layouts/product-landing.html | 14 ++++- lib/path-utils.js | 17 ++++++ middleware/context.js | 8 ++- tests/rendering/breadcrumbs.js | 4 +- tests/rendering/server.js | 6 +- 8 files changed, 119 insertions(+), 23 deletions(-) create mode 100644 includes/all-articles-category.html rename includes/{all-articles.html => all-articles-product.html} (100%) diff --git a/content/github/getting-started-with-github/index.md b/content/github/getting-started-with-github/index.md index d5970dd910b3..f3f4596e9eb9 100644 --- a/content/github/getting-started-with-github/index.md +++ b/content/github/getting-started-with-github/index.md @@ -1,7 +1,7 @@ --- title: Getting started with GitHub shortTitle: Getting started -intro: 'Learn about {% data variables.product.prodname_dotcom %}''s products, sign up for an account, and explore the {% data variables.product.prodname_dotcom %} community.' +intro: 'Learn how to start building, shipping, and maintaining software with {% data variables.product.prodname_dotcom %}. Explore our products, sign up for an account, and connect with the world''s largest development community.' redirect_from: - /categories/54/articles/ - /categories/bootcamp/ @@ -16,8 +16,34 @@ versions: free-pro-team: '*' enterprise-server: '*' github-ae: '*' +layout: product-landing +introLinks: + quickstart: /github/getting-started-with-github/quickstart +featuredLinks: + guides: + - /github/getting-started-with-github/githubs-products + - /github/getting-started-with-github/create-a-repo + - /github/getting-started-with-github/signing-up-for-a-new-github-account + popular: + - /github/getting-started-with-github/set-up-git + - /github/getting-started-with-github/github-glossary + - /github/getting-started-with-github/fork-a-repo + - /github/getting-started-with-github/keyboard-shortcuts + - /github/getting-started-with-github/saving-repositories-with-stars + guideCards: + - /github/getting-started-with-github/types-of-github-accounts + - /github/getting-started-with-github/finding-ways-to-contribute-to-open-source-on-github + - /github/getting-started-with-github/troubleshooting-connectivity-problems --- + diff --git a/includes/all-articles-category.html b/includes/all-articles-category.html new file mode 100644 index 000000000000..0e1fdbd61bf4 --- /dev/null +++ b/includes/all-articles-category.html @@ -0,0 +1,32 @@ +{% assign category = siteTree[currentLanguage][currentVersion].products[currentProduct].categories[currentPath] %} + +{% assign maxArticles = 10 %} + +
+

{{ category.title }} docs

+ +
+ {% for xmaptopic in category.maptopics %} + {% assign maptopic = xmaptopic[1] %} + {% unless maptopic.hidden %} +
+

{{ maptopic.title }}

+
    + {% for xarticle in maptopic.articles %} + {% assign article = xarticle[1] %} +
  • + + {{ article.title }} + +
  • + {% endfor %} + {% assign numArticles = maptopic.childArticles | obj_size %} + {% if numArticles > maxArticles %} + + {% endif %} +
+
+ {% endunless %} + {% endfor %} +
+
diff --git a/includes/all-articles.html b/includes/all-articles-product.html similarity index 100% rename from includes/all-articles.html rename to includes/all-articles-product.html diff --git a/layouts/product-landing.html b/layouts/product-landing.html index fbda1d83343c..fc8e00406d30 100644 --- a/layouts/product-landing.html +++ b/layouts/product-landing.html @@ -60,7 +60,9 @@

    {% for link in featuredLinks.guides %} @@ -125,13 +127,19 @@

    Guides

    {% render guide-card for guideCards as guide %}
- Explore guides {% octicon "arrow-right" %} + {% unless currentCategory %} + Explore guides {% octicon "arrow-right" %} + {% endunless %} {% endif %}
- {% include all-articles %} + {% if currentCategory %} + {% include all-articles-category %} + {% else %} + {% include all-articles-product %} + {% endif %}
diff --git a/lib/path-utils.js b/lib/path-utils.js index 83a966985fe7..68a6f899a94a 100644 --- a/lib/path-utils.js +++ b/lib/path-utils.js @@ -90,6 +90,22 @@ function getProductStringFromPath (href) { : pathParts[1] } +function getCategoryStringFromPath (href) { + href = getPathWithoutLanguage(href) + + if (href === '/') return null + + const pathParts = href.split('/') + + if (pathParts.includes('early-access')) return null + + const productIndex = allProducts[pathParts[2]] + ? 2 + : 1 + + return pathParts[productIndex + 1] +} + // Return the corresponding object for the product segment in a path function getProductObjectFromPath (href) { const productFromPath = getProductStringFromPath(href) @@ -104,5 +120,6 @@ module.exports = { getVersionStringFromPath, getVersionObjectFromPath, getProductStringFromPath, + getCategoryStringFromPath, getProductObjectFromPath } diff --git a/middleware/context.js b/middleware/context.js index a2508138aacd..3a00064c90b9 100644 --- a/middleware/context.js +++ b/middleware/context.js @@ -3,7 +3,12 @@ const enterpriseServerReleases = require('../lib/enterprise-server-releases') const allVersions = require('../lib/all-versions') const allProducts = require('../lib/all-products') const activeProducts = Object.values(allProducts).filter(product => !product.wip && !product.hidden) -const { getVersionStringFromPath, getProductStringFromPath, getPathWithoutLanguage } = require('../lib/path-utils') +const { + getVersionStringFromPath, + getProductStringFromPath, + getCategoryStringFromPath, + getPathWithoutLanguage +} = require('../lib/path-utils') const productNames = require('../lib/product-names') const warmServer = require('../lib/warm-server') const featureFlags = Object.keys(require('../feature-flags')) @@ -31,6 +36,7 @@ module.exports = async function contextualize (req, res, next) { req.context.currentLanguage = req.language req.context.currentVersion = getVersionStringFromPath(req.path) req.context.currentProduct = getProductStringFromPath(req.path) + req.context.currentCategory = getCategoryStringFromPath(req.path) req.context.allProducts = allProducts req.context.activeProducts = activeProducts req.context.allVersions = allVersions diff --git a/tests/rendering/breadcrumbs.js b/tests/rendering/breadcrumbs.js index 81f4249207e2..b95fe1b0cd06 100644 --- a/tests/rendering/breadcrumbs.js +++ b/tests/rendering/breadcrumbs.js @@ -49,13 +49,13 @@ describe('breadcrumbs', () => { }) test('English breadcrumbs link to English pages', async () => { - const $ = await getDOM('/en/github/getting-started-with-github') + const $ = await getDOM('/en/github/setting-up-and-managing-your-github-user-account') const $breadcrumbs = $('.breadcrumbs a') expect($breadcrumbs.eq(0).attr('href')).toBe('/en/github') }) test('localized breadcrumbs link to localize pages', async () => { - const $ = await getDOM('/ja/github/getting-started-with-github') + const $ = await getDOM('/ja/github/setting-up-and-managing-your-github-user-account') const $breadcrumbs = $('.breadcrumbs a') expect($breadcrumbs.eq(0).attr('href')).toBe('/ja/github') }) diff --git a/tests/rendering/server.js b/tests/rendering/server.js index c9cabb77d0ce..7b7e316c308d 100644 --- a/tests/rendering/server.js +++ b/tests/rendering/server.js @@ -756,15 +756,15 @@ describe('static routes', () => { }) describe('index pages', () => { - const nonEnterpriseOnlyPath = '/en/github/getting-started-with-github/verifying-your-email-address' + const nonEnterpriseOnlyPath = '/en/github/setting-up-and-managing-your-github-user-account/managing-user-account-settings' test('includes dotcom-only links in dotcom TOC', async () => { - const $ = await getDOM('/en/github/getting-started-with-github') + const $ = await getDOM('/en/github/setting-up-and-managing-your-github-user-account') expect($(`article a[href="${nonEnterpriseOnlyPath}"]`).length).toBe(1) }) test('excludes dotcom-only from GHE TOC', async () => { - const $ = await getDOM(`/en/enterprise/${enterpriseServerReleases.latest}/user/github/getting-started-with-github`) + const $ = await getDOM(`/en/enterprise/${enterpriseServerReleases.latest}/user/github/setting-up-and-managing-your-github-user-account`) expect($(`a[href="${nonEnterpriseOnlyPath}"]`).length).toBe(0) })