repo sync

Author: Octomerger

content/actions/guides/building-and-testing-powershell.md

@@ -5,6 +5,8 @@ product: '{% data reusables.gated-features.actions %}'
 versions:
   free-pro-team: '*'
   enterprise-server: '>=2.22'
+authors:
+  - potatoqualitee
 ---
 
 {% data reusables.actions.enterprise-beta %}

content/actions/guides/publishing-nodejs-packages.md

@@ -8,6 +8,8 @@ redirect_from:
 versions:
   free-pro-team: '*'
   enterprise-server: '>=2.22'
+authors:
+  - GitHub
 ---
 
 {% data reusables.actions.enterprise-beta %}

content/actions/guides/setting-up-continuous-integration-using-workflow-templates.md

@@ -11,6 +11,8 @@ redirect_from:
 versions:
   free-pro-team: '*'
   enterprise-server: '>=2.22'
+authors:
+  - GitHub
 ---
 
 {% data reusables.actions.enterprise-beta %}

content/actions/index.md

@@ -13,6 +13,10 @@ featuredLinks:
   gettingStarted:
     - /actions/managing-workflow-runs
     - /actions/hosting-your-own-runners
+  guideCards:
+    - /actions/guides/setting-up-continuous-integration-using-workflow-templates
+    - /actions/guides/publishing-nodejs-packages
+    - /actions/guides/building-and-testing-powershell
   popular:
     - /actions/reference/workflow-syntax-for-github-actions
     - /actions/reference/events-that-trigger-workflows
@@ -56,7 +60,7 @@ versions:
 
 <!-- Code examples -->
 <div class="my-6 pt-6">
-  <h2 class="mb-2">More guides</h2>
+  <h2 class="mb-2 font-mktg h1">Code examples</h2>
 
   <div class="d-flex flex-wrap gutter">
     <div class="col-12 col-lg-4 mb-4">
@@ -156,6 +160,4 @@ versions:
       </a>
     </div>
   </div>
-
-  <a href="/actions/guides" class="btn btn-outline mt-4">Show all guides {% octicon "arrow-right" %}</a>
 </div>

includes/guide-card.html

@@ -0,0 +1,37 @@
+{% assign authorsString = guide.page.authors | join: ", @" %}
+
+<div class="col-lg-4 col-12 mb-3">
+  <a class="Box box-shadow-medium height-full d-block hover-shadow-large no-underline text-gray-dark p-5" href="{{ guide.href }}">
+    <h2>{{ guide.title }}</h2>
+    <p class="mt-2 mb-4 text-gray-light">{{ guide.intro }}</p>
+
+    {% if guide.page.authors and guide.page.authors.length > 0 %}
+      <footer class="d-flex">
+        <div class="mr-1">
+          {% if guide.page.authors.length == 1 %}
+            <img class="avatar avatar-2 circle mr-1" src="https://github.com/{{ guide.page.authors[0] }}.png" alt="@{{ guide.page.authors[0] }}" />
+          {% else %}
+            <div class="AvatarStack AvatarStack--three-plus">
+              <div
+                class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1"
+                aria-label="@{{ authorsString }}"
+              >
+                {% for author in guide.page.authors %}
+                  <img
+                    class="avatar circle"
+                    alt="@{{ author }}"
+                    src="https://github.com/{{ author }}.png"
+                  />
+                {% endfor %}
+              </div>
+            </div>
+          {% endif %}
+        </div>
+
+        <div>
+          @{{ authorsString }}
+        </div>
+      </footer>
+    {% endif %}
+  </a>
+</div>

layouts/product-landing.html

@@ -83,6 +83,21 @@ <h4>{{ link.title }} <span class="Bump-link-symbol">→</span></h4>
         {{ renderedPage }}
       </div>
 
+      {% 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>
+
+            <div class="d-lg-flex gutter-lg flex-items-stretch">
+              {% assign guideCards = featuredLinks.guideCards %}
+              {% render "guide-card" for guideCards as guide %}
+            </div>
+
+            <a href="{{ currentPath }}/guides" class="btn btn-outline float-right">Explore guides {% octicon "arrow-right" %}</a>
+          </div>
+        </div>
+      {% endif %}
+
       <div class="border-top">
         {% include small-footer %}
       </div>

lib/frontmatter.js

@@ -62,6 +62,12 @@ const schema = {
         reference: { type: 'string' }
       }
     },
+    authors: {
+      type: 'array',
+      items: {
+        type: 'string'
+      }
+    },
     featuredLinks: {
       type: 'object',
       additionalProperties: false,

middleware/csp.js

@@ -21,7 +21,9 @@ module.exports = contentSecurityPolicy({
       'github.githubassets.com',
       'github-images.s3.amazonaws.com',
       'octodex.github.com',
-      'placehold.it'
+      'placehold.it',
+      '*.githubusercontent.com',
+      'github.com'
     ],
     objectSrc: [
       "'self'"

middleware/featured-links.js

@@ -43,7 +43,8 @@ async function getLinkData (rawLinks, context) {
     links.push({
       href,
       title: await linkedPage.renderTitle(context, opts),
-      intro: await linkedPage.renderProp('intro', context, opts)
+      intro: await linkedPage.renderProp('intro', context, opts),
+      page: linkedPage
     })
   }
 

stylesheets/index.scss

@@ -27,6 +27,7 @@
 @import "@primer/css/tooltips/index.scss";
 @import "@primer/css/truncate/index.scss";
 @import "@primer/css/utilities/index.scss";
+@import "@primer/css/avatars/index.scss";
 // END CUSTOM CORE IMPORT
 
 @import "@primer/css/markdown/index.scss";
@@ -52,3 +53,5 @@ $marketing-font-path: "/dist/fonts/";
 @import "tables.scss";
 @import "opacity.scss";
 @import "print.scss";
+@import "shadows.scss";
+@import "product-landing.scss";

stylesheets/product-landing.scss

@@ -0,0 +1,3 @@
+.bg-guides-gradient {
+  background: linear-gradient(0deg, rgba(33, 136, 255, 0.11) 0%, rgba(255, 255, 255, 0) 100%);
+}

stylesheets/shadows.scss

@@ -0,0 +1,33 @@
+.hover-shadow {
+  & {
+    transition: box-shadow 0.3s ease-in-out;
+
+    &:hover {
+      box-shadow: $box-shadow !important;
+    }
+  }
+  
+  &-medium {
+    transition: box-shadow 0.3s ease-in-out;
+
+    &:hover {
+      box-shadow: $box-shadow-medium !important;
+    }
+  }
+  
+  &-large {
+    transition: box-shadow 0.3s ease-in-out;
+
+    &:hover {
+      box-shadow: $box-shadow-large !important;
+    }
+  }
+  
+  &-extra-large {
+    transition: box-shadow 0.3s ease-in-out;
+
+    &:hover {
+      box-shadow: $box-shadow-extra-large !important;
+    }
+  }
+}