Skip to content

Instantly share code, notes, and snippets.

Avatar

Sam Selikoff samselikoff

View GitHub Profile
@samselikoff
samselikoff / next.config.js
Last active May 6, 2021
withProse remark plugin that escapes `prose` for MDX components
View next.config.js
let { withProse } = require("./src/remark/withProse");
let { withSyntaxHighlighting } = require("./src/remark/withSyntaxHighlighting");
let { withTableOfContents } = require("./src/remark/withTableOfContents");
let { withExamples } = require("./src/remark/withExamples");
let { withLayout } = require("./src/remark/withLayout");
let { withNextLinks } = require("./src/remark/withNextLinks");
let { VueLoaderPlugin } = require("vue-loader");
let path = require("path");
const withMDX = require("@next/mdx")({
@samselikoff
samselikoff / image-cropper.js
Created Apr 27, 2021
ImageCropper from Fitness App as of 4/27/21
View image-cropper.js
import { animate, motion, useMotionValue } from "framer-motion";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { usePrevious } from "react-use";
import { useGesture } from "react-use-gesture";
export function ImageCropper({
dataURL,
aspectRatio,
crop,
onCropChange,
@samselikoff
samselikoff / tailwind.config.js
Created Apr 16, 2021
Firefox plugin for Tailwind CSS. Add styles that target Firefox browser only.
View tailwind.config.js
const plugin = require("tailwindcss/plugin");
module.exports = {
mode: "jit",
purge: {
content: ["./src/**/*.{js,ts,jsx,tsx,mdx,vue}"],
},
theme: { extend: {} },
variants: {},
plugins: [
@samselikoff
samselikoff / components.my-component\.js
Last active Aug 2, 2020
Component helper bug with Glimmer components
View components.my-component\.js
import Component from '@glimmer/component';
export default class extends Component {
}
View machine.js
const inspectorMachine = Machine(
{
id: "inspector",
context: {
iframeRef: null,
error: null,
errorHandlingRequest: null,
db: {},
},
View sample-mirage-custom-hook-test.js
import { useSearch } from "use-cloudinary";
import { Server, Response } from "miragejs";
import { render, screen } from "@testing-library/react";
function App() {
const [search, data, status] = useSearch({ endpoint: "/example-endpoint" });
if (status === "loading") return <p data-test-id="loading">Loading...</p>;
if (status === "error") return <p data-test-id="error">Error</p>;
@samselikoff
samselikoff / cloudSettings
Last active Apr 8, 2021
Visual Studio Code Settings Sync Gist
View cloudSettings
{"lastUpload":"2020-05-01T19:06:41.818Z","extensionVersion":"v3.4.3"}
@samselikoff
samselikoff / cloudSettings
Created Apr 10, 2020
Visual Studio Code Settings Sync Gist
View cloudSettings
{"lastUpload":"2020-04-10T16:25:30.624Z","extensionVersion":"v3.4.3"}
View mirage-graphql-example.js
import { buildSchema, graphql } from "graphql";
// Construct a schema, using GraphQL schema language
let graphqlSchema = buildSchema(`
type Query {
recipes: [Recipe]
recipes_by_pk(id: Int!): Recipe
}
type Recipe {
id: ID!
@samselikoff
samselikoff / example.js
Created Nov 23, 2019
React spring example
View example.js
import React from "react";
import ReactDOM from "react-dom";
import "@reach/dialog/styles.css";
import { animated, useTransition, useChain } from "react-spring";
import { DialogOverlay, DialogContent } from "@reach/dialog";
const AnimatedDialogOverlay = animated(DialogOverlay);
function App() {
const [isOpen, setIsOpen] = React.useState(false);