Refactoring _meta.json to _meta.js

[JohnUW42]

Hi!

Nextra's documentation prefers _meta.json over _meta.js:

https://nextra.site/docs/guide/organize-files#_metajson

But I would like to use JS over JSON in order to use comments:

#1455

As a non-coder I did not figure out how to validly refactor the following JSON code to JS.

ChatGPT did not help me either with this.

Would you please be so kind and show me how the JSON config below is converted to valid JS config.

Thank you very much!

{
  "index": "Introduction",
  "another": "Another Page",
  "extract-images-from-word-document": {
    "title": "XXXXZ",
    "theme": {
      "layout": "full",
      "breadcrumb": true,
      "footer": true,
      "sidebar": false,
      "toc": true,
      "pagination": false
    }
  },
  "advanced": "Advanced (A Folder)",
  "about": {
    "title": "About",
    "type": "page"
  },
  "contact": {
    "title": "Contact ↗",
    "type": "page",
    "href": "https://twitter.com/shuding_",
    "newWindow": true
  }
}

[dimaMachina]

export an object from your _meta.js as default export

[JohnUW42]

I appreciate your responses and that you make work for them (i.e. your answers are designed to make me learn on my own)!

So far I tried the following two variants, without success.

Will try to to hunt for some existing _meta.js configs.

There is one here, but I could figure out what's going on there:

https://github.com/shuding/nextra/blob/a683c84bee6d4979ee45b4da5c522e1d4400e7c3/examples/swr-site/pages/remote/graphql-eslint/_meta.js

I did learn to put the ";" at the end, though! :-)

Try 1

export default {
  "index": "Introduction",
  "another": "Another Page",
  "extract-images-from-word-document": {
    "title": "XXXXZ",
    "theme": {
      "layout": "full",
      "breadcrumb": true,
      "footer": true,
      "sidebar": false,
      "toc": true,
      "pagination": false
    }
  },
  "advanced": "Advanced (A Folder)",
  "about": {
    "title": "About",
    "type": "page"
  },
  "contact": {
    "title": "Contact ↗",
    "type": "page",
    "href": "https://twitter.com/shuding_",
    "newWindow": true
  }
};

Try 2

module.exports = {
  "index": "Introduction",
  "another": "Another Page",
  "extract-images-from-word-document": {
    "title": "XXXXZ",
    "theme": {
      "layout": "full",
      "breadcrumb": true,
      "footer": true,
      "sidebar": false,
      "toc": true,
      "pagination": false
    }
  },
  "advanced": "Advanced (A Folder)",
  "about": {
    "title": "About",
    "type": "page"
  },
  "contact": {
    "title": "Contact ↗",
    "type": "page",
    "href": "https://twitter.com/shuding_",
    "newWindow": true
  }
};

[JohnUW42]

Did another try — still does does not build.

Also added the line below to package.json as per suggestion on ChatGPT:

"type": "module"

Try 3:

export default async () => {
const config = {
  "index": "Introduction",
  "another": "Another Page",
  "extract-images-from-word-document": {
    "title": "XXXXZ",
    "theme": {
      "layout": "full",
      "breadcrumb": true,
      "footer": true,
      "sidebar": false,
      "toc": true,
      "pagination": false
    }
  },
  "advanced": "Advanced (A Folder)",
  "about": {
    "title": "About",
    "type": "page"
  },
  "contact": {
    "title": "Contact ↗",
    "type": "page",
    "href": "https://twitter.com/shuding_",
    "newWindow": true
  }
};
};