Skip to content

Commit 9e38a85

Browse files
JasonEtcoJasonEtco
authored
Filterable code examples on Actions landing page (github#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
1 parent aeca2ad commit 9e38a85

7 files changed

Lines changed: 270 additions & 96 deletions

File tree

‎content/actions/index.md‎

Lines changed: 17 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -60,105 +60,26 @@ versions:
6060
<!-- {% link_with_intro /reference %} -->
6161

6262
<!-- Code examples -->
63+
{% assign actionsCodeExamples = site.data.variables.action_code_examples %}
64+
{% if actionsCodeExamples %}
6365
<div class="my-6 pt-6">
6466
<h2 class="mb-2 font-mktg h1">Code examples</h2>
6567

68+
<div class="pr-lg-3 mb-5 mt-3">
69+
<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" />
70+
</div>
71+
6672
<div class="d-flex flex-wrap gutter">
67-
<div class="col-12 col-lg-4 mb-4">
68-
<a class="Box d-block hover-grow no-underline text-gray-dark" href="/actions/guides/building-and-testing-nodejs">
69-
<div class="p-4">
70-
<h4>Building and testing Node.js</h4>
71-
<p class="mt-2 mb-4">Use GitHub Actions to power CI in your Node.js application.</p>
72-
<div class="d-flex">
73-
<span class="IssueLabel text-white bg-blue mr-2">JavaScript/TypeScript</span>
74-
<span class="IssueLabel text-white bg-blue mr-2">CI</span>
75-
</div>
76-
</div>
77-
<footer class="border-top p-4 text-gray d-flex flex-items-center">
78-
{% octicon "workflow" class="flex-shrink-0" %}
79-
<span class="ml-2">/guides/building-and-testing-nodejs</span>
80-
</footer>
81-
</a>
82-
</div>
83-
<div class="col-12 col-lg-4 mb-4">
84-
<a class="Box d-block hover-grow no-underline text-gray-dark" href="/actions/guides/building-and-testing-python">
85-
<div class="p-4">
86-
<h4>Building and testing Python</h4>
87-
<p class="mt-2 mb-4">Use GitHub Actions to power CI in your Python application.</p>
88-
<div class="d-flex">
89-
<span class="IssueLabel text-white bg-blue mr-2">Python</span>
90-
<span class="IssueLabel text-white bg-blue mr-2">CI</span>
91-
</div>
92-
</div>
93-
<footer class="border-top p-4 text-gray d-flex flex-items-center">
94-
{% octicon "workflow" class="flex-shrink-0" %}
95-
<span class="ml-2">/guides/building-and-testing-python</span>
96-
</footer>
97-
</a>
98-
</div>
99-
<div class="col-12 col-lg-4 mb-4">
100-
<a class="Box d-block hover-grow no-underline text-gray-dark" href="/actions/guides/building-and-testing-java-with-maven">
101-
<div class="p-4">
102-
<h4>Building and testing Java with Maven</h4>
103-
<p class="mt-2 mb-4">Use GitHub Actions to power CI in your Java project with Maven.</p>
104-
<div class="d-flex">
105-
<span class="IssueLabel text-white bg-blue mr-2">Java</span>
106-
<span class="IssueLabel text-white bg-blue mr-2">CI</span>
107-
</div>
108-
</div>
109-
<footer class="border-top p-4 text-gray d-flex flex-items-center">
110-
{% octicon "workflow" class="flex-shrink-0" %}
111-
<span class="ml-2">/guides/building-and-testing-java-with-maven</span>
112-
</footer>
113-
</a>
114-
</div>
115-
<div class="col-12 col-lg-4 mb-4">
116-
<a class="Box d-block hover-grow no-underline text-gray-dark" href="/actions/guides/building-and-testing-java-with-gradle">
117-
<div class="p-4">
118-
<h4>Building and testing Java with Gradle</h4>
119-
<p class="mt-2 mb-4">Use GitHub Actions to power CI in your Java project with Gradle.</p>
120-
<div class="d-flex">
121-
<span class="IssueLabel text-white bg-blue mr-2">Java</span>
122-
<span class="IssueLabel text-white bg-blue mr-2">CI</span>
123-
</div>
124-
</div>
125-
<footer class="border-top p-4 text-gray d-flex flex-items-center">
126-
{% octicon "workflow" class="flex-shrink-0" %}
127-
<span class="ml-2">/guides/building-and-testing-java-with-gradle</span>
128-
</footer>
129-
</a>
130-
</div>
131-
<div class="col-12 col-lg-4 mb-4">
132-
<a class="Box d-block hover-grow no-underline text-gray-dark" href="/actions/guides/building-and-testing-java-with-ant">
133-
<div class="p-4">
134-
<h4>Building and testing Java with Ant</h4>
135-
<p class="mt-2 mb-4">Use GitHub Actions to power CI in your Java project with Ant.</p>
136-
<div class="d-flex">
137-
<span class="IssueLabel text-white bg-blue mr-2">Java</span>
138-
<span class="IssueLabel text-white bg-blue mr-2">CI</span>
139-
</div>
140-
</div>
141-
<footer class="border-top p-4 text-gray d-flex flex-items-center">
142-
{% octicon "workflow" class="flex-shrink-0" %}
143-
<span class="ml-2">/guides/building-and-testing-java-with-ant</span>
144-
</footer>
145-
</a>
146-
</div>
147-
<div class="col-12 col-lg-4 mb-4">
148-
<a class="Box d-block hover-grow no-underline text-gray-dark" href="/actions/guides/publishing-nodejs-packages">
149-
<div class="p-4">
150-
<h4>Publishing Node.js packages</h4>
151-
<p class="mt-2 mb-4">Use GitHub Actions to push your Node.js package to GitHub Packages or npm.</p>
152-
<div class="d-flex">
153-
<span class="IssueLabel text-white bg-blue mr-2">JavaScript/TypeScript</span>
154-
<span class="IssueLabel text-white bg-blue mr-2">CI</span>
155-
</div>
156-
</div>
157-
<footer class="border-top p-4 text-gray d-flex flex-items-center">
158-
{% octicon "workflow" class="flex-shrink-0" %}
159-
<span class="ml-2">/guides/publishing-nodejs-packages</span>
160-
</footer>
161-
</a>
162-
</div>
73+
{% render 'code-example-card' for actionsCodeExamples as example %}
74+
</div>
75+
76+
<button class="js-code-example-show-more btn btn-outline float-right">Show more {% octicon "arrow-right" %}</button>
77+
78+
<div class="js-code-example-no-results d-none py-4 text-center text-gray font-mktg">
79+
<div class="mb-3">{% octicon "search" width="24" %}</div>
80+
<h3 class="text-normal">Sorry, there is no result for <strong class="js-code-example-filter-value"></strong></h3>
81+
<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>
82+
<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>
16383
</div>
16484
</div>
85+
{% endif %}

‎data/variables/action_code_examples.yml‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
- title: Starter workflows
2+
description: Workflow files for helping people get started with GitHub Actions
3+
languages: TypeScript
4+
href: actions/starter-workflows
5+
tags:
6+
- official
7+
- workflows
8+
- title: Example services
9+
description: Example workflows using service containers
10+
languages: JavaScript
11+
href: actions/example-services
12+
tags:
13+
- service containers
14+
- title: Declaratively setup GitHub Labels
15+
description: GitHub Action to declaratively setup labels across repos
16+
languages: JavaScript
17+
href: lannonbr/issue-label-manager-action
18+
tags:
19+
- issues
20+
- labels
21+
- title: Declaratively sync GitHub lables
22+
description: GitHub Action to sync GitHub labels in the declarative way
23+
languages: 'Go, Dockerfile'
24+
href: micnncim/action-label-syncer
25+
tags:
26+
- issues
27+
- labels
28+
- title: Add releases to GitHub
29+
description: Publish Github releases in an action
30+
languages: 'Dockerfile, Shell'
31+
href: elgohr/Github-Release-Action
32+
tags:
33+
- releases
34+
- publishing
35+
- title: Publish a docker image to Dockerhub
36+
description: A Github Action used to build and publish Docker images
37+
languages: 'Dockerfile, Shell'
38+
href: elgohr/Publish-Docker-Github-Action
39+
tags:
40+
- docker
41+
- publishing
42+
- build
43+
- title: Create an issue using content from a file
44+
description: A GitHub action to create an issue using content from a file
45+
languages: 'JavaScript, Python'
46+
href: peter-evans/create-issue-from-file
47+
tags:
48+
- issues
49+
- title: Publish GitHub Releases with Assets
50+
description: GitHub Action for creating GitHub Releases
51+
languages: 'TypeScript, Shell, JavaScript'
52+
href: softprops/action-gh-release
53+
tags:
54+
- releases
55+
- publishing
56+
- title: GitHub Project Automation+
57+
description: Automate GitHub Project cards with any webhook event.
58+
languages: JavaScript
59+
href: alex-page/github-project-automation-plus
60+
tags:
61+
- projects
62+
- automation
63+
- issues
64+
- pull requests
65+
- title: Run GitHub Actions Locally with a web interface
66+
description: Runs GitHub Actions workflows locally (local)
67+
languages: 'JavaScript, HTML, Dockerfile, CSS'
68+
href: phishy/wflow
69+
tags:
70+
- local-development
71+
- devops
72+
- docker
73+
- title: Run your GitHub Actions locally
74+
description: Run GitHub Actions Locally in Terminal
75+
languages: 'Go, Shell'
76+
href: nektos/act
77+
tags:
78+
- local-development
79+
- devops
80+
- docker
81+
- title: Build and Publish Android debug APK
82+
description: Build and release debug APK from your Android project
83+
languages: 'Shell, Dockerfile'
84+
href: ShaunLWM/action-release-debugapk
85+
tags:
86+
- android
87+
- build
88+
- title: Generate sequential build numbers for GitHub Actions
89+
description: GitHub action for generating sequential build numbers.
90+
languages: JavaScript
91+
href: einaregilsson/build-number
92+
tags:
93+
- build
94+
- automation
95+
- title: GitHub actions to push back to repository
96+
description: Push Git changes to GitHub repository without authentication difficulties
97+
languages: 'JavaScript, Shell'
98+
href: ad-m/github-push-action
99+
tags:
100+
- publishing
101+
- title: Generate release notes based on your events
102+
description: Action to auto generate a release note based on your events
103+
languages: 'Shell, Dockerfile'
104+
href: Decathlon/release-notes-generator-action
105+
tags:
106+
- releases
107+
- publishing
108+
- title: Create a GitHub wiki page based on the provided markdown file
109+
description: Create a GitHub wiki page based on the provided markdown file
110+
languages: 'Shell, Dockerfile'
111+
href: Decathlon/wiki-page-creator-action
112+
tags:
113+
- wiki
114+
- publishing
115+
- title: Label your Pull Requests auto-magically (using committed files)
116+
description: >-
117+
Github action to label your pull requests auto-magically (using committed
118+
files)
119+
languages: 'TypeScript, Dockerfile, JavaScript'
120+
href: Decathlon/pull-request-labeler-action
121+
tags:
122+
- projects
123+
- issues
124+
- labels
125+
- title: Add Label to your Pull Requests based on the author team name
126+
description: Github action to label your pull requests based on the author name
127+
languages: 'TypeScript, JavaScript'
128+
href: JulienKode/team-labeler-action
129+
tags:
130+
- pull request
131+
- labels

‎includes/code-example-card.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<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 }}">
2+
<a
3+
class="Box d-flex flex-column flex-justify-between height-full box-shadow-medium hover-shadow-large no-underline text-gray-dark"
4+
href="https://github.com/{{ example.href }}"
5+
>
6+
<div class="p-4">
7+
<h4>{{ example.title }}</h4>
8+
<p class="mt-2 mb-4 text-gray-light">{{ example.description }}</p>
9+
<div class="d-flex flex-wrap">
10+
{% for tag in example.tags %}
11+
<span class="IssueLabel text-white bg-blue mr-2 mb-1">{{ tag }}</span>
12+
{% endfor %}
13+
</div>
14+
</div>
15+
<footer class="border-top p-4 text-gray d-flex flex-items-center">
16+
{% octicon "repo" class="flex-shrink-0" %}
17+
<span class="ml-2 text-mono text-small text-blue">{{ example.href }}</span>
18+
</footer>
19+
</a>
20+
</div>

‎javascripts/filter-code-examples.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
function filterCards (cards, value) {
2+
const noResults = document.querySelector('.js-code-example-no-results')
3+
const matchReg = new RegExp(value, 'i')
4+
5+
// Track whether or not we had at least one match
6+
let hasMatches = false
7+
8+
for (let index = 0; index < cards.length; index++) {
9+
const card = cards[index]
10+
11+
// Filter was emptied
12+
if (!value) {
13+
// Make sure we don't show the "No results" blurb
14+
hasMatches = true
15+
16+
// Hide all but the first 6
17+
if (index > 5) {
18+
card.classList.add('d-none')
19+
} else {
20+
card.classList.remove('d-none')
21+
}
22+
23+
continue
24+
}
25+
26+
// Check if this card matches
27+
const { title, description, tags } = card.dataset
28+
const cardMatches = (
29+
matchReg.test(title) ||
30+
matchReg.test(description) ||
31+
matchReg.test(tags)
32+
)
33+
34+
if (cardMatches) {
35+
card.classList.remove('d-none')
36+
hasMatches = true
37+
} else {
38+
card.classList.add('d-none')
39+
}
40+
}
41+
42+
// If there wasn't at least one match, show the "no results" text
43+
if (!hasMatches) {
44+
document.querySelector('.js-code-example-filter-value').textContent = value
45+
noResults.classList.remove('d-none')
46+
} else {
47+
noResults.classList.add('d-none')
48+
}
49+
}
50+
51+
export default function filterCodeExamples () {
52+
const filter = document.querySelector('.js-code-example-filter')
53+
if (!filter) return
54+
55+
const cards = Array.from(document.querySelectorAll('.js-code-example-card'))
56+
const showMoreButton = document.querySelector('.js-code-example-show-more')
57+
58+
filter.addEventListener('keyup', evt => {
59+
const value = evt.currentTarget.value
60+
61+
// Show or hide the "Show more" button if there is a value
62+
if (value) showMoreButton.classList.add('d-none')
63+
else showMoreButton.classList.remove('d-none')
64+
65+
filterCards(cards, value)
66+
})
67+
68+
showMoreButton.addEventListener('click', evt => {
69+
// Number of cards that are currently visible
70+
const numShown = cards.filter(card => !card.classList.contains('d-none')).length
71+
// We want to show 6 more
72+
const totalToShow = numShown + 6
73+
74+
for (let index = numShown; index < cards.length; index++) {
75+
const card = cards[index]
76+
77+
// If the card we're at is less than the total number of cards
78+
// we should show, show this one
79+
if (index < totalToShow) {
80+
card.classList.remove('d-none')
81+
} else {
82+
// Otherwise, we've shown the ones we intend to so exit the loop
83+
break
84+
}
85+
}
86+
87+
// They're all shown now, we should hide the button
88+
if (totalToShow === cards.length) {
89+
evt.currentTarget.style.display = 'none'
90+
}
91+
})
92+
}

‎javascripts/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import experiment from './experiment'
1515
import copyCode from './copy-code'
1616
import { fillCsrf } from './get-csrf'
1717
import initializeEvents from './events'
18+
import filterCodeExamples from './filter-code-examples'
1819

1920
document.addEventListener('DOMContentLoaded', async () => {
2021
displayPlatformSpecificContent()
@@ -32,4 +33,5 @@ document.addEventListener('DOMContentLoaded', async () => {
3233
experiment()
3334
copyCode()
3435
initializeEvents()
36+
filterCodeExamples()
3537
})

0 commit comments

Comments
 (0)