Sitemap Generator Personal Project

Nuxt Module / 2022 / 2

Mapple is a TypeScript Nuxt module that will build and put an XML sitemap at /sitemap.xml using a combination of optional static, dynamic, and generated routes. All pages without parameters in their paths will be inserted automatically (i.e. pages/blog.vue), and when useContent is enabled, the content folder is scanned for .md files, and added to the sitemap.

Installation

yarn add nuxt-mapple

Add the module to your nuxt.config.ts:

modules: ['nuxt-mapple'],

Usage

Static Paths

You can list static paths manually in your nuxt.config.ts, in an array of relative paths:

defineNuxtConfig({
  mapple: {
    basePath: 'https://l422y.com',
    static: [
      '/projects/mtv/the-buried-life-storefront',
      '/projects/travelers/umbrella-hall',
      '/projects/mayo-clinic/mayo-clinic-memory-game',
      '/projects/f4w/tactica',
    ]
  }
})

Content Directory

or enable scanning of your content folder for .md files by enabling useContent and, optionally, including a filter for paths to exclude (example below will exclude /references/*):

defineNuxtConfig({
  mapple: {
    basePath: 'https://l422y.com',
    useContent: true,
    excludeContent: /^\/(references\/).*/,
  }
})

Build using templates and datasets

... or you can build based on route templates and datasets, using multidimensional arrays, i.e. a route template of /@/@ and a dataset like the following:

[
  ['blog', ['post-a', 'post-b', 'post-c']],
  ['projects', ['project-1', 'project-2', 'project-3']]
]

Our configuration would look something like this:

defineNuxtConfig({
  modules: ['nuxt-mapple'],
  mapple: {
    basePath: 'https://l422y.com',
    staticRoutes: ['/'],
    dynamicRoutes: [
      {
        route: '/@/@',
        data: [
          ['blog', ['post-a', 'post-b', 'post-c']],
          ['projects', ['project-1', 'project-2', 'project-3']]
        ]
      }
    ]
  }
})

Our sitemap.xml will look like this:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://l422y.com/blog/post-a</loc>
  </url>
  <url>
    <loc>https://l422y.com/blog/post-b</loc>
  </url>
  <url>
    <loc>https://l422y.com/blog/post-c</loc>
  </url>
  <url>
    <loc>https://l422y.com/projects/project-1</loc>
  </url>
  <url>
    <loc>https://l422y.com/projects/project-2</loc>
  </url>
  <url>
    <loc>https://l422y.com/projects/project-3</loc>
  </url>
  <url>
    <loc>https://l422y.com/</loc>
  </url>
</urlset>

Here's a full configuration example:

defineNuxtConfig({
  mapple: {
    basePath: 'https://l422y.com',
    dynamic: [
      {
        // single depth route template
        route: '/projects/@',
        // single depth dataset
        data: [
          'personal/musicmonitor',
          'disney/photo-video-kiosk',
        ]
      },
      {
        // double depth route template
        route: '/projects/@/@',
        // double depth dataset
        data: [
          ['personal',
            [
              'whatcd-releases-tracker',
              'music-shop-aggregator'
            ]
          ],
          ['monstermedia',
            [
              'flash-analytics',
              'monitoring-control-system',
              'hbo-unwrap',
            ]
          ],
        ]
      },
      {
        // single depth route template
        route: '/blog/@',
        // single depth dataset
        data: [
          'nuxt-adventures-1',
          'nuxt-adventures-2',
          'nuxt3-dynamic-social-images',
          'web3-endpoint-cycler',
          'wordpress-paywall',
        ]
      },
      {
        // single depth route template
        route: '/@',
        // single depth dataset
        data: [
          'projects',
          'experience',
          'skills',
          'references',
          'blog',
          'about'
        ]
      }
    ]
  }
})