solid-ruby-design/index.html at master · cecilitse/solid-ruby-design · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/png" href="images/favicon.png">

    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
    <link rel="stylesheet" href="style.css">

    <title>Solid Ruby Design Newsletter</title>
    <meta name="description" content="A newsletter to learn practical patterns to tame complexities in your Ruby code.">

    <!-- Open Graph data -->
    <meta property="og:title" content="Solid Ruby Design Newsletter" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.solidrubydesign.com/" />
    <meta property="og:image" content="https://www.solidrubydesign.com/images/meta-banner.png" />
    <meta property="og:description" content="A newsletter to learn practical patterns to tame complexities in your Ruby code." />
    <meta property="og:site_name" content="Solid Ruby Design Newsletter" />

    <!-- Twitter Card data -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@cecilitse">
    <meta name="twitter:title" content="Solid Ruby Design Newsletter">
    <meta name="twitter:description" content="A newsletter to learn practical patterns to tame complexities in your Ruby code.">
    <meta name="twitter:creator" content="@n_filzi">
    <meta name="twitter:image:src" content="https://www.solidrubydesign.com/images/meta-banner.png">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="column">
          <h1>
            <span class="technologist-emoji"></span>
            Welcome to our
            <strong>Solid Ruby Design Newsletter</strong>
            👋
          </h1>
          <div class="banner">
            <pre>
              <!-- Please resist, do not indent my content! -->
              <code>
<span class="code-keyword">class</span> <span class="code-class">SolidRubyDesign</span>
  <span class="code-keyword">def</span> <span class="code-method">initialize</span>
    <span class="code-instance-variable">@</span>format  <span class="code-assignment">=</span> <span class="code-delimiter">:</span><span class="code-string">newsletter</span>
    <span class="code-instance-variable">@</span>tagline <span class="code-assignment">=</span> <span class="code-string"><span class="code-delimiter">'</span>Learn practical patterns to tame complexities in your Ruby code<span class="code-delimiter">'</span></span>
    <span class="code-instance-variable">@</span>topics  <span class="code-assignment">=</span> <span class="code-delimiter">[</span><span class="code-string"><span class="code-delimiter">'</span>simple design<span class="code-delimiter">'</span></span>, <span class="code-string"><span class="code-delimiter">'</span>practical learning<span class="code-delimiter">'</span></span><span class="code-delimiter">]</span>
    <span class="code-instance-variable">@</span>authors <span class="code-assignment">=</span> <span class="code-delimiter">[</span><span class="code-string"><span class="code-delimiter">'</span><a href="http://cecilitse.org/" target="_blank">Cécile</a><span class="code-delimiter">'</span></span>, <span class="code-string"><span class="code-delimiter">'</span><a href="https://twitter.com/n_filzi" target="_blank">Nicolas</a><span class="code-delimiter">'</span></span><span class="code-delimiter">]</span>
  <span class="code-keyword">end</span>

  <span class="code-keyword">def</span> <span class="code-method">what_you_will_learn</span>
    <span class="code-heredoc"><<~CURRICULUM</span>
      <span class="code-string">1. Service Objects
      2. Result Objects
      3. SQL & ActiveRecord optimizations
      4. Query Objects
      5. Helpers & Presenters
      6. Value Objects
      7. More to come</span>
    <span class="code-heredoc">CURRICULUM</span>
  <span class="code-keyword">end</span>
<span class="code-keyword">end</span>
              </code>
            </pre>
            <div class="cta-container">
              <button id="checkout-button" class="button button-cta" role="link">Get access now! 🚀</button>
            </div>
          </div>
          <div class="payment-container">
            <p id="payment-error-message"><!-- Filled by Stripe Checkout script --></p>
            <p class="payment-notice" data-price-message>One-shot payment of 50€</p>
            <p class="friend-message" data-friend-message></p>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="https://js.stripe.com/v3"></script>
    <script>
      var settings = {
        test: {
          stripeKey:   'pk_test_AQChgkHVYwyEZ7tQ6USRMMn700qcDhF3kr',
          products: {
            classic: { sku: 'sku_EzjGIEQvq3lPMM' },
            lewagon: {
              sku:           'sku_FHZh5DJtsfNxhK',
              priceMessage:  'One-shot payment of <strike>99€</strike> <strong>50€</strong>',
              friendMessage: 'Enjoy our Le Wagon family discount ❤️'
            }
          },
          redirectURL: window.location.origin
        },
        live: {
          stripeKey:   'pk_live_LX30bNQfyM7kr7Mndz2AKIYv00RvtzsXWT',
          products: {
            classic: { sku: 'sku_EzjFh7OMJC0s4H' },
            lewagon: {
              sku:            'sku_FHZSVwZfvntbam',
              priceMessage:   'One-shot payment of <strike>99€</strike> <strong>50€</strong>',
              friendMessage:  'Enjoy our Le Wagon family discount ❤️'
            }
          },
          redirectURL: 'https://www.solidrubydesign.com'
        }
      }

      const mode         = window.location.hostname == 'www.solidrubydesign.com' ? 'live' : 'test';
      const modeSettings = settings[mode];

      const checkoutButton = document.getElementById('checkout-button');
      const stripe         = Stripe(modeSettings.stripeKey);

      const urlParams    = new URLSearchParams(window.location.search);

      const couponSource = urlParams.get('coupon') || 'classic';
      const product      = modeSettings.products[couponSource];

      const friendMessage = document.querySelector('p[data-friend-message]');
      const priceMessage  = document.querySelector('p[data-price-message]');

      if (couponSource != 'classic') {
        priceMessage.innerHTML    = product.priceMessage;
        friendMessage.textContent = product.friendMessage;
      }

      checkoutButton.addEventListener('click', function () {
        stripe.redirectToCheckout({
          locale: 'en',
          items: [{ sku: product.sku, quantity: 1 }],

          successUrl: `${modeSettings.redirectURL}/payment/success.html`,
          cancelUrl:  `${modeSettings.redirectURL}/payment/canceled.html`,
        })
        .then(function (result) {
          if (result.error) {
            // browser or network error
            const displayError = document.getElementById('payment-error-message');
            displayError.textContent = result.error.message;
          }
        });
      });
    </script>
  </body>
</html>