[Feature]: More Transformers and Custom Transformers

[thombruce]

Feature request

Problem:

I've added a custom transformer directly to TNT Content that was really only intended for use on thombruce.com. Why? Because the transformer needs to be listed in modules before Nuxt Content. Since thombruce.com inherits the Nuxt Content module from TNT Content via the extends value, I faced a minor predicament.

A Halfway Solution:

I could fork TNT and maintain a separate repo specifically for my personal site. To this I could add as many custom transformers as I like, and when I update TNT I would simply merge those changes into my downstream clone.

A More Ideal (But Hard, Maybe Impossible) Solution:

Obviously I would prefer to add my custom transformers directly to my site's repo while also still using TNT Content.

To achieve this, I would need a way to inject the transformers ahead of the extends which adds the Nuxt Content module.

Could this... technically be achieved by authoring the transformer as a layer as well? If it comes before TNT Content in the extends list, maybe that solves my problem...

That still isn't adding the transformers directly to my downstream project though...

You can extend from a local layer (see: https://nuxt.com/docs/getting-started/layers):

export default defineNuxtConfig({
  extends: [
    '../base',                     // Extend from a local layer
    '@my-themes/awesome',          // Extend from an installed npm package
    'github:my-themes/awesome#v1', // Extend from a git repository
  ]
})

So maybe if thombruce.com had a ./layers dir with my Fountain transformer written as a Nuxt Layer... that could potentially be invoked ahead of TNT Content in the extends list.

And if that works...

...it would open up the possibility of authoring additional TNT modules as layers, with custom transformers for... CSVs, text files, you name it...

Do note that one of the features of my transformer module is a custom [...slug].vue. This complicates matters as it would forbid TNT Content from ever having one of its own, and it would mean conflicts with other layers doing the same thing.

We could potentially resolve that by... rethinking how we tell TNT Content what "layout" to use. This doesn't necessarily need to be done in the template file. We could instead push our custom layout value at the time of transformation.

That might be a good first step!

Code of Conduct

• I agree to follow this project's Code of Conduct

[thombruce]

Well yeah, layout can simply be added to the transformer:

import { defineTransformer } from '@nuxt/content/transformers'

import fountain from '@thombruce/fountainjs'

export default defineTransformer({
  name: 'transformer',
  extensions: ['.fountain'],
  parse (_id, rawContent: String) {
    return {
      _id,
      layout: 'fountain',
      body: fountain.parse(rawContent),
    }
  }
})

I've removed the custom [...slug].vue template and we are now once again using the injected Document Driven template native to Nuxt Content.

Next Steps

I guess see if the custom transformer and layout can be moved to a new custom layer and added to extends ahead of TNT Content. If this works, that really is all there is to this.

[thombruce]

So, that all works and it's very easy for me to add custom transformers to my own site using that layers pattern.

If I want to add transformers to TNT Content, I can... simply do it the old way or I can follow the same layers pattern. I have no plans to add any particular transformers to TNT Content at this time.