-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from patelka2211/next-sharer
Next sharer
- Loading branch information
Showing
169 changed files
with
7,916 additions
and
4,554 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Binary file not shown.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.