Adjustments for landing page top section (#16411)

* Don't show popular article descriptions

* Add more

* Truncate guides descriptions

* Use shorter dates, borders only on top/bottom

* Add "View all" links

* Make them go places

* Remove "View all" for Popular

* Populate some real popular articles

* Borked a thing, woopsy

* Use %B %d for full month name

Author: JasonEtco

content/actions/index.md

@@ -15,6 +15,10 @@ featuredLinks:
   popular:
     - /actions/reference/workflow-syntax-for-github-actions
     - /actions/reference/events-that-trigger-workflows
+    - /actions/learn-github-actions
+    - /actions/reference/context-and-expression-syntax-for-github-actions
+    - /actions/reference/workflow-commands-for-github-actions
+    - /actions/reference/environment-variables
 changelog:
   - title: Self-Hosted Runner Group Access Changes
     date: '2020-10-16'

layouts/product-landing.html

@@ -28,41 +28,51 @@ <h1 class="mb-3 font-mktg">{{ page.shortTitle }}</h1>
         <!-- Article links -->
         <div class="d-lg-flex gutter my-6 py-6">
           <div class="col-12 col-lg-4 mb-4 mb-lg-0">
-            <div class="featured-links-heading pb-3 mb-4 border-bottom">
-              <h3 class="f5 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.guides %}</h3>
+            <div class="featured-links-heading mb-4 d-flex flex-items-baseline">
+              <h3 class="f4 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.guides %}</h3>
+              <a href="/{{ currentPath }}/guides" class="ml-4">View all {% octicon "arrow-right" height="14" class="v-align-middle" %}</a>
             </div>
             <ul class="list-style-none">
               {% for link in featuredLinks.guides %}
-                <li class="Box px-3 py-1 mb-2">
-                  {% include featured-link %}
+                <li class="border-top">
+                  <a class="link-with-intro Bump-link--hover no-underline d-block py-4" href="{{ link.href }}">
+                    <h4 class="link-with-intro-title link-gray-dark mb-1">{{ link.title }}<span class="Bump-link-symbol">→</span></h4>
+                    <p class="link-with-intro-intro color-gray-5 mb-0">{{ link.intro | truncatewords: 12 }}</p>
+                  </a>
                 </li>
               {% endfor %}
             </ul>
           </div>
 
           <div class="col-12 col-lg-4 mb-4 mb-lg-0">
-            <div class="featured-links-heading pb-3 mb-4 border-bottom">
-              <h3 class="f5 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.popular_articles %}</h3>
+            <div class="featured-links-heading mb-4 d-flex flex-items-baseline">
+              <h3 class="f4 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.popular_articles %}</h3>
             </div>
             <ul class="list-style-none">
               {% for link in featuredLinks.popular %}
-                <li class="Box px-3 py-1 mb-2">
-                  {% include featured-link %}
+                <li class="border-top">
+                  <a class="link-with-intro Bump-link--hover no-underline d-block py-3" href="{{ link.href }}">
+                    <h4 class="link-with-intro-title link-gray-dark">{{ link.title }}<span class="Bump-link-symbol">→</span></h4>
+                  </a>
                 </li>
               {% endfor %}
             </ul>
           </div>
 
           <div class="col-12 col-lg-4 mb-4 mb-lg-0">
-            <div class="featured-links-heading pb-3 mb-4 border-bottom">
-              <h3 class="f5 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.whats_new %}</h3>
+            <div class="featured-links-heading mb-4 d-flex flex-items-baseline">
+              <h3 class="f4 text-normal text-mono text-uppercase color-gray-5">{% data ui.toc.whats_new %}</h3>
+              <a href="https://github.blog/changelog/" class="ml-4">View all {% octicon "arrow-right" height="14" class="v-align-middle" %}</a>
             </div>
             <ul class="list-style-none">
               {% for link in page.changelog %}
-                <li class="mb-2">
-                  <a href="{{ link.href }}" class="Box text-gray-dark Bump-link--hover p-3 d-flex flex-justify-between flex-items-center no-underline">
+                <li class="border-top">
+                  <a href="{{ link.href }}" class="d-block text-gray-dark Bump-link--hover py-3 no-underline">
+                    <time
+                      class="tooltipped tooltipped-n text-gray-light text-mono mb-1"
+                      aria-label="{{ link.date | date: '%B %d, %Y' }}"
+                    >{{ link.date | date: "%B %d" }}</time>
                     <h4>{{ link.title }} <span class="Bump-link-symbol">→</span></h4>
-                    <span class="text-gray-light text-mono ml-2" style="white-space: nowrap">{{ link.date | date: "%B %d, %Y" }}</span>
                   </a>
                 </li>
               {% endfor %}