-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Ready 4 Review] SQIP - Vectorized primitive image previews #4205
Merged
KyleAMathews
merged 27 commits into
gatsbyjs:master
from
axe312ger:feat/primitive-vector-image-previews
May 1, 2018
Merged
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit
Hold shift + click to select a range
033faad
first working version with Contentful assets only
7660c4e
add readme
5781b9c
respect width, height, aspect ratio, cropping, resize focus and backg…
f7f05da
add support for gatsby-transformer-sharp
b72921b
integrate in gatsbygram
axe312ger b6cdeab
avoid useless regeneration cus contentDigest changes
axe312ger d571ba8
proper way to get absolute path to ImageSharp nodes
axe312ger 423ed1a
queue preview generation and cache results on disk
axe312ger d11370b
upgrade to latest node-sqip to get rid of the GoLang dependency
4550f94
replace custom svg data uri function with package
19c33d0
prepare images via sharp plugin and allow sharp transformations
axe312ger a386a12
load cached svg properly from disk
axe312ger 64a6dd2
fix queue resolving to early
axe312ger 6e8f3a4
set contentful images to 400px
axe312ger 84ebf42
implement new sharp transformation awareness feature
axe312ger f2ffe45
WIP - extract generation and write first pseudo test
axe312ger 5c11f36
fix styling for gatsbygram post detail
axe312ger 48006eb
finalize unit tests for actual sqip implementation
axe312ger f058965
use 256px input image width to match sqip/primitive default
axe312ger 365f36c
add using-sqip example page
axe312ger 36fc041
some cleanup
axe312ger f8b4caa
clean up example and enhance polaroid effect
axe312ger a439dee
fix using-sqip dependency
axe312ger 3fdca72
remove base64 since it was not implemented and is bad for compression
axe312ger fb22bcb
remove sqip from gatsbygram example
axe312ger b551857
simplify tests
axe312ger df6c807
Small change to trigger build
KyleAMathews File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
add support for gatsby-transformer-sharp
- Loading branch information
commit f7f05da7c90c7bbe9a9cee92543f45811ef5b1ec
There are no files selected for viewing
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,20 +2,77 @@ const crypto = require(`crypto`) | |
const { createWriteStream } = require(`fs`) | ||
const { extname, join, resolve } = require(`path`) | ||
|
||
const axios = require(`axios`) | ||
const { | ||
GraphQLString, | ||
GraphQLInt, | ||
} = require(`graphql`) | ||
const fs = require(`fs-extra`) | ||
const sqip = require(`sqip`) | ||
const { schemes: { ImageResizingBehavior, ImageCropFocusType } } = require(`gatsby-source-contentful`) | ||
|
||
module.exports = async ({ type, store, cache }) => { | ||
module.exports = async (args) => { | ||
const { type: { name } } = args | ||
|
||
if (name === `ImageSharp`) { | ||
return sqipSharp(args) | ||
} | ||
|
||
if (name === `ContentfulAsset`) { | ||
return sqipContentful(args) | ||
} | ||
|
||
return {} | ||
} | ||
|
||
async function sqipSharp ({ type, cache }) { | ||
if (type.name !== `ImageSharp`) { | ||
return {} | ||
} | ||
|
||
return { | ||
sqip: { | ||
type: GraphQLString, | ||
args: { | ||
blur: { | ||
type: GraphQLInt, | ||
defaultValue: 1, | ||
}, | ||
numberOfPrimitives: { | ||
type: GraphQLInt, | ||
defaultValue: 10, | ||
}, | ||
mode: { | ||
type: GraphQLInt, | ||
defaultValue: 0, | ||
}, | ||
}, | ||
async resolve(image, fieldArgs, context) { | ||
const { blur, numberOfPrimitives, mode } = fieldArgs | ||
// not everything is available at this point of time, maybe conflicts with extend node type from gatsby-transform-sharp, so lets hack it for now... | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
should do the trick
|
||
// const { original: { src }, internal: { contentDigest } } = image | ||
// const absolutePath = join( | ||
// process.cwd(), | ||
// `public`, | ||
// src | ||
// ) | ||
|
||
const { id, internal: { contentDigest } } = image | ||
const absolutePath = id.replace(` absPath of file >> ImageSharp`, ``) | ||
|
||
return generateSqip({ cache, contentDigest, absolutePath, numberOfPrimitives, blur, mode }) | ||
}, | ||
}, | ||
} | ||
} | ||
|
||
async function sqipContentful ({ type, store, cache }) { | ||
if (type.name !== `ContentfulAsset`) { | ||
return {} | ||
} | ||
|
||
const fs = require(`fs-extra`) | ||
const axios = require(`axios`) | ||
|
||
const { schemes: { ImageResizingBehavior, ImageCropFocusType } } = require(`gatsby-source-contentful`) | ||
|
||
const cacheDir = join( | ||
store.getState().program.directory, | ||
`.cache`, | ||
|
@@ -127,38 +184,46 @@ module.exports = async ({ type, store, cache }) => { | |
}) | ||
} | ||
|
||
const sqipOptions = { | ||
filename: absolutePath, | ||
numberOfPrimitives, | ||
blur, | ||
mode, | ||
} | ||
return generateSqip({ cache, contentDigest, absolutePath, numberOfPrimitives, blur, mode }) | ||
}, | ||
}, | ||
} | ||
} | ||
|
||
const optionsHash = crypto | ||
.createHash(`md5`) | ||
.update(JSON.stringify(sqipOptions)) | ||
.digest(`hex`) | ||
async function generateSqip (options) { | ||
const { cache, contentDigest, absolutePath, numberOfPrimitives, blur, mode } = options | ||
|
||
const cacheKey = `sqip-${contentDigest}-${optionsHash}` | ||
// @todo add check if file actually exists | ||
|
||
let svgThumbnail = await cache.get(cacheKey) | ||
const sqipOptions = { | ||
filename: absolutePath, | ||
numberOfPrimitives, | ||
blur, | ||
mode, | ||
} | ||
|
||
if (!svgThumbnail) { | ||
console.log(`Calculating low quality svg thumbnail: ${url}`) | ||
const result = sqip(sqipOptions) | ||
// @todo make blur setting in sqip via PR | ||
svgThumbnail = result.final_svg.replace(new RegExp(`<feGaussianBlur stdDeviation="[0-9]+"\\s*/>`), `<feGaussianBlur stdDeviation="${sqipOptions.blur}" />`) | ||
const optionsHash = crypto | ||
.createHash(`md5`) | ||
.update(JSON.stringify(sqipOptions)) | ||
.digest(`hex`) | ||
|
||
await cache.set(cacheKey, svgThumbnail) | ||
console.log(`done calculating primitive ${url}`) | ||
} | ||
const cacheKey = `sqip-${contentDigest}-${optionsHash}` | ||
|
||
const dataURI = encodeOptimizedSVGDataUri(svgThumbnail) | ||
let svgThumbnail = await cache.get(cacheKey) | ||
|
||
return dataURI | ||
}, | ||
}, | ||
if (!svgThumbnail) { | ||
console.log(`Calculating low quality svg thumbnail: ${absolutePath}`) | ||
const result = sqip(sqipOptions) | ||
// @todo make blur setting in sqip via PR | ||
svgThumbnail = result.final_svg.replace(new RegExp(`<feGaussianBlur stdDeviation="[0-9]+"\\s*/>`), `<feGaussianBlur stdDeviation="${sqipOptions.blur}" />`) | ||
|
||
await cache.set(cacheKey, svgThumbnail) | ||
console.log(`done calculating primitive ${absolutePath}`) | ||
} | ||
|
||
const dataURI = encodeOptimizedSVGDataUri(svgThumbnail) | ||
|
||
return dataURI | ||
} | ||
|
||
// https://codepen.io/tigt/post/optimizing-svgs-in-data-uris | ||
|
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
note to myself: set to
^current version