From bd26871040b34e36eae167ac72e2b06f88b6569a Mon Sep 17 00:00:00 2001 From: "Patryk Rzucidlo (PTKDev)" Date: Thu, 4 Mar 2021 11:23:59 +0100 Subject: [PATCH] [Release] v2.9.0 --- .husky/.gitignore | 1 + .husky/pre-commit | 4 + CHANGELOG.md | 98 +- README.md | 141 +- dist/lib/en/instagram-widget.js | 39 +- dist/lib/en/instagram-widget.min.js | 4 +- dist/lib/it/instagram-widget.js | 39 +- dist/lib/it/instagram-widget.min.js | 4 +- dist/lib/pl/instagram-widget.js | 39 +- dist/lib/pl/instagram-widget.min.js | 4 +- .../instagram-widget-wordpress-plugin.zip | Bin 29915 -> 31109 bytes package-lock.json | 28561 ++++++++++++++-- package.json | 67 +- webcomponent/html/index.html | 8 +- webcomponent/html/main.html | 20 +- webcomponent/js/main.js | 14 +- 16 files changed, 25941 insertions(+), 3102 deletions(-) create mode 100644 .husky/.gitignore create mode 100755 .husky/pre-commit diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 0000000..31354ec --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..449fcde --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npm test diff --git a/CHANGELOG.md b/CHANGELOG.md index dd78678..29ccc36 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,69 +1,89 @@ # v3.0.0-nightly (TBD) -* Feature: Fetch with instagram token/facebook open graph -* Refactor: move to typescript -[![](https://img.shields.io/badge/donate-paypal-005EA6.svg?logo=paypal)](https://www.paypal.me/ptkdev) [![](https://img.shields.io/badge/donate-patreon-F87668.svg?logo=patreon)](https://www.patreon.com/ptkdev) [![](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?logo=github)](https://github.com/sponsors/ptkdev/) [![](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?logo=ko-fi)](https://ko-fi.com/ptkdev) +- Feature: Fetch with instagram token/facebook open graph +- Refactor: move to typescript + +[![](https://img.shields.io/badge/donate-paypal-005EA6.svg?logo=paypal)](https://www.paypal.me/ptkdev) [![](https://img.shields.io/badge/donate-patreon-F87668.svg?logo=patreon)](https://www.patreon.com/ptkdev) [![](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?logo=github)](https://github.com/sponsors/ptkdev/) [![](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?logo=ko-fi)](https://ko-fi.com/ptkdev) + +# v2.9.0 (March 04, 2021) + +- API RATE LIMIT: Instagram added CORS to a public api `https://www.instagram.com/${this.options["username"]}/?__a=1` with `?__a` get parameter and this widget stopped work. Current workaround: we use google images proxy +- Security: Update # v2.8.0 (February 09, 2021) -* Fix: Can't change default username [#6](https://github.com/ptkdev-components/webcomponent-instagram-widget/issues/6) -* Fix: localstorage with username as key (cache all usernames) + +- Fix: Can't change default username [#6](https://github.com/ptkdev-components/webcomponent-instagram-widget/issues/6) +- Fix: localstorage with username as key (cache all usernames) # v2.7.1 (January 17, 2021) -* Feature: fetch from backup if get limit api request (from localStorage) -* Feature: loading spinner -* Feature: error fetch message + +- Feature: fetch from backup if get limit api request (from localStorage) +- Feature: loading spinner +- Feature: error fetch message # v2.6.1 (May 19, 2020) -* New: Wordpress Plugin available on [store](https://wordpress.org/plugins/last-9-photos-webcomponent/). + +- New: Wordpress Plugin available on [store](https://wordpress.org/plugins/last-9-photos-webcomponent/). # v2.6.0 (May 18, 2020) -* Feature: Overwrite CSS Style with selector `::part` -* New attribute: mouse-hover -* New attribute: show-title -* New attribute: shadows -* Fix: Wordpress Plugin + +- Feature: Overwrite CSS Style with selector `::part` +- New attribute: mouse-hover +- New attribute: show-title +- New attribute: shadows +- Fix: Wordpress Plugin # v2.5.0 (May 04, 2020) -* Fix: now you can use multiple webcomponents in the same html page (#3) -* NOTE: better to use the full close tag `` than short `/>` + +- Fix: now you can use multiple webcomponents in the same html page (#3) +- NOTE: better to use the full close tag `` than short `/>` # v2.4.0 (May 02, 2020) -* New attribute: `force-square` -* Feature: wordpress-plugin + +- New attribute: `force-square` +- Feature: wordpress-plugin # v2.3.0 (May 01, 2020) -* Fix: `border-corners` and `border-spacing` now work without `grid` attribute. -* Fix: NPM Module give errors with require/import -* Update: examples + +- Fix: `border-corners` and `border-spacing` now work without `grid` attribute. +- Fix: NPM Module give errors with require/import +- Update: examples # v2.2.0 (April 30, 2020) -* Fix: `grid` now is more responsive (now use `calc()` function: `100%` - `spacing/padding/margin`) -* Fix: default values now work (hello object reference my old dark friend) + +- Fix: `grid` now is more responsive (now use `calc()` function: `100%` - `spacing/padding/margin`) +- Fix: default values now work (hello object reference my old dark friend) # v2.1.1 (April 28, 2020) -* New attribute: cache -* New attribute: border-corners -* New attribute: border-spacing -* Performance: now component send api request only if you change `username` -* Fix: refresh attributes random don't work + +- New attribute: cache +- New attribute: border-corners +- New attribute: border-spacing +- Performance: now component send api request only if you change `username` +- Fix: refresh attributes random don't work # v2.0.0 (April 28, 2020) -* Removed "ptkdev-" prefix -* Module for Browserify/Webpack (run: `npm install @ptkdev/webcomponent-instagram-widget`) -* Fix: Grid bug -* Installation guidelines: Browserify / Webpack / ReactJS / Angular / Wordpress + +- Removed "ptkdev-" prefix +- Module for Browserify/Webpack (run: `npm install @ptkdev/webcomponent-instagram-widget`) +- Fix: Grid bug +- Installation guidelines: Browserify / Webpack / ReactJS / Angular / Wordpress # v1.1.1 (April 27, 2020) -* Update CDN (New url!) -* Update build/dist + +- Update CDN (New url!) +- Update build/dist # v1.1.0 (April 27, 2020) -* New attribute: items-limit -* New attribute: grid -* New attribute: image-width / image-height + +- New attribute: items-limit +- New attribute: grid +- New attribute: image-width / image-height # v1.0.1 (April 26, 2020) -* Update CDN + +- Update CDN # v1.0.0 (April 26, 2020) -* First Release. \ No newline at end of file + +- First Release. diff --git a/README.md b/README.md index 39bf79d..81217b9 100755 --- a/README.md +++ b/README.md @@ -1,58 +1,66 @@ # 🌉 WebComponent: Instagram Widget -[![](https://img.shields.io/badge/version-v2.8.0-lightgrey.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/releases) [![](https://img.shields.io/npm/v/@ptkdev/webcomponent-instagram-widget.svg)](https://www.npmjs.com/package/@ptkdev/webcomponent-instagram-widget) [![](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/blob/master/LICENSE.md) [![](https://img.shields.io/badge/ES-9-F7DF1E.svg)](https://wikipedia.org/wiki/ECMAScript) [![](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget/badge.svg)](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget) [![](https://discordapp.com/api/guilds/383373985666301975/embed.png)](http://discord.ptkdev.io) +[![](https://img.shields.io/badge/version-v2.9.0-lightgrey.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/releases) [![](https://img.shields.io/npm/v/@ptkdev/webcomponent-instagram-widget.svg)](https://www.npmjs.com/package/@ptkdev/webcomponent-instagram-widget) [![](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/blob/master/LICENSE.md) [![](https://img.shields.io/badge/ES-9-F7DF1E.svg)](https://wikipedia.org/wiki/ECMAScript) [![](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget/badge.svg)](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget) [![](https://discordapp.com/api/guilds/383373985666301975/embed.png)](http://discord.ptkdev.io) Last 9 Photos: Instagram Widget of your Instagram Profile for your blog. Show latest 9 pics from your instagram account. > ⛔ **DISCLAIMER**: This is an **unofficial** instagram library and offers no warranty! All trademarks and logos belong to their respective owners. ## 🎁 Support: Donate + > This project is **free**, **open source** and I try to provide excellent **free support**. Why donate? I work on this project several hours in my spare time and try to keep it up to date and working. **THANK YOU!** -[![](https://img.shields.io/badge/donate-paypal-005EA6.svg?logo=paypal)](https://www.paypal.me/ptkdev) [![](https://img.shields.io/badge/donate-patreon-F87668.svg?logo=patreon)](https://www.patreon.com/ptkdev) [![](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?logo=github)](https://github.com/sponsors/ptkdev/) [![](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?logo=ko-fi)](https://ko-fi.com/ptkdev) +[![](https://img.shields.io/badge/donate-paypal-005EA6.svg?logo=paypal)](https://www.paypal.me/ptkdev) [![](https://img.shields.io/badge/donate-patreon-F87668.svg?logo=patreon)](https://www.patreon.com/ptkdev) [![](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?logo=github)](https://github.com/sponsors/ptkdev/) [![](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?logo=ko-fi)](https://ko-fi.com/ptkdev) ![](https://img.shields.io/badge/bitcoin-35jQmZCy4nsxoMM3QPFrnZePDVhdKaHMRH-E38B29.svg?logo=bitcoin) ![](https://img.shields.io/badge/ethereum-0x8b8171661bEb032828e82baBb0B5B98Ba8fBEBFc-4E8EE9.svg?logo=ethereum) ## 📎 Menu -- 💡 [Features](#-features) -- 🕹 [Demo](https://codepen.io/ptkdev/pen/WNQOYqy) -- 👔 [Screenshot](#-screenshot) -- 🚀 [How to use](#-installation) -- - 🌎 [Web](#-installation-web) -- - 📦 [Webpack/Browserify](#-installation-npm-module---browserifywebpack) -- - 📖 [Wordpress](#-installation-wordpress) -- - ⚛️ [React](#%EF%B8%8F-installation-react) -- - 🅰️ [Angular](#🅰%EF%B8%8F-installation-angular) -- 📚 [Documentation](#-documentation) -- - 🧰 [Options / Attributes](#-options--attributes) -- - 🎨 [CSS Customization](#-css-customization) -- 🔨 [Developer Mode](#-developer-mode) -- 👨‍💻 [Contributing](#-contributing) -- 🐛 [Known Bugs](https://github.com/ptkdev-components/webcomponent-instagram-widget/issues?q=is%3Aopen+is%3Aissue+label%3Abug) -- 🍻 Community: - - [Discord](http://discord.ptkdev.io) ([🇬🇧 English Channel](https://discord.gg/YkMG26f) | [🇮🇹 Italian Channel](https://discord.gg/HFtdBAJ) | [🇵🇱 Polish Channel](https://discord.gg/TV5EXFd)) + +- 💡 [Features](#-features) +- 🕹 [Demo](https://codepen.io/ptkdev/pen/WNQOYqy) +- 👔 [Screenshot](#-screenshot) +- 🚀 [How to use](#-installation) +- - 🌎 [Web](#-installation-web) +- - 📦 [Webpack/Browserify](#-installation-npm-module---browserifywebpack) +- - 📖 [Wordpress](#-installation-wordpress) +- - ⚛️ [React](#%EF%B8%8F-installation-react) +- - 🅰️ [Angular](#🅰%EF%B8%8F-installation-angular) +- 📚 [Documentation](#-documentation) +- - 🧰 [Options / Attributes](#-options--attributes) +- - 🎨 [CSS Customization](#-css-customization) +- 🔨 [Developer Mode](#-developer-mode) +- 👨‍💻 [Contributing](#-contributing) +- 🐛 [Known Bugs](https://github.com/ptkdev-components/webcomponent-instagram-widget/issues?q=is%3Aopen+is%3Aissue+label%3Abug) +- 🍻 Community: + - [Discord](http://discord.ptkdev.io) ([🇬🇧 English Channel](https://discord.gg/YkMG26f) | [🇮🇹 Italian Channel](https://discord.gg/HFtdBAJ) | [🇵🇱 Polish Channel](https://discord.gg/TV5EXFd)) ## 💡 Features -* [✔️] Easy to use -* [✔️] MIT License -* [✔️] Without jQuery depencence -* [✔️] Configurable with attributes -* [✔️] Customization with CSS Style -* [✔️] Work with: Browserify / Webpack / ReactJS / Angular / Wordpress -* [✔️] Photos Widget of your Instagram Profile for your blog or website with this WebComponent -* [✔️] Translations: 🇬🇧 🇮🇹 🇵🇱 (Help me ❤️) + +- [✔️] Easy to use +- [✔️] MIT License +- [✔️] Without jQuery depencence +- [✔️] Configurable with attributes +- [✔️] Customization with CSS Style +- [✔️] Work with: Browserify / Webpack / ReactJS / Angular / Wordpress +- [✔️] Photos Widget of your Instagram Profile for your blog or website with this WebComponent +- [✔️] Translations: 🇬🇧 🇮🇹 🇵🇱 (Help me ❤️) ## 👔 Screenshot + See [Demo here](https://codepen.io/ptkdev/pen/WNQOYqy). Photos from @ptkdev account: [![WebComponent: InstagramWidget ](https://raw.githubusercontent.com/ptkdev-components/webcomponent-instagram-widget/nightly/.github/assets/screenshot/webcomponent-instagram-widget-screen1.png?)](https://raw.githubusercontent.com/ptkdev-components/webcomponent-instagram-widget/nightly/.github/assets/screenshot/webcomponent-instagram-widget-screen1.png) ## 🚀 Installation (Web) + 1. Add html code to your page (and replace `@ptkdev` with your instagram username): + ```html ``` + 2. Require javascript in yourpage (before ``): + ```html ``` @@ -62,25 +70,33 @@ You can replace `en` in jsdelivr cdn with `it` or `pl` and load different langua See folder `examples`, run with `npm run example`. Below is available a description of `options` values. ## 📦 Installation (NPM Module - Browserify/Webpack) + 1. Install npm module: `npm install @ptkdev/webcomponent-instagram-widget --save` 2. Add html code to your page (and replace `@ptkdev` with your instagram username): + ```html ``` + 3. Require javascript in your app: + ```javascript require("@ptkdev/webcomponent-instagram-widget"); ``` + or + ```javascript -import '@ptkdev/webcomponent-instagram-widget'; +import "@ptkdev/webcomponent-instagram-widget"; ``` See folder `examples`, run with `npm run example`. Below is available a description of `options` values. ## 📖 Installation (Wordpress) + 1. Download wordpress plugin from [official store](https://wordpress.org/plugins/last-9-photos-webcomponent/) or [mirror](https://github.com/ptkdev-components/webcomponent-instagram-widget/raw/master/dist/wordpress/instagram-widget-wordpress-plugin.zip) and install it. 1. Add code to your html widget, example: `Appearance` --> `Widget` --> insert `HTML Widget` and paste html code (and replace `@ptkdev` with your instagram username): + ```html ``` @@ -88,12 +104,16 @@ See folder `examples`, run with `npm run example`. Below is available a descript You can insert this html code in posts, widget, html box or theme. Where you want see instagram photos box. ## ⚛️ Installation (React) + 1. Install npm module with `npm install @ptkdev/webcomponent-instagram-widget@latest --save`: 2. Import module in your `src/App.js` on header: + ```javascript -import '@ptkdev/webcomponent-instagram-widget'; +import "@ptkdev/webcomponent-instagram-widget"; ``` + 3. Add html code to your `App.js` template (and replace `@ptkdev` with your instagram username): + ```html ``` @@ -101,12 +121,16 @@ import '@ptkdev/webcomponent-instagram-widget'; Go to `examples/reactjs` and run `npm run start` in folder for more info. Below is available a description of `options` values. ## 🅰️ Installation (Angular) + 1. Install npm module with `npm install @ptkdev/webcomponent-instagram-widget@latest --save`: 2. Import module in your `app/app.modules.ts` on header: + ```javascript -import '@ptkdev/webcomponent-instagram-widget'; +import "@ptkdev/webcomponent-instagram-widget"; ``` + 3. Add html code to your html component (and replace `@ptkdev` with your instagram username): + ```html ``` @@ -117,27 +141,38 @@ Go to `examples/angular` and run `yarn install` then `yarn start` in folder for ## 🧰 Options / Attributes -| Parameter | Description | Values | Default value | Available since | -| --- | --- | --- | --- | --- | -| username | Set your instagram username | Your instagram username with or without @ | `@ptkdev` | v1.0.0 | -| items-limit | Set the max number of pictures | number: from `0` to `12` | `9` | v1.1.0 | -| grid | Set grid aspect ratio | `1x1`, `2x2`, `3x3`, etc... or `responsive` | `responsive` | v1.1.0 | -| image-width | Set width of images (NOTE: grid different than `responsive` overwrite this value) | length units: `100%`, `100px`, `100pt` | `100%` | v1.1.0 | -| image-height | Set height of images | length units: `100%`, `100px`, `100` | `100%` | v1.1.0 | -| border-spacing | Set spacing around images | length units: `5%`, `5px`, `5pt` | `2px` | v2.1.0 | -| border-corners | Set border radius of corners: `0`: square / `15`: rounded / `100`: circle | number: from `0` to `100` | `5` | v2.1.0 | -| force-square | Force square aspect ratio if you post photos with different size on your instagram | `yes` / `no` | `yes` | v2.4.0 | -| shadows | Show shadows css | `type1`, `type2`, `type3`, `disabled` | `disabled` | v2.6.0 | -| mouse-hover | Show animation with mouse hover | `type1`, `disabled` | `disabled` | v2.6.0 | -| show-title | Show alt/title with hover of mouse | `enabled` / `disabled` | `enabled` | v2.6.0 | -| cache | Enable/disable fetch() cache | `enabled` / `disabled` | `enabled` | v2.1.0 | +| Parameter | Description | Values | Default value | Available since | +| -------------- | ---------------------------------------------------------------------------------- | ------------------------------------------- | ------------- | --------------- | +| username | Set your instagram username | Your instagram username with or without @ | `@ptkdev` | v1.0.0 | +| items-limit | Set the max number of pictures | number: from `0` to `12` | `9` | v1.1.0 | +| grid | Set grid aspect ratio | `1x1`, `2x2`, `3x3`, etc... or `responsive` | `responsive` | v1.1.0 | +| image-width | Set width of images (NOTE: grid different than `responsive` overwrite this value) | length units: `100%`, `100px`, `100pt` | `100%` | v1.1.0 | +| image-height | Set height of images | length units: `100%`, `100px`, `100` | `100%` | v1.1.0 | +| border-spacing | Set spacing around images | length units: `5%`, `5px`, `5pt` | `2px` | v2.1.0 | +| border-corners | Set border radius of corners: `0`: square / `15`: rounded / `100`: circle | number: from `0` to `100` | `5` | v2.1.0 | +| force-square | Force square aspect ratio if you post photos with different size on your instagram | `yes` / `no` | `yes` | v2.4.0 | +| shadows | Show shadows css | `type1`, `type2`, `type3`, `disabled` | `disabled` | v2.6.0 | +| mouse-hover | Show animation with mouse hover | `type1`, `disabled` | `disabled` | v2.6.0 | +| show-title | Show alt/title with hover of mouse | `enabled` / `disabled` | `enabled` | v2.6.0 | +| cache | Enable/disable fetch() cache | `enabled` / `disabled` | `enabled` | v2.1.0 | #### HTML Code with attributes: + ```html - + ``` ## 🎨 CSS Customization + You can overwrite default css with selector `::part`, example: ```html @@ -151,25 +186,30 @@ You can overwrite default css with selector `::part`, example: Part 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). ## 🔨 Developer Mode + 1. Download [nightly](https://github.com/ptkdev-components/webcomponent-instagram-widget/archive/nightly.zip), [beta](https://github.com/ptkdev-components/webcomponent-instagram-widget/archive/beta.zip) or [stable](https://github.com/ptkdev-components/webcomponent-instagram-widget/archive/master.zip). 2. Remove `.tpl` suffix from `config.js.tpl` file in `configs` folder and fill it properly. 3. Run `npm install` 4. Run `npm run dev` ## 📚 Documentation + Run `npm run docs` ## 👑 Sponsors + Support this project by becoming a sponsor. 🙏 Become a sponsor on [patreon](https://www.patreon.com/join/ptkdev) or become top3 sponsor on [ko-fi](https://ko-fi.com/ptkdev). Your logo will show up here with a link to your website. [![](https://api.ptkdev.io/backers/sponsor1.png?)](https://api.ptkdev.io/backers/sponsor1.html) [![](https://api.ptkdev.io/backers/sponsor2.png?)](https://api.ptkdev.io/backers/sponsor2.html) [![](https://api.ptkdev.io/backers/sponsor-kofi1.png?)](https://api.ptkdev.io/backers/sponsor-kofi1.html) [![](https://api.ptkdev.io/backers/sponsor-kofi2.png?)](https://api.ptkdev.io/backers/sponsor-kofi2.html) [![](https://api.ptkdev.io/backers/sponsor-kofi3.png?)](https://api.ptkdev.io/backers/sponsor-kofi3.html) [![](https://api.ptkdev.io/backers/sponsor3.png?)](https://api.ptkdev.io/backers/sponsor3.html) [![](https://api.ptkdev.io/backers/sponsor4.png?)](https://api.ptkdev.io/backers/sponsor4.html) [![](https://api.ptkdev.io/backers/sponsor5.png?)](https://api.ptkdev.io/backers/sponsor5.html) [![](https://api.ptkdev.io/backers/sponsor6.png?)](https://api.ptkdev.io/backers/sponsor6.html) [![](https://api.ptkdev.io/backers/sponsor7.png?)](https://api.ptkdev.io/backers/sponsor7.html) [![](https://api.ptkdev.io/backers/sponsor8.png?)](https://api.ptkdev.io/backers/sponsor8.html) [![](https://api.ptkdev.io/backers/sponsor9.png?)](https://api.ptkdev.io/backers/sponsor9.html) [![](https://api.ptkdev.io/backers/sponsor10.png?)](https://api.ptkdev.io/backers/sponsor10.html) [![](https://api.ptkdev.io/backers/sponsor11.png?)](https://api.ptkdev.io/backers/sponsor11.html) [![](https://api.ptkdev.io/backers/sponsor12.png?)](https://api.ptkdev.io/backers/sponsor12.html) [![](https://api.ptkdev.io/backers/sponsor13.png?)](https://api.ptkdev.io/backers/sponsor13.html) [![](https://api.ptkdev.io/backers/sponsor14.png?)](https://api.ptkdev.io/backers/sponsor14.html) [![](https://api.ptkdev.io/backers/sponsor15.png?)](https://api.ptkdev.io/backers/sponsor15.html) ## 🦄 Backers + Thank you to all our backers! 🙏 Become a backer on [patreon](https://www.patreon.com/join/ptkdev). [![](https://api.ptkdev.io/backers/backer1.png?)](https://api.ptkdev.io/backers/backer1.html) [![](https://api.ptkdev.io/backers/backer2.png?)](https://api.ptkdev.io/backers/backer2.html) [![](https://api.ptkdev.io/backers/backer3.png?)](https://api.ptkdev.io/backers/backer3.html) [![](https://api.ptkdev.io/backers/backer4.png?)](https://api.ptkdev.io/backers/backer4.html) [![](https://api.ptkdev.io/backers/backer5.png?)](https://api.ptkdev.io/backers/backer5.html) [![](https://api.ptkdev.io/backers/backer6.png?)](https://api.ptkdev.io/backers/backer6.html) [![](https://api.ptkdev.io/backers/backer7.png?)](https://api.ptkdev.io/backers/backer7.html) [![](https://api.ptkdev.io/backers/backer8.png?)](https://api.ptkdev.io/backers/backer8.html) [![](https://api.ptkdev.io/backers/backer9.png?)](https://api.ptkdev.io/backers/backer9.html) [![](https://api.ptkdev.io/backers/backer10.png?)](https://api.ptkdev.io/backers/backer10.html) [![](https://api.ptkdev.io/backers/backer11.png?)](https://api.ptkdev.io/backers/backer11.html) [![](https://api.ptkdev.io/backers/backer12.png?)](https://api.ptkdev.io/backers/backer12.html) [![](https://api.ptkdev.io/backers/backer13.png?)](https://api.ptkdev.io/backers/backer13.html) [![](https://api.ptkdev.io/backers/backer14.png?)](https://api.ptkdev.io/backers/backer14.html) [![](https://api.ptkdev.io/backers/backer15.png?)](https://api.ptkdev.io/backers/backer15.html) ## 👨‍💻 Contributing + I ❤️ contributions! I will happily accept your pull request! Translations, grammatical corrections (GrammarNazi you are welcome! Yes my English is bad, sorry), etc... Do not be afraid, if the code is not perfect we will work together 👯 and remember to insert your name in `.all-contributorsrc` and `package.json` file. Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): @@ -193,6 +233,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d > 💰 In the future, if the donations allow it, I would like to share some of the success with those who helped me the most. For me open source is share of code, share development knowledges and share donations! ## 📲 Tools + [![](https://img.shields.io/badge/portfolio-ptkdev-000000.svg)](https://ptk.dev/) [![](https://img.shields.io/badge/app-meingifs-E1215B.svg)](https://meingifs.pics/) [![](https://img.shields.io/badge/stickers-ptkdev-128C7E.svg)](https://stickers.ptkdev.io/) @@ -201,14 +242,16 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d [![](https://img.shields.io/badge/api-instagram%20bot-895a4d.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget) [![](https://img.shields.io/badge/api-twitter%20bot-21B7F4.svg)](https://github.com/social-manager-tools/socialmanagertools-twbot) [![](https://img.shields.io/badge/api-facebook%20bot-3b5998.svg)](https://github.com/social-manager-tools/socialmanagertools-fbbot) -[![](https://img.shields.io/badge/telegram%20bot-feed%20rss%20for%20wordpress%20&%20medium-00AB6C.svg)](https://github.com/social-manager-tools/socialmanagertools-tgbot) +[![](https://img.shields.io/badge/telegram%20bot-feed%20rss%20for%20wordpress%20&%20medium-00AB6C.svg)](https://github.com/social-manager-tools/socialmanagertools-tgbot) ## 🐍 Sorry for snake_case + I love snake_case syntax sorry for this 😭 don't hate me. ## 💫 License -* Code and Contributions have **MIT License** -* Images and logos have **CC BY-NC 4.0 License** ([Freepik](https://it.freepik.com/) Premium License) -* Documentations and Translations have **CC BY 4.0 License** + +- Code and Contributions have **MIT License** +- Images and logos have **CC BY-NC 4.0 License** ([Freepik](https://it.freepik.com/) Premium License) +- Documentations and Translations have **CC BY 4.0 License** ###### Copyleft (c) 2020 [Patryk Rzucidło](https://ptk.dev) ([@PTKDev](https://twitter.com/ptkdev)) <[support@ptkdev.io](mailto:support@ptkdev.io)> diff --git a/dist/lib/en/instagram-widget.js b/dist/lib/en/instagram-widget.js index c83400f..e3ef459 100644 --- a/dist/lib/en/instagram-widget.js +++ b/dist/lib/en/instagram-widget.js @@ -1,4 +1,4 @@ -// WebComponent: InstagramWidget 2.8.0 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] +// WebComponent: InstagramWidget 2.9.0 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] // https://github.com/ptkdev-components/webcomponent-instagram-widget (function() { /** * InstagramWidget WebComponent @@ -15,10 +15,10 @@ class InstagramWidget extends HTMLElement { super(); const template = document.createElement("template"); - template.innerHTML = `
+ template.innerHTML = `
-
+
- -
`; +
+`; this.attachShadow({mode: "open"}); this.shadowRoot.appendChild(template.content.cloneNode(true)); @@ -242,27 +243,25 @@ class InstagramWidget extends HTMLElement { */ apiFetch() { this.options["username"] = this.options["username"].replace("@", ""); - let url = `https://www.instagram.com/${this.options["username"]}/?__a=1`; + // let url = `https://www.instagram.com/${this.options["username"]}/?__a=1`; // fuck you instagram and CORS + let url = `https://images${~~(Math.random() * 3333)}-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=${encodeURI(`https://www.instagram.com/${this.options["username"]}`)}`; fetch(url, { - cache: this.options["cache"] === null || this.options["cache"] === "enabled" ? "force-cache" : "default", + method: "GET", mode: "cors", redirect: "follow", cache: this.options["cache"] === null || this.options["cache"] === "enabled" ? "force-cache" : "default", }) .then(function(response) { - return response.json(); + return response.text(); }) .then( function(response) { - this.json = response; - // this.json = JSON.parse(response.match(new RegExp(/ - \ No newline at end of file + diff --git a/webcomponent/html/main.html b/webcomponent/html/main.html index 609134e..380c11e 100644 --- a/webcomponent/html/main.html +++ b/webcomponent/html/main.html @@ -1,7 +1,7 @@
-
+
- -
\ No newline at end of file +
diff --git a/webcomponent/js/main.js b/webcomponent/js/main.js index 42a37ff..9aa1b55 100644 --- a/webcomponent/js/main.js +++ b/webcomponent/js/main.js @@ -190,27 +190,25 @@ class InstagramWidget extends HTMLElement { */ apiFetch() { this.options["username"] = this.options["username"].replace("@", ""); - let url = `https://www.instagram.com/${this.options["username"]}/?__a=1`; + // let url = `https://www.instagram.com/${this.options["username"]}/?__a=1`; // fuck you instagram and CORS + let url = `https://images${~~(Math.random() * 3333)}-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=${encodeURI(`https://www.instagram.com/${this.options["username"]}`)}`; fetch(url, { - cache: this.options["cache"] === null || this.options["cache"] === "enabled" ? "force-cache" : "default", + method: "GET", mode: "cors", redirect: "follow", cache: this.options["cache"] === null || this.options["cache"] === "enabled" ? "force-cache" : "default", }) .then(function(response) { - return response.json(); + return response.text(); }) .then( function(response) { - this.json = response; - // this.json = JSON.parse(response.match(new RegExp(/