Content: use content theme on existing nuxt project

[softmarshmallow]

https://github.com/nuxt/content/edit/dev/docs/content/en/themes-docs.md

this example is outdated and wont work.

import theme from '@nuxt/content-theme-docs'

export default theme({
  env: {
    GITHUB_TOKEN: process.env.GITHUB_TOKEN
  },
  loading: { color: '#48bb78' },
  generate: {
    fallback: '404.html', // for Netlify
    routes: ['/'] // give the first url to start crawling
  },
  i18n: {
    locales: () => [{
      code: 'fr',
      iso: 'fr-FR',
      file: 'fr-FR.js',
      name: 'Français'
    }, {
      code: 'en',
      iso: 'en-US',
      file: 'en-US.js',
      name: 'English'
    }],
    defaultLocale: 'en'
  },
  buildModules: [
    ['@nuxtjs/google-analytics', {
      id: 'UA-12301-2'
    }]
  ]
})

with..

real world example config

import colors from 'vuetify/es5/util/colors'

export default {
  /*
  ** Nuxt rendering mode
  ** See https://nuxtjs.org/api/configuration-mode
  */
  mode: 'universal',
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  target: 'static',
  router: {
    // for deploying on github pages
    base: '/bridged.io/'
  },

  /*
  ** Headers of the page
  ** See https://nuxtjs.org/api/configuration-head
  */
  head: {
    titleTemplate: '%s - ' + process.env.npm_package_name,
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Global CSS
  */
  css: [],
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [],
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  components: true,
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/vuetify',
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    // Doc: https://github.com/nuxt/content
    '@nuxt/content',
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {},
  /*
  ** Content module configuration
  ** See https://content.nuxtjs.org/configuration
  */
  content: {},
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        light: {
          primary: "#ED6570",
          accent: colors.grey,
          secondary: colors.amber,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        },
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
  }
}

when i wrap that config with theme(config), below error will show

 FATAL  server.handleUpgrade() was called more than once with the same socket, possibly due to a misconfiguration

  at WebSocketServer.completeUpgrade (node_modules/ws/lib/websocket-server.js:267:13)
  at WebSocketServer.handleUpgrade (node_modules/ws/lib/websocket-server.js:245:10)
  at WS.handleUpgrade (node_modules/@nuxt/content/lib/ws.js:21:21)
  at WS.hook (node_modules/@nuxt/content/lib/ws.js:11:14)
  at fn (node_modules/hookable/dist/hookable.js:118:45)
  at promise.then (node_modules/hookable/dist/hookable.js:18:61)
  at process._tickCallback (internal/process/next_tick.js:68:7)

[benjamincanac]

Hi @softmarshmallow, you don't need to specify all of this, check out the default config here: https://github.com/nuxt/content/blob/dev/packages/theme-docs/src/index.js.

Could you provide a reproduction link?

[softmarshmallow]

what i meant was export default config works, but export default theme(config) raises the error. seems like a old documentation problem to me isn't it?

the use case is "trying to add docs theme in existing nuxt project."

[benjamincanac]

@softmarshmallow The documentation is up-to-date, the @nuxt/content-theme-docs package was released last week.

You can check for a real world example in the @nuxt/content docs code.

Maybe something went wrong with the router.base. Please provide a reproduction link so we can help you.

[softmarshmallow]

@benjamincanac thanks, Alright, here is the repo link. the error-causing line is not included simply wrapping current config with theme() will raise the same one.

https://github.com/softmarshmallow/bridged.io

[benjamincanac]

@softmarshmallow You can't use the theme inside an existing project, in your repository you already declared some pages, layouts, ... The @nuxt/content-theme-docs is a full Nuxt.js app already, here is the documentation.

[softmarshmallow]

Well then can i not use theme only for nuxt content? actually the theme is for prettifying the .md contents. (as i know)
Is it by design or are you planning to support content theme compatible with existing nuxt proj?
@benjamincanac

[benjamincanac]

@softmarshmallow No it is by design, it's a theme to create a documentation website, check out these showcases: https://content.nuxtjs.org/themes/docs#showcases

[softmarshmallow]

It'll be great if docs theme is supported with portion. (Honestly i don't understand why that was by design)
But anyway great thanks for helping me out!

[benjamincanac]

@softmarshmallow In that case you should directly use your own implementation of @nuxt/content with the TailwindCSS typography plugin.

[softmarshmallow]

tried it, cannot find a way to integrate it with existing project. if it needs to be done by actually adding tailwind css tags, than it will be no use. some magic plugin that enables only applies to generated content might be great. any ways or plan on this?

[kissu]

Agreed that a docs theme inside of an existing nuxt project would be amazing ! ⭐