repo sync

Author: Octomerger

content/actions/guides/deploying-to-amazon-elastic-container-service.md

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

content/actions/guides/deploying-to-azure-app-service.md

@@ -5,6 +5,7 @@ product: '{% data reusables.gated-features.actions %}'
 versions:
   free-pro-team: '*'
   enterprise-server: '>=2.22'
+type: 'tutorial'
 ---
 
 {% data reusables.actions.enterprise-beta %}
@@ -54,7 +55,7 @@ Before creating your {% data variables.product.prodname_actions %} workflow, you
 
 3. Configure an Azure publish profile and create an `AZURE_WEBAPP_PUBLISH_PROFILE` secret.
 
-   Generate your Azure deployment credentials using a publish profile. For more information, see "[Generate deployment credentials](https://docs.microsoft.com/en-us/azure/app-service/deploy-github-actions?tabs=applevel#generate-deployment-credentials)" in the Azure documentation. 
+   Generate your Azure deployment credentials using a publish profile. For more information, see "[Generate deployment credentials](https://docs.microsoft.com/en-us/azure/app-service/deploy-github-actions?tabs=applevel#generate-deployment-credentials)" in the Azure documentation.
 
    In your {% data variables.product.prodname_dotcom %} repository, create a secret named `AZURE_WEBAPP_PUBLISH_PROFILE` that contains the contents of the publish profile. For more information on creating secrets, see "[Encrypted secrets](/actions/reference/encrypted-secrets#creating-encrypted-secrets-for-a-repository)."
 

content/actions/guides/deploying-to-google-kubernetes-engine.md

@@ -5,6 +5,7 @@ product: '{% data reusables.gated-features.actions %}'
 versions:
   free-pro-team: '*'
   enterprise-server: '>=2.22'
+type: 'tutorial'
 ---
 
 {% data reusables.actions.enterprise-beta %}
@@ -99,37 +100,37 @@ The following example workflow demonstrates how to build a container image and p
 {% raw %}
 ```yaml{:copy}
 name: Build and Deploy to GKE
- 
+
 on:
   release:
     types: [created]
- 
+
 env:
   PROJECT_ID: ${{ secrets.GKE_PROJECT }}
   GKE_CLUSTER: cluster-1    # Add your cluster name here.
   GKE_ZONE: us-central1-c   # Add your cluster zone here.
   DEPLOYMENT_NAME: gke-test # Add your deployment name here.
   IMAGE: static-site
- 
+
 jobs:
   setup-build-publish-deploy:
     name: Setup, Build, Publish, and Deploy
     runs-on: ubuntu-latest
     steps:
- 
+
     - name: Checkout
       uses: actions/checkout@v2
- 
+
     # Setup gcloud CLI
     - uses: google-github-actions/setup-gcloud@v0.2.0
       with:
         service_account_key: ${{ secrets.GKE_SA_KEY }}
         project_id: ${{ secrets.GKE_PROJECT }}
- 
+
     # Configure docker to use the gcloud command-line tool as a credential helper
     - run: |-
         gcloud --quiet auth configure-docker
-      
+
     # Get the GKE credentials so we can deploy to the cluster
     - uses: google-github-actions/get-gke-credentials@v0.2.1
       with:
@@ -145,18 +146,18 @@ jobs:
           --build-arg GITHUB_SHA="$GITHUB_SHA" \
           --build-arg GITHUB_REF="$GITHUB_REF" \
           .
- 
+
     # Push the Docker image to Google Container Registry
     - name: Publish
       run: |-
         docker push "gcr.io/$PROJECT_ID/$IMAGE:$GITHUB_SHA"
-        
+
     # Set up kustomize
     - name: Set up Kustomize
       run: |-
         curl -sfLo kustomize https://github.com/kubernetes-sigs/kustomize/releases/download/v3.1.0/kustomize_3.1.0_linux_amd64
         chmod u+x ./kustomize
- 
+
     # Deploy the Docker image to the GKE cluster
     - name: Deploy
       run: |-

content/actions/index.md

@@ -36,7 +36,7 @@ changelog:
     href: https://github.blog/changelog/2020-10-29-github-actions-ubuntu-latest-workflows-will-use-ubuntu-20-04
 
 product_video: https://www.youtube-nocookie.com/embed/cP0I9w2coGU
-  
+
 redirect_from:
   - /articles/automating-your-workflow-with-github-actions/
   - /articles/customizing-your-project-with-github-actions/
@@ -72,7 +72,7 @@ versions:
     {% render 'code-example-card' for actionsCodeExamples as example %}
   </div>
 
-  <button class="js-filter-card-show-more btn btn-outline float-right">Show more {% octicon "arrow-right" %}</button>
+  <button class="js-filter-card-show-more btn btn-outline float-right" data-js-filter-card-max="6">Show more {% octicon "arrow-right" %}</button>
 
   <div class="js-filter-card-no-results d-none py-4 text-center text-gray font-mktg">
     <div class="mb-3">{% octicon "search" width="24" %}</div>

content/discussions/index.md

@@ -43,7 +43,7 @@ versions:
     {% render 'discussions-community-card' for discussionsCommunityExamples as example %}
   </div>
   {% if discussionsCommunityExamples.length > 6 %}
-    <button class="js-filter-card-show-more btn btn-outline float-right">Show more {% octicon "arrow-right" %}</button>
+    <button class="js-filter-card-show-more btn btn-outline float-right" data-js-filter-card-max="6">Show more {% octicon "arrow-right" %}</button>
   {% endif %}
   <div class="js-filter-card-no-results d-none py-4 text-center text-gray font-mktg">
     <div class="mb-3">{% octicon "search" width="24" %}</div>

data/ui.yml

@@ -148,7 +148,13 @@ product_sublanding:
   learning_paths: Learning paths
   learning_paths_desc: Learning paths are a collection of guides that help you master a particular subject.
   more_guides: more guides
-  guideTypes:
+  load_more: Load more guides
+  all_guides: All Guides
+  no_result: Sorry, there is no guide that match your filter.
+  filters:
+    type: Type
+    all: All
+  guide_types:
     overview: Overview
     quick_start: Quickstart
     tutorial: Tutorial

includes/article-cards.html

@@ -0,0 +1,43 @@
+{% assign currentCategory = siteTree[currentLanguage][currentVersion].products[currentProduct].categories[breadcrumbs.category.href] %}
+
+{% assign maxArticles = 9 %}
+
+<div class="container-xl px-3 px-md-6 pt-3 pb-2">
+  <h2 class="mb-3 font-mktg">{% data ui.product_sublanding.all_guides %}</h2>
+
+  <form class="my-2">
+    <label for="type" class="text-uppercase f6 text-gray d-block">{% data ui.product_sublanding.filters.type %}</label>
+    <select class="form-select js-filter-card-filter-dropdown f4 text-bold border-0 rounded-0 border-top box-shadow-none pl-0 js-filter-card-filter-dropdown" name="type" aria-label="guide types">
+      <option value="">{% data ui.product_sublanding.filters.all %}</option>
+      {% for type in site.data.ui.product_sublanding.guide_types %}
+        <option value="{{ type[0] }}">{{ type[1] }}</option>
+      {% endfor %}
+
+    </select>
+  </form>
+
+
+  <div class="d-flex flex-wrap mr-0 mr-md-n6 mr-lg-n8">
+    {% for article in currentCategory.articles %}
+
+      {% assign card_display_class = "" %}
+      {% if forloop.index > maxArticles %}
+        {% assign card_display_class = "d-none" %}
+      {% endif %}
+
+      {% capture link_card %}
+        {% link_as_article_card {{ article[1].href }} %}
+      {% endcapture %}
+
+      {{ link_card | replace: "<display condition>", card_display_class }}
+    {% endfor %}
+
+    <button class="col-12 mt-5 text-center text-bold text-blue btn-link js-filter-card-show-more" data-js-filter-card-max="{{ maxArticles }}">
+      {% data ui.product_sublanding.load_more %}
+    </button>
+
+    <div class="js-filter-card-no-results d-none py-4 text-center text-gray">
+      <h4 class="text-normal">{% data ui.product_sublanding.no_result %}</h4>
+    </div>
+  </div>
+</div>

includes/liquid-tags/link-as-article-card.html

@@ -0,0 +1,7 @@
+<div class="d-flex col-12 col-md-4 pr-0 pr-md-6 pr-lg-8 <display condition> js-filter-card" data-type="{{ type }}">
+  <a class="no-underline d-flex flex-column py-4 border-bottom" href="{{ fullPath }}">
+    <h4 class="h4 text-gray-dark mb-1">{{ title }}</h4>
+    <div class="text-purple h6 text-uppercase">{{ type }}</div>
+    <p class="text-gray my-3">{{ intro }}</p>
+  </a>
+</div>

javascripts/filter-cards.js

@@ -1,72 +1,104 @@
-function filterCards (cards, value) {
+function matchCardBySearch (card, searchString) {
+  const matchReg = new RegExp(searchString, 'i')
+  // Check if this card matches - any `data-*` attribute contains the string
+  return Object.keys(card.dataset).some(key => matchReg.test(card.dataset[key]))
+}
+
+function matchCardByAttribute (card, attribute, value) {
+  if (attribute in card.dataset) {
+    return card.dataset[attribute] === value
+  }
+  return false
+}
+
+export default function cardsFilter () {
+  const inputFilter = document.querySelector('.js-filter-card-filter')
+  const dropdownFilter = document.querySelector('.js-filter-card-filter-dropdown')
+  const cards = Array.from(document.querySelectorAll('.js-filter-card'))
+  const showMoreButton = document.querySelector('.js-filter-card-show-more')
   const noResults = document.querySelector('.js-filter-card-no-results')
-  const matchReg = new RegExp(value, 'i')
+  // if jsFilterCardMax not set, assume no limit (well, at 99)
+  const maxCards = showMoreButton ? parseInt(showMoreButton.dataset.jsFilterCardMax || 99) : null
 
-  // Track whether or not we had at least one match
-  let hasMatches = false
+  const filterEventHandler = (evt) => {
+    const { currentTarget } = evt
+    const value = currentTarget.value
 
-  for (let index = 0; index < cards.length; index++) {
-    const card = cards[index]
+    // 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')
+    }
 
-    // Filter was emptied
-    if (!value) {
-      // Make sure we don't show the "No results" blurb
-      hasMatches = true
+    // Track whether or not we had at least one match
+    let hasMatches = false
 
-      // Hide all but the first 6
-      if (index > 5) {
-        card.classList.add('d-none')
-      } else {
-        card.classList.remove('d-none')
+    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 n number of cards
+        if (index > maxCards - 1) {
+          card.classList.add('d-none')
+        } else {
+          card.classList.remove('d-none')
+        }
+
+        continue
       }
 
-      continue
-    }
+      let cardMatches = false
 
-    // Check if this card matches - any `data-*` attribute contains the string
-    const cardMatches = Object.keys(card.dataset)
-      .some(key => matchReg.test(card.dataset[key]))
+      if (currentTarget.tagName === 'INPUT') {
+        cardMatches = matchCardBySearch(card, value)
+      }
+
+      if (currentTarget.tagName === 'SELECT' && currentTarget.name) {
+        cardMatches = matchCardByAttribute(card, currentTarget.name, value)
+      }
+
+      if (cardMatches) {
+        card.classList.remove('d-none')
+        hasMatches = true
+      } else {
+        card.classList.add('d-none')
+      }
+    }
 
-    if (cardMatches) {
-      card.classList.remove('d-none')
-      hasMatches = true
+    // If there wasn't at least one match, show the "no results" text
+    if (!hasMatches) {
+      noResults.classList.remove('d-none')
     } else {
-      card.classList.add('d-none')
+      noResults.classList.add('d-none')
     }
-  }
 
-  // If there wasn't at least one match, show the "no results" text
-  if (!hasMatches) {
-    document.querySelector('.js-filter-card-value').textContent = value
-    noResults.classList.remove('d-none')
-  } else {
-    noResults.classList.add('d-none')
+    return hasMatches
   }
-}
-
-export default function filterCodeExamples () {
-  const filter = document.querySelector('.js-filter-card-filter')
-  const cards = Array.from(document.querySelectorAll('.js-filter-card'))
-  const showMoreButton = document.querySelector('.js-filter-card-show-more')
-
-  if (filter) {
-    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)
+  if (inputFilter) {
+    inputFilter.addEventListener('keyup', (evt) => {
+      const hasMatches = filterEventHandler(evt)
+      if (!hasMatches) {
+        document.querySelector('.js-filter-card-value').textContent = evt.currentTarget.value
+      }
     })
   }
 
+  if (dropdownFilter) {
+    dropdownFilter.addEventListener('change', filterEventHandler)
+  }
+
   if (showMoreButton) {
     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
+      // We want to show n more cards
+      const totalToShow = numShown + maxCards
 
       for (let index = numShown; index < cards.length; index++) {
         const card = cards[index]
@@ -83,7 +115,7 @@ export default function filterCodeExamples () {
 
       // They're all shown now, we should hide the button
       if (totalToShow >= cards.length) {
-        evt.currentTarget.style.display = 'none'
+        evt.currentTarget.classList.add('d-none')
       }
     })
   }

javascripts/show-more.js

@@ -1,5 +1,5 @@
 /*
- *  This utility makes it easy to implement a list of items, some of which are hidden initially
+ *  This utility component implement a list of items, some of which are hidden initially
  *  until user clicks "show more".
  *
  *  Example: