Added Documentation for the iv-viewer and react-iv-viewer.

.github/workflows/deploy_docs.yml

@@ -0,0 +1,34 @@
+name: Deploy Docusaurus site to GitHub Pages
+
+on:
+  pull_request:
+    types:
+      - closed
+
+jobs:
+  build-deploy:
+    if: github.event.pull_request.merged && github.event.pull_request.base.ref == 'master' && github.repository == 's-yadav/iv-viewer'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Install dependencies for documentation
+        run: npm ci
+        working-directory: documentation
+
+      - name: Build Docusaurus site
+        run: npm run build
+        working-directory: documentation
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: documentation/build

.github/workflows/main.yml

@@ -26,4 +26,4 @@ jobs:
         run: yarn workspace react-iv-viewer lint
 
       - name: Build
-        run: yarn build
+        run: yarn build

README.md

@@ -1,3 +1,4 @@
+<!-- markdownlint-disable -->
 
 # iv-viewer
 ___
@@ -97,45 +98,28 @@ const viewer = new FullScreenViewer(options);
 viewer.show('images/low-res-img', 'images/hi-res-img');
 ```
 
-[See full documentation of iv-viewer](https://github.com/s-yadav/iv-viewer/tree/master/packages/iv-viewer#readme) 
+### Documentation
+[See full documentation of iv-viewer and react-iv-viewer](https://s-yadav.github.io/iv-viewer/docs/intro) 
 
 ### Like this
 [:star: this repo](https://github.com/s-yadav/iv-viewer)
 
-### Major updates
-
-#### v2.2.0
-
-- Includes TypeScript type declarations
-- Bugfixing
-
-#### v2.1.0
-
-- It's a complete rewrite of ImageViewer with no jQuery requirement in ES6.
-- While the options and instance method are same the way you use a ImageViewer and FullScreenView is changed. The v1 API will no longer be supported.
-- Published on the npm. V1 was not available on npm.
-- Changed the package name to iv-viewer. image-viewer name was not available on npm. 
-- Added some listeners
-- Added zoom in/out buttons
-- Some SCSS variable for easier overrides.
-
 ## Contributors ✨
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="http://mozillians.org/en-US/u/ruchikabgosain/"><img src="https://avatars2.githubusercontent.com/u/30324532?v=4" width="100px;" alt="Ruchika"/><br /><sub><b>Ruchika</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=ruchikabgosain" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://twitter.com/_syadav"><img src="https://avatars1.githubusercontent.com/u/3096766?v=4" width="100px;" alt="Sudhanshu Yadav"/><br /><sub><b>Sudhanshu Yadav</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=s-yadav" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://hockeycommunity.com"><img src="https://avatars0.githubusercontent.com/u/2039539?v=4" width="100px;" alt="Amrit Kahlon"/><br /><sub><b>Amrit Kahlon</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=amritk" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/10000"><img src="https://avatars2.githubusercontent.com/u/3347256?v=4" width="100px;" alt="10000"/><br /><sub><b>10000</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=10000" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://twitter.com/_syadav"><img src="https://avatars1.githubusercontent.com/u/3096766?v=4" width="100px;" alt="Sudhanshu Yadav"/><br /><sub><b>Sudhanshu Yadav</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=s-yadav" title="Author">📖🙎‍♂️</a></td>
+    <td align="center"><a href="https://github.com/manav-gopal"><img src="https://avatars.githubusercontent.com/u/62497595?v=4" width="100px;" alt="Manav Gopal"/><br /><sub><b>Manav Gopal</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=manav-gopal" title="Maintainer">📖🛠️</a></td>
+    <td align="center"><a href="http://mozillians.org/en-US/u/ruchikabgosain/"><img src="https://avatars2.githubusercontent.com/u/30324532?v=4" width="100px;" alt="Ruchika"/><br /><sub><b>Ruchika</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=ruchikabgosain" title="Contributor">📖</a></td>
+    <td align="center"><a href="https://hockeycommunity.com"><img src="https://avatars0.githubusercontent.com/u/2039539?v=4" width="100px;" alt="Amrit Kahlon"/><br /><sub><b>Amrit Kahlon</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=amritk" title="Contributor">📖</a></td>
+    <td align="center"><a href="https://github.com/10000"><img src="https://avatars2.githubusercontent.com/u/3347256?v=4" width="100px;" alt="10000"/><br /><sub><b>10000</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=10000" title="Contributor">📖</a></td>
   </tr>
 </table>
 
-<!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 

documentation/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

documentation/.markdownlint.json

@@ -0,0 +1,4 @@
+{
+    "default": false
+}
+

documentation/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

documentation/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

documentation/docs/intro.md

@@ -0,0 +1,64 @@
+---
+id: "intro"
+sidebar_position: 1
+title: "Introduction"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import DocCard from '@theme/DocCard';
+
+#
+
+# iv-viewer
+
+---
+
+A zooming and panning plugin inspired by Google Photos for your web images. It comes in two different variants. First, a react-based zooming and panning component and 2nd vanilla JS-based zooming and panning library.
+
+<div style={{display: "flex", gap:"12px", width:"100%",flexWrap: "wrap"}}>
+<div style={{minWidth: "300px", flex: "1"}}>
+<DocCard item={{
+      type:"link",
+      label: 'react-iv-viewer',
+      description: "react-iv-viewer is a React-based library for viewing images with advanced features like zooming...",
+      href: "./category/react-iv-viewer",
+      }}/>
+</div>
+<div  style={{minWidth: "300px", flex: "1"}}>
+<DocCard item={{
+      type:"link",
+      label: 'iv-viewer',
+      description: 'iv-viewer is a vanilla JS-based zooming and panning plugin inspired by Google Photos for your web images...',
+      href: "./category/iv-viewer",
+      }}/>
+    </div>
+</div>
+
+### Like this
+
+[:star: this repo](https://github.com/s-yadav/iv-viewer)
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://twitter.com/_syadav"><img src="https://avatars1.githubusercontent.com/u/3096766?v=4" width="100px;" alt="Sudhanshu Yadav"/><br /><sub><b>Sudhanshu Yadav</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=s-yadav" title="Author">📖🙎‍♂️</a></td>
+    <td align="center"><a href="https://github.com/manav-gopal"><img src="https://avatars.githubusercontent.com/u/62497595?v=4" width="100px;" alt="Manav Gopal"/><br /><sub><b>Manav Gopal</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=manav-gopal" title="Maintainer">📖🛠️</a></td>
+    <td align="center"><a href="http://mozillians.org/en-US/u/ruchikabgosain/"><img src="https://avatars2.githubusercontent.com/u/30324532?v=4" width="100px;" alt="Ruchika"/><br /><sub><b>Ruchika</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=ruchikabgosain" title="Contributor">📖</a></td>
+    <td align="center"><a href="https://hockeycommunity.com"><img src="https://avatars0.githubusercontent.com/u/2039539?v=4" width="100px;" alt="Amrit Kahlon"/><br /><sub><b>Amrit Kahlon</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=amritk" title="Contributor">📖</a></td>
+    <td align="center"><a href="https://github.com/10000"><img src="https://avatars2.githubusercontent.com/u/3347256?v=4" width="100px;" alt="10000"/><br /><sub><b>10000</b></sub></a><br /><a href="https://github.com/s-yadav/iv-viewer/commits?author=10000" title="Contributor">📖</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

documentation/docs/iv-viewer/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "iv-viewer",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "iv-viewer is a zooming and panning plugin inspired by Google Photos for your web images. It provides a smooth and intuitive way to view images with features like full-screen mode, touch device support, and high-resolution image loading."
+  }
+}