feat(infinite-canvas): add infinite canvas component with drag and zoom functionality

- Implemented InfiniteCanvas.vue for rendering an infinite canvas with drag and zoom capabilities.
- Created useInfiniteCanvas composable for managing canvas state and interactions.
- Added useImagePreloader composable for preloading images and videos.
- Introduced constants for physics, touch interactions, viewport settings, and zoom defaults.
- Developed utility functions for touch handling and media type detection.
- Defined TypeScript types for canvas items, grid items, and composables.
- Registered components and composables in the Nuxt module.
- Added screenshot generation functionality for content files.
- Updated package.json to include capture-website dependency.

modules/screenshots.ts

@@ -0,0 +1,59 @@
+/* eslint-disable no-console */
+import { existsSync } from 'node:fs'
+import { defineNuxtModule } from '@nuxt/kit'
+import captureWebsite from 'capture-website'
+import { join } from 'pathe'
+
+interface ContentFile {
+  id?: string
+  body?: {
+    items: TemplateItem[]
+  }
+}
+
+interface TemplateItem {
+  name: string
+  url?: string
+  screenshotUrl?: string
+  screenshotOptions?: Record<string, any>
+}
+
+export default defineNuxtModule((_, nuxt) => {
+  nuxt.hook('content:file:afterParse', async ({ content: file }: { content: ContentFile }) => {
+    if (file.id?.includes('works/')) {
+      const template = file as TemplateItem
+      const url = template.screenshotUrl || template.url
+      if (!url) {
+        console.error(`Work ${template.name} has no "url" or "screenshotUrl" to take a screenshot from`)
+        return
+      }
+      if (template.screenshotUrl)
+        return
+
+      const name = template.name.toLowerCase().replace(/\s/g, '-')
+      // eslint-disable-next-line node/prefer-global/process
+      const filename = join(process.cwd(), 'public/assets/works', `${name}.png`)
+
+      if (existsSync(filename))
+        return
+
+      console.log(`Generating screenshot for work ${template.name} hitting ${url}...`)
+
+      try {
+        await captureWebsite.file(url, filename, {
+          ...(template.screenshotOptions || {
+            darkMode: true,
+          }),
+          launchOptions: {
+            headless: true,
+          },
+        })
+
+        console.log(`Screenshot for ${template.name} generated successfully`)
+      }
+      catch (error) {
+        console.error(`Error generating screenshot for ${template.name}:`, error)
+      }
+    }
+  })
+})