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 data = await import('$data/home.md');

    return {...data};
}

And you will get a front-matter parsed markdown file. The await and subsequent spread are necessary, to satisfy sveltekit because the import pulls in the data as getters and throws an error