zlwaterfield

# Export from https://www.figma.com/community/plugin/1256972111705530093/export-import-variables

import json

app_name = "{fill_in}" # Make sure to replace this.

def rgba_to_string(rgba):
    """Convert RGBA color values to an RGBA string."""
    r = int(rgba['r'] * 255)
    g = int(rgba['g'] * 255)

zlwaterfield

try {
  let sig = req.headers['stripe-signature'];
  let ev = stripe.webhooks.constructEvent(req.body, sig, env.endpointSecret);
  if (ev) done(null, ev);
 } catch (e) {
   return res.sendStatus(401);
 }

zlwaterfield

// Stripe Webhooks
app.post('/api/v1/webhooks', bodyParser.raw({ type: '*/*' }), webhooks.index);
// Parse body to into JSON
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
// All other routes
app.use('/', routes);

zlwaterfield

// Get signed_key
const msgKey = getSignedKey(req.body.text);
// Verify key
const keyContents = verifyKey(msgKey);
// Get the message that is being responded too
const prevMessage = await db.message.findById(keyContents.id);
// Validate the sender is in this conversation / allowed to respond 
const verifiedSender = await verifySender(keyContents, prevMessage);
// Parse message data
const emailMessage = parseEmail(req.body.text);

zlwaterfield

import multer from 'multer';
// SendGrid inbound emails
app.post(‘/api/inbound_emails’, multer().any(), inbound.index);
//Other routes and body parsing 
...

zlwaterfield

$timeline-num-line-items: 10;
$timeline-item-transition-delay: 0.5s;
.timeline.is-visible {
  animation: draw ($timeline-num-line-items * $timeline-item-transition-delay - $timeline-item-transition-delay) $timeline-item-transition-delay * 3 1 linear forwards;
}
@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

zlwaterfield

scrollReveal(elem) {
  const className = 'is-visible';
  const ratio = .9;
  const isElementInViewport = (el) => {
    let rect = el.getBoundingClientRect();
    return (
      rect.top > 0 &&
      rect.top <= window.innerHeight * ratio
    );
  };

zlwaterfield

.timeline {
  position: absolute;
  width: 100%;
  height: auto;
  top: 64px;
  left: -5px;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4250;

zlwaterfield

scale() {
  // At 350px screen width the pathHeight coefficient should be 1
  const startPathHeight = 1;
  const startScreenWidth = 350;
  // At 450px screen width the pathHeight coefficient should be .69
  const midPathHeight = .69;
  const midScreenWidth = 450;
  // At 600px screen width the pathHeight coefficient should be .48
  const endPathHeight = .48;
  const endScreenWidth = 600;

zlwaterfield

<svg class="timeline" scale scroll-reveal viewBox="0 0 100 600" preserveAspectRatio="none">
  <path class="hide-gt-xs" d={`M 70 1 h 18 a 10 10 0 0 1 10 10 v ${pathHeight} a 10 10 0 0 1 -10 10 h -20 h -57 a 10 10 0 0 0 -10 10 v ${pathHeight} a 10 10 0 0 0 10 10 h 78 a 10 10 0 0 1 10 10`} />
  <path class="hide-xs hide-gt-sm" d="M 70 1 h 18 a 10 10 0 0 1 10 10 v 59 a 10 10 0 0 1 -10 10 h -20 h -57 a 10 10 0 0 0 -10 10 v 68 a 10 10 0 0 0 10 10 h 78 a 10 10 0 0 1 10 10" />
  <path class="hide-xs hide-sm" d={`M 50 1 h 20 a 10 10 0 0 1 10 10 v ${pathHeight} a 10 10 0 0 1 -10 10 h -20 h -30 a 10 10 0 0 0 -10 10 v ${pathHeight} a 10 10 0 0 0 10 10 h 60 a 10 10 0 0 1 10 10`} />
</svg>