mcansh

function install() {
  packageManager="yarn install --silent"

  if test -f "package-lock.json"; then
    echo "package-lock.json found, using npm"
    packageManager="npm install --legacy-peer-deps --silent"
  elif test -f "pnpm-lock.yaml"; then
    echo "yarn.lock found, using yarn"
    packageManager="pnpm install --reporter=silent"
  else

mcansh

npx create-remix@latest --template remix-run/indie-stack test-999
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated

mcansh

#!/usr/bin/env node
const fs = require("fs");
const path = require("path");

const { convertTemplateToJavaScript } = require("./index");

let args = process.argv.slice(2);

let projectDir = path.resolve(args[0]);

mcansh

import path from "node:path";
import fse from "fs-extra";
import svgstore from "svgstore";
import { glob } from "glob";
import prettier from "prettier";

let HEROICONS_PATH = path.join(process.cwd(), "node_modules/heroicons");
let ASSETS_PATH = path.join(process.cwd(), "assets");

let OUTFILE = path.join(process.cwd(), "app/components/sprite/index.svg");

mcansh

Things to note to make this work:

1. you'll need to have your remix registry token available in your shell under REMIX_TOKEN
2. you'll need to add secrets to your GitHub repo for the following items:
   • REMIX_TOKEN
   • VERCEL_TOKEN (https://vercel.com/account/tokens)
   • VERCEL_ORG_ID
   • VERCEL_PROJECT_ID
3. you'll need to have your REMIX_TOKEN available in your vercel repo as an environment variable

mcansh

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Image = styled.img`
  height: 100%;
  width: 100%;
  ${props => (props.loading ? 'filter: blur(10px)' : '')};
  ${props => (props.loading ? 'transform: scale(1.03);' : '')};
  ${props => (props.loading ? 'overflow: hidden' : '')};

mcansh

// copy a string
function copyToClipboard(string) {
	const input = document.createElement('input')
	input.type = 'text';
	input.value = string;
	document.body.appendChild(input);
	input.select();
	document.execCommand('copy');
	input.remove();
}

mcansh

console.image = (url, scale = 1) => {
  if (!url) return;

  const img = new Image();

  img.onload = function () {
    // way easier to see whats going on when its an array of styles
    const styles = [
      `background: url("${url}")`,
      `background-size: ${(this.width * this.scale)}px ${(this.height * this.scale)}px`,

mcansh

# add this to your `~/.bashrc` or `.zshrc` file

# clone repo, cd into it, fork it on github (if its a github repo), and open it in atom
# requires https://hub.github.com for forking and cloning (user/repos)
alias cloneOpen='f() {
  urls=('github.com' 'bitbucket.org' 'gitlab.com')
  url=$1
  for i in "${urls[@]}"
  do
    if [[ $url =~ $i ]]

mcansh

let xDown = null;
let yDown = null;

function handleTouchStart(e) {
  xDown = e.touches[0].clientX;
  yDown = e.touches[0].clientY;
}

function handleTouchMove(e) {
  if (!xDown || !yDown) {