{"id":19824579,"url":"https://github.com/podverse/webln-v4v","last_synced_at":"2025-05-01T13:31:33.322Z","repository":{"id":42699512,"uuid":"492197113","full_name":"podverse/webln-v4v","owner":"podverse","description":"A library for injecting a form for sending Value-4-Value Bitcoin Lightning payments with an LNURL compatible browser extension","archived":false,"fork":false,"pushed_at":"2024-08-06T21:46:58.000Z","size":570,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-07T12:20:58.832Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/podverse.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["podverse"],"patreon":"podverse"}},"created_at":"2022-05-14T11:31:59.000Z","updated_at":"2024-08-07T13:37:26.000Z","dependencies_parsed_at":"2023-01-30T20:01:29.655Z","dependency_job_id":null,"html_url":"https://github.com/podverse/webln-v4v","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/podverse%2Fwebln-v4v","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/podverse%2Fwebln-v4v/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/podverse%2Fwebln-v4v/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/podverse%2Fwebln-v4v/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/podverse","download_url":"https://codeload.github.com/podverse/webln-v4v/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224059330,"owners_count":17248775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T11:04:39.086Z","updated_at":"2024-11-12T11:06:29.762Z","avatar_url":"https://github.com/podverse.png","language":"Svelte","funding_links":["https://github.com/sponsors/podverse","https://patreon.com/podverse","https://www.paypal.com/donate?hosted_button_id=YKMNUDUCRTUPC","https://www.patreon.com/podverse"],"categories":[],"sub_categories":[],"readme":"# 🏗 webln-v4v\n\n\u003c!-- all-shields/header-badges:START --\u003e\n\n[![v1.0.0-beta.33](https://img.shields.io/badge/version-v1.0.0--beta.33-lightgray.svg?style=flat\u0026logo=)](https://github.com/podverse/webln-v4v/blob/main/CHANGELOG.md) [![](https://img.shields.io/npm/v/webln-v4v?color=CC3534\u0026logo=npm)](https://www.npmjs.com/package/webln-v4v) [![License: MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat\u0026logo=license)](https://github.com/podverse/webln-v4v/blob/main/LICENSE.md) [![Powered By Svelte](https://img.shields.io/badge/powered%20by-svelte-FF3C02.svg?style=flat\u0026logo=svelte)](https://svelte.dev/) [![Language: TypeScript](https://img.shields.io/badge/language-typescript-blue.svg?style=flat\u0026logo=typescript)](https://www.typescriptlang.org/) [![ECMAScript: 2019](https://img.shields.io/badge/ES-9-F7DF1E.svg?style=flat\u0026logo=javascript)](https://github.com/tc39/ecma262) [![Discord Server](https://discordapp.com/api/guilds/383373985666301975/embed.png)](https://discord.ptkdev.io)\n\n\u003c!-- all-shields/header-badges:END --\u003e\n\nA library for easily rendering a form on-page that lets your webpage visitors send Bitcoin Lightning payments with a WebLN compatible browser extension. This library is intended to be used with the Podcasting 2.0 RSS namespace \u003cpodcast:value\u003e for keysend payments..\n\n## DISCLAIMER 🚨🚨🚨\n\nThis is an experimental library. The software is provided AS-IS, we make no guarantees of its reliability, we are not responsible if your funds go missing or are sent to the wrong address, and you and your users assume all risks associated with using it.\n\n## Quick Start\n\nThe best place to start is with the [quick start guide](https://github.com/podverse/webln-v4v/blob/main/docs/quick-start.md). Hopefully it's as easy as copy/pasting a few lines into html.\n\n## Supported Browser Extensions\n\nThis widget will only render on a web page if it detects that the user has an [LNURL](https://github.com/fiatjaf/lnurl-rfc) compatible browser extension installed.\n\nCurrently supported browser extensions include:\n\n[Alby](https://github.com/getAlby/lightning-browser-extension)\n\n## Attribution / Donate to Patrick\n\nThank you to [@ptkdev](https://github.com/ptkdev) for creating the [svelte-webcomponent-boilerplate](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate). This project was built on top of this boilerplate. Please consider [donating to Patrick](https://github.com/ptkdev) for his great work.\n\n## Support Podverse\n\n\u003e Podverse is **free** / **open source** / **copylefted libre** software, and we would greatly appreciate your donations or pull requests 🙏\n\n\u003c!-- all-shields/sponsors-badges:START --\u003e\n\n[![Donate Paypal](https://img.shields.io/badge/donate-paypal-005EA6.svg?style=for-the-badge\u0026logo=paypal)](https://www.paypal.com/donate?hosted_button_id=YKMNUDUCRTUPC) [![Donate Patreon](https://img.shields.io/badge/donate-patreon-F87668.svg?style=for-the-badge\u0026logo=patreon)](https://www.patreon.com/podverse) [![Donate Bitcoin](https://img.shields.io/badge/BTC-bc1qqme0tj5gutgujsz62xqcfc6emfgm5wky27zc30-E38B29.svg?style=flat-square\u0026logo=bitcoin)](https://ptk.dev/img/icons/menu/bitcoin_wallet.png)\n\n\u003c!-- all-shields/sponsors-badges:END --\u003e\n\n## 📎 Menu\n\n-   💡 [Features](#-features)\n-   🕹 Demo - TODO: coming soon\n-   👔 Screenshot - TODO: coming soon\n-   🚀 [How to use](#-installation)\n-   -   🌎 [Web](#-installation-web)\n-   -   📦 [Webpack/Browserify](#-installation-npm-module---browserifywebpack)\n-   -   📖 [Wordpress](#-installation-wordpress)\n-   -   🔵 [React](#-installation-react)\n-   -   🔴 [Angular](#-installation-angular)\n-   -   🟠 [Svelte](#-installation-svelte)\n-   -   🟢 [Vue](#-installation-vue)\n-   📚 [Documentation](#-documentation)\n-   -   🧰 [Options / Attributes](#-options--attributes)\n-   -   🎨 [CSS Customization](#-css-customization)\n-   🔨 [Developer Mode](#-developer-mode)\n-   -   🏁 [Run Project](#-run-project)\n-   -   💾 [Setup Project](#-setup-project)\n-   🐛 [Known Bugs](https://github.com/podverse/webln-v4v/issues?q=is%3Aopen+is%3Aissue+label%3Abug)\n-   🍻 Community:\n-   \u003cimg src=\"https://raw.githubusercontent.com/podverse/webln-v4v/main/.github/assets/social_discord.png\" height=\"18px\"\u003e [Discord](https://discord.com/invite/6HkyNKR))\n-   \u003cimg src=\"https://raw.githubusercontent.com/podverse/webln-v4v/main/.github/assets/social_twitter.png\" height=\"18px\"\u003e [Twitter](http://twitter.com/podverse)\n\n## 💡 Features\n\n-   [✔️] Easy to use\n-   [✔️] MIT License\n-   [✔️] Text animation by [Nooray Yemon](https://codepen.io/yemon) on [Codepen](https://codepen.io/yemon/pen/pWoROm)\n-   [✔️] Friendly boilerplate + Github templates\n-   [✔️] Powered by svelte framework\n-   [✔️] Without jQuery depencence\n-   [✔️] Configurable with attributes\n-   [✔️] Customization with CSS Style\n-   [✔️] HTML5 Custom Elements - Native webcomponents\n-   [✔️] Work with: Browserify / Webpack / ReactJS / Svelte / Angular / Vue / Wordpress\n-   [✔️] Typescript + TSPaths preconfigured\n-   [✔️] Userfriendly folders tree\n-   [✔️] Prettiers and ESLint preconfigured\n-   [✔️] all-contributors-cli and all-shields-cli preconfigured\n-   [✔️] JEST Test preconfigured\n-   [✔️] Full async code\n-   [✔️] Github and Vscode dotfiles preconfigured\n-   [✔️] Translations i18n (Help me ❤️)\n\n## 🚀 Installation (Web)\n\n1. Add html code to your page:\n\n```html\n\u003cwebln-v4v header=\"make\" flip=\"svelte,webcomponents,opensource\" footer=\"awesome!\"\u003e\u003c/webln-v4v\u003e\n```\n\n2. Require javascript in yourpage (before `\u003c/body\u003e`):\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/webln-v4v@latest/dist/webcomponent.js\"\u003e\u003c/script\u003e\n```\n\nYou can replace `@latest` with specific version, example `@2.0.1`.\n\nBelow is available a description of `options` values.\n\n## 📦 Installation (NPM Module - Browserify/Webpack)\n\n1. Install npm module: `npm install webln-v4v --save`\n2. Add html code to your page:\n\n```html\n\u003cwebln-v4v header=\"make\" flip=\"svelte,webcomponents,opensource\" footer=\"awesome!\"\u003e\u003c/webln-v4v\u003e\n```\n\n3. Require javascript in your app:\n\n```javascript\nrequire(\"webln-v4v\");\n```\n\nor\n\n```javascript\nimport \"webln-v4v\";\n```\n\nBelow is available a description of `options` values.\n\n## 📖 Installation (Wordpress)\n\n1. Download wordpress plugin from [mirror](https://cdn.jsdelivr.net/npm/webln-v4v@latest/dist/wordpress/webln-v4v-wordpress-plugin.zip) and install it.\n1. Add code to your html widget, example: `Appearance` --\u003e `Widget` --\u003e insert `HTML Widget` and paste html code:\n\n```html\n\u003cwebln-v4v header=\"make\" flip=\"svelte,webcomponents,opensource\" footer=\"awesome!\"\u003e\u003c/webln-v4v\u003e\n```\n\nYou can insert this html code in posts, widget, html box or theme.\n\n## 🔵 Installation (React)\n\n1. Install npm module with `npm install webln-v4v@latest --save`:\n2. Import module in your `src/App.js` on header:\n\n```javascript\nimport \"webln-v4v\";\n```\n\n3. Add html code to your `App.js` template:\n\n```html\n\u003cwebln-v4v header=\"make\" flip=\"svelte,webcomponents,opensource\" footer=\"awesome!\"\u003e\u003c/webln-v4v\u003e\n```\n\n## 🔴 Installation (Angular)\n\n1. Install npm module with `npm install webln-v4v@latest --save`:\n2. Import module in your `app/app.modules.ts` on header:\n\n```javascript\nimport \"webln-v4v\";\n```\n\n3. Add html code to your html component:\n\n```html\n\u003cwebln-v4v header=\"make\" flip=\"svelte,webcomponents,opensource\" footer=\"awesome!\"\u003e\u003c/webln-v4v\u003e\n```\n\n## 🟠 Installation (Svelte)\n\n1. Install npm module with `npm install webln-v4v@latest --save`:\n2. Import module in your `src/App.svelte` on header:\n\n```javascript\nimport \"webln-v4v\";\n```\n\n3. Add html code to your html component:\n\n```html\n\u003cwebln-v4v header=\"make\" flip=\"svelte,webcomponents,opensource\" footer=\"awesome!\"\u003e\u003c/webln-v4v\u003e\n```\n\n## 🟢 Installation (Vue)\n\n1. Install npm module with `npm install webln-v4v@latest --save`:\n2. Import module in your `src/App.vue` and add webcomponent to ignoreElements of vue config:\n\n```javascript\nimport Vue from \"vue\";\nimport \"webln-v4v\";\n\nVue.config.ignoredElements = [\"webln-v4v\"];\n```\n\n3. Add html code to your html component:\n\n```html\n\u003cwebln-v4v header=\"make\" flip=\"svelte,webcomponents,opensource\" footer=\"awesome!\"\u003e\u003c/webln-v4v\u003e\n```\n\n## 🧰 Options / Attributes\n\n| Parameter | Description                                  | Values             | Default value                     | Available since |\n| --------- | -------------------------------------------- | ------------------ | --------------------------------- | --------------- |\n| header    | Setup top text                               | String             | `make`                            | v1.0.20210319   |\n| flip      | Setup middle flip text (separte with commas) | String with commas | `svelte,webcomponents,opensource` | v1.0.20210319   |\n| footer    | Setup bottom text                            | String             | `awesome!`                        | v1.0.20210319   |\n\n#### HTML Code with attributes:\n\n```html\n\u003cwebln-v4v header=\"make\" flip=\"svelte,webcomponents,opensource\" footer=\"awesome!\"\u003e\u003c/webln-v4v\u003e\n```\n\n## 🎨 CSS Customization\n\nYou can overwrite default css with selector `::part`, example:\n\n```html\n\u003cstyle\u003e\n\twebln-v4v::part(flip) {\n\t\tborder: 2px solid red;\n\t}\n\u003c/style\u003e\n```\n\nPart attribute is, generally, suffix of a class. Use chrome inspector for get the correct value of `part=\"\"` attributes. See [MDN selector ::part docs](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).\n\n## 🔨 Developer Mode\n\n#### 🏁 Run Project\n\n1. Clone this repository or download [nightly](https://github.com/podverse/webln-v4v/archive/nightly.zip), [beta](https://github.com/podverse/webln-v4v/archive/beta.zip) or [stable](https://github.com/podverse/webln-v4v/archive/main.zip).\n2. Run `npm install`\n3. Run `npm run dev`\n4. Run `http://localhost:5000`\n\n#### 💾 Setup Project\n\nIf you want replace all strings (example: package name, author, urls, etc...) in markdown file, source files and others files of this project you need edit `setup.json` with correct values and run `npm run setup`.\n\n## 📚 Documentation\n\nRun `npm run docs`\n\n## 💫 License\n\n-   Code and Contributions have **MIT License**\n-   Images and logos have **CC BY-NC 4.0 License**\n-   Documentations and Translations have **CC BY 4.0 License**\n\n###### Copyleft (c) 2021 [Mitch Downey](https://github.com/mitchdowney) ([@Podverse](https://twitter.com/podverse))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpodverse%2Fwebln-v4v","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpodverse%2Fwebln-v4v","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpodverse%2Fwebln-v4v/lists"}