jongacnik

import { useState } from "react";
import Image from "next/image";

export default function FadeInImage({ ...props }) {
  const [isLoaded, setIsLoaded] = useState(false);
  const { className, src, alt, priority, layout, objectFit, width, height } =
    props;

  function onLoadingComplete() {
    setIsLoaded(true);

jongacnik

<?php

/**
 * Built-in PHP server router:
 * 
 * - If file exists, serve file
 * - Access php files without .php extension
 * - Unknown routes throw 404
 * - Optionally fallback to index.php
 *

jongacnik

import querystate from 'querystate'
import nanobus from 'nanobus'

const state = querystate()
const bus = nanobus()

// emit state on history change
;(function(history){
  var pushState = history.pushState
  var popState = history.popState

jongacnik

import { define } from 'wicked-elements'
import onIntersect from '../lib/on-intersect.js'

define('[data-component~="ultralazy"]', {
  init () {
    this.state = {}
    this.onEnter = this.onEnter.bind(this)
    this.onLoad = this.onLoad.bind(this)
  },
  connected () {

jongacnik

import { define } from 'wicked-elements'

define('[data-component~="overscroll-none"]', {
  init () {
    
  },
  connected () {
    if (!CSS.supports('overscroll-behavior', 'none')) {
      this.wheelingTimeout = false
      this.lock = this.lock.bind(this)

jongacnik

const $ = (selector, parent = document) => parent.querySelector(selector)
const $$ = (selector, parent = document) => [...parent.querySelectorAll(selector)]
const createNode = html => {
  return new DOMParser().parseFromString(html, 'text/html').body.firstChild
}

jongacnik

Shopify Homepage Redirect

Use the "Custom Content" section in a debut theme to add a code block with the contents of shopify-redirect.js. This will allow you to create a user-editable redirect. The code is wrapped in an iFrame check so the redirect is not triggered while in the editor. Editors can toggle the redirect on/off by showing/hiding that section.

jongacnik

import { define } from 'wicked-elements'

/**
 * Toggles open class on target element on toggle click
 */

define('[data-component~="toggle"]', {
  init () {
    this.target = this.element.getAttribute('data-target')
    this.toggle = this.toggle.bind(this)

jongacnik

import GenericSlideshow from './generic-slideshow'
const ov = object => Object.keys(object).map(i => object[i])

class CrossfadeSlideshow {
  constructor($el, options) {
    this.$el = $el
    this.$counter = document.querySelector('[data-subcomponent="slider-counter"][data-exports="' + options.exports + '"]')
    this.$title = document.querySelector('[data-subcomponent="slider-title"][data-exports="' + options.exports + '"]')
    
    // init slideshow if multiple slides

jongacnik

background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 100% 1px;
background-position: center bottom 2px;
background-origin: padding-box;