Merge pull request #19090 from github/add-anchors-to-landing-layouts

Add anchors to product landing and sublanding sections

Author: sarahs

includes/all-articles-category.html

@@ -3,7 +3,7 @@
 {% assign maxArticles = 10 %}
 
 <div class="py-6 all-articles-list">
-  <h2 class="font-mktg mb-4">{{ category.title }} docs</h2>
+  <h2 class="font-mktg mb-4" id="all-docs"><a href="#all-docs">{{ category.title }} docs</a></h2>
 
   <div class="d-flex gutter flex-wrap">
     {% for xmaptopic in category.maptopics %}

includes/all-articles-product.html

@@ -2,7 +2,7 @@
 {% assign maxArticles = 10 %}
 
 <div class="py-6 all-articles-list">
-  <h2 class="font-mktg mb-4">All {{ product.title }} docs</h2>
+  <h2 class="font-mktg mb-4" id="all-docs"><a href="#all-docs">All {{ product.title }} docs</a></h2>
 
   <div class="d-flex gutter flex-wrap">
     {% for category in product.categories %}

includes/article-cards.html

@@ -3,7 +3,7 @@
 <div class="container-xl px-3 px-md-6 pt-3 pb-2">
   <!-- When learning tracks aren't present, only guides exist and this heading duplicates the article's title -->
   {% if page.learningTracks %}
-  <h2 class="mb-3 font-mktg">{% data ui.product_sublanding.all_guides %}</h2>
+  <h2 class="mb-3 font-mktg" id="all-guides"><a href="#all-guides">{% data ui.product_sublanding.all_guides %}</a></h2>
   {% endif %}
 
   <form class="mt-2 mb-5 d-flex d-flex">

includes/category-articles-list.html

@@ -7,7 +7,7 @@
 {% assign maxArticles = 10 %}
 
 <div class="py-6 all-articles-list">
-  <h2 class="font-mktg mb-4">{{ currentCategoryTitle }} docs</h2>
+  <h2 class="font-mktg mb-4" id="all-docs"><a href="#all-docs">{{ currentCategoryTitle }} docs</a></h2>
 
   <div class="d-flex gutter flex-wrap">
     {% for childPage in currentCategory.childPages %}

includes/code-examples.html

@@ -1,5 +1,5 @@
 <div class="my-6 pt-6">
-  <h2 class="mb-2 font-mktg h1">{% data ui.product_landing.code_examples %}</h2>
+  <h2 class="mb-2 font-mktg h1" id="code-examples"><a href="#code-examples">{% data ui.product_landing.code_examples %}</a></h2>
 
   <div class="pr-lg-3 mb-5 mt-3">
     <input class="js-filter-card-filter input-lg py-2 px-3 col-12 col-lg-8 form-control" placeholder="{% data ui.product_landing.search_code_examples %}" type="search" autocomplete="off" aria-label="Search code examples"/>

includes/community-examples.html

@@ -1,5 +1,5 @@
 <div class="my-6 pt-6">
-  <h2 class="mb-2 font-mktg h1">{% data ui.product_landing.communities_using_discussions %}</h2>
+  <h2 class="mb-2 font-mktg h1" id="community-examples"><a href="#community-examples">{% data ui.product_landing.communities_using_discussions %}</a></h2>
 
   <div class="d-flex flex-wrap gutter">
     {% render discussions-community-card for productCommunityExamples as example %}
@@ -13,4 +13,4 @@ <h3 class="text-normal">{% data ui.product_landing.sorry %} <strong class="js-fi
     <p class="my-3 f4">{% data ui.product_landing.no_example %} <br>{% data ui.product_landing.try_another %}</p>
     <a href="https://github.com/github/docs/blob/main/data/variables/discussions_community_examples.yml">{% data ui.product_landing.add_your_community %} {% octicon "arrow-right" %}</a>
   </div>
-</div>
+</div>

includes/product-articles-list.html

@@ -3,7 +3,7 @@
 {% if currentProductTree.page.shortTitle and currentProductTree.page.shortTitle != '' %}{% assign productTitle = currentProductTree.page.shortTitle %}{% else %}{% assign productTitle = currentProductTree.page.title %}{% endif %}
 
 <div class="py-6 all-articles-list">
-  <h2 class="font-mktg mb-4">All {{ productTitle }} docs</h2>
+  <h2 class="font-mktg mb-4" id="all-docs"><a href="#all-docs">All {{ productTitle }} docs</a></h2>
 
   <div class="d-flex gutter flex-wrap">
     {% for childPage in currentProductTree.childPages %}

includes/sponsor-examples.html

@@ -1,5 +1,5 @@
 <div class="my-6 pt-6">
-  <h2 class="mb-2 font-mktg h1">{% data ui.product_landing.sponsor_community %}</h2>
+  <h2 class="mb-2 font-mktg h1" id="community-examples"><a href="#community-examples">{% data ui.product_landing.sponsor_community %}</a></h2>
 
   <div class="d-flex flex-wrap gutter">
     {% render sponsors-community-card for productUserExamples as example %}

layouts/product-landing.html

@@ -9,7 +9,7 @@
       {% include header %}
       {% include deprecation-banner %}
 
-      <div class="container-xl px-3 px-md-6 pt-3 pb-2">
+      <div class="container-xl px-3 px-md-6 pt-3 pb-2 product-landing">
         <header class="d-lg-flex gutter-lg mb-6">
           <div class="{% if page.product_video and page.product_video != '' %}col-12 col-lg-6 mb-3 mb-lg-0{% endif %}">
             <span class="text-mono color-text-secondary">Product</span>
@@ -54,7 +54,7 @@ <h1 class="mb-3 font-mktg">
         <div class="d-lg-flex gutter my-6 py-6">
           <div class="col-12 col-lg-{% if page.changelog %}4{% else %}6{% endif %} mb-4 mb-lg-0">
             <div class="featured-links-heading mb-4 d-flex flex-items-baseline">
-              <h3 class="f4 text-normal text-mono text-uppercase color-text-secondary">{% data ui.toc.guides %}</h3>
+              <h3 class="f4 text-normal text-mono text-uppercase color-text-secondary" id="guides"><a href="#guides">{% data ui.toc.guides %}</a></h3>
               {% unless currentCategory %}
                 <a href="{{ currentPath }}/guides" class="ml-4">View all {% octicon "arrow-right" height="14" class="v-align-middle" %}</a>
               {% endunless %}
@@ -73,7 +73,7 @@ <h4 class="link-with-intro-title mb-1">{{ link.title }}<span class="Bump-link-sy
 
           <div class="col-12 col-lg-{% if page.changelog %}4{% else %}6{% endif %} mb-4 mb-lg-0">
             <div class="featured-links-heading mb-4 d-flex flex-items-baseline">
-              <h3 class="f4 text-normal text-mono text-uppercase color-text-secondary">{% data ui.toc.popular_articles %}</h3>
+              <h3 class="f4 text-normal text-mono text-uppercase color-text-secondary" id="popular"><a href="#popular">{% data ui.toc.popular_articles %}</a></h3>
             </div>
             <ul class="list-style-none">
               {% for link in featuredLinks.popular %}
@@ -89,7 +89,7 @@ <h2 class="link-with-intro-title f5">{{ link.title }}<span class="Bump-link-symb
           {% if page.changelog %}
             <div class="col-12 col-lg-4 mb-4 mb-lg-0">
               <div class="featured-links-heading mb-4 d-flex flex-items-baseline">
-                <h3 class="f4 text-normal text-mono text-uppercase color-text-secondary">{% data ui.toc.whats_new %}</h3>
+                <h3 class="f4 text-normal text-mono text-uppercase color-text-secondary" id="whats-new"><a href="#whats-new">{% data ui.toc.whats_new %}</a></h3>
                 <a href="{{ changelogUrl }}" class="ml-4">View all {% octicon "arrow-right" height="14" class="v-align-middle" %}</a>
               </div>
               <ul class="list-style-none">
@@ -127,7 +127,7 @@ <h4>{{ link.title }} <span class="Bump-link-symbol">→</span></h4>
       {% if featuredLinks.guideCards %}
         <div class="bg-guides-gradient py-6">
           <div class="container-xl px-3 px-md-6 my-6">
-            <h2 class="font-mktg h1 mb-2">Guides</h2>
+            <h2 class="font-mktg h1 mb-2" id="guides-2"><a href="#guides-2">Guides</a></h2>
 
             <div class="d-lg-flex gutter-lg flex-items-stretch">
               {% assign guideCards = featuredLinks.guideCards %}

layouts/product-sublanding.html

@@ -60,7 +60,7 @@ <h3 class="font-mktg h3-mktg my-4 color-text-primary">{{ guide.title }}</h3>
           {% assign learningTracks = page.learningTracks %}
           {% if learningTracks and learningTracks.size > 0 %}
           <div class="border-top py-6">
-            <h2 class="mb-3 font-mktg">{% data ui.product_sublanding.learning_paths %}</h2>
+            <h2 class="mb-3 font-mktg" id="learning-paths"><a href="#learning-paths">{% data ui.product_sublanding.learning_paths %}</a></h2>
             <div class="lead-mktg color-text-secondary f4 description-text">{% data ui.product_sublanding.learning_paths_desc %}</div>
 
             <!-- Learning tracks -->