guillermodlpa

import { MutableRefObject, useEffect, useState } from "react";

function useInViewport(ref: MutableRefObject<HTMLElement>) {
  const [inViewport, setInViewport] = useState(false);
  useEffect(() => {
    if (!ref.current) {
      return;
    }
    const callback: IntersectionObserverCallback = (entries, observer) => {
      entries.forEach((entry) => {

guillermodlpa

#!/bin/sh

# Formats something like
#
# '{"MODE":"dev","HOST":"db"}'
#
# to
#
# MODE=dev
# HOST=db

guillermodlpa

#!/bin/sh

# wraps the env var values in quotes and handles newlines
# It's a more sohisticated version from just doing export $($ENV_VARS)
# and it doesn't break with newline characters, quotes or spaces in the values (note the encoding with sed)

eval "$(
  printf '%s\n' "$ENV_VARS" | while IFS='' read -r line; do
    key=$(printf '%s\n' "$line"| sed 's/"/\\"/g' | cut -d '=' -f 1)
    value=$(printf '%s\n' "$line" | cut -d '=' -f 2- | sed 's/"/\\\"/g')

guillermodlpa

/**
 * Inspired by https://codepen.io/oxleberry/pen/BOEBaB
 *
 * With added support for horizontal scrolling, scrolling the window, and linear easing
 *
 * native scrollTo or scrollIntoView conflict with each other if there are different horizontal and vertical scrolls happening
 */

// Easing equations, http://www.gizma.com/easing/
function easeOutCubic(t: number, b: number, c: number, d: number) {

guillermodlpa

import type { NextApiRequest, NextApiResponse } from 'next';

function replaceUrlsInHtmlPage(htmlPage: string, urls: string[], newUrl: string) {
  return urls.reduce((memo, url) => memo.replace(new RegExp(url, 'g'), newUrl), htmlPage);
}

/**
 * This endpoint is used as a fallback for any route that is not handled by Next.js.
 * This way, we can mix a marketing site hosted in WordPress and the app in the same domain
 */

guillermodlpa

/**
 * Get the dimensions of an image file
 * Check the mime type before calling this function
 */
export default function getImageFileDimensions(
  imageFile: File,
): Promise<{ width: number; height: number }> {
  return new Promise((resolve, reject) => {
    if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
      reject(

guillermodlpa

import { createContext, useContext, useState } from 'react';

class NoContextProviderError extends Error {
  constructor() {
    super('Context value was undefined');
  }
}

/**
 * Utility to create a context for a dialog, to reduce boilerplate

guillermodlpa

export default function composeContextProviders(providers: React.ElementType[]) {
  return providers.reduce(
    (Prev, Curr) =>
      function ComposedProviderWrapper({ children }) {
        return (
          <Prev>
            <Curr>{children}</Curr>
          </Prev>
        );
      },

guillermodlpa

type Components =
  | React.ElementType
  | [React.ElementType, { [key: string]: unknown }];

const Compose = ({
  components,
  children,
}: {
  components: Components[];
  children: JSX.Element;

guillermodlpa

import useBreakpointValueWithDeviceType from '@/hooks/useBreakpointValueWithUADetection/useBreakpointValueWithDeviceType';
import { BoxProps } from '@chakra-ui/react';
import { useMemo } from 'react';

// Controlling Leftover Grid Items with Pseudo-selectors
// @see https://css-irl.info/controlling-leftover-grid-items/

function generateCenteredGridStyles(columnCount: number): BoxProps['sx'] {
  const itemStyles: Record<string, string | Record<string, string>> = {
    gridColumn: 'span 2',