Finalize documentation 😊 (#27)

docs/.vitepress/config.ts

@@ -52,9 +52,10 @@ export default defineConfig({
       },
       {
         text: "API",
+        link: "/api/",
         items: [
-          { text: "createZoomImageHover", link: "/api/zoomOnHover" },
-          { text: "createZoomImageWheel", link: "/api/zoomOnWheel" },
+          { text: "createZoomImageHover", link: "/api/createZoomImageHover" },
+          { text: "createZoomImageWheel", link: "/api/createZoomImageWheel" },
         ],
       },
     ],

docs/api/createZoomImageHover.md

@@ -0,0 +1,37 @@
+# With zoomOnHover
+
+### Basic Usage
+
+```ts
+const { cleanup } = createZoomImageHover(container)
+
+// Call cleanup when you don't need it anymore
+cleanup()
+```
+
+### Type Declaration
+
+```ts
+type ZoomImageHoverOptions = {
+  // The size of zoomed window where zoomed image will be displayed
+  customZoom?: { width: number; height: number }
+  // The source of zoomed image
+  zoomImageSource?: string
+  // The css class will be added to zoom lens element
+  zoomLensClass?: string
+  // The css class will be added to zoomed image element
+  zoomImageClass?: string
+  // The container of zoomed image
+  zoomTarget?: HTMLElement
+  // By default, zoomed image will have a scale of 1
+  // The smaller the value, the bigger zoomed image and smaller zoom lens
+  scaleFactor?: number
+}
+
+function createZoomImageHover(
+  container: HTMLElement,
+  options?: ZoomImageHoverOptions,
+): {
+  cleanup: () => void
+}
+```

docs/api/createZoomImageWheel.md

@@ -0,0 +1,28 @@
+# With zoomOnWheel
+
+### Basic Usage
+
+```ts
+const { cleanup } = createZoomImageWheel(container)
+
+// Call cleanup when you don't need it anymore
+cleanup()
+```
+
+### Type Declaration
+
+```ts
+type ZoomImageWheelProps = {
+  // Maximum zoom scale, default is 4
+  maxZoom?: number
+  // Zoom ratio when scrolling, default is 0.1
+  wheelZoomRatio?: number
+}
+
+function createZoomImageWheel(
+  container: HTMLElement,
+  options?: ZoomImageWheelProps,
+): {
+  cleanup: () => void
+}
+```

docs/api/index.md

@@ -0,0 +1,4 @@
+# API Reference
+
+- [createZoomImageWheel](/api/createZoomImageWheel)
+- [createZoomImageHover](/api/createZoomImageHover)

docs/examples/preact.md

@@ -2,6 +2,8 @@
 aside: false
 ---
 
+# Preact Example
+
 <script setup>
 import Demo from '../components/Demo.vue'
 </script>

docs/examples/react.md

@@ -2,6 +2,8 @@
 aside: false
 ---
 
+# React Example
+
 <script setup>
 import Demo from '../components/Demo.vue'
 </script>

docs/examples/svelte.md

@@ -2,6 +2,8 @@
 aside: false
 ---
 
+# Svelte Example
+
 <script setup>
 import Demo from '../components/Demo.vue'
 </script>

docs/examples/vanilla.md

@@ -2,6 +2,8 @@
 aside: false
 ---
 
+# Vanilla JS Example
+
 <script setup>
 import Demo from '../components/Demo.vue'
 </script>

docs/examples/vue.md

@@ -2,6 +2,8 @@
 aside: false
 ---
 
+# Vue Example
+
 <script setup>
 import Demo from '../components/Demo.vue'
 </script>

docs/guide.md

@@ -1,7 +1,71 @@
 # Get Started
 
-<CourseLink href="https://vueschool.io/courses/vueuse-for-everyone?friend=vueuse">Learn VueUse with video</CourseLink>
+Zoom Image is a small collection of utilities for zooming image on the web. It is written in pure TypeScript and has no
+dependencies. The library is built with framework agnostic in mind, so it can be used with any framework or even without
 
-VueUse is a collection of utility functions based on
-[Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html). We assume you are already familiar with
-the basic ideas of [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) before you continue.
+## Installation
+
+::: code-group
+
+```sh [npm]
+$ npm install @zoom-image/core
+```
+
+```sh [pnpm]
+$ pnpm add @zoom-image/core
+```
+
+```sh [yarn]
+$ yarn add @zoom-image/core
+```
+
+:::
+
+### CDN
+
+```html
+<script src="https://unpkg.com/@zoom-image/core"></script>
+<script src="https://unpkg.com/@zoom-image/core"></script>
+```
+
+It will be exposed to global as `window.ZoomImage`
+
+## Usage Example
+
+Simply importing the utilities you need from `@zoom-image/core`
+
+```html
+<div id="container" class="container">
+  <img class="image" alt="Large Pic" src="/image.webp" />
+</div>
+```
+
+```css
+.container {
+  width: 300px;
+  height: 300px;
+  cursor: crosshair;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+}
+```
+
+```js
+import { createZoomImageWheel } from "@zoom-image/core"
+
+const container = document.getElementById("container")
+createZoomImageWheel(container)
+```
+
+Refer to [API section](/api/) for more details.
+
+## Demos
+
+- [Vanilla JS](/examples/vanilla)
+- [Vue](/examples/vue)
+- [React](/examples/react)
+- [Preact](/examples/preact)
+- [Svelte](/examples/svelte)

examples/preact-ts/package.json

@@ -15,6 +15,7 @@
   "devDependencies": {
     "@preact/preset-vite": "^2.5.0",
     "typescript": "^5.0.4",
+    "unocss": "^0.51.8",
     "vite": "^4.3.4"
   }
 }

packages/core/package.json

@@ -15,6 +15,8 @@
   "types": "dist/index.d.ts",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
+  "unpkg": "dist/index.global.js",
+  "jsdelivr": "dist/index.global.js",
   "files": [
     "dist",
     "src"

tsup.config.ts

@@ -3,6 +3,9 @@ import { defineConfig } from "tsup"
 export default defineConfig({
   clean: true,
   target: "esnext",
-  format: ["esm", "cjs"],
+  format: ["esm", "cjs", "iife"],
   sourcemap: true,
+  minify: true,
+  globalName: "ZoomImage",
+  name: "zoom-image",
 })