docs: adds image zoom (#822)

packages/docs/astro.config.mjs

@@ -3,6 +3,7 @@ import starlight from '@astrojs/starlight'
 import react from '@astrojs/react'
 import tailwind from '@astrojs/tailwind'
 import cookieconsent from '@jop-software/astro-cookieconsent'
+import starlightImageZoom from 'starlight-image-zoom'
 import {openSourceMenu, oramaCloudMenu, head, cookieConsentConfig } from './config'
 
 // https://astro.build/config
@@ -27,7 +28,7 @@ export default defineConfig({
   integrations: [
     starlight({
       pagefind: false,
-      plugins: [],
+      plugins: [starlightImageZoom()],
       title: 'Orama Docs',
       description: 'Your product answer engine. Unlimited full-text search, embeddings generations and more. Help your users find the right answers, faster.',
       favicon: '/favicon.png',

packages/docs/package.json

@@ -39,6 +39,7 @@
     "canvaskit-wasm": "^0.39.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "starlight-image-zoom": "^0.8.0",
     "starlight-showcases": "^0.2.0",
     "tailwindcss": "^3.4.4",
     "vanilla-cookieconsent": "^3.0.1"

packages/docs/src/content/docs/cloud/data-sources/introduction-to-data-sources.mdx

@@ -11,7 +11,7 @@ One important concept to understand when working with **Orama Cloud**, is the co
 Connecting your data source to Orama Cloud is the first step in creating an index. An index is a collection of documents that you can search through. 
 
 <div class="text-center py-4">
-  <img src="/misc/data-sources.jpg" alt="Orama Cloud - Data Sources" class="rounded-xl" />
+  <img src="/misc/data-sources.jpg" alt="Orama Cloud - Data Sources" class="rounded-xl" data-zoom-off />
 </div>
 
 ## Choosing a data source