Update use case page images

_includes/java-library-patch-example.html

@@ -0,0 +1,10 @@
+<pre><code class="language-yml">
+# This is an example Patch file to update services
+# using security.jar with new parameters
+code_transformations:
+  # Update all users to the new auth method
+  - update_to_new_auth_method
+custom_scripts:
+  # Error out on improper auth method usage
+  - detect_deprecated_auth_method
+</code></pre>

_includes/tf-13-to-14-patch-example.html

@@ -0,0 +1,18 @@
+<pre><code class="language-yml">
+# This is an example Patch file to update from
+# Terraform 0.13 to 0.14
+code_transformations:
+  # Update Terratest and Go modules to the latest
+  - run_go_mod_tidy
+  # Add .terraform.lock.hcl to .gitignore
+  - add_lock_to_gitignore
+  # Update all Gruntwork modules
+  - update_module_versions
+  # Add required_providers block
+  - replace_provider_versions_with_required_providers
+custom_scripts:
+  # Run Terraform format
+  - terraform_fmt
+  # Run Terraform validate
+  - terraform_validate
+</code></pre>

pages/landing/patcher/_how-it-works.html

@@ -1,8 +1,11 @@
 {% for item in page.how_it_works %}
   <div class="row">
-    {% if item.precode %}
+    {% if item.include_code %}
       <div class="item_precode row-image-content {% if item.image_side == "left" %}col-xs-12 col-sm-7 col-md-6 col-diagram{% else %}col-xs-10 col-xs-offset-1 col-sm-5 col-sm-push-7 col-sm-offset-0 col-md-6 col-md-push-6 col-diagram{% endif %}">
-        {{ item.precode }}
+        <figure>
+          <figcaption>{{ item.include_code_caption }}</figcaption>
+          {% include {{ item.include_code }} %}
+        </figure>
       </div>
     {% endif %}
   {% if item.tab_block %}

pages/landing/patcher/index.html

@@ -58,29 +58,8 @@
       Patcher will automatically discover dependencies for popular languages and tools such as JavaScript, Ruby, Java, Python, Go, Terraform, and Docker. You can also add special comments to your code to help Patcher discover dependencies in non-standard locations (e.g., in a Bash script).
 
   - heading: Maintainers release new versions and patches
-    precode: |
-      <figure><figcaption>tf-13-to-14.patch</figcaption>
-        <pre>
-          <code class="language-yml">
-      # This is an example Patch file to update from
-      # Terraform 0.13 to 0.14
-      code_transformations:
-        # Update Terratest and Go modules to the latest
-        - run_go_mod_tidy
-        # Add .terraform.lock.hcl to .gitignore
-        - add_lock_to_gitignore
-        # Update all Gruntwork modules
-        - update_module_versions
-        # Add required_providers block
-        - replace_provider_versions_with_required_providers
-      custom_scripts:
-        # Run Terraform format
-        - terraform_fmt
-        # Run Terraform validate
-        - terraform_validate
-          </code>
-        </pre>
-      </figure>
+    include_code: tf-13-to-14-patch-example.html
+    include_code_caption: tf-13-to-14.patch
     image_side: right
     body: |
       As the maintainer of a dependency, you release new versions as usual (e.g., via a new Git tag), but if you are making a breaking change, you can now also create <em>patch files</em> to automatically update your users' code to handle the backwards incompatibilities.

pages/landing/patcher/use-cases/_use-cases.html

@@ -1,19 +1,24 @@
 {% for item in page.use_cases %}
   <div class="row">
     {% if item.tab_block %}
+      {% assign tab_content_id = item.heading | slugify | downcase %}
       <div class="row-image-content {% if item.image_side == "left" %}col-xs-8 col-xs-offset-2 col-sm-5 col-sm-offset-0 col-md-6 col-diagram hidden-print{% else %}col-xs-10 col-xs-offset-1 col-sm-5 col-sm-push-7 col-sm-offset-0 col-md-6 col-md-push-6 col-diagram{% endif %}">
         <div class="tab_block">
-          {% for tab in site.data.patcher-landing-page-tabs-terraform-upgrade %}
+          {% for tab in item.tab_block %}
           <div class="tab">
-            <button class="{% if forloop.first %}active tablinks{% else %}tablinks{% endif %}" onclick="openTab(event, '{{tab.id}}')">{{ tab.title }}</button>
+            <button class="{% if forloop.first %}active tablinks{% else %}tablinks{% endif %} {{ tab_content_id }}" onclick="openTab(event, '{{ tab_content_id }}', '{{tab.id}}')">{{ tab.title }}</button>
           </div>
           {% endfor %}
         </div>
         <div class="tab_content">
-          {% for tab in site.data.patcher-landing-page-tabs-terraform-upgrade %}
-          <div id="{{tab.id}}" class="{% if forloop.first %}first_tabcontent tabcontent{% else %}tabcontent{% endif %}">
-            <img src="{{tab.content}}"/>
-          </div>
+          {% for tab in item.tab_block %}
+            <div id="{{ tab.id }}" class="{% if forloop.first %}first_tabcontent tabcontent{% else %}tabcontent{% endif %} {{ tab_content_id }}">
+              {% if tab.image %}
+                <img src="{{ tab.image }}" alt="{{ tab.title }}"/>
+              {% elsif tab.include %}
+                {% include {{ tab.include }} %}
+              {% endif %}
+            </div>
           {% endfor %}
         </div>
       </div>
@@ -170,9 +175,9 @@ <h2>{{ item.heading }}</h2>
 </style>
 
 <script>
-  function openTab(evt, tabName) {
-    $('.tabcontent').hide(); // hide all tab content
-    $('.tablinks').removeClass('active'); // ensure all links are inactive
+  function openTab(evt, tabContentId, tabName) {
+    $('div.' + tabContentId).hide(); // hide all tab content
+    $('button.' + tabContentId).removeClass('active'); // ensure all links are inactive
     $('#' + tabName).show();
     $(evt.currentTarget).addClass('active'); // mark the current tab as active
   }

pages/landing/patcher/use-cases/index.html

@@ -2,6 +2,8 @@
 layout: landing
 type: landing
 slug: index-page
+custom_js: prism
+prism_css: /assets/css/prism-landing-zone.css
 
 extra_nav_links:
   - name: Use Cases
@@ -12,48 +14,58 @@
 permalink: /patcher/use-cases/
 
 use_cases:
-  - heading: "Use case 1: Update to Terraform 1.0 automatically"
-    tab_block: site.data.patcher-landing-page-tabs-terraform-upgrade
+  - heading: |
+      <div style="font-size: 18px; color: #CCC">Example #1</div>
+      <div>Update to Terraform 1.0</div>
+    tab_block:
+      - id: pr
+        title: Example Pull Request
+        image: "https://s6.gifyu.com/images/tf92e8ec56f233ce68.gif"
+      - id: patch
+        title: tf-13-to-14.patch
+        include: tf-13-to-14-patch-example.html
     body: |
       <ul>
         <li>Use Patcher to update your Terraform code from an older version (e.g. 0.11) all the way up to the latest version (e.g. 1.0) automatically.</li>
         <li>Patcher does this using <i>Patch Files</i>, which transform code automatically (e.g. switching from HCL1 to HCL2 syntax or updating <code>source</code> URLs to compatible module versions) and open pull requests with the results.</li>
         <li>You can use off-the-shelf Patch Files created by Gruntwork (e.g. we offer Terraform upgrade patches such as <code>tf-13-to-14.patch</code>, <code>tf-14-to-15.patch</code>, etc) or create your own Patch Files!</li>
       </ul>
 
-  - heading: "Use case 2: Automatically patch a severe security vulnerability in Ruby on Rails"
-    image: https://rubyonrails.org/images/rails-logo.svg
-    image_width: 379px
+  - heading: |
+      <div style="font-size: 18px; color: #CCC">Example #2</div>
+      <div>Patch a vulnerability in Rails</div>
     image_side: left
+    tab_block:
+      - id: rails-pr
+        title: Example Pull Request
+        image: /assets/img/logos-patcher/patch-rails-vulnerability.png
     body: |
       <ul>
-        <li>In <a href="https://github.com/advisories/GHSA-xgr2-v94m-rc9g">CVE-2013-0333</a>, a severe security vulnerability was found in Ruby on Rails that allowed remote attackers to execute arbitrary code, conduct SQL injection attacks, or bypass authentication.</li>
+        <li>Ruby on Rails has had several severe vulnerabilities with YAML parsing (e.g., <a href="https://www.rapid7.com/blog/post/2013/01/09/serialization-mischief-in-ruby-land-cve-2013-0156/">CVE-2013-0156</a>) that allowed remote attackers to execute arbitrary code, conduct SQL injection attacks, or bypass authentication.</li>
         <li>You can use Patcher to automatically update your Rails app to fix this vulnerability.</li>
         <li>Patcher can not only update you to the new version of Ruby on Rails, but also make the necessary changes to your app code to ensure the vulnerability is fully fixed.</li>
       </ul>
 
-  - heading: "Use case 3: Update to a new version of an internal utility"
-    image: https://upload.wikimedia.org/wikipedia/de/thumb/e/e1/Java-Logo.svg/1200px-Java-Logo.svg.png
-    image_width: 200px
+  - heading: |
+      <div style="font-size: 18px; color: #CCC">Example #3</div>
+      <div>Keep all microservices patched with the latest internal Java library</div>
+    tab_block:
+      - id: upgrade-test
+        title: Example upgrade tests
+        image: /assets/img/logos-patcher/patcher-upgrade-test.png
+      - id: java-library-patch
+        title: Example patch file
+        include: java-library-patch-example.html
     body: |
       <ol>
-        <li>Let's say you are the maintainer of a <code>security.jar</code> library that is used by 300 microservices (300 other teams) within your company.</li>
-        <li>When you open a pull request with some changes to <code>security.jar</code>, Patcher automatically finds all the services that depends on <code>security.jar</code>, runs their tests with your updates, and shows you the results, so you know if you made breaking changes.</li>
-        <li>If you did make breaking changes, you can create a <i>Patch File</i> to patch those services, and Patcher will show you the results of both applying your Patch File and executing the tests of each service.</li>
-        <li>Once all tests are passing, you merge, release a new version of <code>security.jar</code>, and Patcher opens pull requests against all those services to update them to the new version.</li>
+        <li>You make a change to <code>security.jar</code>, a library used by many microservices within your company, and open a pull request.</li>
+        <li>Patcher automatically finds all those services and runs their tests with your updates (<em>Upgrade Tests</em>), so you know if any of your changes were breaking.</li>
+        <li>If you did make breaking changes, you can create a <i>Patch File</i> to patch those services, and Patcher will run Upgrade Tests with your updated code and Patch File.</li>
+        <li>When you release a new version of <code>security.jar</code>, Patcher will automatically update each service to use it, including running your Patch File.</li>
       </ol>
-  - heading: "Use case 4: Update to React 17.0 automatically"
-    image: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K
-    image_side: left
-    image_width: 379px
-    body: |
-      <ul>
-        <li><a href="https://reactjs.org/blog/2020/08/10/react-v17-rc.html">React 17.0</a> is a major release that had a number of breaking changes. As an example, one of the breaking changes in this release is that returning <code>undefined</code> from <code>forwardRef</code> and <code>memo</code> components is an error and you should return <code>null</code> instead.</li>
-        <li>Use Patcher to update your code to React 17.0, by applying a <i>Patch File</i> that, among other things, ensures that <code>forwardRef</code> and <code>memo</code> components never return <code>undefined</code>.</li>
-      </ul>
 
 footer:
-  heading: Keep your code up to day, even with breaking changes
+  heading: Keep your code up to date, even with breaking changes
   body: |
     <ul class="check-list" style="display: inline-block; text-align: left; margin-top: 10px; margin-bottom: 0">
       <li>Always stay up-to-date.</li>