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.

app/pages/projects/[slug].vue

@@ -3,6 +3,13 @@ const route = useRoute()
 const { data: project } = await useAsyncData(`projects/${route.params.slug}`, () =>
   queryCollection('projects').path(`/projects/${route.params.slug}`).first())
 
+if (!project.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: `Project "${route.params.slug}" not found`,
+  })
+}
+
 useSeoMeta({
   title: project.value?.title,
   description: project.value?.description,
@@ -11,7 +18,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <main v-if="project" class="mt-8 md:mt-16 md:mb-36 mb-20">
+  <UContainer v-if="project" class="mt-8 md:mt-16 md:mb-36 mb-20">
     <PostAlert class="mb-8" />
     <div>
       <div class="flex items-end justify-between gap-2 flex-wrap">
@@ -51,7 +58,7 @@ useSeoMeta({
       />
     </ClientOnly>
     <PostFooter />
-  </main>
+  </UContainer>
 </template>
 
 <style scoped>