Skip to content

Instantly share code, notes, and snippets.

View ajmalafif's full-sized avatar
💻

Ajmal Afif ajmalafif

💻
View GitHub Profile
@yoavniran
yoavniran / PreviewLayout.js
Created July 25, 2019 08:55
PreviewLayout for Gatsby & Netlify CMS to enable styled-components
import React, { useRef, useLayoutEffect } from "react";
import { StyleSheetManager } from "styled-components";
import PreviewContext from "./PreviewContext";
const WithPreviewContext = ({ children }) =>
<PreviewContext.Provider value={true}>
<main>
{children}
</main>
</PreviewContext.Provider>;
@thetrevorharmon
thetrevorharmon / example-form.tsx
Last active April 5, 2021 19:30
Gatsby Mailchimp Signup Form
import addToMailchimp from 'gatsby-plugin-mailchimp';
import React, { useState } from 'react';
import * as styles from './EmailListForm.module.scss';
const EmailListForm: React.FunctionComponent<{}> = () => {
const [email, setEmail] = useState('');
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
@steveruizok
steveruizok / Counter.tsx
Created June 21, 2019 11:14
A Framer X code component that returns a "decorated" code component.
import * as React from "react"
import { Frame, FrameProps } from "framer"
import { observer } from "mobx-react"
import { store } from "./store"
const DecoratedCounter = observer(props => {
return <Frame onTap={store.increment}>{store.count}</Frame>
})
@steveruizok
steveruizok / EventPropExample.tsx
Created June 21, 2019 11:12
Example Framer X code component that "shares" changes to its state through an event prop.
import * as React from "react"
import { Frame, FrameProps } from "framer"
type Props = Partial<FrameProps> & {
onValueChange: (value: number) => void
}
export function EventPropExample(props: Props) {
const { onValueChange, ...rest } = props
@tanaypratap
tanaypratap / create-pages-blogs.js
Created April 6, 2019 07:09
Creating Pages in Gatsby from different data sources and template
/** extracted page creation functionality into smaller functions **/
const path = require('path');
function createBlogPostsPages(result, createPage) {
const blogPostTemplate = path.join(__dirname, `../src/templates/blog-post.js`);
const blogPosts = result.data.blogs.edges;
blogPosts.forEach((post, index) => {
const previous = index === blogPosts.length - 1 ? null : blogPosts[index + 1].node;
@patrikarvidsson
patrikarvidsson / dialog-script.html
Last active January 19, 2020 04:39
Intrusive GDPR-dialog script. Variables are used by Statamic, so you might need to define your own. Uses a11y-dialog, linked at the top.
<script src="https://cdn.jsdelivr.net/npm/a11y-dialog@5.2.0/a11y-dialog.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=ADD-ID-HERE"></script>
<script>
'use strict';
var cookieName = 'company-gdpr';
var redirect = '{{ gdpr_cta_decline_url }}'; // Redirect for decline
var expiration = {{ gdpr_expiry_time }}; // Expiration time in days
var animDuration = 200; // Animation duration in milliseconds
var animDelay = 1000; // Animation duration in milliseconds
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
@assassinave
assassinave / utils-modulate-framerx.tsx
Created December 16, 2018 16:50
Framer X - Utils Modulate
// Framer X Utils.modulate equivalent
function modulate(value, rangeA, rangeB, limit = false) {
const [fromLow, fromHigh] = rangeA;
const [toLow, toHigh] = rangeB;
const result = toLow + ((value - fromLow) / (fromHigh - fromLow)) * (toHigh - toLow);
if (limit === true) {
if (toLow < toHigh) {
if (result < toLow) {
return toLow;
@DavidKuennen
DavidKuennen / minimal-analytics-snippet.js
Last active May 3, 2024 12:55
Minimal Analytics Snippet
(function (context, trackingId, options) {
const history = context.history;
const doc = document;
const nav = navigator || {};
const storage = localStorage;
const encode = encodeURIComponent;
const pushState = history.pushState;
const typeException = 'exception';
const generateId = () => Math.random().toString(36);
const getId = () => {
@kmelve
kmelve / run.js
Created November 21, 2018 17:53
Indexing in Algolia using serverless functions (and observables!) https://www.sanity.io/blog/indexing-in-algolia-using-serverless-functions-and-observables
const algoliasearch = require('algoliasearch');
const request = require('request');
const ndjson = require('ndjson');
const {bindNodeCallback} = require('rxjs');
const {streamToRx} = require('rxjs-stream');
const {bufferCount, map, mergeMap, toArray, tap} = require('rxjs/operators');
// Algolia configuration
const algoliaApp = 'your_app_id';
# Insomnia Configuration
## Run the test query
{
shop {
id
name
}
}
# Query Structure Examples