From 936f0e5dd175aa9d6a4e7ab163e6f6f716de0b35 Mon Sep 17 00:00:00 2001 From: manav Date: Fri, 9 Aug 2024 16:12:37 +0530 Subject: [PATCH] updated documentation --- documentation/docusaurus.config.ts | 41 ------- .../src/components/HomepageFeatures/index.tsx | 110 ++++++++---------- .../HomepageFeatures/styles.module.css | 55 ++++++++- documentation/src/pages/index.tsx | 2 +- packages/react-iv-viewer/README.md | 10 +- 5 files changed, 106 insertions(+), 112 deletions(-) diff --git a/documentation/docusaurus.config.ts b/documentation/docusaurus.config.ts index ea15e1e..032b5c9 100644 --- a/documentation/docusaurus.config.ts +++ b/documentation/docusaurus.config.ts @@ -64,47 +64,6 @@ const config: Config = { }, ], }, - footer: { - style: 'dark', - links: [ - { - title: 'Docs', - items: [ - { - label: 'Tutorial', - to: '/docs/intro', - }, - ], - }, - { - title: 'Community', - items: [ - { - label: 'Stack Overflow', - href: 'https://stackoverflow.com/questions/tagged/docusaurus', - }, - { - label: 'Discord', - href: 'https://discordapp.com/invite/docusaurus', - }, - { - label: 'Twitter', - href: 'https://twitter.com/docusaurus', - }, - ], - }, - { - title: 'More', - items: [ - { - label: 'GitHub', - href: 'https://github.com/s-yadav/iv-viewer', - }, - ], - }, - ], - copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, - }, prism: { theme: prismThemes.github, darkTheme: prismThemes.dracula, diff --git a/documentation/src/components/HomepageFeatures/index.tsx b/documentation/src/components/HomepageFeatures/index.tsx index 50a9e6f..3d52153 100644 --- a/documentation/src/components/HomepageFeatures/index.tsx +++ b/documentation/src/components/HomepageFeatures/index.tsx @@ -1,70 +1,52 @@ -import clsx from 'clsx'; -import Heading from '@theme/Heading'; -import styles from './styles.module.css'; - -type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: JSX.Element; -}; - -const FeatureList: FeatureItem[] = [ - { - title: 'Easy to Use', - Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, - description: ( - <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. - - ), - }, - { - title: 'Focus on What Matters', - Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, - description: ( - <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the docs directory. - - ), - }, - { - title: 'Powered by React', - Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, - description: ( - <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. - - ), - }, -]; - -function Feature({title, Svg, description}: FeatureItem) { - return ( -
-
- -
-
- {title} -

{description}

-
-
- ); -} +import Link from "@docusaurus/Link"; +import styles from "./styles.module.css"; export default function HomepageFeatures(): JSX.Element { return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} + <> +
+
+
+

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.'} +

+
+
+ +

iv-viewer

+

+ A zooming and panning plugin inspired by Google Photos for your + web images .... +

+ +
+
+ +

react-iv-viewer

+

+ react-iv-viewer is a React-based library for viewing images with + advanced features like zooming .... +

+ +
+
+

Features :-

+
    +
  • Smooth dragging and panning of images
    • +
  • Support for touch devices
    • +
  • Double tap to zoom in/zoom out
    • +
  • Pinch in/out to control zoom
    • +
  • Snap view for better panning and zooming experience
    • +
  • + Quick display of loaded images with progressive loading of + high-quality images +
    • +
  • Exposed API to control zoom programmatically
    • +
  • Custom events to listen for state changes
    • +
+
-
-
+ + ); } diff --git a/documentation/src/components/HomepageFeatures/styles.module.css b/documentation/src/components/HomepageFeatures/styles.module.css index b248eb2..b886891 100644 --- a/documentation/src/components/HomepageFeatures/styles.module.css +++ b/documentation/src/components/HomepageFeatures/styles.module.css @@ -1,11 +1,58 @@ -.features { +.intro { display: flex; align-items: center; padding: 2rem 0; width: 100%; } -.featureSvg { - height: 200px; - width: 200px; +.container { + display: flex; + width: 100%; + flex-wrap: wrap; + justify-content: center; + gap: 1.5rem; +} + +.box { + flex: 1 1 calc(50% - 1.5rem); + max-width: 600px; + border: 1px solid #333; + border-radius: 8px; + padding: 1.5rem; + margin: 0 1.5rem; + text-align: left; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.box:hover { + border-color: #1a8870; +} + +.button { + text-decoration: none; + color: inherit; + display: block; } + +h1 { + font-size: 1.25rem; /* Slightly smaller font size */ + margin-bottom: 0.5rem; +} + +.box p { + font-size: 1rem; + color: #777; + line-height: 1.6; + margin-bottom: 1.5rem; +} + +@media (max-width: 768px) { + .box { + flex: 1 1 100%; + max-width: 100%; + } +} + +.features{ + width: 70%; +} \ No newline at end of file diff --git a/documentation/src/pages/index.tsx b/documentation/src/pages/index.tsx index 400a3e1..5bbeeab 100644 --- a/documentation/src/pages/index.tsx +++ b/documentation/src/pages/index.tsx @@ -20,7 +20,7 @@ function HomepageHeader() { - Docusaurus Tutorial - 5min ⏱️ + Tutorial - 5min ⏱️ diff --git a/packages/react-iv-viewer/README.md b/packages/react-iv-viewer/README.md index a84434e..414d323 100644 --- a/packages/react-iv-viewer/README.md +++ b/packages/react-iv-viewer/README.md @@ -17,16 +17,18 @@ ### Demos -See the many DEMO sections in the documentation. +See the demo of react-iv-viewer. [Demo](https://s-yadav.github.io/iv-viewer/docs/react-iv-viewer/demo) ### Install using `npm` + ```bash npm install react-iv-viewer ``` using `yarn` + ```bash yarn add react-iv-viewer ``` @@ -37,19 +39,23 @@ yarn add react-iv-viewer // Import css import 'react-iv-viewer/dist/react-iv-viewer.css'; ``` + You can choose to import css file inside your scss/less files. #### ES6 Image Viewer + ```jsx import { ImageViewer } from 'react-iv-viewer'; ``` Fullscreen Viewer + ```jsx import { FullScreenImageViewer } from 'react-iv-viewer'; ``` ### Documentation -[See full documentation of react-iv-viewer](https://s-yadav.github.io/iv-viewer/docs/category/react-iv-viewer) \ No newline at end of file + +[See full documentation of react-iv-viewer](https://s-yadav.github.io/iv-viewer/docs/category/react-iv-viewer)