{"_id":"@benedictyappy/gatsby-remark-images-anywhere","name":"@benedictyappy/gatsby-remark-images-anywhere","dist-tags":{"latest":"5.0.0-beta.0"},"versions":{"5.0.0-beta.0":{"name":"@benedictyappy/gatsby-remark-images-anywhere","version":"5.0.0-beta.0","description":"Handle images with relative, absolute, remote path for gatsby-transformer-remark","main":"index.js","scripts":{"build":"tsc -p ."},"repository":{"type":"git","url":"git+https://github.com/benedictjohannes/gatsby-remark-images-anywhere.git"},"keywords":["gatsby","gatsby-plugin","remark","remark-images"],"author":{"name":"Benedict Yappy","email":"benedict@encelerate.com"},"license":"MIT","bugs":{"url":"https://github.com/benedictjohannes/gatsby-remark-images-anywhere/issues"},"homepage":"https://github.com/benedictjohannes/gatsby-remark-images-anywhere.git","devDependencies":{"typescript":"^5.0.0"},"dependencies":{"parse5":"^5.1.0","slash":"^3.0.0","unist-util-select":"^3.0.4"},"peerDependencies":{"gatsby":"^5.0.0","gatsby-source-filesystem":"^5.0.0","gatsby-plugin-sharp":"^5.0.0"},"_id":"@benedictyappy/gatsby-remark-images-anywhere@5.0.0-beta.0","gitHead":"d428eedf16aa883766c87e361f2113362e37dacb","_nodeVersion":"18.18.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-m5mNNgzk3VIoCeiEsY7ecSQyLt9laWwBML2xHkn7yYPlUcHTplg+w+UOHIZNylOYATpFTKDkGuGhB24iIiIe5Q==","shasum":"29aa18d80384aae4afdc5a60a283447636b56610","tarball":"https://registry.npmjs.org/@benedictyappy/gatsby-remark-images-anywhere/-/gatsby-remark-images-anywhere-5.0.0-beta.0.tgz","fileCount":9,"unpackedSize":19984,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/O1nPWd7qabZiGPsbjrf26b2qIi/LGASZ3HRTquM0jQIhAPMWGYTChGPY32HPdfgx+t4yBaYZv4j7UOt202hnXwX4"}]},"_npmUser":{"name":"benedictyappy","email":"yappy.benedict@gmail.com"},"directories":{},"maintainers":[{"name":"benedictyappy","email":"yappy.benedict@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-remark-images-anywhere_5.0.0-beta.0_1696876952088_0.738702126045631"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-09T18:42:31.981Z","5.0.0-beta.0":"2023-10-09T18:42:32.301Z","modified":"2023-10-09T18:42:32.559Z"},"maintainers":[{"name":"benedictyappy","email":"yappy.benedict@gmail.com"}],"description":"Handle images with relative, absolute, remote path for gatsby-transformer-remark","homepage":"https://github.com/benedictjohannes/gatsby-remark-images-anywhere.git","keywords":["gatsby","gatsby-plugin","remark","remark-images"],"repository":{"type":"git","url":"git+https://github.com/benedictjohannes/gatsby-remark-images-anywhere.git"},"author":{"name":"Benedict Yappy","email":"benedict@encelerate.com"},"bugs":{"url":"https://github.com/benedictjohannes/gatsby-remark-images-anywhere/issues"},"license":"MIT","readme":"# Gatsby Remark Images Anywhere\n\nGet image from anywhere in your markdown:\n\n```\n---\ntitle: Hello World\n---\n\n# Regular relative path\n![relative path](./image.png)\n\n# NetlifyCMS path\n![relative from root path](/assets/image.png)\n\n# Remote path\n![cloud image](https://images.unsplash.com/photo-1563377176922-062e6ae09ceb)\n\n# Protocol relative path*\n![cloud image](//images.ctfassets.net/1311eqff/image.png)\n\n# Any of the above also works with <img />\n<img src=\"./image.png\" alt=\"hey\" title=\"hello\" />\n\n```\n\n## Why\n\n`gatsby-remark-images` is awesome, but it doesn't work for images that isn't relative to the markdown file itself, it won't work. [The original package](https://github.com/d4rekanguok/gatsby-remark-images-anywhere) tried to solve this by adding support to both relative-path and URL markdown images. However, it was archived and it doesn't work with Gatsby v5. This fork attempts to update the plugin and solve the compatibility issues. New features might be added along the way.\n\n\n- [ ] doesn't blur in or fade in image\n- [x] ~~doesn't render fancy lazy load image~~ update: it now does via the `loading` html attribute.\n- [x] will take any image paths as mentioned above & feed them to `sharp`\n- [x] allow you to pass in more customized sharp methods (`fix`, `fluid`, `resize`)\n- [x] allow you to write your own image template (so you can implement the stuff above by yourself, though I do want to support those by default)\n\n\n### Protocol relative path\nSee the whitelisted list [here](./src/relative-protocol-whitelist.ts)\n\n## Installation\n\n```bash\nyarn add @benedictyappy/gatsby-remark-images-anywhere\n# or\nnpm install @benedictyappy/gatsby-remark-images-anywhere\n```\n\n```js\n//gatsby-config.js\n{\n  resolve: `gatsby-transformer-remark`,\n  options: {\n    plugins: [\n      `gatsby-remark-images-anywhere`\n    ],\n  },\n},\n\n```\n\n#### Requirement\nYour projects need to have...\n - gatsby(!)\n - gatsby-source-filesystem\n - gatsby-transformer-remark\n - gatsby-transformer-sharp\n - gatsby-plugin-sharp\n\n\n## Configuration\n\n```js\n{\n  resolve: `gatsby-remark-images-anywhere`,\n  options: {\n    /**\n     * @param {string} staticDir\n     * Root folder for images. For example,\n     * if your image path is `/assets/image.png`,\n     * your image is located in `static/assets/image.png`,\n     * then the staticDir is `static`.\n     * You can also point it to whichever else folder you have locally.\n     */\n    staticDir: 'static',\n\n    /**\n     * @param {Function} createMarkup\n     * A function that return string template for image\n     * All sharp result will be passed in as arguments\n     */\n    createMarkup: ({ src, srcSet }) => `<img src=\"${src}\" srcSet=\"${srcSet}\" class=\"hey\" />`,\n\n    /**\n     * @param {'lazy' | 'eager' | 'auto'} loading \n     * Set the output markup's 'loading' attribute. Default: 'lazy'\n     */\n    loading: 'lazy',\n\n    /**\n     * @param {string} backgroundColor\n     * Background color. Default: '#fff'\n     */\n    backgroundColor: '#fff',\n\n    /**\n     * @param {boolean} linkImagesToOriginal \n     * If enabled, wraps the default markup with an <a> tag pointing to the original image.\n     * Default: false\n     */\n    linkImagesToOriginal: true,\n\n    /**\n     * @param {string | Function} wrapperStyle \n     * Inject styles to the image wrapper.\n     * Also accept a function that receives all image data as arguments, i.e\n     * ({ aspectRatio, width, height }) => `padding-bottom: ${height/2}px;`\n     * Alternatively you can also attach additional class to `.gria-image-wrapper`\n     */\n    wrapperStyle: 'padding-bottom: 0.5rem;',\n\n    /**\n     * @param {'fluid' | 'fixed' | 'resize'} sharpMethod\n     * Default: 'fluid'.\n     */\n    sharpMethod: 'fluid',\n\n    /**\n     * ...imageOptions\n     * and any sharp image arguments (quality, maxWidth, etc.)\n     */\n    maxWidth: 650,\n    quality: 50,\n  }\n}\n```\n\n## Writing your own markup\n\nHere's the `createMarkup` signature:\n```ts\ntype CreateMarkup = (args: CreateMarkupArgs, options?: MarkupOptions) => string;\n\ninterface CreateMarkupArgs {\n  sharpMethod: SharpMethod;\n  originSrc: string;\n  title?: string;\n  alt?: string;\n\n  aspectRatio: number;\n  src: string;\n  srcSet?: string;\n  srcWebp?: string;\n  srcSetWebp?: string;\n  base64?: string;\n  tracedSVG?: string;\n  \n  // fixed, resize\n  width?: number;\n  height?: number;\n\n  // fluid\n  presentationHeight?: number;\n  presentationWidth?: number;\n  sizes?: string;\n  originalImg?: string;\n}\n\ninterface MarkupOptions {\n  loading: 'lazy' | 'eager' | 'auto';\n  linkImagesToOriginal: boolean;\n  showCaptions: boolean;\n  wrapperStyle: string | Function;\n  backgroundColor: string;\n  tracedSVG: boolean | Object;\n  blurUp: boolean;\n}\n```\n\n\n## Example usage\n\n- [Codesandbox demo](https://codesandbox.io/s/gatsby-remark-images-anywhere-remark-custom-component-lazy-load-007vo) of using this plugin in combination with [`gatsby-transformer-remark` custom component](https://using-remark.gatsbyjs.org/custom-components/) to achieve `gatsby-image`-like benefits (blur up, lazy loading, aspect-ratio).\n","readmeFilename":"readme.md"}