diff --git a/.gitignore b/.gitignore
index fa88afc..6ecf647 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,31 @@
-.ds_store
-**/.ds_store
\ No newline at end of file
+# macOS .DS_Store file
+**/.DS_Store
+
+# Development purpose files and folders
+node_modules
+/lib
+/test
+
+# VSCode settings
+.vscode
+
+# Distribution files
+/index.js
+index.d.ts
+
+# parcel folders
+.parcel-cache
+dist
+
+# testing files and folder
+testing
+
+# Build
+build.iife.js
+# build.main.sh
+# build.test.sh
+
+# # website stuff
+# website-stuff/config.build.sh
+# website-stuff/config.terser.sh
+# website-stuff/rollup.config.mjs
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3719dba..3c38831 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,13 +1,10 @@
{
- "liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".css",
- "savePath": "./bundle"
- // "savePath": "./website-stuff"
+ "savePath": "./src"
}
],
- "liveSassCompile.settings.forceBaseDirectory": "src"
- // "liveSassCompile.settings.forceBaseDirectory": "website-stuff"
+ "liveSassCompile.settings.generateMap": false
}
diff --git a/README.md b/README.md
index ce2df01..1469746 100644
--- a/README.md
+++ b/README.md
@@ -1,61 +1,120 @@
-# Sharer by KP
+[![](./sharer-from-kpverse.jpg)](https://kpverse.in/sharer/ "Sharer from KPVERSE")
-
+###
Sharer - A URL Sharing Tool for Websites and Web Apps, from KPVERSE
-![](./assets/sharer-preview-mac-iphone.png)
+---
-# 📝 Description
+## Installation
-Sharer is a user-friendly JavaScript library that seamlessly enhances website sharing across various applications and social media platforms. Boost engagement and increase website reach with Sharer - the top-rated JavaScript library for seamless URL sharing!
+[![npm (scoped)](https://img.shields.io/npm/v/@patelka2211/sharer)](https://www.npmjs.com/package/@patelka2211/sharer)
+[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@patelka2211/sharer)](https://bundlephobia.com/package/@patelka2211/sharer@1.0.0)
+[![npm](https://img.shields.io/npm/dy/@patelka2211/sharer)](https://www.npmjs.com/package/@patelka2211/sharer)
+[![jsDelivr hits (npm scoped)](https://img.shields.io/jsdelivr/gh/hy/patelka2211/sharer)](https://cdn.jsdelivr.net/gh/patelka2211/sharer@1.0.0/)
-# 📚 Usage
+To install Sharer from NPM, run the following command:
-| Provided files | File location |
-| -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
-| Sharer [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) file (It can be directly imported into your website) | [sharer.iife.js](https://github.com/patelka2211/sharer/tree/main/bundle/sharer.iife.js) |
-| Sharer [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) file (To use Sharer in your project) | [sharer.esm.js](https://github.com/patelka2211/sharer/tree/main/bundle/sharer.esm.js) |
-| Sharer button ( to offer convenient sharing options with Sharer button!) | [sharer_button.js](https://github.com/patelka2211/sharer/tree/main/bundle/sharer_button.js) |
+```sh
+npm i @patelka2211/sharer
+```
-- Both Sharer IIFE and ESM files provide a total of 6 functions.
+Alternatively, you can visit [this page](kpverse.in/sharer/#install) and configure Sharer to work the best way and directly in your website using a HTML `
+
+
+
+
+
+```
-| Function Name | Method chaining supported | Parameters | Description |
-| -------------- | ------------------------- | ---------------- | ----------------------------------------------------------------------------------------------- |
-| setURL | Yes | `url`: `String` | To share a customized URL using the Sharer (`default URL` is the `current URL of the page`) |
-| setDefaultURL | Yes | none | To `assign the URL variable` of the Sharer feature to the `current URL of the page` |
-| setText | Yes | `text`: `String` | To share a customized text using the Sharer (`default text` is the `current title of the page`) |
-| setDefaultText | Yes | none | To `assign the text variable` of the Sharer feature to the `current title of the page` |
-| open | No | none | To open the Sharer |
-| close | No | none | To close the Sharer |
+---
-# 💡 Examples
+## Available APIs
-- If you want to share a customized URL and text, such as sharing information about "ChatGPT," you can use the following code to set the URL and text of "ChatGPT" for sharing.
+### open - type _`function`_
-```js
-sharer.setURl("https://chat.openai.com/").setText("ChatGPT").open();
+```ts
+/**
+ * Opens the Sharer with the specified options.
+ * @param option — Optional configuration for the Sharer.
+ */
+function openSharer(option?: { url?: string; text?: string }): void;
+```
+
+### close - type _`function`_
+
+```ts
+/**
+ * Closes the Sharer.
+ *
+ * @returns {void}
+ */
+function closeSharer(): void;
+```
+
+### setColor - type _`function`_
+
+```ts
+/**
+ * Sets Sharer color.
+ *
+ * @param {string | undefined} newColor - The new color value.
+ * @returns {object} An object containing open and close functions.
+ * @property {function} open - The function to open the Sharer.
+ * @property {function} close - The function to close the Sharer.
+ */
+function setColor(newColor?: string): object;
```
-- If you want to set URL and text to default, you can use the following code.
+---
-`NOTE: By default, the URL and text values are automatically set to the URL and title of the current page, respectively.`
+### button - type _`object`_
+
+Sharer button is an object containing [`activate`](#buttonactivate---activates-the-sharer-button) and [`deactivate`](#buttondeactivate---deactivates-the-sharer-button) functions.
+
+```ts
+const button: {
+ activate: () => void;
+ deactivate: () => void;
+};
+```
+
+#### `button.activate` - Activates the Sharer button.
+
+#### `button.deactivate` - Deactivates the Sharer button.
+
+---
+
+### Method chaining
+
+You can use method chaining in [`setColor`](#setcolor---type-function) function.
+
+Suppose you need to [set color](#setcolor---type-function) theme of Sharer and then you immediately want to [open Sharer](#open---type-function), you can do this using method chaining with just single line of code.
```js
-sharer.setDefaultURL().setDefaultText().open();
+// The given example code will set color theme to "#2596D1" and will open Sharer.
+// There is only one line of code present in the given example. It looks like 4 lines of code because it is formatted, to make sure it is easily readable.
+setColor("#2596D1").open({
+ url: "https://kpverse.in/",
+ text: "The official KPVERSE website.",
+});
```
-# 📄 License
+---
+
+### License
+
+[MIT License](./LICENSE)
-- This project is licensed under the [MIT License](./LICENSE)
-- The MIT License permits the following actions:
- - Use the software
- - Copy the software
- - Modify the software
- - Merge the software with other software
- - Publish the software
- - Distribute the software
- - Sublicense the software
-- The permitted actions are subject to the conditions stated in the [LICENSE file](./LICENSE).
+---
-# 🙌🏻 Credits
+###
-I would like to acknowledge and give credit to the creator of "[qrcode-svg](https://github.com/datalog/qrcode-svg/)", [@datalog](https://github.com/datalog/), for providing the library that enabled me to create SVG QR codes for Sharer, significantly enhancing its functionality and user experience. Furthermore, I would like to invite you to check out my other project, "[JSON2HTML](https://github.com/patelka2211/json2html/)", which was also utilized in the creation of Sharer.
+
Import the latest JavaScript library by
- pasting the script tag into your HTML document's head tag.
- Optimize sharing capabilities today with Sharer!