Case studies index page and link from homepage (#5869)

* Link to case studies

Signed-off-by: Ali Ok <aliok@redhat.com>

* Add a case studies page to link from homepage

Signed-off-by: Ali Ok <aliok@redhat.com>

* change the styling, and make the whole table row clickable

---------

Signed-off-by: Ali Ok <aliok@redhat.com>
Co-authored-by: Leo Li <leoli@redhat.com>

config/nav.yml

@@ -309,6 +309,7 @@ nav:
     - About:
       - Testimonials: about/testimonials.md
       - Case studies:
+        - List of Case Studies: about/case-studies/README.md
         - deepc: about/case-studies/deepc.md
         - Outfit7: about/case-studies/outfit7.md
         - Puppet: about/case-studies/puppet.md

config/redirects.yml

@@ -209,6 +209,5 @@ plugins:
       serving/spec/knative-api-specification-1.0.md: https://github.com/knative/specs/blob/main/specs/serving/knative-api-specification-1.0.md
       serving/using-an-ssl-cert/index.md: serving/encryption/using-certificates-in-networking-layer.md
       serving/using-subroutes.md: serving/traffic-management.md
-      about/case-studies/README.md: about/case-studies/deepc.md
       eventing/brokers/create-mtbroker.md: eventing/brokers/create-broker.md
       eventing/brokers/broker-admin-config-options.md: eventing/configuration/broker-configuration.md

docs/about/case-studies/README.md

@@ -0,0 +1,28 @@
+---
+hide:
+  - toc
+---
+
+# Knative Case Studies
+<table>
+    <tr onclick="window.location='./deepc/';" style="cursor: pointer;">
+        <td style="text-align: center; vertical-align: middle;"><img src="../../images/case-studies/deepc.png" alt="" draggable="false" style="max-width:300px;" /></td>
+        <td style="text-align: center; vertical-align: middle;">AI Startup deepc Connects Researchers to Radiologists with Knative Eventing</td>
+    </tr>
+    <tr onclick="window.location='./outfit7/';" style="cursor: pointer;">
+        <td style="text-align: center; vertical-align: middle;"><img src="../../images/case-studies/outfit7.png" alt="" draggable="false" style="max-width:300px;" /></td>
+        <td style="text-align: center; vertical-align: middle;">Game maker Outfit7 automates high performance ad bidding with Knative Serving</td>
+    </tr>
+    <tr onclick="window.location='./pnc/';" style="cursor: pointer;">
+        <td style="text-align: center; vertical-align: middle;"><img src="../../images/case-studies/pnc_bank.png" alt="" draggable="false" style="max-width:300px;" /></td>
+        <td style="text-align: center; vertical-align: middle;">PNC Bank automated software supply chain compliance</td>
+    </tr>
+    <tr onclick="window.location='./puppet/';" style="cursor: pointer;">
+        <td style="text-align: center; vertical-align: middle;"><img src="../../images/case-studies/puppet.png" alt="" draggable="false" style="max-width:300px;" /></td>
+        <td style="text-align: center; vertical-align: middle;">Relay by Puppet Brings Workflows to Everything using Knative</td>
+    </tr>
+    <tr onclick="window.location='./sva/';" style="cursor: pointer;">
+        <td style="text-align: center; vertical-align: middle;"><img src="../../images/case-studies/sva.png" alt="" draggable="false" style="max-width:300px;" /></td>
+        <td style="text-align: center; vertical-align: middle;">SVA uses Knative to kickstart cloud native adoption and patterns</td>
+    </tr>
+</table>

hack/docker/run.sh

@@ -6,6 +6,6 @@ IMAGE=${3:-ghcr.io/knative/knative-docs:latest}
 
 set -x
 
-docker pull ${IMAGE}
+docker pull ${IMAGE} --platform linux/amd64
 docker run --rm -p "${PORT}:8000" -v "${SCRIPT_DIR}/../../:/site" ${IMAGE} serve --dirtyreload --dev-addr=0.0.0.0:8000
 

overrides/home.html

@@ -217,7 +217,9 @@
 
   <section class="case-studies-container">
     <div class="md-grid md-typeset">
-      <h1>Case Studies</h1>
+      <h1>
+        <a href="{{ 'about/case-studies/' | url }}">Case Studies</a>
+      </h1>
       <div class="cases-table">
         <div class="col">
           <a href="{{ 'about/case-studies/deepc/' | url }}">