gruntwork-io · infraredgirl · Aug 17, 2021 · Aug 11, 2021 · Aug 12, 2021 · Aug 12, 2021
@@ -0,0 +1,7 @@
+- id: pr
+  title: Example Pull Request
+  content: https://s6.gifyu.com/images/tf92e8ec56f233ce68.gif
+
+- id: patch
+  title: tf-14-to-15.patch
+  content: https://i.imgur.com/mxEkeHw.png
@@ -3,6 +3,10 @@
 type: landing
 slug: index-page
 
+extra_nav_links:
+  - name: Use Cases
+    url: /patcher/use-cases/
+
 title: "Keep your code up to date, even with breaking changes."
 excerpt: Patcher automatically creates pull requests to keep your dependencies up to date, updating not only the version numbers, but also patching your code to handle backwards incompatible changes.
 permalink: /patcher/

@@ -3,6 +3,10 @@
 type: landing
 slug: pricing
 
+extra_nav_links:
+  - name: Use Cases
+    url: /patcher/use-cases/
+
 title: Pick a plan
 excerpt: Pick the plan just right for your team.
 permalink: /patcher/pricing/

@@ -0,0 +1,10 @@
+<div class="container">
+  <div class="row">
+    <div class="col-xs-12">
+      <h1>{{ page.title }}</h1>
+      <p class="lead">
+        {{ page.excerpt }}
+      </p>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,182 @@
+{% for item in page.use_cases %}
+  <div class="row">
+    {% if item.tab_block %}
+      <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 %}
+          <div class="tab">
+            <button class="{% if forloop.first %}active tablinks{% else %}tablinks{% endif %}" onclick="openTab(event, '{{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>
+          {% endfor %}
+        </div>
+      </div>
+    {% endif %}
+      {% if item.image %}
+        <div class="{% 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 %}">
+          <img src="{{ item.image }}" class="row_image_content" width="{{ item.image_width }}"/>
+        </div>
+      {% endif %}
+      <div class="{% if item.image_side == "left" %}col-xs-12 col-sm-7 col-md-6 col-description{% else %}col-xs-12 col-sm-7 col-sm-pull-5 col-md-6 col-md-pull-6 col-description{% endif %}">
+        <h2>{{ item.heading }}</h2>
+        <p>{{ item.body }}</p>
+        <div>
+          {% for logo in item.logos %}
+            <div style="display: inline-block; margin-right: 10px">
+              <div style="display: inline-block; width: 30px; text-align: center">
+                <img src="{{ logo.src }}" alt="{{ logo.title }}" title="{{ logo.title }}">
+              </div>
+              <strong style="font-size: 15px">{{ logo.title }}</strong>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+{% endfor %}
+
+<style>
+  code {
+    background: #6d6d6d;
+    color: #e0e0e0;
+  }
+
+  .tab_content, .tab_code_content {
+    border: 1px solid #194c5f;
+    border-radius: 0 0 4px 4px;
+  }
+
+  .tab_content {
+    padding: 20px;
+    height: 350px;
+    background-color: #242e3b;
+  }
+
+  .tab_block {
+    width: 100%;
+    display: inline-table;
+    max-width: 500px;
+    border: 1px solid #194c5f;
+    border-bottom: none;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+
+  }
+
+  .tab {
+    overflow: hidden;
+    display: table-cell;
+    width: auto;
+    color: #bfbfbf;;
+    border-collapse: collapse;
+    border: 1px solid #194c5f;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .tab.code:first-child, .tab:first-child, .tab.code:last-child, .tab:last-child {
+    border-left: none;
+    border-right: none;
+  }
+
+  .tab button {
+    background-color: inherit;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    width: 100%;
+    color: #bfbfbf;
+    font-size: 16px;
+    border: none;
+  }
+
+  .tab button:hover,.tab button.active {
+    color: white;
+    background-color: #242e3b;
+  }
+
+  .tabcontent, .first_tabcontent, .first_tabcontent_code {
+    border-top: none;
+  }
+
+  .tabcontent, .tabcontent_code {
+    display: none;
+  }
+
+  .first_tabcontent, .first_tabcontent_code {
+    display: block;
+  }
+
+  .first_tablinks, .first_tablinks_code {
+    background-color: #06a2ff !important;
+  }
+
+  .row .item_precode_code, .item_precode {
+    position: relative;
+  }
+
+  .item_precode_code figure {
+    border: 1px solid #194c5f;
+    border-radius: 4px;
+  }
+
+  figcaption {
+    font-size: 14px;
+  }
+  .row .item_precode figcaption, .row .item_precode_code figcaption {
+    position: absolute;
+    top: -15px;
+    background-color: #ee4f5d;
+    border-radius: 4px;
+    color: white;
+    text-transform: uppercase;
+    font-weight: bold;
+    line-height: 1.7;
+    letter-spacing: 1px;
+    padding: 0 10px;
+  }
+
+  pre[class*="language-"] {
+    font-size: 11px;
+    margin: 0;
+  }
+
+  .row_image_content {
+    border: 1px solid #194c5f;
+    border-radius: 4px;
+    border-collapse: collapse;
+    padding: 0;
+  }
+
+  pre {
+    outline: none;
+    border: none;
+    margin: 0;
+  }
+
+  .row:last-of-type .row_image_content {
+    border: none;
+  }
+
+</style>
+
+<script>
+  function openTab(evt, tabName) {
+    $('.tabcontent').hide(); // hide all tab content
+    $('.tablinks').removeClass('active'); // ensure all links are inactive
+    $('#' + tabName).show();
+    $(evt.currentTarget).addClass('active'); // mark the current tab as active
+  }
+
+  function openCodeTab(evt, tabName) {
+    $('.tabcontent_code').hide(); // hide all tab content
+    $('.tablinks_code').removeClass('active'); // ensure all links are inactive
+    $('#' + tabName).show();
+    $(evt.currentTarget).addClass('active'); // mark the current tab as active
+  }
+</script>
@@ -0,0 +1,75 @@
+---
+layout: landing
+type: landing
+slug: index-page
+
+extra_nav_links:
+  - name: Use Cases
+    url: /patcher/use-cases/
+
+title: Patcher Use Cases
+excerpt: Some examples of scenarios where Patcher can be useful
+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
+    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
+    image_side: left
+    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>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
+    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>
+      </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
+  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>
+      <li>Get new features and security fixes completely automatically.</li>
+      <li>Make breaking changes a thing of the past.</li>
+    </ul>
+  cta: Request early access!
+---
+
+<div class="main page-pricing">
+  <div class="section page-pricing-header">
+    {% include_relative _hero.html %}
+  </div>
+  <div id="use-cases" class="section section-dark">
+    <div class="container">
+      {% include_relative _use-cases.html %}
+    </div>
+  </div>
+</div>