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

#!/bin/sh

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

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

function getBrowserPath(params) {
  // your implementation here
}

const URL_UPDATE_DELAY = 750;

export default function useKeepBrowserPathUpdated(params) {
  const path = getBrowserPath(params);

  useEffect(() => {

guillermodlpa

import { createIcon } from "@chakra-ui/react";

export default createIcon({
  displayName: "InstagramLogo",
  viewBox: "0 0 512 512",
  path: (
    <>
      <title>Instagram</title>
      <path d="M256,49.471c67.266,0,75.233.257,101.8,1.469,24.562,1.121,37.9,5.224,46.778,8.674a78.052,78.052,0,0,1,28.966,18.845,78.052,78.052,0,0,1,18.845,28.966c3.45,8.877,7.554,22.216,8.674,46.778,1.212,26.565,1.469,34.532,1.469,101.8s-0.257,75.233-1.469,101.8c-1.121,24.562-5.225,37.9-8.674,46.778a83.427,83.427,0,0,1-47.811,47.811c-8.877,3.45-22.216,7.554-46.778,8.674-26.56,1.212-34.527,1.469-101.8,1.469s-75.237-.257-101.8-1.469c-24.562-1.121-37.9-5.225-46.778-8.674a78.051,78.051,0,0,1-28.966-18.845,78.053,78.053,0,0,1-18.845-28.966c-3.45-8.877-7.554-22.216-8.674-46.778-1.212-26.564-1.469-34.532-1.469-101.8s0.257-75.233,1.469-101.8c1.121-24.562,5.224-37.9,8.674-46.778A78.052,78.052,0,0,1,78.458,78.458a78.053,78.053,0,0,1,28.966-18.845c8.877-3.45,22.216-7.554,46.778-8.674,26.565-1.212,34.532-1.469,101.8-1.469m0-45.391c-68.418,0

guillermodlpa

import throttle from 'lodash.throttle';
import React, { useEffect } from 'react';

/**
 * Reusable hook to observe a node and run a throttled callback when its dimensions change
 * Example usage can be to change the text within a flex grow container between
 *  a short and a long version depending on available space
 */
export default function useThrottledResizeObserver<T extends HTMLElement>(
  ref: React.MutableRefObject<T>,

guillermodlpa

/**
 * Generates a string to be passed to img sizes, for performance.
 * @see https://nextjs.org/docs/api-reference/next/image#sizes
 */
export default function generateImageSizesProp(responsiveValues: {
  base: string;
  sm?: string;
  md?: string;
  lg?: string;
  xl?: string;

guillermodlpa

// Custom code for Squarespace
// To add bio aside to https://www.alequilibre-nutrition.com/
(() => {
    try {
        const imageSrc = 'https://images.squarespace-cdn.com/content/v1/61d747e813d12769b8b2ae58/e4ba1672-bd46-42e2-8980-f2c19bd84bf3/Romane+A+l%27equilibre+meditation+self+care.jpg?format=120w';
        const linkUrl = '/apropos';
        const linkText = 'À propos';
        const body = 'alal la';
        
        const mobileBreakpoint = 768;

guillermodlpa

import { EventHandler, useCallback, useState } from 'react';
import ConfirmationDialog from './ConfirmationDialog';

export default function WrappingDialogConfirmation({
  children,
  ...props
}: {
  children: (handleClick: EventHandler<any>) => React.ReactNode;
  title: string;
  description: string;

guillermodlpa

import { useEffect, useState } from 'react';

export default function NoSsr({ children }: { children: React.ReactNode }) {
  const [mountedState, setMountedState] = useState(false);

  useEffect(() => {
    setMountedState(true);
  }, []);

  return <>{mountedState ? children : null}</>;