Dustin Schau DSchau

## optimize.sh
#!/bin/bash
find . \( -name '*.JPG' -o -name '*.jpg' \) -size +10kb | while read f
do
  filename="optimized/$(echo $f | sed "s/\.\///g")"
  echo "$filename"
  convert "$f" -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG "$filename"
done

## gatsbyjs.com
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <style id="typography.js">

## gatsby-config-drupal.js
module.exports = {
  siteMetadata: {
    title: 'Drupal + Bayer Starter',
    description: 'Official boilerplate for getting up and running with Drupal + Gatsby for the Bayer team'
  },
  plugins: [
    {
      resolve: 'gatsby-source-drupal',
      options: {
        baseUrl: 'https://path-to-drupal.com'

## README.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                DSchau
                / README.md
            
            
              Created
              April 9, 2022 20:51
            
              
                Caching with a Plugin
              
          
    Instructions


Check out the caching repo
Push to Gatsby Cloud
First build will log "Cache not persisted, getting new characters"
Subsequent builds will not

Can validate with a builds webhook invocation: curl -X POST https://webhook.gatsbyjs.com/hooks/data_source/publish/0f86ced9-2fa3-4738-80d8-23786226a8f3


Note: there are several conditions in which the cache is (automatically) cleared. They are documented in the cache API docs.

  
## rss-status.xml
<pingdom_http_custom_check>
    <status>200</status>
    <response_time>10000</response_time>
</pingdom_http_custom_check>

## cypress.json
{
  "baseUrl": "http://localhost:8000"
}

## gatsby-cypress.mdx

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                DSchau
                / gatsby-cypress.mdx
            
            
              Last active
              April 10, 2020 15:56
            
              
                Gatsby + Cypress recipe
              
          
    Gatsby and Cypress can be used together seamlessly (and should be!). [Cypress][cypress] enables you to run end-to-end tests on your client-side application, which is what Gatsby produces.
First, we'll want to install Cypress and additional dependencies.


## index.js
import React from 'react'
import imgSrc from './assets/whatever.png'

export default () => (
  <div>
    <h1>Look below! A static image</h1>
    <img src={imgSrc} /> {/* I'm a plain ol' static image */}
  </div>
)

## resilient-fetch.js
// make sure you wrap this in a useEffect, componentDidMount, etc.
const safeFetch = (timeout = 10000) => {
  return (...args) => {
    // this is sorta "unsafe" in the sense that a slow connection could cause this timeout
    // a safer way would be to tap into and investigate error codes for e.g. ad blocked resources
    // but this gets the idea across
    return Promise.race([
      fetch(...args),
      new Promise((resolve, reject) => setTimeout(() => reject(new Error('Ad blocked or something')), timeout) // this failed, short-circuit
    ])

## gatsby-node.js
// HAVE NOT TESTED, BUYER BEWARE
/*
 * Potential enhancements:
 * disable mangling to see component names
 * only do this with a certain env variable (e.g. PROFILE=true)?
 */
exports.onCreateWebpackConfig = ({
  actions,
}) => {
  actions.setWebpackConfig({
	#!/bin/bash
	find . \( -name '.JPG' -o -name '.jpg' \) -size +10kb \| while read f
	do
	filename="optimized/$(echo $f \| sed "s/\.\///g")"
	echo "$filename"
	convert "$f" -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG "$filename"
	done
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="x-ua-compatible" content="ie=edge" />
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no"
	/>
	<style id="typography.js">
	module.exports = {
	siteMetadata: {
	title: 'Drupal + Bayer Starter',
	description: 'Official boilerplate for getting up and running with Drupal + Gatsby for the Bayer team'
	},
	plugins: [
	{
	resolve: 'gatsby-source-drupal',
	options: {
	baseUrl: 'https://path-to-drupal.com'
	<pingdom_http_custom_check>
	<status>200</status>
	<response_time>10000</response_time>
	</pingdom_http_custom_check>
	import React from 'react'
	import imgSrc from './assets/whatever.png'

	export default () => (
	<div>
	<h1>Look below! A static image</h1>
	<img src={imgSrc} /> {/* I'm a plain ol' static image */}
	</div>
	)
	// make sure you wrap this in a useEffect, componentDidMount, etc.
	const safeFetch = (timeout = 10000) => {
	return (...args) => {
	// this is sorta "unsafe" in the sense that a slow connection could cause this timeout
	// a safer way would be to tap into and investigate error codes for e.g. ad blocked resources
	// but this gets the idea across
	return Promise.race([
	fetch(...args),
	new Promise((resolve, reject) => setTimeout(() => reject(new Error('Ad blocked or something')), timeout) // this failed, short-circuit
	])
	// HAVE NOT TESTED, BUYER BEWARE
	/*
	* Potential enhancements:
	* disable mangling to see component names
	* only do this with a certain env variable (e.g. PROFILE=true)?
	*/
	exports.onCreateWebpackConfig = ({
	actions,
	}) => {
	actions.setWebpackConfig({