Actions landing page top bits (github#16266)

* Add changelog frontmatter * Reorganize some properties * Move sections to product-landing * Add more items * Changing heading design * Redesign hero * Remove "GitHub Actions:" * Popular ~articles~ * Use proper date formatting * Quick start => Quickstart * Add a comment * Add to content/README
shahrokh90 · Nov 3, 2020 · 7d55775 · 7d55775
1 parent 5d09adb
commit 7d55775
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 46 deletions.
diff --git a/content/README.md b/content/README.md
@@ -166,6 +166,12 @@ featuredLinks:
 - Type: `Boolean`. Default is `false`.
 - Optional.
 
+### `changelog`
+
+- Purpose: Render a list of changelog items with timestamps on product pages (ex: `layouts/product-landing.html`)
+- Type: `Array`, items are objects `{ href: string, title: string, date: 'YYYY-MM-DD' }`
+- Optional.
+
 ### Escaping single quotes
 
 If you see two single quotes in a row (`''`) in YML frontmatter where you might expect to see one (`'`), this is the YML-preferred way to escape a single quote. From [the YAML spec](https://yaml.org/spec/history/2001-12-10.html):

diff --git a/content/actions/index.md b/content/actions/index.md
@@ -4,17 +4,30 @@ shortTitle: GitHub Actions
 intro: 'Automate, customize, and execute your software development workflows right in your repository with {% data variables.product.prodname_actions %}. You can discover, create, and share actions to perform any job you''d like, including CI/CD, and combine actions in a completely customized workflow.'
 introLinks:
   quickstart: /actions/quickstart
-  learn: /actions/learn-github-actions
+  reference: /actions/reference
 featuredLinks:
+  guides:
+    - /actions/guides/setting-up-continuous-integration-using-workflow-templates
+    - /actions/guides/about-packaging-with-github-actions
   gettingStarted:
     - /actions/managing-workflow-runs
     - /actions/hosting-your-own-runners
-  guide:
-    - /actions/guides/setting-up-continuous-integration-using-workflow-templates
-    - /actions/guides/about-packaging-with-github-actions
   popular:
     - /actions/reference/workflow-syntax-for-github-actions
     - /actions/reference/events-that-trigger-workflows
+changelog:
+  - title: Self-Hosted Runner Group Access Changes
+    date: '2020-10-16'
+    href: https://github.blog/changelog/2020-10-16-github-actions-self-hosted-runner-group-access-changes/
+  - title: Ability to change retention days for artifacts and logs
+    date: '2020-10-08'
+    href: https://github.blog/changelog/2020-10-08-github-actions-ability-to-change-retention-days-for-artifacts-and-logs
+  - title: Deprecating set-env and add-path commands
+    date: '2020-10-01'
+    href: https://github.blog/changelog/2020-10-01-github-actions-deprecating-set-env-and-add-path-commands
+  - title: Fine-tune access to external actions
+    date: '2020-10-01'
+    href: https://github.blog/changelog/2020-10-01-github-actions-fine-tune-access-to-external-actions
 redirect_from:
   - /articles/automating-your-workflow-with-github-actions/
   - /articles/customizing-your-project-with-github-actions/
@@ -36,42 +49,6 @@ versions:
 <!-- {% link_with_intro /hosting-your-own-runners %} -->
 <!-- {% link_with_intro /reference %} -->
 
-<!-- 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-4">
-      <h3 class="f5 text-normal text-mono underline-dashed color-gray-5">{% data ui.toc.guides %}</h3>
-    </div>
-    <ul class="list-style-none">
-      {% for link in featuredLinks.guide %}
-        <li>{% include featured-link %}</li>
-      {% endfor %}
-    </ul>
-  </div>
-
-  <div class="col-12 col-lg-4 mb-4 mb-lg-0">
-    <div class="featured-links-heading pb-4">
-      <h3 class="f5 text-normal text-mono underline-dashed color-gray-5">{% data ui.toc.popular_articles %}</h3>
-    </div>
-    <ul class="list-style-none">
-      {% for link in featuredLinks.popular %}
-        <li>{% include featured-link %}</li>
-      {% endfor %}
-    </ul>
-  </div>
-
-  <div class="col-12 col-lg-4 mb-4 mb-lg-0">
-    <div class="featured-links-heading pb-4">
-      <h3 class="f5 text-normal text-mono underline-dashed color-gray-5">Manage workflows</h3>
-    </div>
-    <ul class="list-style-none">
-      {% for link in featuredLinks.gettingStarted %}
-        <li>{% include featured-link %}</li>
-      {% endfor %}
-    </ul>
-  </div>
-</div>
-
 <!-- Code examples -->
 <div class="my-6 pt-6">
   <h2 class="mb-2">More guides</h2>

diff --git a/data/ui.yml b/data/ui.yml
@@ -26,8 +26,9 @@ homepage:
   version_picker: Version
 toc:
   getting_started: Getting started
-  popular_articles: Popular articles
+  popular_articles: Popular
   guides: Guides
+  whats_new: What's new
 pages:
   article_version: "Article version:"
   miniToc: In this article
@@ -129,3 +130,6 @@ footer:
       careers: Careers
       press: Press
       shop: Shop
+product_landing:
+  quick_start: Quickstart
+  reference_guides: Reference guides
diff --git a/layouts/product-landing.html b/layouts/product-landing.html
@@ -15,16 +15,61 @@
             <h1 class="mb-3 font-mktg">{{ page.shortTitle }}</h1>
             <div class="lead-mktg text-gray">{{ page.intro }}</div>
 
-            <a href="{{ page.introLinks.quickstart }}" class="btn btn-large f4 btn-blue mt-3">
-              Quickstart
+            <a href="{{ page.introLinks.quickstart }}" class="btn-mktg btn-large f4 mt-3">
+              {% data ui.product_landing.quick_start %}
             </a>
 
-            <a href="{{ page.introLinks.learn }}" class="ml-3 btn btn-large f4 btn-outline mt-3">
-              Learn {% data variables.product.prodname_actions %}
+            <a href="{{ page.introLinks.reference }}" class="ml-3 btn-mktg btn-outline-mktg btn-large f4 mt-3">
+              {% data ui.product_landing.reference_guides %}
             </a>
           </div>
         </header>
 
+        <!-- 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>
+            <ul class="list-style-none">
+              {% for link in featuredLinks.guides %}
+                <li class="Box px-3 py-1 mb-2">
+                  {% include featured-link %}
+                </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>
+            <ul class="list-style-none">
+              {% for link in featuredLinks.popular %}
+                <li class="Box px-3 py-1 mb-2">
+                  {% include featured-link %}
+                </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>
+            <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">
+                    <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 %}
+            </ul>
+          </div>
+        </div>
+
         {{ renderedPage }}
       </div>
 

diff --git a/lib/frontmatter.js b/lib/frontmatter.js
@@ -59,7 +59,7 @@ const schema = {
       type: 'object',
       properties: {
         quickstart: { type: 'string' },
-        learn: { type: 'string' }
+        reference: { type: 'string' }
       }
     },
     featuredLinks: {
@@ -71,6 +71,18 @@ const schema = {
           items: { type: 'string' }
         }
       }
+    },
+    // Shown in `product-landing.html` "What's new" section
+    changelog: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          title: { type: 'string' },
+          date: { type: 'string', format: 'date' },
+          href: { type: 'string' }
+        }
+      }
     }
   }
 }