feat: add directus provider

[sandros94]

Lately I started experimenting with Directus Headless CMS and to my surprise it has a nice implementation and usage of sharp.

So I decided to add it as a provider for ease of use.

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for nuxt-image-v1 ready!

Name	Link
🔨 Latest commit	da75443
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-image-v1/deploys/6479ab8d1145020008411269
😎 Deploy Preview	https://deploy-preview-787--nuxt-image-v1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
Image	Edit on Studio ↗︎	View Live Preview	da75443

[sandros94]

✅ Live Preview ready!

Name Edit Preview Latest Commit
Image Edit on Studio ↗︎ View Live Preview b5edae4

I really can't wait to test nuxt.studio 🥲

[genu]

LGTM

[danielroe]

Would you be able to merge the latest main and add snapshots/expected values for directus? 🙏

[sandros94]

Would you be able to merge the latest main and add snapshots/expected values for directus?

I've yet never used/created vitest, but there is always a first time right?
I've looked into the commit you did about the tests. Since fully testing directus provider should need a custom test like strapi (with a full directus+db deploy), I should go for the expected values right?

I should add the entry inside the e2e/__snapshots__/*ssr.test.ts.snap, add to provider-coverage.test.ts:

const missingProviderTests = [
  'directus', // covered in a unique test
  'strapi', // covered in a unique test
  'layer0' // backwards-compatible alias for edgio
]

and what else?

[danielroe]

You could add entries for directus in this file:

image/test/providers.ts

Lines 2 to 23 in 28f550d

	{
	args: ['/test.png', {}],
	ipx: { url: '/_ipx/_/test.png' },
	cloudflare: { url: '/test.png' },
	cloudinary: { url: '/f_auto,q_auto/test' },
	twicpics: { url: '/test.png' },
	fastly: { url: '/test.png' },
	glide: { url: '/test.png' },
	gumlet: { url: '/test.png' },
	imgix: { url: '/test.png' },
	imageengine: { url: '/test.png' },
	unsplash: { url: '/test.png' },
	imagekit: { url: '/test.png' },
	netlify: { url: '/test.png' },
	prismic: { url: '/test.png?auto=compress,format&rect=0,0,200,200&w=100&h=100' },
	sanity: { url: 'https://cdn.sanity.io/images/projectid/production/test-300x450.png?auto=format' },
	contentful: { url: '/test.png' },
	cloudimage: { url: 'https://demo.cloudimg.io/v7/test.png' },
	edgio: { url: 'https://opt.moovweb.net/?img=/test.png' },
	storyblok: { url: 'https://a.storyblok.com/test.png' },
	vercel: { url: '/_vercel/image?url=/test.png&w=1536&q=100' }
	},

Only use the approach I adopted for strapi if these entries really don't make sense (strapi doesn't really support most of the options that we were testing there).

If you think it needs more testing, then you can also add additional tests in the providers.test.ts file.

[sandros94]

Only use the approach I adopted for strapi if these entries really don't make sense (strapi doesn't really support most of the options that we were testing there).

Directus does support all the listed ones inside providers.ts.
But before I add it there, I would like to ask if the test.png is needed or not, because Directus uses the file-id from the db to reference to the asset storage, the actual name of the file isn't needed and its mainly for download and SEO.

The location of your actual file originals is based on the project's configuration, but you can consistently access them via the API using the following URL.

example.com/assets/<file-id>
example.com/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4

SEO - You can provide an optional filename after the UUID to optimize for SEO, for example:

example.com/assets/<file-id>/<filename>
example.com/assets/1ac73658-8b62-4dea-b6da-529fbc9d01a4/directus-logo.png

This optional filename is also used in the Content-Disposition header when the ?download query parameter is used.

Any options and transformations are added as query parameters to the url.

[danielroe]

test.png is just meant to be an example file name. It doesn't need to show up in the generated URL if that's not how directus works 👍

[sandros94]

Ok, so the last commit should do it

[sandros94]

I wanted to test things one last time in the playground, but I cannot make it to work anymore (last time was when I created the PR).

I do have corepack enabled and I'm following the readme, I see that a node process start to work but the nuxt server never actaully starts 🫤

It hangs here:

[danielroe]

Would you run pnpm i to ensure you're running the latest dependencies?

[sandros94]

Would you run pnpm i to ensure you're running the latest dependencies?

Pulled latest commits, pnpm i and now is working.

I started a Directus test via docker and the requests are perfectly fulfilled.
IMO we are ready to go

[pi0]

This is a little bit inconsistent with other providers using ufo utils but should be fine...

[sandros94]

Thanks for the note. I'm not yet familiar with ufo, but since it is on my learning list I'll try to update this once I'm more confident

[pi0]

Haven't locally tried but looks 💯