Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

remix-sitemap

Package Overview
Dependencies
Maintainers
1
Versions
41
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

remix-sitemap

Remix Sitemap <a href="https://www.npmjs.com/package/remix-sitemap"

  • 1.0.4
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Remix Sitemap

Version npm License: MIT

Sitemap generator for Remix applications

Overview

Features

  • Generate Sitemap in Runtime
  • Handle Static Optional Paths

Installation

npm i remix-sitemap

Usage

// entry.server.tsx
import { createSitemapGenerator } from 'remix-sitemap';

// setup the generator
const { isSitemapUrl, sitemap } = createSitemapGenerator({
  siteUrl: 'https://example.com'
})

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  //  
  if (isSitemapUrl(request)) 
    return await sitemap(request, remixContext);

  let markup = renderToString(
    <RemixServer context={remixContext} url={request.url} />
  );

  responseHeaders.set('Content-Type', 'text/html');

  return new Response('<!DOCTYPE html>' + markup, {
    status: responseStatusCode,
    headers: responseHeaders
  });
}

Config

This library is a little inspired in next-sitemap so the config is pretty much the same

PropertyDescription
siteUrlBase url of your website
changefreq (optional)Change frequency. Default daily
priority (optional)Priority. Default 0.7
autoLastmod (optional)Add <lastmod/> property. Default true
sitemapBaseFileName (optional)The name of the generated sitemap file before the file extension. Default "sitemap"
optionalSegments (optional)possible values of optional segments

Generate Sitemap for Dynamic Routes

// app/routes/posts.$slug.tsx
import type { SitemapHandle } from 'remix-sitemap';

export const handle: SitemapHandle = {
  sitemap: { 
    async generateEntries(request) {
      const posts = await getPosts();
      
      return posts.map(post => {
        return { 
          route: `/posts/${post.slug}`, 
          lastmod: post.updatedAt 
        }
      })
    }
  }
};

Exclude Route

// app/routes/private.tsx
import type { SitemapHandle } from 'remix-sitemap';

export const handle: SitemapHandle = {
  sitemap: { 
    exclude: true 
  }
};

Usage with Optional Segments

with optional segments layouts to has a static data like the languages you can add values to sitemap config

// app/routes/($lang).tsx
import type { SitemapHandle } from 'remix-sitemap';

export const handle: SitemapHandle = {
  sitemap: { 
    values: ['en', 'es']
  }
};

and the routes inside get the automapping with all of the defined values for example

routes/($lang)/blog.tsx -> https://example.com/blog
                        -> https://example.com/en/blog
                        -> https://example.com/es/blog

this also works with dynamic routes within the optional segment, with the values defined in the optional segment route you can avoid to returning the repeated entries with the optional segments in your generateEntries

also if you don't have a layout for the optional segment, you can define it in the global config with the optionalSegments property

const { isSitemapUrl, sitemap } = createSitemapGenerator({
  siteUrl: 'https://example.com',
  optionalSegments: {
    '($lang)': ['en', 'es']
  }
}) 

How to disable it

For avoid the default behaviour of the optionalSegments you can disable it with the addOptionalSegments property on the handle

// app/routes/($lang)/blog.$slug.tsx
export const handle: SitemapHandle = {
  sitemap: {
    addOptionalSegments: false
  }
}

Author

👤 Fedeya hello@fedeminaya.com

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

FAQs

Package last updated on 14 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc