chore: update dependencies & fix OG images

We also switch to a local critters module to solve
an incompatibility with Nuxt 3.8.2's new Nitro

nuxt.config.ts

@@ -14,13 +14,18 @@ export default defineNuxtConfig({
     ['nuxt-svgo', {
       autoImportPath: false,
     }],
+    /*
+    TODO: We presently monkey-match critters in `modules/critters.ts`
+    to workaround a issue with Nuxt 3.8.2's new Nitro. We can switch back
+    to this once that issue is resolved.
     ['@nuxtjs/critters', {
       config: {
         preload: "swap",
         pruneSource: true,
         reduceInlineStyles: false, // `true` breaks fonts
       }
     }],
+    */
     ['@nuxtjs/google-fonts', {
       families: {
         'Merriweather': [400, 700],
@@ -34,16 +39,16 @@ export default defineNuxtConfig({
   nitro: {
     prerender: {
       failOnError: true,
-      // Needed to prevent GitHub Pages from automatically adding trailing
-      // slashes to URLs (as otherwise they are directories rather than files)
       autoSubfolderIndex: false,
       routes: ["/", ...packages.map(pkgLink)]
     },
   },
   site: {
     url: 'https://reservoir.lean-lang.org',
     name: 'Reservoir',
-    description: "Lake's package registry for the Lean community.",
+    description:
+      "Reservoir is the package registry for Lake, the build system and " +
+      "package manager of the Lean programming language and theorem prover.",
     titleSeparator: '|',
     defaultLocale: 'en-US',
   },
@@ -52,13 +57,9 @@ export default defineNuxtConfig({
     fetchRemoteUrls: false,
   },
   ogImage: {
-    defaults: {
-      cache: false,
-      component: 'OgImageGeneric',
-    },
-    runtimeBrowser: false,
     runtimeCacheStorage: false,
-    fonts: [ 'Merriweather:400', 'Merriweather:700', 'Open+Sans:400' ],
+    // Since Satori does not support multiple fonts, we exclude Open Sans.
+    fonts: [ 'Merriweather:400', 'Merriweather:700' /* , 'Open+Sans:400' */ ],
   },
   vite: {
     build: {

package.json

@@ -15,22 +15,21 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare && patch-package"
+    "postinstall": "nuxt prepare"
   },
   "devDependencies": {
+    "critters": "^0.0.20",
     "@iconify-json/mdi": "^1.1.54",
     "@iconify-json/simple-icons": "^1.1.71",
-    "@nuxt/devtools": "latest",
-    "@nuxtjs/critters": "^0.5.0",
+    "@nuxt/devtools": "^1.0.0",
     "@nuxtjs/google-fonts": "^3.0.2",
     "@nuxtseo/module": "^2.0.0-beta.15",
     "dayjs": "^1.11.10",
     "hast-util-classnames": "^3.0.0",
     "highlight.js": "^11.8.0",
     "normalize.css": "^8.0.1",
-    "nuxt": "^3.7.4",
+    "nuxt": "^3.8.2",
     "nuxt-svgo": "^3.5.4",
-    "patch-package": "^8.0.0",
     "primevue": "^3.35.0",
     "rehype-autolink-headings": "^7.0.0",
     "rehype-external-links": "^3.0.0",
@@ -48,7 +47,7 @@
     "sass": "^1.67.0",
     "unified": "^11.0.3",
     "unist-util-visit": "^5.0.0",
-    "unplugin-icons": "^0.17.0",
+    "unplugin-icons": "^0.18.0",
     "vue-tippy": "^6.3.1"
   }
 }

site/app.vue

@@ -5,6 +5,12 @@ useHead({
     { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
   ]
 })
+
+const site = useSiteConfig()
+defineOgImageComponent('Generic', {
+  title: site.name,
+  description: site.description,
+})
 </script>
 
 <template>

site/components/OgImage/Generic.vue

@@ -8,13 +8,17 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const siteTitle = 'Reservoir'
+const siteTitle = useSiteConfig().name
 const props = defineProps<{
   title: string
-  description: string,
+  description?: string
   hasNoDescription?: boolean
 }>()
 
+// cannot use `!pkg.description` because a falsy description
+// will just fallback to the application-wide site description
+const hasDescription = !props.hasNoDescription
+
 const mainStyles: CSSProperties = {
   width: '100%',
   height: '100%',
@@ -54,6 +58,9 @@ const titleStyles: CSSProperties = {
 const descrStyles: CSSProperties = {
   display: 'block',
   fontSize: "3em",
+  // Currently (as of 12-2023), this not actually do anything,
+  // as the Satori renderer does not support multiple embedded font families.
+  // This is simply reminder for whenever it might in the future.
   fontFamily: "'Open Sans', sans-serif",
   lineClamp: 5,
 }
@@ -63,11 +70,13 @@ const footerStyles: CSSProperties = {
   justifyContent: "flex-end",
   alignItems: "baseline",
   fontSize: "2em",
+  height: "1.2em",
   marginBottom: "1em",
   marginTop: "0.5em"
 }
 
 const siteTitleStyles: CSSProperties = {
+  display: props.title == siteTitle ? "none" : "flex",
   fontFamily: "'Merriweather', serif"
 }
 
@@ -84,11 +93,11 @@ const iconStyles: CSSProperties = {
     <article :style="articleStyles">
       <div :style="textStyles">
         <div :style="titleStyles">{{ props.title }}</div>
-        <div :style="descrStyles" v-if="!hasNoDescription">{{ props.description }}</div>
+        <div :style="descrStyles" v-if="hasDescription">{{ props.description }}</div>
       </div>
     </article>
     <footer :style="footerStyles">
-      <div :style="siteTitleStyles" v-show="props.title != siteTitle">{{ siteTitle }}</div>
+      <div :style="siteTitleStyles">{{ siteTitle }}</div>
       <LogoIcon :style="iconStyles"/>
     </footer>
   </main>

site/modules/critters.ts

@@ -0,0 +1,63 @@
+/*
+Adapted from https://github.com/nuxt-modules/critters
+Monkey-patched for Nuxt 3.8.2's new Nitro
+
+---
+
+MIT License
+
+Copyright (c)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import path from 'path'
+import Critters from 'critters'
+import { defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'critters',
+  },
+  setup (_, nuxt) {
+    // Only enable for production
+    if (nuxt.options.dev) return
+
+    // Nitro handler (for prerendering only)
+    nuxt.hook('nitro:init', nitro => {
+      const critters = new Critters({
+        /*
+        With Nuxt 3.8.2's new Nitro, Nuxt's CSS files are not copied
+        from this directory into `nitro.options.output.publicDir` until
+        *after* this module's hook is run, thus we have to point Critters
+        to this build directory instead.
+        */
+        path: path.resolve(nuxt.options.buildDir, 'dist/client'),
+        publicPath: nitro.options.baseURL,
+        preload: "swap",
+        pruneSource: true,
+        reduceInlineStyles: false, // `true` breaks fonts
+      })
+      nitro.hooks.hook('prerender:generate', async route => {
+        if (!route.fileName?.endsWith('.html') || route.error || !route.contents) return
+        route.contents = await critters.process(route.contents)
+      })
+    })
+  }
+})

site/pages/@[owner]/[name].vue

@@ -20,8 +20,10 @@ useHead({
   meta: pkg.description ? [{name: 'description', content: pkg.description}] : undefined
 })
 
-defineOgImage({
-  hasNoDescription: !pkg.description,
+defineOgImageComponent('Generic', {
+  title: pkg.name,
+  description: pkg.description,
+  hasNoDescription: !pkg.description
 })
 
 const formatLicense = (id: string | null) => {