README
rehype-all-the-thumbs-curate
rehype-👍🏿👍🏼👍🏽👍🏻👍🏾 (Selecting Inputs)
Supporting rehype-all-the-thumbs by finding the elements for processing via CSS Selector Strings
Install
npm i rehype-all-the-thumbs-curate
or
yarn add rehype-all-the-thumbs-curate
Overview
So you tried the "easy button", and needed more flexibilty? So down the rabbit trail we go. The good news is now you can compose your own pipeline together that is tailor made to your needs!
🤘🏼 Rock On.
If that sketch does not sound like the adventure you are on, you might want to try the "easy button" first. Head to the parent project (aka: easy button) rehype-all-the-thumbs
Configuration:
- a CSS Selector string
- a default ResizerConfig
Input:
- a HAST tree
Output:
- HAST tree - perhaps where selected img nodes have an extra attribute to make them easier to find later
- vfile with added
srcskey added to the object
Usage
Simple
const unified = require('unified')
const parse = require('rehype-parse')
const curate = require('rehype-all-the-thumbs-curate')
const stringer = require('rehype-stringify')
unified()
.use(parse)
.use(curate)
.use(stringer)
.process(vf, (err, vfile)=>{
// srcs is an array,
// where the length is based on img srcs found in picture tags
// which is the default CSS selector
// the other attributes are populated based on the defaults, and all are configurable
// vfile has new sidecar data called srcs - an array of declarative instructions from which other plugins can make thumbnails.
console.log( vfile.srcs )
})
Basic
const unified = require('unified')
const parse = require('rehype-parse')
const curate = require('rehype-all-the-thumbs-curate')
const stringer = require('rehype-stringify')
unified()
.use(parse)
.use(curate)
.use(stringer)
.process(vf, (err, vfile)=>{
console.log( vfile.srcs )
})
Advanced
const unified = require('unified')
const parse = require('rehype-parse')
const curate = require('rehype-all-the-thumbs-curate')
const stringer = require('rehype-stringify')
unified()
.use(parse)
.use(curate)
.use(stringer)
.process(vf, (err, vfile)=>{
console.log( vfile.srcs )
})
Pairs Well With:
- rehype-all-the-thumbs ...making thumbnails has never been so easy. Easy, like putting on velcro shoes, easy.
- rehype-all-the-thumbs-curate (DOM -> data.srcs)
- rehype-all-the-thumbs-create (data.srcs -> data.newAssets)
- rehype-all-the-thumbs-manipulate (data.newAssets -> DOM)
- rehype-all-the-thumbs-obviate (data.newAssets.filter -> data.newAssets)
- vfile-newAssets-generate (data.newAssets -> Side Effect Funtion to create the file)
License
Srcs Type Preview
srcs is a ResizerConfig[]
/**
*
* @typedef InboundConfig
* @type {object}
* @property {string | StringThunk } [select] - a CSS selector string for how to find the DOM nodes that have the data of interest.
* @property {string} [sourcePrefix] - the path string that provides the required folder context to load a src file from the fs
* @property {string} [destBasePath] - the path string that provides folder context for where to put the string
* @property {number[]} [widths] - breakpoints + 1 for larger than last break
* @property {number[]} [breaks] - where are the image breakpoints - defined by max applicable 769, 1088, 1280
* @property {FormatOptions} [types] - jpg:{} | webp:{} | heif:{}
* @property {number} [hashlen] - default = 8;
* @property {string} [addclassnames] - mustache-style template string - opts:[classNames, width, ext, epochTime, imgHash]"
* @property {string} [prefix] - mustache-style template string - opts:[classNames, width, ext, epochTime, imgHash]"
* @property {string} [suffix] - mustache-style template string - opts:[classNames, width, ext, epochTime, imgHash]"
*/
Resizer Config
/**
*
* @typedef ResizerConfig
* @type {object}
* @property {string} selectedBy - the CSS selctor used to get to this node
* @property {string} sourcePrefix - the path string that provides the required folder context to load a src file from the fs
* @property {string} destBasePath - the path string that provides folder context for where to put the string
* @property {number[]} widths - breakpoints + 1 for larger than last break
* @property {number[]} breaks - where are the image breakpoints - defined by max applicable 769, 1088, 1280
* @property {FormatOptions} types - jpg:{} | webp:{} | heif:{}
* @property {number} hashlen - default = 8;
* @property {string} addclassnames - mustache-style template string - opts:[classNames, width, ext, epochTime, imgHash]"
* @property {string} prefix - mustache-style template string - opts:[classNames, width, ext, epochTime, imgHash]"
* @property {string} suffix - mustache-style template string - opts:[classNames, width, ext, epochTime, imgHash]"
*/
/**
* @typedef StringThunk
* @type {Function}
* @returns {string}
*/
/**
* @typedef FormatOption
* @type { (JPEG | WEBP | HEIF ) }
*/
/**
* @typedef FormatOptions
* @type { FormatOption[] }
*/
/**
* @typedef JPEG
* @type {Object}
* @property {JPEGopts} jpg - breakpoints + 1 for larger than last break
*/
/**
* @typedef JPEGopts
* @type {Object}
* @property {number} [quality] - integer 1-100 (optional, default 80)
* @property {boolean} [progresive] - use progressive (interlace) scan (optional, default true)
*/
/**
* @typedef WEBP
* @type {Object}
* @property {WEBPopts} webp - breakpoints + 1 for larger than last break
*/
/**
* @typedef WEBPopts
* @type {Object}
* @property {number} [quality] - integer 1-100 (optional, default 80)
* @property {boolean} [lossless] - use lossless compression mode (optional, default false)
*/
/**
* @typedef HEIF
* @type {Object}
* @property {HEIFopts} heif - breakpoints + 1 for larger than last break
*/
/**
* @typedef HEIFopts
* @type {Object}
* @property {number} [quality] - quality, integer 1-100 (optional, default 80)
* @property {HEIFoptsCompression | false} [compression] - compression format: hevc, avc, jpeg, av1 (optional, default 'hevc')
* @property {boolean} [lossless] - use lossless compression (optional, default false)
*/
/**
* @typedef HEIFoptsCompression
* @type {'hevc' | 'avc' | 'jpeg' | 'av1' }
*/