Refactored parts of sponsors page.

.gitignore

@@ -10,8 +10,6 @@ venv_py38_dj30/
 
 
 docs/.sass-cache/*
-docs/_apidocs/_build/
-docs/_apidocs/doctrees/
 docs/_layouts/*
 docs/_site/*
 docs/assets/js/*

docs/Gemfile

@@ -2,10 +2,10 @@ source 'https://rubygems.org'
 
 # gem stripe
 # run locally
-# gem 'github-pages', group: :jekyll_plugins
-# gem "jekyll-include-cache"
+ gem 'github-pages', group: :jekyll_plugins
+ gem "jekyll-include-cache"
 
 # run server
-gem "minimal-mistakes-jekyll"
-gem "jekyll", "~> 3.5"
-gem 'wdm'
+# gem "minimal-mistakes-jekyll"
+# gem "jekyll", "~> 3.5"
+# gem 'wdm'

docs/_includes/sponsor_row → docs/_includes/advert_row

 
 <div class="feature__wrapper">
 
-  {% for f in page.sponsor_row %}
+  {% for f in page.advert_row %}
     <div class="feature__item">
       <div class="archive__item">
         {% if f.image_path %}

docs/_includes/empty_banner

+<div class="empty-banner"></div>
\ No newline at end of file

docs/_includes/tire_column

+
+  <div class="tire__container">
+    {% for s in page.tires %}
+        <div class="tire_item__box">
+          <div class="tire_item__title">{{ s.title }}</div>
+          <div class="tire_item__price">${{ s.price }}</div>
+          <div class="tire_item__period">PER MONTH</div>
+          <button id="{{ s.btn_id }}" class="btn btn--success btn--large">Join</button>
+          <div class="tire_item__benefit">
+            <ul>
+              {% for b in s.benefits %}
+                <li>{{ b | markdownify | remove: "<p>" | remove: "</p>" }}</li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
+    {% endfor %}
+  </div>
+  <div class="tire__disclaimer">
+    <ul class="notice--warning">
+      {% for d in page.disclaimer %}
+      <li><em>{{ d }}</em></li>
+      {% endfor %}
+    </ul>
+  </div>

docs/_includes/tire_row

-
-<div class="tire__banner"></div>
-
-<div class="tire__wrapper">
-  {% for s in page.sponsor_row %}
-      <div class="tire_item__box">
-        <div class="tire_item__title">{{ s.title }}</div>
-        <div class="tire_item__price">${{ s.price }}</div>
-        <div class="tire_item__period">PER MONTH</div>
-        <button id="{{ s.btn_id }}" class="btn btn--success btn--large">Pay</button>
-        <div class="tire_item__benefit">
-          <ul>
-            {% for b in s.benefits %}
-              <li>{{ b | markdownify | remove: "<p>" | remove: "</p>" }}</li>
-            {% endfor %}
-          </ul>
-        </div>
-      </div>
-  {% endfor %}
-
-</div>

docs/_includes/vendors/stripe.html

+<script>
+  // Replace with your own publishable key: https://dashboard.stripe.com/test/apikeys
+  var PUBLISHABLE_KEY = "pk_live_eEfW8XjO4oZUPRFaYASLCWqn";
+  // Replace with the domain you want your users to be redirected back to after payment
+  var DOMAIN = "https://nesdis.github.io";
+
+  var stripe = Stripe(PUBLISHABLE_KEY);
+
+  // Handle any errors from Checkout
+  var handleResult = function (result) {
+    if (result.error) {
+      var displayError = document.getElementById("error-message");
+      displayError.textContent = result.error.message;
+    }
+  };
+
+  var redirectToCheckout = function (priceId) {
+    // Make the call to Stripe.js to redirect to the checkout page
+    // with the current quantity
+    stripe
+      .redirectToCheckout({
+        lineItems: [{ price: priceId, quantity: 1 }],
+        successUrl:
+          DOMAIN + "/djongo?session_id={CHECKOUT_SESSION_ID}",
+        cancelUrl: DOMAIN + "/sponsor",
+        mode: 'subscription',
+      })
+      .then(handleResult);
+  };
+{% for t in page.tires %}
+  document
+  .getElementById("{{ t.btn_id }}")
+  .addEventListener("click", function (evt) {
+    redirectToCheckout("{{ t.price_id }}");
+  });
+{% endfor %}
+</script>
\ No newline at end of file

docs/_sass/_custom-components.scss

+.empty-banner {
+  height: 100px;
+}

docs/_sass/sponsor-tire.scss

-@import "sponsor-tire/tire";
\ No newline at end of file

docs/_sass/sponsor-tire/_components.scss

+@import "variables";
+
+.tire__container {
+  display: flex;
+  justify-content: left;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.tire__disclaimer {
+  margin-left: $box-side-margin;
+  display: inline-block;
+  .notice--warning li {
+    margin-left: $box-side-margin;
+  }
+}

docs/_sass/sponsor-tire/_tire.scss → docs/_sass/sponsor-tire/_item.scss

-.tire__wrapper {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.tire__banner {
-  height: 100px;
-}
+@import "variables";
 
 %box-border {
   border-style: solid;
@@ -18,18 +9,22 @@
 
 %box-spacing {
   margin-bottom: 2em;
-  margin-left: 1em;
-  margin-right: 1em;
+  margin-left: $box-side-margin;
+  margin-right: $box-side-margin;
 
   padding: 1em;
 }
 
+%box-size {
+  min-width: $min-box-width;
+  width: calc(33% - #{$box-side-margin}*2);
+}
+
 .tire_item__box {
   @extend %box-border;
   @extend %box-spacing;
+  @extend %box-size;
 
-  width: 29%;
-  min-width: 16em;
   text-align: center;
 
   ul {
@@ -53,6 +48,13 @@
   margin-bottom: 1em;
 }
 
+
+@media (max-width: $min-box-width-px*3 + $box-side-margin-px*6 + 2*$base-font-size-px) {
+  %box-size {
+    width: calc(50% - #{$box-side-margin}*2);
+  }
+}
+
 @media (max-width: 650px) {
   .tire__wrapper {
     display: block;

docs/_sass/sponsor-tire/_sponsor-tire.scss

+@import "components";
+@import "item";
\ No newline at end of file

docs/_sass/sponsor-tire/_variables.scss

+$min-box-width: 16em;
+$box-side-margin: 1em;
+
+$base-font-size-px: 20px;
+$min-box-width-px: 16 * $base-font-size-px;
+$box-side-margin-px: 1 * $base-font-size-px;

docs/_sass/style.scss

+@import "sponsor-tire/sponsor-tire";
+@import "custom-components";
\ No newline at end of file

docs/assets/css/custom.scss

@@ -2,4 +2,4 @@
 # this ensures Jekyll reads the file to be transformed into CSS later
 ---
 
-@import "sponsor-tire";
\ No newline at end of file
+@import "style";
\ No newline at end of file

docs/docs/Discuss.md

@@ -4,6 +4,9 @@ permalink: /discuss/
 toc: false
 layout: splash
 ---
+
+{% include empty_banner %}
+
 Djongo forum is where you can watch for:
 
 * New release announcements.
@@ -15,9 +18,10 @@ Djongo forum is where you can watch for:
   src="javascript:void(0)"
   scrolling="no"
   frameborder="0"
-  width="900"
+  width="100%"
   height="700">
 </iframe>
+
 <script type="text/javascript">
   document.getElementById('forum_embed').src =
      'https://groups.google.com/forum/embed/?place=forum/djongo'

docs/docs/home.md

@@ -58,7 +58,7 @@ addendum_row1:
     btn_label: "Learn More"
     btn_class: "btn--primary"
     
-sponsor_row:
+advert_row:
   - image_path: /assets/images/e2e.png
     alt: "Admin MongoDB"
     image_link: http://www.e2eprojects.com/
@@ -74,7 +74,7 @@ sponsor_row:
 
 {% include feature_row id="punchline" type="center" %}
 
-{% include sponsor_row %}
+{% include advert_row %}
 
 {% include feature_row id="feature_row1" %}
 

docs/docs/sponsor.md

@@ -6,10 +6,11 @@ layout: splash
 excerpt: "If you are a company that uses Djongo in your products, consider enrolling in a subscription plan. You get long term support and advertisement space"
 description: "If you are a company that uses Djongo in your products, consider enrolling in a subscription plan. You get long term support and advertisement space."
 
-sponsor_row:
+tires:
   - title: A Sweet Tip
     price: 3
     btn_id: price_3
+    price_id: price_1HIKfSLbyDBUaJVjuc3i3YEW
     benefits:
       - You use Djongo and you LOVE IT.
       - You want to tip the project! Thanks!
@@ -17,22 +18,24 @@ sponsor_row:
   - title: Q&A
     price: 4
     btn_id: price_4
+    price_id: price_1HIKi6LbyDBUaJVj7FvgB3gx
     benefits:
       - Take a look at your **one question**.
       - You support the long term sustainability of the project.
-      - Your token of appreciation will help me continue maintain the repository.
 
   - title: Generous Supporter
     price: 7
     btn_id: price_7
+    price_id: price_1HIKkyLbyDBUaJVj8XbaHS8O
     benefits:
       - Your questions are answered within 24 hours on Discord priority-support.
-      - You support the long term sustainability of the project.
       - Your name is mentioned in the source code.
+      - You support the long term sustainability of the project.
   
   - title: Evangelist Supporter
     price: 15
     btn_id: price_15
+    price_id: price_1HIKphLbyDBUaJVjQylkb7QE
     benefits:
       - You **get access to the djongoNxt** repository.
       - Your questions are **immediately** taken up for consideration on Discord priority-support.
@@ -41,75 +44,22 @@ sponsor_row:
   - title: Advertise on Djongo
     price: 50
     btn_id: price_50
+    price_id: price_1HHwbOLbyDBUaJVjYnDESotB
     benefits:
       - Your name or company logo will be displayed on the home page.
       - Your feature requests and support queries to be given top priority.
 
----
-
-{% include tire_row %}
-
- * *Subscriptions are not binding and can be canceled any time.*
- * *Upon successful checkout you are provided with an option to submit additional details required to deliver your benefits.*
+disclaimer:
+  - Subscriptions are not binding and can be canceled any time.
+  - Upon successful checkout you are provided with an option to submit additional details required to deliver your benefits.
 
-<script>
-  // Replace with your own publishable key: https://dashboard.stripe.com/test/apikeys
-  var PUBLISHABLE_KEY = "pk_live_eEfW8XjO4oZUPRFaYASLCWqn";
-  // Replace with the domain you want your users to be redirected back to after payment
-  var DOMAIN = "https://nesdis.github.io";
-
-  var stripe = Stripe(PUBLISHABLE_KEY);
-
-  // Handle any errors from Checkout
-  var handleResult = function (result) {
-    if (result.error) {
-      var displayError = document.getElementById("error-message");
-      displayError.textContent = result.error.message;
-    }
-  };
-
-  var redirectToCheckout = function (priceId) {
-    // Make the call to Stripe.js to redirect to the checkout page
-    // with the current quantity
-    stripe
-      .redirectToCheckout({
-        lineItems: [{ price: priceId, quantity: 1 }],
-        successUrl:
-          DOMAIN + "/djongo?session_id={CHECKOUT_SESSION_ID}",
-        cancelUrl: DOMAIN + "/sponsor",
-        mode: 'subscription',
-      })
-      .then(handleResult);
-  };
+---
 
-  document
-    .getElementById("price_3")
-    .addEventListener("click", function (evt) {
-      redirectToCheckout("price_1HIKfSLbyDBUaJVjuc3i3YEW");
-    });
+{% include empty_banner %}
 
-  document
-    .getElementById("price_4")
-    .addEventListener("click", function (evt) {
-      redirectToCheckout("price_1HIKi6LbyDBUaJVj7FvgB3gx");
-    });
+{% include tire_column %}
 
-  document
-    .getElementById("price_7")
-    .addEventListener("click", function (evt) {
-      redirectToCheckout("price_1HIKkyLbyDBUaJVj8XbaHS8O");
-    });
 
-  document
-    .getElementById("price_15")
-    .addEventListener("click", function (evt) {
-      redirectToCheckout("price_1HIKphLbyDBUaJVjQylkb7QE");
-    });
 
-  document
-    .getElementById("price_50")
-    .addEventListener("click", function (evt) {
-      redirectToCheckout("price_1HHwbOLbyDBUaJVjYnDESotB");
-    });
 
-</script>
+{% include vendors/stripe.html %}