Skip to content

Commit

Permalink
Merge pull request #3 from patelka2211/next-sharer
Browse files Browse the repository at this point in the history
Next sharer
  • Loading branch information
patelka2211 authored Aug 7, 2023
2 parents 1c49b1d + fabda0c commit 84b9a6a
Show file tree
Hide file tree
Showing 169 changed files with 7,916 additions and 4,554 deletions.
33 changes: 31 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,31 @@
.ds_store
**/.ds_store
# 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
7 changes: 2 additions & 5 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -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
}
139 changes: 99 additions & 40 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,61 +1,120 @@
# Sharer by KP
[![](./sharer-from-kpverse.jpg)](https://kpverse.in/sharer/ "Sharer from KPVERSE")

<!-- ![](./assets/opengraph.jpg) -->
### <div align="center"><a href="https://kpverse.in/sharer/">Sharer</a> - A URL Sharing Tool for Websites and Web Apps, from <a href="https://kpverse.in/">KPVERSE</a></div>

![](./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/[email protected])
[![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/[email protected]/)

# 📚 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 `<script>` tag. Or simply paste the below given code as high as possible in your website or web app's `<head>` tag .

```html
<!-- Sharer scripts start -->
<script src="https://cdn.jsdelivr.net/gh/patelka2211/[email protected]/DynamicColors.js"></script>
<script src="https://cdn.jsdelivr.net/gh/patelka2211/[email protected]/Dominar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/patelka2211/[email protected]/Sharer.js"></script>
<script
defer
id="sharer-utility-js"
class="activate-button"
src="https://cdn.jsdelivr.net/gh/patelka2211/[email protected]/utility.js"
></script>
<!-- Sharer scripts end -->
```

| 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
### <div align="center"><a href="https://kpverse.in"><img style="height: 86px;" src="./kpverse-sharer.svg"></a></div>

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.
<div align="center">© 2023 <a href="https://kpverse.in/about/">Kartavya Patel</a>. All rights reserved.</div>
14 changes: 14 additions & 0 deletions Sharer.js

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion assets/closeIcon.svg

This file was deleted.

1 change: 0 additions & 1 deletion assets/emlIcon.svg

This file was deleted.

1 change: 0 additions & 1 deletion assets/fbIcon.svg

This file was deleted.

1 change: 0 additions & 1 deletion assets/kooIcon.svg

This file was deleted.

1 change: 0 additions & 1 deletion assets/lnkdnIcon.svg

This file was deleted.

Binary file removed assets/opengraph.jpg
Binary file not shown.
1 change: 0 additions & 1 deletion assets/pntrstIcon.svg

This file was deleted.

1 change: 0 additions & 1 deletion assets/rdtIcon.svg

This file was deleted.

Binary file removed assets/sharer-preview-mac-iphone.png
Binary file not shown.
Binary file removed assets/sharer-preview.jpg
Binary file not shown.
Loading

0 comments on commit 84b9a6a

Please sign in to comment.