{"_id":"@cleancommit/gatsby-remark-relative-images","name":"@cleancommit/gatsby-remark-relative-images","dist-tags":{"latest":"2.0.6"},"versions":{"2.0.6":{"name":"@cleancommit/gatsby-remark-relative-images","version":"2.0.6","description":"Convert image src(s) in markdown to be relative to their node's parent directory. This will help gatsby-remark-images match images outside the node folder. For example, use with NetlifyCMS.","main":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"npm run clean && tsc -d","watch":"npm run clean && tsc --watch","clean":"rimraf ./dist","prepare":"npm run build"},"keywords":["gatsby","gatsby-plugin","image","markdown","relative","netlifycms","remark","responsive images"],"author":{"name":"Wojciech Kaluzny","email":"wk@mrkaluzny.com"},"license":"0BSD","dependencies":{"cheerio":"^1.0.0-rc.12","is-invalid-path":"^1.0.2","lodash":"^4.17.21","traverse":"^0.6.6","unist-util-select":"^3.0.4"},"devDependencies":{"@types/cheerio":"^0.22.21","@types/lodash":"^4.14.160","@types/node":"^14.6.0","@types/slash":"^3.0.0","@types/traverse":"^0.6.32","@types/unist":"^2.0.3","rimraf":"^3.0.2","typescript":"^4.0.2"},"repository":{"type":"git","url":"git+https://github.com/danielmahon/gatsby-remark-relative-images.git"},"bugs":{"url":"https://github.com/danielmahon/gatsby-remark-relative-images/issues"},"homepage":"https://github.com/danielmahon/gatsby-remark-relative-images#readme","_id":"@cleancommit/gatsby-remark-relative-images@2.0.6","gitHead":"6f7f1f59b2f4c0c8b208cd8e2c4b950de4783019","types":"./dist/index.d.ts","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-6ywJipBLfNLqBnYQsAKkg7gsqGiG9eXTkDcvNNz3FHV3KLPEWLY30nzet22qq8iPrQWrxluRGTmycD8KELJUsg==","shasum":"d244dbe248e47d8adfb541ba4ac17c2a18a63dc5","tarball":"https://registry.npmjs.org/@cleancommit/gatsby-remark-relative-images/-/gatsby-remark-relative-images-2.0.6.tgz","fileCount":10,"unpackedSize":17508,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXuMiSYbfSX3MQ6ncHztLX4sm+kZC6rnTb/IA8ZMYifQIhAORVYoUowI1CvRcYH+B5nzE7uZdSUmkPzgvnniErB9XG"}]},"_npmUser":{"name":"mrkaluzny","email":"wk@mrkaluzny.com"},"directories":{},"maintainers":[{"name":"mrkaluzny","email":"wk@mrkaluzny.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-remark-relative-images_2.0.6_1726747545131_0.4101427895631635"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-19T12:05:45.032Z","2.0.6":"2024-09-19T12:05:45.286Z","modified":"2024-09-19T12:05:45.585Z"},"maintainers":[{"name":"mrkaluzny","email":"wk@mrkaluzny.com"}],"description":"Convert image src(s) in markdown to be relative to their node's parent directory. This will help gatsby-remark-images match images outside the node folder. For example, use with NetlifyCMS.","homepage":"https://github.com/danielmahon/gatsby-remark-relative-images#readme","keywords":["gatsby","gatsby-plugin","image","markdown","relative","netlifycms","remark","responsive images"],"repository":{"type":"git","url":"git+https://github.com/danielmahon/gatsby-remark-relative-images.git"},"author":{"name":"Wojciech Kaluzny","email":"wk@mrkaluzny.com"},"bugs":{"url":"https://github.com/danielmahon/gatsby-remark-relative-images/issues"},"license":"0BSD","readme":"# 🛠 Hello, I need a maintainer 👩‍💻 🧑‍💻 🛠 \n\nAs you can probably see, I have not maintained, or used this package (or Gatsby for that matter) in a number of years. Frankly, I'm surprised this package still needs to exist. I have no plans to continue working on this so if you would like to take over this repo please let me know.\n\n# gatsby-remark-relative-images\n\nConvert image src(s) in markdown/html/frontmatter to be relative to their node's parent directory. This will help [gatsby-remark-images](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-images) match images outside the node folder. This was built for use with NetlifyCMS and should be considered a temporary solution until relative paths are supported. If it works for other use cases then great!\n\n### Features\n\n- [x] Converts markdown/mdx images\n- [x] Converts `src` in markdown/mdx html `<img />` tags\n- [x] Converts frontmatter fields, supports nested fields\n- [x] Suports Unicode characters\n- [x] Frontmatter field filters (include/exclude)\n\n## v2 Breaking Changes:\n\nThe `fmImagesToRelative()` function has been removed, it is no longer needed.\n\nNOTE: v2 greatly simplifies things and seems to work well for my use-case (NetlifyCMS), if you were previously using this plugin for something else that no longer works with v2, please open an issue and let me know and I will try to accomodate your use-case. Thanks.\n\n## Install\n\n```bash\n# Install v2 (Recommended)\nyarn add gatsby-remark-relative-images\n\n# Install v1 (TS refactor, but quickly found more things to simplfy, skip)\nnpm i gatsby-remark-relative-images@1.1.1\n\n# Install original (a bit hacky but have previously worked for most)\nnpm i gatsby-remark-relative-images@0.3.0\nnpm i gatsby-remark-relative-images@0.2.0\n```\n\n## Usage Example\n\nThis usage example is for v2 of this plugin.\n\n/gatsby-config.js\n\n```javascript\nmodule.exports = {\n  plugins: [\n    // Add static assets before markdown files\n    {\n      resolve: 'gatsby-source-filesystem',\n      options: {\n        path: `${__dirname}/static/uploads`,\n        name: 'uploads',\n      },\n    },\n    {\n      resolve: 'gatsby-source-filesystem',\n      options: {\n        path: `${__dirname}/src/pages`,\n        name: 'pages',\n      },\n    },\n    {\n      resolve: `gatsby-transformer-remark`,\n      options: {\n        plugins: [\n          // gatsby-remark-relative-images must go before gatsby-remark-images\n          {\n            resolve: `gatsby-remark-relative-images`,\n            options: {\n              // [Optional] The root of \"media_folder\" in your config.yml\n              // Defaults to \"static\"\n              staticFolderName: 'static',\n              // [Optional] Include the following fields, use dot notation for nested fields\n              // All fields are included by default\n              include: ['featured'],\n              // [Optional] Exclude the following fields, use dot notation for nested fields\n              // No fields are excluded by default\n              exclude: ['featured.skip'],\n            },\n          },\n          {\n            resolve: `gatsby-remark-images`,\n            options: { maxWidth: 1024 },\n          },\n        ],\n      },\n    },\n  ],\n};\n```\n\n/static/admin/config.yml\n\n```yml\n# ...\nmedia_folder: static/img\npublic_folder: /img\n# ...\n```\n\n/src/pages/blog-post.md\n\n```md\n---\ntemplateKey: blog-post\ntitle: A beginners’ guide to brewing with Chemex\ndate: 2017-01-04T15:04:10.000Z\nfeatured: { image: /img/chémex.jpg, skip: /img/chémex.jpg }\n<!-- featured: { image: ../../static/img/chémex.jpg, skip: /img/chémex.jpg } -->\ndescription: Brewing with a Chemex probably seems like a complicated, time-consuming ordeal, but once you get used to the process, it becomes a soothing ritual that's worth the effort every time.\n---\n\n![chemex](/img/chémex.jpg)\n\n<!-- ![chemex](../../static/img/chémex.jpg) -->\n\nThis week we’ll **take** a look at all the steps required to make astonishing coffee with a Chemex at home. The Chemex Coffeemaker is a manual, pour-over style glass-container coffeemaker that Peter Schlumbohm invented in 1941, and which continues to be manufactured by the Chemex Corporation in Chicopee, Massachusetts.\n\nIn 1958, designers at the [Illinois Institute of Technology](https://www.spacefarm.digital) said that the Chemex Coffeemaker is _\"one of the best-designed products of modern times\"_, and so is included in the collection of the Museum of Modern Art in New York City.\n\n## The little secrets of Chemex brewing\n\n<img src=\"/img/chémex.jpg\" alt=\"\" style=\"width: 250px\" />\n<!-- <img src=\"../../static/img/chémex.jpg\" alt=\"\" style=\"width: 250px\" /> -->\n\nThe Chemex Coffeemaker consists of an hourglass-shaped glass flask with a conical funnel-like neck (rather than the cylindrical neck of an Erlenmeyer flask) and uses proprietary filters, made of bonded paper (thicker-gauge paper than the standard paper filters for a drip-method coffeemaker) that removes most of the coffee oils, brewing coffee with a taste that is different than coffee brewed in other coffee-making systems; also, the thicker paper of the Chemex coffee filters may assist in removing cafestol, a cholesterol-containing compound found in coffee oils.\n```\n\n## FAQs\n\n### I'm getting the error: Field \"image\" must not have a selection since type \"String\" has no subfields\n\nThis is a common error when working with Netlify CMS (see issue [gatsby/gatsby#5990](https://github.com/gatsbyjs/gatsby/issues/5990)).\n\nThe application must include the `media` with `gatsby-source-filesystem` to include all the uploaded media and to make it available on build time. **Note:** The media folder must be included **before** the other content.\n\nFor example, an application that is using NetlifyCMS and this plugin, and has a content folder with markdown that comes from Netlify. Here's how the `gatsby-config.js` should look like:\n\n```js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        path: `${__dirname}/static/assets`,\n        name: 'assets',\n      },\n    },\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        path: `${__dirname}/src/content`,\n        name: 'content',\n      },\n    },\n    `gatsby-transformer-sharp`,\n    `gatsby-plugin-sharp`,\n    {\n      resolve: `gatsby-transformer-remark`,\n      options: {\n        plugins: [\n          `gatsby-remark-relative-images`,\n          {\n            resolve: `gatsby-remark-images`,\n            options: {},\n          },\n        ],\n      },\n    },\n    `gatsby-plugin-netlify-cms`,\n  ],\n};\n```\n","readmeFilename":"README.md"}