From aeca2ad30b0ce3471ab94255246d235bfa26b9e4 Mon Sep 17 00:00:00 2001
From: Sarah Schneider <sarahs@users.noreply.github.com>
Date: Thu, 12 Nov 2020 10:52:17 -0500
Subject: [PATCH 1/2] remove extra slash in guides path (#16446)

Co-authored-by: Chiedo John <2156688+chiedo@users.noreply.github.com>
---
 layouts/product-landing.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/product-landing.html b/layouts/product-landing.html
index 8c87a431694d..4ffcedfc368d 100644
--- a/layouts/product-landing.html
+++ b/layouts/product-landing.html
@@ -30,7 +30,7 @@ <h1 class="mb-3 font-mktg">{{ page.shortTitle }}</h1>
           <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-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>
+              <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 %}

From 9e38a854b996ea47cf9037520c21f1f6d88e6b10 Mon Sep 17 00:00:00 2001
From: Jason Etcovitch <jasonetco@github.com>
Date: Thu, 12 Nov 2020 11:35:43 -0500
Subject: [PATCH 2/2] Filterable code examples on Actions landing page (#16276)

* Add custom hover shadows

* Support avatars

* Add guide-card include

* Use it in product-landing

* Add gradient styles

* Add guides frontmatter

* Use guideArticles instead of full objects

* Add support for authors

* Add support for category header

* Just pass the whole page

* Use it

* guide.url => guide.href

* Use `*.githubusercontent.com`

* Fix mobile card width

* Remove showDescription check

* Use featureLinks.guideCards

* Forgot an if

* Add contextualizers/actions-code-examples

* Use code-example-card include

* Tweak sizing/shadows

* Add a basic filterer

* Some visual tweaks

* labels => tags

* Cleanup some code

* Improve spacing on mobile

* Add "No results!" blurb

* Fix a boog

* Tweak spacing

* Remove support banner

* Improve "No results" state

* Just use login instead of name/avatarUrl

* Change card spacing

* Use circular avatars

* Add "Show more" button

* Add margin beneath "Guides"

* Use smaller font

* Assume github.com for code examples

* Show two columns at small screen

* Make "Show more" a btn

* Use the "repo" octicon

* Link to contributing guide

* Use a YAML file instead of a middleware

* Link straight to the file

* Fix some wonky markuip

* Fix a broken link

* Fix the borked test

* Allow variables that aren't strings

* Fix remaining tests
---
 content/actions/index.md                | 113 +++-----------------
 data/variables/action_code_examples.yml | 131 ++++++++++++++++++++++++
 includes/code-example-card.html         |  20 ++++
 javascripts/filter-code-examples.js     |  92 +++++++++++++++++
 javascripts/index.js                    |   2 +
 tests/content/lint-files.js             |   7 ++
 tests/content/liquid-line-breaks.js     |   1 +
 7 files changed, 270 insertions(+), 96 deletions(-)
 create mode 100644 data/variables/action_code_examples.yml
 create mode 100644 includes/code-example-card.html
 create mode 100644 javascripts/filter-code-examples.js

diff --git a/content/actions/index.md b/content/actions/index.md
index ad0099dfe825..fa449ba6d9df 100644
--- a/content/actions/index.md
+++ b/content/actions/index.md
@@ -60,105 +60,26 @@ versions:
 <!-- {% link_with_intro /reference %} -->
 
 <!-- Code examples -->
+{% assign actionsCodeExamples = site.data.variables.action_code_examples %}
+{% if actionsCodeExamples %}
 <div class="my-6 pt-6">
   <h2 class="mb-2 font-mktg h1">Code examples</h2>
 
+  <div class="pr-lg-3 mb-5 mt-3">
+    <input class="js-code-example-filter input-lg py-2 px-3 col-12 col-lg-8 form-control" placeholder="Search code examples" type="text" autocomplete="off" />
+  </div>
+
   <div class="d-flex flex-wrap gutter">
-    <div class="col-12 col-lg-4 mb-4">
-      <a class="Box d-block hover-grow no-underline text-gray-dark" href="/actions/guides/building-and-testing-nodejs">
-        <div class="p-4">
-          <h4>Building and testing Node.js</h4>
-          <p class="mt-2 mb-4">Use GitHub Actions to power CI in your Node.js application.</p>
-          <div class="d-flex">
-            <span class="IssueLabel text-white bg-blue mr-2">JavaScript/TypeScript</span>
-            <span class="IssueLabel text-white bg-blue mr-2">CI</span>
-          </div>
-        </div>
-        <footer class="border-top p-4 text-gray d-flex flex-items-center">
-          {% octicon "workflow" class="flex-shrink-0" %}
-          <span class="ml-2">/guides/building-and-testing-nodejs</span>
-        </footer>
-      </a>
-    </div>
-    <div class="col-12 col-lg-4 mb-4">
-      <a class="Box d-block hover-grow no-underline text-gray-dark" href="/actions/guides/building-and-testing-python">
-        <div class="p-4">
-          <h4>Building and testing Python</h4>
-          <p class="mt-2 mb-4">Use GitHub Actions to power CI in your Python application.</p>
-          <div class="d-flex">
-            <span class="IssueLabel text-white bg-blue mr-2">Python</span>
-            <span class="IssueLabel text-white bg-blue mr-2">CI</span>
-          </div>
-        </div>
-        <footer class="border-top p-4 text-gray d-flex flex-items-center">
-          {% octicon "workflow" class="flex-shrink-0" %}
-          <span class="ml-2">/guides/building-and-testing-python</span>
-        </footer>
-      </a>
-    </div>
-    <div class="col-12 col-lg-4 mb-4">
-      <a class="Box d-block hover-grow no-underline text-gray-dark" href="/actions/guides/building-and-testing-java-with-maven">
-        <div class="p-4">
-          <h4>Building and testing Java with Maven</h4>
-          <p class="mt-2 mb-4">Use GitHub Actions to power CI in your Java project with Maven.</p>
-          <div class="d-flex">
-            <span class="IssueLabel text-white bg-blue mr-2">Java</span>
-            <span class="IssueLabel text-white bg-blue mr-2">CI</span>
-          </div>
-        </div>
-        <footer class="border-top p-4 text-gray d-flex flex-items-center">
-          {% octicon "workflow" class="flex-shrink-0" %}
-          <span class="ml-2">/guides/building-and-testing-java-with-maven</span>
-        </footer>
-      </a>
-    </div>
-    <div class="col-12 col-lg-4 mb-4">
-      <a class="Box d-block hover-grow no-underline text-gray-dark" href="/actions/guides/building-and-testing-java-with-gradle">
-        <div class="p-4">
-          <h4>Building and testing Java with Gradle</h4>
-          <p class="mt-2 mb-4">Use GitHub Actions to power CI in your Java project with Gradle.</p>
-          <div class="d-flex">
-            <span class="IssueLabel text-white bg-blue mr-2">Java</span>
-            <span class="IssueLabel text-white bg-blue mr-2">CI</span>
-          </div>
-        </div>
-        <footer class="border-top p-4 text-gray d-flex flex-items-center">
-          {% octicon "workflow" class="flex-shrink-0" %}
-          <span class="ml-2">/guides/building-and-testing-java-with-gradle</span>
-        </footer>
-      </a>
-    </div>
-    <div class="col-12 col-lg-4 mb-4">
-      <a class="Box d-block hover-grow no-underline text-gray-dark" href="/actions/guides/building-and-testing-java-with-ant">
-        <div class="p-4">
-          <h4>Building and testing Java with Ant</h4>
-          <p class="mt-2 mb-4">Use GitHub Actions to power CI in your Java project with Ant.</p>
-          <div class="d-flex">
-            <span class="IssueLabel text-white bg-blue mr-2">Java</span>
-            <span class="IssueLabel text-white bg-blue mr-2">CI</span>
-          </div>
-        </div>
-        <footer class="border-top p-4 text-gray d-flex flex-items-center">
-          {% octicon "workflow" class="flex-shrink-0" %}
-          <span class="ml-2">/guides/building-and-testing-java-with-ant</span>
-        </footer>
-      </a>
-    </div>
-    <div class="col-12 col-lg-4 mb-4">
-      <a class="Box d-block hover-grow no-underline text-gray-dark" href="/actions/guides/publishing-nodejs-packages">
-        <div class="p-4">
-          <h4>Publishing Node.js packages</h4>
-          <p class="mt-2 mb-4">Use GitHub Actions to push your Node.js package to GitHub Packages or npm.</p>
-          <div class="d-flex">
-            <span class="IssueLabel text-white bg-blue mr-2">JavaScript/TypeScript</span>
-            <span class="IssueLabel text-white bg-blue mr-2">CI</span>
-          </div>
-        </div>
-        <footer class="border-top p-4 text-gray d-flex flex-items-center">
-          {% octicon "workflow" class="flex-shrink-0" %}
-          <span class="ml-2">/guides/publishing-nodejs-packages</span>
-        </footer>
-      </a>
-    </div>
+    {% render 'code-example-card' for actionsCodeExamples as example %}
+  </div>
+
+  <button class="js-code-example-show-more btn btn-outline float-right">Show more {% octicon "arrow-right" %}</button>
+
+  <div class="js-code-example-no-results d-none py-4 text-center text-gray font-mktg">
+    <div class="mb-3">{% octicon "search" width="24" %}</div>
+    <h3 class="text-normal">Sorry, there is no result for <strong class="js-code-example-filter-value"></strong></h3>
+    <p class="my-3 f4">It looks like we don't have an example that fits your filter.<br>Try another filter or add your code example</p>
+    <a href="https://github.com/github/docs/blob/HEAD/data/variables/action_code_examples.yml">Learn how to add a code example {% octicon "arrow-right" %}</a>
   </div>
 </div>
+{% endif %}
diff --git a/data/variables/action_code_examples.yml b/data/variables/action_code_examples.yml
new file mode 100644
index 000000000000..a0f12b03840c
--- /dev/null
+++ b/data/variables/action_code_examples.yml
@@ -0,0 +1,131 @@
+- title: Starter workflows
+  description: Workflow files for helping people get started with GitHub Actions
+  languages: TypeScript
+  href: actions/starter-workflows
+  tags:
+    - official
+    - workflows
+- title: Example services
+  description: Example workflows using service containers
+  languages: JavaScript
+  href: actions/example-services
+  tags:
+    - service containers
+- title: Declaratively setup GitHub Labels
+  description: GitHub Action to declaratively setup labels across repos
+  languages: JavaScript
+  href: lannonbr/issue-label-manager-action
+  tags:
+    - issues
+    - labels
+- title: Declaratively sync GitHub lables
+  description: GitHub Action to sync GitHub labels in the declarative way
+  languages: 'Go, Dockerfile'
+  href: micnncim/action-label-syncer
+  tags:
+    - issues
+    - labels
+- title: Add releases to GitHub
+  description: Publish Github releases in an action
+  languages: 'Dockerfile, Shell'
+  href: elgohr/Github-Release-Action
+  tags:
+    - releases
+    - publishing
+- title: Publish a docker image to Dockerhub
+  description: A Github Action used to build and publish Docker images
+  languages: 'Dockerfile, Shell'
+  href: elgohr/Publish-Docker-Github-Action
+  tags:
+    - docker
+    - publishing
+    - build
+- title: Create an issue using content from a file
+  description: A GitHub action to create an issue using content from a file
+  languages: 'JavaScript, Python'
+  href: peter-evans/create-issue-from-file
+  tags:
+    - issues
+- title: Publish GitHub Releases with Assets
+  description: GitHub Action for creating GitHub Releases
+  languages: 'TypeScript, Shell, JavaScript'
+  href: softprops/action-gh-release
+  tags:
+    - releases
+    - publishing
+- title: GitHub Project Automation+
+  description: Automate GitHub Project cards with any webhook event.
+  languages: JavaScript
+  href: alex-page/github-project-automation-plus
+  tags:
+    - projects
+    - automation
+    - issues
+    - pull requests
+- title: Run GitHub Actions Locally with a web interface
+  description: Runs GitHub Actions workflows locally (local)
+  languages: 'JavaScript, HTML, Dockerfile, CSS'
+  href: phishy/wflow
+  tags:
+    - local-development
+    - devops
+    - docker
+- title: Run your GitHub Actions locally
+  description: Run GitHub Actions Locally in Terminal
+  languages: 'Go, Shell'
+  href: nektos/act
+  tags:
+    - local-development
+    - devops
+    - docker
+- title: Build and Publish Android debug APK
+  description: Build and release debug APK from your Android project
+  languages: 'Shell, Dockerfile'
+  href: ShaunLWM/action-release-debugapk
+  tags:
+    - android
+    - build
+- title: Generate sequential build numbers for GitHub Actions
+  description: GitHub action for generating sequential build numbers.
+  languages: JavaScript
+  href: einaregilsson/build-number
+  tags:
+    - build
+    - automation
+- title: GitHub actions to push back to repository
+  description: Push Git changes to GitHub repository without authentication difficulties
+  languages: 'JavaScript, Shell'
+  href: ad-m/github-push-action
+  tags:
+    - publishing
+- title: Generate release notes based on your events
+  description: Action to auto generate a release note based on your events
+  languages: 'Shell, Dockerfile'
+  href: Decathlon/release-notes-generator-action
+  tags:
+    - releases
+    - publishing
+- title: Create a GitHub wiki page based on the provided markdown file
+  description: Create a GitHub wiki page based on the provided markdown file
+  languages: 'Shell, Dockerfile'
+  href: Decathlon/wiki-page-creator-action
+  tags:
+    - wiki
+    - publishing
+- title: Label your Pull Requests auto-magically (using committed files)
+  description: >-
+    Github action to label your pull requests auto-magically (using committed
+    files)
+  languages: 'TypeScript, Dockerfile, JavaScript'
+  href: Decathlon/pull-request-labeler-action
+  tags:
+    - projects
+    - issues
+    - labels
+- title: Add Label to your Pull Requests based on the author team name
+  description: Github action to label your pull requests based on the author name
+  languages: 'TypeScript, JavaScript'
+  href: JulienKode/team-labeler-action
+  tags:
+    - pull request
+    - labels
diff --git a/includes/code-example-card.html b/includes/code-example-card.html
new file mode 100644
index 000000000000..a1a1d8c5be15
--- /dev/null
+++ b/includes/code-example-card.html
@@ -0,0 +1,20 @@
+<div class="col-12 col-xl-4 col-lg-6 mb-4 js-code-example-card {% if forloop.index0 > 5 %}d-none{% endif %}" data-tags="{{ example.tags | join: ', ' }}" data-title="{{ example.title }}" data-description="{{ example.description }}">
+  <a
+    class="Box d-flex flex-column flex-justify-between height-full box-shadow-medium hover-shadow-large no-underline text-gray-dark"
+    href="https://github.com/{{ example.href }}"
+  >
+    <div class="p-4">
+      <h4>{{ example.title }}</h4>
+      <p class="mt-2 mb-4 text-gray-light">{{ example.description }}</p>
+      <div class="d-flex flex-wrap">
+        {% for tag in example.tags %}
+          <span class="IssueLabel text-white bg-blue mr-2 mb-1">{{ tag }}</span>
+        {% endfor %}
+      </div>
+    </div>
+    <footer class="border-top p-4 text-gray d-flex flex-items-center">
+      {% octicon "repo" class="flex-shrink-0" %}
+      <span class="ml-2 text-mono text-small text-blue">{{ example.href }}</span>
+    </footer>
+  </a>
+</div>
diff --git a/javascripts/filter-code-examples.js b/javascripts/filter-code-examples.js
new file mode 100644
index 000000000000..c6592672e418
--- /dev/null
+++ b/javascripts/filter-code-examples.js
@@ -0,0 +1,92 @@
+function filterCards (cards, value) {
+  const noResults = document.querySelector('.js-code-example-no-results')
+  const matchReg = new RegExp(value, 'i')
+
+  // Track whether or not we had at least one match
+  let hasMatches = false
+
+  for (let index = 0; index < cards.length; index++) {
+    const card = cards[index]
+
+    // Filter was emptied
+    if (!value) {
+      // Make sure we don't show the "No results" blurb
+      hasMatches = true
+
+      // Hide all but the first 6
+      if (index > 5) {
+        card.classList.add('d-none')
+      } else {
+        card.classList.remove('d-none')
+      }
+
+      continue
+    }
+
+    // Check if this card matches
+    const { title, description, tags } = card.dataset
+    const cardMatches = (
+      matchReg.test(title) ||
+      matchReg.test(description) ||
+      matchReg.test(tags)
+    )
+
+    if (cardMatches) {
+      card.classList.remove('d-none')
+      hasMatches = true
+    } else {
+      card.classList.add('d-none')
+    }
+  }
+
+  // If there wasn't at least one match, show the "no results" text
+  if (!hasMatches) {
+    document.querySelector('.js-code-example-filter-value').textContent = value
+    noResults.classList.remove('d-none')
+  } else {
+    noResults.classList.add('d-none')
+  }
+}
+
+export default function filterCodeExamples () {
+  const filter = document.querySelector('.js-code-example-filter')
+  if (!filter) return
+
+  const cards = Array.from(document.querySelectorAll('.js-code-example-card'))
+  const showMoreButton = document.querySelector('.js-code-example-show-more')
+
+  filter.addEventListener('keyup', evt => {
+    const value = evt.currentTarget.value
+
+    // Show or hide the "Show more" button if there is a value
+    if (value) showMoreButton.classList.add('d-none')
+    else showMoreButton.classList.remove('d-none')
+
+    filterCards(cards, value)
+  })
+
+  showMoreButton.addEventListener('click', evt => {
+    // Number of cards that are currently visible
+    const numShown = cards.filter(card => !card.classList.contains('d-none')).length
+    // We want to show 6 more
+    const totalToShow = numShown + 6
+
+    for (let index = numShown; index < cards.length; index++) {
+      const card = cards[index]
+
+      // If the card we're at is less than the total number of cards
+      // we should show, show this one
+      if (index < totalToShow) {
+        card.classList.remove('d-none')
+      } else {
+        // Otherwise, we've shown the ones we intend to so exit the loop
+        break
+      }
+    }
+
+    // They're all shown now, we should hide the button
+    if (totalToShow === cards.length) {
+      evt.currentTarget.style.display = 'none'
+    }
+  })
+}
diff --git a/javascripts/index.js b/javascripts/index.js
index 8d381eff36fa..a6d6f4649ebf 100644
--- a/javascripts/index.js
+++ b/javascripts/index.js
@@ -15,6 +15,7 @@ import experiment from './experiment'
 import copyCode from './copy-code'
 import { fillCsrf } from './get-csrf'
 import initializeEvents from './events'
+import filterCodeExamples from './filter-code-examples'
 
 document.addEventListener('DOMContentLoaded', async () => {
   displayPlatformSpecificContent()
@@ -32,4 +33,5 @@ document.addEventListener('DOMContentLoaded', async () => {
   experiment()
   copyCode()
   initializeEvents()
+  filterCodeExamples()
 })
diff --git a/tests/content/lint-files.js b/tests/content/lint-files.js
index f7e0a234622e..1714f0b041ce 100644
--- a/tests/content/lint-files.js
+++ b/tests/content/lint-files.js
@@ -267,6 +267,7 @@ describe('lint-files', () => {
         const matches = []
 
         for (const [key, content] of Object.entries(dictionary)) {
+          if (typeof content !== 'string') continue
           const valMatches = (content.match(relativeArticleLinkRegex) || [])
           if (valMatches.length > 0) {
             matches.push(...valMatches.map((match) => `Key "${key}": ${match}`))
@@ -281,6 +282,7 @@ describe('lint-files', () => {
         const matches = []
 
         for (const [key, content] of Object.entries(dictionary)) {
+          if (typeof content !== 'string') continue
           const valMatches = (content.match(languageLinkRegex) || [])
           if (valMatches.length > 0) {
             matches.push(...valMatches.map((match) => `Key "${key}": ${match}`))
@@ -295,6 +297,7 @@ describe('lint-files', () => {
         const matches = []
 
         for (const [key, content] of Object.entries(dictionary)) {
+          if (typeof content !== 'string') continue
           const valMatches = (content.match(versionLinkRegEx) || [])
           if (valMatches.length > 0) {
             matches.push(...valMatches.map((match) => `Key "${key}": ${match}`))
@@ -309,6 +312,7 @@ describe('lint-files', () => {
         const matches = []
 
         for (const [key, content] of Object.entries(dictionary)) {
+          if (typeof content !== 'string') continue
           const valMatches = (content.match(domainLinkRegex) || [])
           if (valMatches.length > 0) {
             matches.push(...valMatches.map((match) => `Key "${key}": ${match}`))
@@ -323,6 +327,7 @@ describe('lint-files', () => {
         const matches = []
 
         for (const [key, content] of Object.entries(dictionary)) {
+          if (typeof content !== 'string') continue
           const valMatches = (content.match(oldVariableRegex) || [])
           if (valMatches.length > 0) {
             matches.push(...valMatches.map((match) => {
@@ -341,6 +346,7 @@ describe('lint-files', () => {
         const matches = []
 
         for (const [key, content] of Object.entries(dictionary)) {
+          if (typeof content !== 'string') continue
           const valMatches = (content.match(oldOcticonRegex) || [])
           if (valMatches.length > 0) {
             matches.push(...valMatches.map((match) => `Key "${key}": ${match}`))
@@ -355,6 +361,7 @@ describe('lint-files', () => {
         const matches = []
 
         for (const [key, content] of Object.entries(dictionary)) {
+          if (typeof content !== 'string') continue
           const valMatches = (content.match(oldExtendedMarkdownRegex) || [])
           if (valMatches.length > 0) {
             matches.push(...valMatches.map((match) => `Key "${key}": ${match}`))
diff --git a/tests/content/liquid-line-breaks.js b/tests/content/liquid-line-breaks.js
index aed5f1f8f010..2a8449205951 100644
--- a/tests/content/liquid-line-breaks.js
+++ b/tests/content/liquid-line-breaks.js
@@ -81,6 +81,7 @@ describe('Liquid references', () => {
         const matches = []
 
         for (const [key, content] of Object.entries(dictionary)) {
+          if (typeof content !== 'string') continue
           const valMatches = (content.match(liquidRefsWithLinkBreaksRegex) || [])
           if (valMatches.length > 0) {
             matches.push(...valMatches.map((match) => `Key "${key}": ${match}`))