repo sync

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 %}

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

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>

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'
+    }
+  })
+}

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()
 })

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 %}