tylerpaige

# Reads newline-separated text from the database as an array
# Note that when you present this field for content authors to edit
# you will need to join the value into a newline separated text.
class NewlineSerializer
  def self.dump(value)
    return value if value.is_a?(String)

    return value.join("\r\n") if value.is_a?(Array)
  end

tylerpaige

// Assuming `app` is some sort of event bus that can emit events...

document.addEventListener("keydown", (e) => {
  if (e.key !== "Tab") {
    return;
  }

  const focusDirection = e.shiftKey ? "previous" : "next";
  const handler = () => {
    app.trigger(`focus:${focusDirection}`);

tylerpaige

import React from 'react'
import { GatsbyImage } from 'gatsby-plugin-image'

/*
Example:

<GatsbyImageFromStrapi
  image={image}
  transformations={[getCropTransformation('4:5')]}
  layoutsByBreakpoint={{

tylerpaige

:root {
  --gutter: 1rem;
}

@media screen and (min-width: 30rem) {
  :root {
    --gutter: 2rem;
  }
}

tylerpaige

/*
::::::::::::::::::::
:: REQUIRED SETUP ::
::::::::::::::::::::
  At a minimum, you'll want a $themes object that contains all of 
  your presets. It should be a nested map.
  
  1. The first layer should be the names of your "styles"
     (e.g. "outline", "semi-transparent-fill", "fill").
  2. The second layer inside each style should be the available

tylerpaige

/*
  Sets a global variable $prop-at-breakpoint and calls your content block
  for any breakpoint in which the request property is present in the preset's configuration.
*/

@mixin via-type-preset-property($preset-name, $property-name) {
  @if not map-has-key($type-sizes, $preset-name) {
    @warn "No typestyles for '#{$preset-name}'. Available options: #{map-keys($type-sizes)}";
  }
  

tylerpaige

// For use in conjunction with breakpoint mixin: https://gist.github.com/tylerpaige/63dc3cf5fdb8e8a98175e6c5c883e0d3

// Configure a list of typestyle presets, first by supplying a base style
// and optionally by creating additional rules for specific breakpoints.
// NOTE: Root font size is generally 16px
// NOTE: the `responsive-type-preset` mixin applies the base styles, but the `type-preset` mixin does not.
//       for this reason, you may want your individual breakpoint-scoped styles to be a bit verbose.
$type-sizes: (
  "metadata": (
    base: (

tylerpaige

/*
  This mixin requires some global variables to be set up in the following pattern
*/
$breakpoints: (
  xs: 15rem, //240px
  sm: 30rem, //480px
  md: 48rem, //768px
  lg: 62rem, //992px
  xl: 75rem  //1200px
);

tylerpaige

@mixin generateAnimation($selector, $name, $manifest) {
  $totalDuration: 0ms;
  @each $time, $rules in $manifest {
    $totalDuration : $totalDuration + $time;
  }

  $scalingTimeAcc: 0ms;
  $previousKeyframe: -1;
  @keyframes #{$name} {
    @each $time, $rules in $manifest {

tylerpaige

/*
  REQUIRES NODE INSTALLED ON YOUR MACHINE
  
  USAGE:
  ------
    # firstly, edit the input variables
    $ cd path/to/this/script
    $ node markdown-list-to-economy-menu-json.js
    
  CONFIG: