feat: Add sitemap plugin

[kbkn3]

Close #216

[yusukebe]

Hi @kbkn3

Thank you for the awesome PR!

I've tried it with x-basic template created by create-hono command. But the build will fail:

The build command is the following:

vite build --mode client && vite build

Can you take a look?

And if you can, please describe this feature in README.md.

After that, I'll review the details.

[kbkn3]

Hi @yusukebe,

Thank you for reviewing my PR.

I had never run the build command before, and it was giving me an error when the dist directory didn't exist, so I fixed that issue. I've now successfully built the project with the x-basic template in my environment.

I've also added the README as requested. Please take a look when you have a chance!

English isn't my first language, so please let me know if anything is unclear.

[yusukebe]

@kbkn3

Thank you for handling them.

There is a big problem with this plugin. If it has the following route on app/routes/about/index.tsx, this is not supported well:

import { Hono } from 'hono'

const app = new Hono()

app.get('/me', (c) => {
  return c.render(<h1>About me!</h1>)
})

export default app

We have to consider this patter. The inspectRoutes in hono/dev maybe help you.

[kbkn3]

@yusukebe

I had forgotten that notation existed...
Sorry for neglecting to check the test. I will make sure to check it.

It seems that inspectRoutes(app) cannot be used in vite.config.ts or plugin.
It's probably because I'm using import.meta.glob inside app.

I will try to implement a node-based replacement for the file-based routing of honox in the sitemap plugin.

---

I get the following error when using inspectRoutes(app)

error during build:
[vite-plugin-hono-sitemap] (intermediate value).glob is not a function

[kbkn3]

I will wrap the following to create a function that summarizes the process

/app/routes/sitemap.xml.ts

import { Hono } from 'hono'
import { inspectRoutes } from 'hono/dev'
import app from '../server'

const route = new Hono()

route.get('/', c => {
  const routes = inspectRoutes(app)
  console.log(routes)
  return c.body(
    `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

</urlset>`,
    200,
    {
      'Content-Type': 'application/xml',
    },
  )
})

export default route

[yusukebe]

Hi @kbkn3

I think we can make a hook of the SSG Helper for creating Sitemap. I'm not sure it's correct but it may be made as AfterGenerateHook:

https://github.com/honojs/hono/blob/f9a23a9992979fed79b0703ab8b3a3ce49f7175f/src/helper/ssg/ssg.ts#L98

And we have @hono/vite-ssg. This plugin can support import.meta.glob.

We have to consider the API design, but we may make the feature for Sitemap with them.

[yusukebe]

And, if we follow the method, the hook for creating a Sitemap is not only for HonoX. It can be used in the apps using SSG Helper.

[kbkn3]

@yusukebe
Seems like a good idea. Thank you.

I came up with a way to output the sitemap as a normal route, so I implemented it as a function and pushed it.
It seems like it would be enough for each developer to implement...

However, it seems smarter to implement it as a hono function using @hono/vite-ssg.
I will consider implementing it using @hono/vite-ssg and hooks.

[yusukebe]

@kbkn3

Okay! Thank you very much!