[Website] add shuffle to logos (apache#23847)

website/www/site/assets/js/shuffle-elements.js

@@ -0,0 +1,25 @@
+// Licensed under the Apache License, Version 2.0 (the 'License'); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+$(document).ready(function() {
+  const logos = document.querySelector(".case-study-list--additional");
+  const temp = logos.cloneNode(true);
+  let i = temp.children.length + 1;
+
+  while( i-- > 0 ) {
+    temp.appendChild( temp.children[Math.random() * i |0] );
+  }
+
+  logos.parentNode.replaceChild(temp, logos);
+
+  document.querySelector(".case-study-list--additional").style.visibility = "visible";
+});

website/www/site/assets/scss/_case_study.scss

@@ -44,6 +44,7 @@
 }
 
 .case-study-list--additional {
+  visibility: hidden;
   @media (min-width: $mobile) and (max-width: $tablet) {
     justify-content: center;
   }

website/www/site/layouts/case-studies/list.html

@@ -79,4 +79,8 @@ <h2 class="case-study-h2">Also used by</h2>
         </a>
     </div>
 </div>
+
+{{ $shuffle := resources.Get "js/shuffle-elements.js" | minify | fingerprint }}
+<script type="text/javascript" src="{{ $shuffle.RelPermalink }}" defer></script>
+
 {{ end }}