refactor!: migrate core features to nuxt-seo-utils

Author: harlan-zw

package.json

@@ -44,17 +44,14 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.13.2",
-    "@nuxtjs/robots": "^4.1.7",
-    "@nuxtjs/sitemap": "^6.1.1",
-    "defu": "^6.1.4",
+    "@nuxtjs/robots": "^4.1.8",
+    "@nuxtjs/sitemap": "^6.1.2",
     "nuxt-link-checker": "^3.1.2",
-    "nuxt-og-image": "^3.0.3",
+    "nuxt-og-image": "^3.0.4",
     "nuxt-schema-org": "^3.4.0",
-    "nuxt-seo-experiments": "^4.0.1",
+    "nuxt-seo-utils": "^5.0.0",
     "nuxt-site-config": "^2.2.18",
-    "nuxt-site-config-kit": "^2.2.18",
-    "pkg-types": "^1.2.0",
-    "ufo": "^1.5.4"
+    "nuxt-site-config-kit": "^2.2.18"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.7.3",

pnpm-lock.yaml

@@ -0,0 +1,91 @@
+export interface NuxtSEOModule {
+  slug: 'nuxt-seo' | 'site-config' | 'robots' | 'sitemap' | 'og-image' | 'link-checker' | 'seo-utils' | 'schema-org'
+  label: string
+  icon: string
+  description: string
+  repo: string
+  npm: string
+}
+
+export const NuxtSEO: NuxtSEOModule = {
+  slug: 'nuxt-seo',
+  label: 'Nuxt SEO - All-in-One',
+  icon: 'i-carbon-settings-check',
+  description: 'All the boring SEO work for Nuxt done.',
+  repo: 'harlan-zw/nuxt-seo',
+  npm: '@nuxtjs/seo',
+}
+
+export const SiteConfigModule: NuxtSEOModule = {
+  slug: 'site-config',
+  label: 'Site Config',
+  icon: 'i-carbon-settings-check',
+  description: 'Powerful build and runtime shared site configuration for Nuxt modules.',
+  repo: 'harlan-zw/nuxt-site-config',
+  npm: 'nuxt-site-config',
+}
+
+export const RobotsModule: NuxtSEOModule = {
+  slug: 'robots',
+  label: 'Robots',
+  icon: 'i-carbon-bot',
+  description: 'Tame the robots crawling and indexing your site with ease.',
+  repo: 'nuxt-modules/robots',
+  npm: '@nuxtjs/robots',
+}
+
+export const SitemapModule: NuxtSEOModule = {
+  slug: 'sitemap',
+  label: 'Sitemap',
+  icon: 'i-carbon-load-balancer-application',
+  description: 'Powerfully flexible XML Sitemaps that integrate seamlessly.',
+  repo: 'nuxt-modules/sitemap',
+  npm: '@nuxtjs/seo',
+}
+
+export const OgImageModule: NuxtSEOModule = {
+  slug: 'og-image',
+  label: 'OG Image',
+  icon: 'i-carbon-image-search',
+  description: 'Generate OG Images with Vue templates in Nuxt.',
+  repo: 'nuxt-modules/og-image',
+  npm: 'nuxt-og-image',
+}
+
+export const LinkCheckerModule: NuxtSEOModule = {
+  slug: 'link-checker',
+  label: 'Link Checker',
+  icon: 'i-carbon-cloud-satellite-link',
+  description: 'Find and magically fix links that may be negatively effecting your SEO.',
+  repo: 'harlan-zw/nuxt-link-checker',
+  npm: 'nuxt-link-checker',
+}
+
+export const SeoExperimentsModule: NuxtSEOModule = {
+  slug: 'seo-utils',
+  label: 'SEO Utils',
+  icon: 'i-carbon-tools',
+  description: 'SEO utilities to improve your Nuxt sites discoverability and shareability.',
+  repo: 'harlan-zw/nuxt-seo-utils',
+  npm: 'nuxt-seo-utils',
+}
+
+export const SchemaOrgModule: NuxtSEOModule = {
+  slug: 'schema-org',
+  label: 'Schema.org',
+  icon: 'i-carbon-chart-relationship',
+  description: 'The quickest and easiest way to build Schema.org graphs.',
+  repo: 'harlan-zw/nuxt-schema-org',
+  npm: 'nuxt-schema-org',
+}
+
+export const modules: NuxtSEOModule[] = [
+  NuxtSEO,
+  RobotsModule,
+  SitemapModule,
+  OgImageModule,
+  SchemaOrgModule,
+  LinkCheckerModule,
+  SeoExperimentsModule,
+  SiteConfigModule,
+]

src/const.ts

@@ -1,202 +1,33 @@
 import {
-  addImports,
-  addPlugin,
-  addServerHandler,
-  createResolver,
   defineNuxtModule,
-  hasNuxtModule,
   installModule,
-  useLogger,
+  resolvePath,
 } from '@nuxt/kit'
-import { colors } from 'consola/utils'
-import { installNuxtSiteConfig } from 'nuxt-site-config-kit'
-import { $fetch } from 'ofetch'
-import { readPackageJSON } from 'pkg-types'
+import { modules } from './const'
 
 export interface ModuleOptions {
-  /**
-   * Will ensure a title is always set by providing a fallback title based on the casing the last slug segment.
-   *
-   * @default true
-   */
-  fallbackTitle?: boolean
-  /**
-   * Will set up a number of defaults for meta tags and Schema.org, if the modules and config are available.
-   *
-   * @default true
-   */
-  automaticDefaults?: boolean
-  /**
-   * When enabled, it will whitelist the query parameters that are allowed in the canonical URL.
-   */
-  canonicalQueryWhitelist?: string[]
-  /**
-   * When enabled, it will redirect any request to the canonical domain (site url) using a 301 redirect on non-dev environments.
-   *
-   * E.g if the site url is 'www.example.com' and the user visits 'example.com',
-   * they will be redirected to 'www.example.com'.
-   *
-   * This is useful for SEO as it prevents duplicate content and consolidates page rank.
-   *
-   * @default false
-   */
-  redirectToCanonicalSiteUrl?: boolean
   /**
    * Whether the module should be loaded.
    */
   enabled: boolean
-  /**
-   * Whether the debugging mode should be enabled.
-   *
-   * @default `nuxt.options.debug`
-   */
-  debug: boolean
-  /**
-   * Whether the Nuxt SEO splash should be shown when Nuxt is started.
-   *
-   * @default `nuxt.options.dev`
-   */
-  splash: boolean
 }
 
-const Modules = [
-  '@nuxtjs/robots',
-  '@nuxtjs/sitemap',
-  'nuxt-og-image',
-  'nuxt-schema-org',
-  'nuxt-seo-experiments',
-  'nuxt-link-checker',
-]
-
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: 'nuxtseo',
     compatibility: {
       nuxt: '>=3.7.0',
       bridge: false,
     },
-    configKey: 'seo',
   },
-  defaults(nuxt) {
-    return {
-      enabled: true,
-      debug: nuxt.options.debug,
-      redirectToCanonicalSiteUrl: false,
-      splash: false, // nuxt.options.dev, - figure out a solution for this in the future
-      automaticDefaults: true,
-      fallbackTitle: true,
-    }
+  defaults: {
+    enabled: true,
   },
   async setup(config, nuxt) {
-    const { resolve, resolvePath } = createResolver(import.meta.url)
-    const { name, version } = await readPackageJSON(resolve('../package.json'))
-    const logger = useLogger(name)
-    logger.level = config.debug ? 4 : 3
-    if (config.enabled === false) {
-      logger.debug('The module is disabled, skipping setup.')
+    if (!config.enabled) {
       return
     }
-
-    await installNuxtSiteConfig()
-
-    // TODO disable modules if SSR is disabled
-    // if (!nuxt.options.ssr) {
-    //   nuxt.options.schemaOrg = defu({ enabled: false}, nuxt.options.schemaOrg)
-    //   nuxt.options.ogImage = defu({ enabled: false}, nuxt.options.ogImage)
-    //   logger.warn('SSR is required for Nuxt OG Image and Nuxt Schema.org, disabling them.')
-    // }
-
-    for (const module of Modules)
-      await installModule(await resolvePath(module))
-
-    nuxt.options.runtimeConfig.public['nuxt-seo'] = {
-      canonicalQueryWhitelist: config.canonicalQueryWhitelist || [
-        'page',
-        'sort',
-        'filter',
-        'search',
-        'q',
-        'category',
-        'tag',
-      ],
-    }
-
-    if (config.automaticDefaults) {
-      // i18n complicates things, we need to run the server plugin at the right time, client is fine
-      if (hasNuxtModule('@nuxtjs/i18n')) {
-        addPlugin({
-          src: resolve(`./runtime/nuxt/plugin/defaultsWaitI18n`),
-        })
-      }
-      else {
-        addPlugin({
-          src: resolve(`./runtime/nuxt/plugin/defaults`),
-        })
-      }
-    }
-    if (config.fallbackTitle) {
-      addPlugin({
-        src: resolve('./runtime/nuxt/plugin/titles'),
-      })
-    }
-
-    if (!hasNuxtModule('@nuxtjs/i18n')) {
-      addImports({
-        from: resolve(`./runtime/nuxt/composables/polyfills`),
-        name: 'useI18n',
-      })
-    }
-
-    addImports({
-      from: resolve(`./runtime/nuxt/composables/useBreadcrumbItems`),
-      name: 'useBreadcrumbItems',
-    })
-
-    // TODO blocked by https://github.com/nuxt/nuxt/issues/25532
-    // if (nuxt.options.experimental?.defaults?.nuxtLink && typeof nuxt.options.experimental?.defaults?.nuxtLink?.trailingSlash == 'undefined')
-    //   nuxt.options.experimental.defaults.nuxtLink.trailingSlash = siteConfig.trailingSlash ? 'append' : 'remove'
-
-    // if user disables certain modules we need to pollyfill the imports
-    const polyfills: Record<string, string[]> = {
-      schemaOrg: ['useSchemaOrg', 'defineWebSite', 'defineWebPage'],
-    }
-    for (const [module, composables] of Object.entries(polyfills)) {
-      if (nuxt.options[module as keyof typeof nuxt.options]?.enable === false) {
-        composables.forEach((name) => {
-          // add pollyfill
-          addImports({
-            from: resolve('./runtime/nuxt/composables/polyfills'),
-            name,
-          })
-        })
-      }
-    }
-    nuxt.options.experimental.headNext = true
-
-    // add redirect middleware
-    if (!nuxt.options.dev && config.redirectToCanonicalSiteUrl) {
-      addServerHandler({
-        handler: resolve('./runtime/nitro/middleware/redirect'),
-        middleware: true,
-      })
-    }
-
-    if (config.splash && !version!.includes('rc') && nuxt.options.dev) {
-      logger.log('')
-      let latestTag = `v${version}`
-      latestTag = (await $fetch<any>('https://ungh.unjs.io/repos/harlan-zw/nuxt-seo/releases/latest', {
-        timeout: 2000,
-      })
-        .catch(() => {
-          return { release: { tag: `v${version}` } }
-        })).release.tag
-      const upToDate = latestTag === `v${version}`
-      logger.log(`${colors.green('Nuxt SEO')} ${colors.yellow(`v${version}`)} ${colors.gray(`by ${colors.underline('@harlan_zw')}`)}`)
-      if (!upToDate)
-        logger.log(`${colors.gray('  ├─ ')}🎉 New version available!${colors.gray(` Run ${colors.underline(`npm i @nuxtjs/seo@${latestTag}`)} to update.`)}`)
-
-      logger.log(colors.dim('  └─ 🧪 Help get Nuxt SEO stable by providing feedback https://github.com/harlan-zw/nuxt-seo/discussions/108'))
-      logger.log('')
-    }
+    for (const module of modules)
+      await installModule(await resolvePath(module.npm), {}, nuxt)
   },
 })