feat(og-gen): Implement middleware and hooks

[dac09]

The OG Gen saga continues with @cannikin and @dac09 ⚔️

This PR adds OgImageMiddleware and Hooks to @redwoodjs/og-gen.

This PR:

• adds OgImageMiddleware and Hooks to @redwoodjs/og-gen, complete with tests

⚠️ Template changes:

• updates entry.client template to pass in Routes to App
• updates App to take children (i.e. Routes)

This is so that we can pass the OG component to be rendered with your App's CSS setup.
I've also coordinated with Tobbe on these changes so we don't need to change things again for server router.

How to use this?

1. Registering the middleware:

   import OgImageMiddleware from '@redwoodjs/ogimage-gen/middleware'
   
   export const registerMiddleware = () => {
     const ogMw = new OgImageMiddleware({
       App,
       Document,
     })
   
     return [ogMw]
   }

2. Configure your vite.config.ts

   import vitePluginOgImageGen from '@redwoodjs/ogimage-gen/plugin'
   
   const viteConfig: UserConfig = {
     // 👇 so it builds your OG components
     plugins: [redwood(), vitePluginOgImageGen()],
   }
   
   export default defineConfig(viteConfig)

3. Add your OG Image component next to the page it's for
   e.g. web/src/pages/AboutPage/AboutPage.png.tsx

4. Use hooks on AboutPage to generate the ogURL

Tasks:

• Can we write unit tests for OgImageMiddleware?
• I haven't tried the hooks yet! RC maybe try out on your project?
• Move hooks from Rob's project to this PR
• Figure out ESM/CJS issue we're seeing
• Find those pesky edge cases e.g. multiple .png.jsx files in a page folder
  - [ ] Can we support image src imports? Not strictly necessary.
  Known limitation. You have to put images in the public folder. We can improve later
  - [ ] DOCS
  We decided to make it a blog post instead, since this is under experimental still

[dac09]

FINALLY. All checks ✅

Will wait for docs @cannikin, but not sure if we're putting it in this PR. Will leave to you for merge.

@Tobbe any nits by chance? Could you please update your review?

[Tobbe]

I’ll have a look

[cannikin]

I built an app from scratch using this branch and everything worked great! I manually made the changes to entry.server.js and vite.config.js but @Josh-Walker-GM has a PR that adds CLI commands to modify them automatically: #10485

[cannikin]

No official docs for the real site yet, but we'll have an announcement blog post that walks through the whole thing. I think when we get closer to SSR being promoted from experimental to feature flag I can write an official reference doc for it.