Sveltekit Data Plugin

Quite a mouthful. This tries to be a plugin for importing data easily, including the elephant in the room, images.

This is designed to use with @sveltejs/enhanced-img and will turn your image assets into valid Picture objects to pass directly to your <enhanced:img/> components, from markdown files in a folder, generated by something like Netlify CMS

Install

npm install -D sveltekit-data-plugin

Usage

In your vite.config.js file

import SveltekitData from 'sveltekit-data-plugin';
import { enhancedImages } from '@sveltejs/enhanced-img';

export default defineConfig({
    plugins: [
        SveltekitData(enhancedImages()),
  ]
})

This is optional, but creating a data alias in svelte.config.js is also nice for this

const config = {
    kit: {
        alias: {
            $data: './src/data'
        },
    },
};

export default config;

Then you can import a markdown file in a page.js, or whatever, like

/** @type {import('./$types').PageLoad} */
export async function load() {
    const d = await import('$data/home.md').then((mod) => mod.default);

    return d;
}

And you will get a front-matter parsed markdown file