Sveltekit Sitemap screenshot

Sveltekit Sitemap

Author Avatar Theme by Binsarjr
Updated: 12 Mar 2024
7 Stars

Categories

Overview

The @binsarjr/sveltekit-sitemap library is designed to generate and maintain dynamic sitemap.xml and robots.txt files for SvelteKit apps. It combines a Vite plugin and a SvelteKit hook to accomplish this. The plugin watches the routes folder and generates a typescript representation of it, while the hook delivers sitemap.xml and robots.txt responses based on parameters and the generated typescript sitemap. Unlike static sitemap generators, this library focuses on delivering SSR sitemaps.

Features

  • Generates and maintains dynamic sitemap.xml and robots.txt files for SvelteKit apps
  • Uses a Vite plugin to watch the routes folder and generate a typescript representation of it
  • Uses a SvelteKit hook to deliver sitemap.xml and robots.txt responses based on parameters and the typescript sitemap
  • Supports custom routes definitions and robots directives

Installation

To install the @binsarjr/sveltekit-sitemap library, follow these steps:

  1. Add the vite plugin to your project:

    import { sitemapPlugin } from "@binsarjr/sveltekit-sitemap";
    
    // ...
    
    export default defineConfig({
      // ...
      plugins: [
        // ...
        sitemapPlugin({
          routesDir: "./src/routes",
          sitemapFile: "./src/sitemap.ts",
        }),
        // ...
      ],
      // ...
    });
    
  2. Use the hook in your hooks.server.ts file:

    import { sitemapHook } from "@binsarjr/sveltekit-sitemap";
    
    // ...
    
    export const handle = sitemapHook(sitemap, {
      async getRoutes(event) {
        // Returns route definitions for your app
      },
    
      async getRobots(event) {
        // Returns user-agent directives for robots.txt
      }
    });
    
  3. Configure the routes and robots in your getRoutes and getRobots functions as needed.

Summary

The @binsarjr/sveltekit-sitemap library is a useful tool for generating and maintaining dynamic sitemap.xml and robots.txt files for SvelteKit apps. It combines a Vite plugin and a SvelteKit hook to handle the generation and delivery of these files. By following the installation guide and configuring the routes and robots as needed, you can easily implement SSR sitemaps in your SvelteKit app.