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
2025-12-23 03:44:00 -05:00 · 2020-11-12 11:35:43 -05:00
parent aeca2ad30b
commit 9e38a854b9
7 changed files with 270 additions and 96 deletions
--- a/javascripts/filter-code-examples.js
+++ 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'
+    }
+  })
+}