Skip to content

Instantly share code, notes, and snippets.

View fourjuaneight's full-sized avatar
🤖

Juan Villela fourjuaneight

🤖
View GitHub Profile

Keybase proof

I hereby claim:

  • I am fourjuaneight on github.
  • I am fourjuaneight (https://keybase.io/fourjuaneight) on keybase.
  • I have a public key whose fingerprint is 53C2 5C12 3B02 F729 9259 7E02 E26E 2420 7AA2 5136

To claim this, I am signing this object:

@fourjuaneight
fourjuaneight / image.js
Created July 30, 2019 21:48
gatsby-image Component
import Img from 'gatsby-image';
import PropTypes from 'prop-types';
import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
const Image = props => (
<StaticQuery
query={graphql`
query {
allImageSharp {
query {
allCosmicjsProducts {
edges {
node {
content
metadata {
id
image {
imgix_url
}
// src/pages/index.js
const Homepage = ({ location }) => {
const {
allCosmicjsProducts: { edges },
} = useStaticQuery(graphql`
query {
allCosmicjsProducts {
edges {
node {
// src/templates/products.js
export const query = graphql`
query ProductQuery($id: String!) {
cosmicjsProducts(id: { eq: $id }) {
content
metadata {
id
image {
imgix_url
// src/components/product.js
const Product = ({ product, single, url }) => {
const sizes = {
individual: {
maxImg: '40rem',
maxWrap: '42rem',
},
list: {
maxImg: '20rem',
@fourjuaneight
fourjuaneight / scripts.11ty.js
Created July 29, 2019 22:38
Babel + Terser 11ty Pipeline
const { readFileSync } = require('fs');
const babel = require('@babel/core');
const Terser = require('terser');
// file paths
const color = readFileSync('assets/js/color.js', 'utf8', data => data);
const noise = readFileSync('assets/js/noise.js', 'utf8', data => data);
const outputFile = 'scripts.js';
module.exports = class {