# ad-auris-iframe-distribution > script to conside with Ad-Auris's audio widget distribution Latest version **2.1.0** (published 2024-05-06) · ISC license · 0 weekly downloads ## Install ```sh npm install ad-auris-iframe-distribution pnpm add ad-auris-iframe-distribution yarn add ad-auris-iframe-distribution bun add ad-auris-iframe-distribution ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.1.0 | | Published | 2024-05-06 | | First published | 2021-04-14 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 152 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Nick Kao | | Maintainers | nickkao, adauris | ## Links - npm: https://www.npmjs.com/package/ad-auris-iframe-distribution - Repository: https://github.com/Ad-Auris/iframe-distribution - Homepage: https://github.com/Ad-Auris/iframe-distribution#readme - Issues: https://github.com/Ad-Auris/iframe-distribution/issues - npm.io page: https://npm.io/package/ad-auris-iframe-distribution ## Dependencies (1) - [np](https://npm.io/package/np.md) ^7.4.0 ## Recent versions - 2.1.0 (latest) — 2024-05-06 - 2.0.1 — 2021-08-27 - 2.0.0 — 2021-08-23 - 1.3.0 — 2021-07-26 - 1.2.10 — 2021-07-13 - 1.2.9 — 2021-07-13 - 1.2.8 — 2021-07-11 - 1.2.7 — 2021-07-11 - 1.2.6 — 2021-07-11 - 1.2.5 — 2021-07-10 - 1.2.4 — 2021-07-10 - 1.2.3 — 2021-07-10 - 1.2.2 — 2021-07-09 - 1.2.1 — 2021-07-09 - 1.2.0 — 2021-07-09 - … 9 more at https://npm.io/package/ad-auris-iframe-distribution/versions ## README ## High level notes #### Non-minified `script-non-minified.js` - non minified version of typical version - This is `production` ready - To then minify see below for *Examples of use* - transformation: `script-non-minfied.js` -> `script.js` `preloaded-non-minified-script.js` - non minified version of preload version - the idea is the script goes above the iframe, which makes the logic a little harder but has possible speed games (not measured). - to then minify see below for *Examples of use* - transformation: `preloaded-non-minified-script.js` -> `preloaded-script.js` `canonical-url-non-minified-script.js` - This is WIP for retriving the url via a specific property of a link node with a rel attribute as `canonical` - This is a specific case for users that transfer sites and thus break url normalization ability - transformation: `canonical-url-non-minified-script.js` -> `canonical-url.js` `newspack-script-non-minified.js` - newspack version - difference is the nature of the iframe - read more about [newspack](https://newspack.pub/) here `newspack-preloaded-non-minified-script.js` - newspack version - difference is the nature of the iframe - read more about [newspack](https://newspack.pub/) here - This is a WIP, not currently being used ---------- #### Minified `preloaded-script.js` - script goes before iframe, attempt to load resource quickly `script.js` - script goes after, non blocking of other resources - This is `production` ready and is currently in use `canonical-url.js` - instead of using href, grabs canonical to compare with resource ---------- ### Introduction This is the repository that contains scripts that powers our dynamic iframe Although there are multiple permutations of the scripts outlined above the general flow of logic for each are all quite similar. #### General flow 1. retrieve the url of the page this script is on 2. retrieve an identification of the organisation 3. normalize url 4. request dynamic widget service to find narration corresponding to url 4a. if exists place into iframe source appropriate widget url 4b. if does not exist, hide iframe #### Why are there different permutations The different permutations, exist due to different limitations or requirements of different platforms (e.g. newspack vs regular webpage). ### Technologies For each of the scripts we import axios at the top by copying it's minified version to the top of the file. This can be improved and is touched on in technical debt. Outside of this, plain js is used ### Installation & Setup The use case of this was meant to be a script ``` ``` `https://cdn.jsdelivr.net/npm/ad-auris-iframe-distribution@latest/script.js` We deliver this script via a cdn attached to `npm` you can update this package using the [np](https://www.npmjs.com/package/np) package ### Scope of functionalities This is meant to render the correct widget for the given article it finds it self in ### Examples of use Currently being used in the dashboard , for our dynamic widget. Contact the team if you need help finding this on the dashboard. There is a slight variation to that html snippet for [AMP](https://amp.dev/) sites due to the restrictive nature of AMP rules. Learn more from our [docs](https://adauris.atlassian.net/wiki/spaces/AA/pages/147914762/Dynamic+widget+distribution+in+AMP.) ### Technical Debt Axios is being used but instead can rely on more lower level network calls such as [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) This has only been tested manually, it would be good to create a "staging" area to test changes to these scripts ### TODOs Because this script is being used inside of clients websites, the speed of this flow is important. However there are no metrics on the speed outside of guessing that it is bad (by eye). All fault does not lie on this script, as it is simply the initiator to a bunch more other services that all contribute delay. ### Where is testing needed? You can trial this by looking at the different `temp*.html` files. You will have to do some modification to the logic inside of whichever file you modify A testing environment that emulates how a user will use this script in conjunction with their website would be effective. --- _Source: https://npm.io/package/ad-auris-iframe-distribution · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._