Add support for custom parsers

[Rednas83]

Is your feature request related to a problem? Please describe

Not able to add custom parsers like with v1 to also support files like txt or xlsx

Describe the solution you'd like

// https://docs.sheetjs.com/docs/demos/content/#nuxtjs
import { readFile, utils } from 'xlsx'

const parseTxt = file => file.split('\n').map(line => line.trim())
const parseSheet = (file, { path }) => {
  // `path` is a path that can be read with `XLSX.readFile`
  const wb = readFile(path)
  const o = wb.SheetNames.map(name => ({ name, data: utils.sheet_to_json(wb.Sheets[name]) }))
  return { data: o }
}

export default defineNuxtConfig({
  // https://content.nuxtjs.org/configuration
  content: {
    extendParser: {
      '.txt': parseTxt,
      '.xlsx': parseSheet
    }
  }
})

[farnabaz]

In Content v2 you can create custom transformers to parse and transformer. see: https://content.nuxtjs.org/api/advanced#transformers

[arkhaiel]

In Content v2 you can create custom transformers to parse and transformer. see: https://content.nuxtjs.org/api/advanced#transformers

@farnabaz I just tried to copy/paste the example from this webpage and I can't manage to make it work. Is the example still correct ? Could you explain where to put the files ? The doc doesn't explain much. For example, the first line of my-transformer.ts generates an error :

TS2307: Cannot find module '@nuxt/content/transformers' or its corresponding type declarations.

When I run npm run dev I have an error : Cannot start nuxt : Cannot find module '~/my-module/my-module.mjs'

I've never worked with nuxt modules so I'm lost, and unfortunately cannot rely on the doc since I can't make the only example working.

Thanks a lot !!

[SheetJSDev]

The following modified steps should work in dev mode:

1. set up project

npx nuxi init content-app -t content
cd content-app 
npx yarn install
npx yarn add --dev @nuxt/content

2. save the following to nuxt.config.ts:

import MyModule from './my-module'

export default defineNuxtConfig({
  modules: [
    MyModule,
    '@nuxt/content'
  ],
  content: {
    // https://content.nuxtjs.org/api/configuration
  }
})

3. save the following to my-module.ts at the root of the project:

import { resolve } from 'path'
import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (_options, nuxt) {
    nuxt.options.nitro.externals = nuxt.options.nitro.externals || {}
    nuxt.options.nitro.externals.inline = nuxt.options.nitro.externals.inline || []
    nuxt.options.nitro.externals.inline.push(resolve('./my-module'))
    // @ts-ignore
    nuxt.hook('content:context', (contentContext) => {
      contentContext.transformers.push(resolve('./my-transformer.ts'))
    })
  }
})

4. save the following to my-transformer.ts at the root of the project:

import { defineTransformer } from "@nuxt/content/transformers/utils"

export default defineTransformer({
  name: 'my-transformer',
  extensions: ['.names'],
  parse (_id, rawContent) {
    return {
      _id,
      body: rawContent.trim().split('\n').map(line => line.trim()).sort()
    }
  }
})

5. save the following to test.names:

foo
bar

6. run npx yarn run dev and open a browser to http://localhost:3000/test

7. add a line to test.names and save the file. observe the page refreshes

[arkhaiel]

Thanks @SheetJSDev, thanks to you I could make this work ! I thought I could this way import images that come with the markdown files on the github repo I fetch through the content.sources property, but indeed it creates a folder for each image, and index.html and _payload.js files, and still no image. Maybe you have a hint to help me on this one ?

[platform-kit]

@SheetJSDev thanks for your comment above. Between that and the nuxt docs, I was able to create a transformer that parses the body. However I don't see any indication about how transform the object, i.e. add new fields. Any pointers?

The docs mention a transform method but don't explain how to use it.

[Rednas83]

@platform-kit Perhaps you can use zod for transforming the body?

Something like https://www.totaltypescript.com/tutorials/zod/zod-section/transform