remix-sitemap
Advanced tools
Sitemap generator for Remix applications
npm i remix-sitemap
// 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
});
}
This library is a little inspired in next-sitemap so the config is pretty much the same
| Property | Description |
|---|---|
| siteUrl | Base 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" |
// 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
}
})
}
}
};
// app/routes/private.tsx
import type { SitemapHandle } from 'remix-sitemap';
export const handle: SitemapHandle = {
sitemap: {
exclude: true
}
};
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 segmenet in your generateEntries
👤 Fedeya hello@fedeminaya.com
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!
FAQs
Sitemap generator for Remix applications
The npm package remix-sitemap receives a total of 437 weekly downloads. As such, remix-sitemap popularity was classified as not popular.
We found that remix-sitemap demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.