saltnpixels

const useStickyScroll = (
    {
        elementRef,
        containerRef
    }: {elementRef: any; containerRef?: any; onScroll?: (y: number) => void},
    dependencies: any[] = []
) => {
    const [isSticky, setIsSticky] = useState(false);
    // Use useRef for the callback to avoid triggering re-renders
    const onCallbackRef = useRef<(y: number) => void>();

saltnpixels

import { useState, useLayoutEffect } from 'react';
import throttle from 'lodash.throttle';

function useResizeObserver(ref: React.MutableRefObject<any>) {
  const [dimensions, setDimensions] = useState({
    width: 0,
    height: 0,
    dimensionsLoaded: false,
  });

saltnpixels

import { useRef, useEffect, useState } from 'react';
import Swiper from 'swiper';
import { SwiperOptions } from 'swiper/types';
import { Pagination, Navigation } from 'swiper/modules';
import { Box, BoxProps, MotionBox } from '@components';
import { Chevronleft, Chevronright } from '@/icons';
import { Variants } from 'framer-motion';

// now importing all thee manually with emotion
// import 'swiper/css';

saltnpixels

import React, { useEffect, useRef, useState, useCallback } from 'react';
import { throttle } from 'lodash';

/**
 * Returns a ref, and a stateful value bound to the ref as well as observe function
 * The observe runs automatically on window scroll but you can observe another elements scroll if you want
 */
export default function useSticky<T extends HTMLElement>(fn ?: (stickyActive?: boolean)=> void) {
  const stickyRef = useRef<T>(null);
  const [sticky, setSticky] = useState(false);

saltnpixels

// must have a loading state that turns true when fetching data and false afterwards
// callback is responsible for setting loading state as well as deciding if it should even run. (check if pages left etc...)
// scrollingElement defaults to viewport if none used. If wanted put it as a ref on a scrollable element
// sentry must be placed as a ref and is not optional

import { useCallback, useEffect, useRef, useState } from 'react';

export default function useInfiniteScroller({
  isLoading,
  callback,

saltnpixels

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {

saltnpixels

• Install iTerm2 from https://www.iterm2.com/
• Install oh-my-zsh from https://ohmyz.sh/ or https://github.com/robbyrussell/oh-my-zsh
• Set iTerm2 theme tab theme to Dark - Preferences | Appearance | Tabs | Theme > Dark
• Install Fira Code fonts from https://github.com/tonsky/FiraCode (Clone and navigate to dstr > ttf, install all font files by double clicking)
• Install Powerline fonts from https://github.com/powerline/fonts
• Set fonts for iTerm2 - Preferences | Profiles | Text
  • Change Font to 14pt Fira code regular and Check Use Ligatures checkbox
  • Change Non ASCII Font to 14pt Fira mono and Check Use Ligatures checkbox
• Install iTerm2 snazzy theme from https://github.com/sindresorhus/iterm2-snazzy
  • Navigate to Preferences | Profiles | Color Presets > Snazzy

saltnpixels

.aspect-ratio {
	position: relative;
  // needs a set height, so override when using on a component

	&::before {
		content: "";
		display: block;
		height: 0;
		width: 100%;
	}

saltnpixels

if ( ! function_exists( 'set_tag_cloud_sizes' ) ) {
	/**
	 * Removes the inline font sizing.
	 *
	 * @param string $tags holds markup of tags
	 *
	 * @return string
	 */
	function set_tag_cloud_sizes( string $tags ): string {
		return preg_replace( '/style="font-size: \d+pt;"/', '', $tags );

saltnpixels

.entry-content,
.article-footer,
.after-article {
	padding-left: var(--spacing-20);
	padding-right: var(--spacing-20);

	&::after {
		clear: both;
		content: "";
	}