fix: showcase (#8504)

Merge pull request 8504

docs/_config.yml

@@ -10,6 +10,7 @@ twitter:
 logo: "/img/logo-2x.png"
 google_analytics_id: UA-50755011-1
 google_site_verification: onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY
+cloudinary_url: https://res.cloudinary.com/jekyll/image/upload/f_auto,q_auto,w_404/
 collections:
   docs:
     permalink: "/:collection/:path/"

docs/_data/showcase.yml

@@ -1,241 +1,279 @@
 - name: Tom Preston Werner Blog
   url: http://tom.preston-werner.com/
+  image: showcase/tom-preston-werner.png
   categories:
     - personal
     - blog
-- name: GitHub On Demand Training
-  url: https://services.github.com/on-demand/
-  categories:
-    - software
-    - knowledgebase
-- name: Vesterheim Norwegian-American Museum
-  url: http://vesterheim.org/
-  categories:
-    - marketing-site
-- name: KOTN
-  url: https://kotn.com/
-  categories:
-   - marketing-site
-- name: MvvmCross
-  url: https://www.mvvmcross.com/
-  categories:
-    - software
-    - marketing-site
-- name: Vidgrid
-  url: https://www.vidgrid.com/
-  categories:
-    - software
-    - marketing-site
-- name: Bitcoin
-  url: https://bitcoin.org/en/
-  categories:
-    - software
-    - marketing-site
-- name: Mapwize
-  url: https://www.mapwize.io/
-  categories:
-    - software
-    - marketing-site
-- name: Auth0 Blog
-  url: https://auth0.com/blog/
-  categories:
-    - software
-    - blog
-- name: AWS Amplify
-  url: https://aws-amplify.github.io/
-  categories:
-    - open-source
-    - marketing-site
-- name: Yeoman
-  url: http://yeoman.io/
-  categories:
-    - open-source
-    - marketing-site
-- name: Ionic Framwork
-  url: https://ionicframework.com/
-  categories:
-    - software
-    - marketing-site
-- name: Release Management Blog
-  url: https://release.mozilla.org/
-  categories:
-    - software
-    - blog
-- name: Freedom of Information Act
-  url: https://www.foia.gov/
-  categories:
-    - government
-- name: Art & About Sydney
-  url: https://www.artandabout.com.au/
-  categories:
-    - government
-- name: Passbolt Help
-  url: https://help.passbolt.com/
-  categories:
-    - knowledgebase
-- name: We are COLLINS
-  url: https://www.wearecollins.com/
-  categories:
-    - agency
-- name: Lightburn
-  url: https://lightburn.co/
-  categories:
-    - agency
-- name: italia.it
-  url: https://developers.italia.it/
-  categories:
-    - community
-- name: Sydney New Years Eve
-  url: https://www.sydneynewyearseve.com/
-  categories:
-    - government
-- name: Login.gov
-  url: https://login.gov/
-  categories:
-    - government
-- name: plainlanguage.gov
-  url: https://plainlanguage.gov/
-  categories:
-    - government
-- name: U.S. Web Design Standards
-  url: https://standards.usa.gov/
-  categories:
-    - government
-- name: Grantmaker Search
-  url: https://www.grantmakers.io/
-  categories:
-    - marketing-site
-- name: Rehan Butt
-  url: http://rehanbutt.com/
-  categories:
-    - personal
-    - portfolio
-- name: The Markdown Guide
-  url: https://www.markdownguide.org/
-  categories:
-    - knowledgebase
-- name: PROBOT
-  url: https://probot.github.io/
-  categories:
-    - documentation
-- name: Matt Grey
-  url: https://himatt.com/
-  categories:
-    - personal
-    - portfolio
-- name: frame.ai
-  url: https://frame.ai/
-  categories:
-    - software
-    - marketing-site
-- name: AdHawk
-  url: https://www.tryadhawk.com/
-  categories:
-    - agency
-- name: Lattice
-  url: https://latticehq.com/
-  categories:
-    - software
-    - marketing-site
-- name: MailTape
-  url: https://www.mailta.pe/
-  categories:
-    - other
-- name: Digital Democracy
-  url: http://www.digital-democracy.org/
-  categories:
-    - other
-- name: HTML Reference
-  url: http://htmlreference.io/
-  categories:
-    - documentation
-- name: CSS Reference
-  url: http://cssreference.io/
-  categories:
-    - documentation
-- name: Chain
-  url: https://chain.com/
-  categories:
-    - marketing-site
-- name: Boxy Suite
-  url: https://www.boxysuite.com/
-  categories:
-    - marketing-site
-    - software
-- name: Pattern Lab
-  url: http://patternlab.io/
-  categories:
-    - documentation
-- name: IBM MobileFirst Foundation
-  url: https://mobilefirstplatform.ibmcloud.com/
-  categories:
-    - documentation
-- name: 18F
-  url: https://18f.gsa.gov/
-  categories:
-    - agency
-    - government
-- name: Development Seed
-  url: https://developmentseed.org/
-  categories:
-    - agency
-- name: Isomer - Singapore Government Static Websites
-  url: https://isomer.gov.sg/
-  categories:
-    - government
+# - name: White House Social and Behavioral Sciences Team
+#   url: https://sbst.gov/
+#   image: showcase/sbst.png
+#   categories:
+#     - government
 - name: SiteLeaf
   url: https://siteleaf.com
+  image: showcase/siteleaf.png
   categories:
     - software
     - marketing-site
 - name: CloudCannon
   url: https://cloudcannon.com/
+  image: showcase/cloudcannon.png
   categories:
     - software
     - marketing-site
+- name: Vesterheim Norwegian-American Museum
+  url: http://vesterheim.org/
+  image: showcase/vesterheim.png
+  categories:
+    - marketing-site
+- name: KOTN
+  url: https://kotn.com/
+  image: showcase/kotn.png
+  categories:
+   - marketing-site
+- name: MvvmCross
+  url: https://www.mvvmcross.com/
+  image: showcase/mvvm.png
+  categories:
+    - software
+    - marketing-site
+- name: Vidgrid
+  url: https://www.vidgrid.com/
+  image: showcase/vidgrid.png
+  categories:
+    - software
+    - marketing-site
+- name: Bitcoin
+  url: https://bitcoin.org/en/
+  image: showcase/bitcoin.png
+  categories:
+    - software
+    - marketing-site
+- name: Mapwize
+  url: https://www.mapwize.io/
+  image: showcase/mapwize.png
+  categories:
+    - software
+    - marketing-site
+- name: Auth0 Blog
+  url: https://auth0.com/blog/
+  image: showcase/auth0-blog.png
+  categories:
+    - software
+    - blog
+- name: AWS Amplify
+  url: https://aws-amplify.github.io/
+  image: showcase/amplify-framework.png
+  categories:
+    - open-source
+    - marketing-site
+- name: Freedom of Information Act
+  url: https://www.foia.gov/
+  image: showcase/foia-gov.png
+  categories:
+    - government
+- name: Art & About Sydney
+  url: https://www.artandabout.com.au/
+  image: showcase/art-sydney.png
+  categories:
+    - government
+- name: Passbolt Help
+  url: https://help.passbolt.com/
+  image: showcase/passbolt-help.png
+  categories:
+    - knowledgebase
+- name: We are COLLINS
+  url: https://www.wearecollins.com/
+  image: showcase/collins.png
+  categories:
+    - agency
+- name: Lightburn
+  url: https://lightburn.co/
+  image: showcase/lightburn.png
+  categories:
+    - agency
+- name: italia.it
+  url: https://developers.italia.it/
+  image: showcase/italia-it.png
+  categories:
+    - community
+- name: Sydney New Years Eve
+  url: https://www.sydneynewyearseve.com/
+  image: showcase/nsw.png
+  categories:
+    - government
+- name: Login.gov
+  url: https://login.gov/
+  image: showcase/login-gov.png
+  categories:
+    - government
+- name: plainlanguage.gov
+  url: https://plainlanguage.gov/
+  image: showcase/plainlanguage-gov.png
+  categories:
+    - government
+- name: U.S. Web Design Standards
+  url: https://standards.usa.gov/
+  image: showcase/uswds.png
+  categories:
+    - government
+- name: Grantmaker Search
+  url: https://www.grantmakers.io/
+  image: showcase/grantmakers.png
+  categories:
+    - marketing-site
+- name: Rehan Butt
+  url: http://rehanbutt.com/
+  image: showcase/rehn.png
+  categories:
+    - personal
+    - portfolio
+- name: The Markdown Guide
+  url: https://www.markdownguide.org/
+  image: showcase/markdown-guide.png
+  categories:
+    - knowledgebase
+- name: Probot
+  url: https://probot.github.io/
+  image: showcase/probot.png
+  categories:
+    - documentation
+- name: Matt Grey
+  url: https://himatt.com/
+  image: showcase/matt-grey.png
+  categories:
+    - personal
+    - portfolio
+- name: Lattice
+  url: https://latticehq.com/
+  image: showcase/lattice.png
+  categories:
+    - software
+    - marketing-site
+- name: MailTape
+  url: https://www.mailta.pe/
+  image: showcase/mailtape.png
+  categories:
+    - other
+- name: Digital Democracy
+  url: http://www.digital-democracy.org/
+  image: showcase/digital-democracy.png
+  categories:
+    - other
+- name: HTML Reference
+  url: http://htmlreference.io/
+  image: showcase/htmlreference.png
+  categories:
+    - documentation
+- name: CSS Reference
+  url: http://cssreference.io/
+  image: showcase/cssreference.png
+  categories:
+    - documentation
+- name: Chain
+  url: https://chain.com/
+  image: showcase/chain.png
+  categories:
+    - marketing-site
+- name: IBM MobileFirst Foundation
+  url: https://mobilefirstplatform.ibmcloud.com/
+  image: showcase/ibm-mobile-foundation.png
+  categories:
+    - documentation
+- name: 18F
+  url: https://18f.gsa.gov/
+  image: showcase/18f.png
+  categories:
+    - agency
+    - government
+- name: Development Seed
+  url: https://developmentseed.org/
+  image: showcase/development-seed.png
+  categories:
+    - agency
+- name: Isomer - Singapore Government Static Websites
+  url: https://isomer.gov.sg/
+  image: showcase/isomer.png
+  categories:
+    - government
 - name: French Government Digital Services
   url: https://beta.gouv.fr/
+  image: showcase/beta-gouv-fr.png
   categories:
     - government
 - name: Paris Call for Trust and Security in Cyberspace
   url: https://pariscall.international/
+  image: showcase/appel-de-paris.png
   categories:
     - government
-- name: Ruby on Rails
-  url: http://rubyonrails.org/
-  categories:
-    - marketing-site
-    - documentation
-- name: White House Social and Behavioral Sciences Team
-  url: https://sbst.gov/
-  categories:
-    - government
-- name: UN World Statistics
-  url: https://worldstatisticsday.org
-  categories:
-    - government
-- name: Sketch
-  url: https://sketch.com/
+- name: GitHub On Demand Training
+  url: https://services.github.com/on-demand/
+  image: showcase/github-learning-lab.png
   categories:
     - software
-    - marketing-site
-- name: Netflix Devices
-  url: https://devices.netflix.com/en/
-  categories:
-    - marketing-site
+    - knowledgebase
 - name: TwitchCon
   url: https://www.twitchcon.com/
+  image: showcase/twitchcon.png
   categories:
     - marketing-site
     - conference
+- name: UN World Statistics
+  url: https://worldstatisticsday.org
+  image: showcase/world-statistics-day.png
+  categories:
+    - government
+- name: Netflix Devices
+  url: https://devices.netflix.com/en/
+  image: showcase/netflix.png
+  categories:
+    - marketing-site
 - name: Twitch Developer Documentation
   url: https://dev.twitch.tv/
+  image: showcase/twitch-developers.png
   categories:
     - marketing-site
     - documentation
+- name: Yeoman
+  url: http://yeoman.io/
+  image: showcase/yeoman.png
+  categories:
+    - open-source
+    - marketing-site
+- name: Release Management Blog
+  url: https://release.mozilla.org/
+  image: showcase/mozilla-release-blog.png
+  categories:
+    - software
+    - blog
+- name: frame.ai
+  url: https://frame.ai/
+  image: showcase/frame-ai.png
+  categories:
+    - software
+    - marketing-site
+- name: Ionic Framwork
+  url: https://ionicframework.com/
+  image: showcase/ionic-framework.png
+  categories:
+    - software
+    - marketing-site
 - name: Spotify for Developers
   url: https://developer.spotify.com
+  image: showcase/spotify-developers.png
   categories:
     - marketing-site
     - documentation
     - software
+- name: Sketch
+  url: https://sketch.com/
+  image: showcase/sketch.png
+  categories:
+    - software
+    - marketing-site
+- name: Ruby on Rails
+  url: http://rubyonrails.org/
+  image: showcase/ruby-on-rails.png
+  categories:
+    - marketing-site
+    - documentation

docs/pages/showcase.html

@@ -6,16 +6,14 @@ redirect_from:
   - /docs/sites/
 ---
 
-<p>Jekyll is used for all kinds of usecases. Here's some of our favorites:</p>
+<p>Jekyll powers many company websites, here a few nice ones:</p>
 
 <ul class="showcase" id="showcase">
   {% for s in site.data.showcase reversed -%}
   <li>
-    <a href="{{ s.url | relative_url }}" target="_blank">
+    <a href="{{ s.url }}" target="_blank">
       <figure>
-        <div class="imageWrapper">
-          <img loading="lazy" class="b-lazy" src="{{ 'img/spacer.gif' | relative_url }}" alt="{{ s.name }}" width="404">
-        </div>
+          <img loading="lazy" src="{{ site.cloudinary_url }}{{ s.image }}" alt="{{ s.name }}" width="404" height="253">
         <figcaption>{{ s.name }}</figcaption>
       </figure>
     </a>
@@ -23,24 +21,3 @@ redirect_from:
   {% endfor -%}
   <li class="spacer"></li>
 </ul>
-
-<script src="//cdn.jsdelivr.net/blazy/latest/blazy.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.10.0/js/md5.min.js"></script>
-<script>
-  var apiUrl = 'https://d2ov3dk2yjyb0w.cloudfront.net/',
-    a = 'c7aa76e1-684d-4c45-b396-78b893839b5f',
-    b = 'c7bfb661-71a8-40bb-baac-7ddad709639c',
-    sites = document.getElementById('showcase').getElementsByTagName('a');
-
-  for (var i = 0; i < sites.length; i++) {
-    var href = sites[i].getAttribute('href'),
-      inputUrl = encodeURIComponent(href),
-      q = 'url=' + inputUrl + '&delay=2&resizeWidth=800&resizeHeight=600',
-      hash = md5(b + q),
-      resultImgUrl = apiUrl + a + '/' + hash + '/image?' + q;
-
-    sites[i].getElementsByTagName('img')[0].setAttribute('data-src', resultImgUrl);
-  }
-
-  var bLazy = new Blazy();
-</script>