https://github.com/n1kk/rehype-mdsvex-image-autoimport

Rehype plugin for MDSveX to automatically turn your markdown images to local imports.
https://github.com/n1kk/rehype-mdsvex-image-autoimport

Last synced: about 5 hours ago
JSON representation

Rehype plugin for MDSveX to automatically turn your markdown images to local imports.

• Host: GitHub
• URL: https://github.com/n1kk/rehype-mdsvex-image-autoimport
• Owner: n1kk
• Created: 2022-01-11T11:14:36.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2023-10-25T14:25:00.000Z (about 1 year ago)
• Last Synced: 2024-05-30T16:40:33.603Z (6 months ago)
• Language: TypeScript
• Size: 84 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# rehype-mdsvex-image-autoimport

Rehype plugin for MDSveX to automatically turn your markdown images to local imports.

By default, it imports only images that are not web links (starts with `http(s)`) and if the file exist locally relatively to the document. But you can override resolving logic. Works with [`vite-imagetools`](https://github.com/JonasKruckenberg/imagetools) and frontmatter.

This package is an ES Module.

Usage:

```ts

import { compile } from "mdsvex";

import { rehypeMdsvexImageAutoimport } from "rehype-mdsvex-image-autoimport";

const source = `

# Title

![Image1](./img1.png)

`;

const vanilla = await compile(input.source);

// 
Title

// 


const autoImported = await compile(input.source, {

  rehypePlugins: [rehypeMdsvexImageAutoimport],

});

// ;import __img_0 from "./img1.png";

// 
Title

// 


const configured = await compile(input.source, {

  rehypePlugins: [

    [

      rehypeMdsvexImageAutoimport,

      {

        id: i => "customId" + i,

        resolve: (imageSrc, documentPath) => {

          const dir = path.dirname(documentPath);

          const file = path.basename(imageSrc);

          return `${dir}/images/${file}`;

        },

      },

    ],

  ],

});

// ;import customId0 from "./images/img1.png";

// 
Title

// 


// supports import search params for vite plugins like vite-imagetools

const preservedImportSearch = await compile(`

# Title

![Image1](./img1.png?srcset)

`);

// ;import __img_0 from "./img1.png?srcset";

// 
Title

// 


// supports frontmatter references

const frontmatterReference = await compile(`

---

thumb: ./myImage.png

---

# Title

![Image1]({thumb})

`);

//  export const metadata = {"thumb":"./myImage.png"}; const { thumb } = metadata; 

// ;import __img_0 from "./myImage.png";

// 
Title

// 


```


Options signature:

```ts

type Options = {

  /** Override generated ids for each import */

  id?: (index: number) => string;

  /** Supply your own resolver

   * string: resolved path to use for import

   * false: skip this image

   * void|undefined: use default resolver

   */

  resolve?: (imageSrc: string, documentPath: string) => string | false | void;

};

```