Skip to the relevant sections if needed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import _get from "lodash.get"; | |
import GatsbyImage from "gatsby-image"; | |
const fallbackUrl = "/fallback-image.svg"; | |
const placeholderSVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs/%3E%3Cpath fill='%23eee' d='M0 0h10v10H0z'/%3E%3C/svg%3E`; | |
const Image = ({ src, srcset, id, imageFile, sizes, ...props }) => { | |
const width = _get(props, "width"); | |
const height = _get(props, "height"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--violation-color: red; /* used for clear issues */ | |
--warning-color: orange; /* used for potential issues we should look into */ | |
} | |
/* IMAGES */ | |
/* | |
* Lazy-Loaded Images Check | |
* ==== |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* CUSTOM SANITY STUDIO INPUT COMPONENT FOR FONT-AWESOME | |
* | |
* This is a proof of concept custom input component that loads the whole free library of font awesome icons and makes them | |
* searchable in a downshift component. If they're selected the font name will be saved as a string on the document. | |
* | |
* Install dependencies in your studio folder with: | |
* yarn add @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons downshift | |
* | |
* Use as a custom input component in your shcema: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Handling Errors using async/await | |
* Has to be used inside an async function | |
*/ | |
try { | |
const response = await axios.get('https://your.site/api/v1/bla/ble/bli'); | |
// Success 🎉 | |
console.log(response); | |
} catch (error) { | |
// Error 😨 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
! Font options - ~/.fonts.conf seems to override this | |
! Resolution for Xft in dots per inch (e.g. 96) | |
!Xft.dpi: 128 | |
! Type of subpixel antialiasing (none, rgb, bgr, vrgb or vbgr) | |
!Xft.rgba: rgba | |
!Xft.antialias: 1 | |
!Xft.hinting: 1 | |
!Xft.autohint: 0 | |
! What degree of hinting to use (hintnone, hintslight, hintmedium, or hintfull) | |
!Xft.hintstyle: hintslight |