diff --git a/docs/embedding.md b/docs/embedding.md index 66b627e..78a9ce6 100644 --- a/docs/embedding.md +++ b/docs/embedding.md @@ -63,7 +63,7 @@ The `` tag is a web component and supports a number of addition | Attribute | Description | |:-------------|:-----------------| -| `source` | Source URL for the archive file. It should be a URL in one of the [supported formats](/docs/formats) loaded from one of the [support locations](/docs/locations) and is required. If it is a relative URL, it will be evaluated relative to `replayBase`. | +| `source` | Source URL for the archive file. It should be a URL in one of the [supported formats](/docs/formats) loaded from one of the [support locations](/docs/locations) and is required. | | `url` | The starting URL to load from the archive. If omitted, will start with the page list or URL search view. | | `ts` | The timestamp of the starting URL to load. If omitted, the latest available version is used. | | `deepLink` | (`true` / `false`) if set to true, allow 'deep linking' to exact pages in the embed, besides the starting URL. | @@ -75,24 +75,27 @@ The `` tag is a web component and supports a number of addition ### Versioning -Note that the above example uses the paths as, which is a CDN for Javascript packages: +Note that the above example uses the paths as, which is a CDN for Javascript packages at a specific version: - `https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.version }}/ui.js` - `https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.version }}/sw.js` -Another alternative using a different would be: - -- `https://unpkg.com/replaywebpage@{{ site.version }}/ui.js` -- `https://unpkg.com/replaywebpage@{{ site.version }}/sw.js` - These URLs point to a specific version of ReplayWeb.page software released on NPM, eg. `{{ site.version }}`, meaning that your replay should stay stable, even if ReplayWeb.page is updated. -You can choose another of ReplayWeb.page (or even try different versions) to ensure that you have the best available replay. +Although ReplayWeb.page strives to remain backwards compatible, this addresses any potential issue of older embeds breaking when the replay system is updated. -This addresses the potential issue of older sites breaking when web archive replay software is updated. +You can also use the latest stable release by omitting the version, and the URL will automatically load the latest published release: + +- `https://cdn.jsdelivr.net/npm/replaywebpage/ui.js` +- `https://cdn.jsdelivr.net/npm/replaywebpage/sw.js` + +This is not recommended for full production use as this is more likely to break in case there is a breaking change. + +For testing the very latest, it is possible to simply link to replayweb.page itself, eg. `https://replayweb.page/ui.js` +and `https://replayweb.page/sw.js` but these are updated the most frequently and more likely to break. + +For production use, it is recommended to use a fixed version and explicitly upgrade as necessary. -For production use, it is advised against linking to the latest version, eg. `https://replayweb.page/ui.js` -and `https://replayweb.page/sw.js` as these will be updated frequently and make break your embed. ## Common Issues diff --git a/src/embed.js b/src/embed.js index 8f4a286..1e1a7ac 100644 --- a/src/embed.js +++ b/src/embed.js @@ -121,8 +121,10 @@ class Embed extends LitElement this.embed = this.embed || "default"; + const source = new URL(this.source, document.baseURI); + this.paramString = new URLSearchParams({ - source: this.source, + source, customColl: this.coll, config: this.config, basePageUrl: window.location.href.split("#")[0], diff --git a/ui.js b/ui.js index 3dba163..a5d3615 100644 --- a/ui.js +++ b/ui.js @@ -2302,7 +2302,7 @@ const It=new WeakMap,Rt=v(e=>t=>{if(!(t instanceof D))throw new Error("unsafeHTM `):q`No Results Found.`} - `}onSort(e){e.preventDefault();const t=e.currentTarget.getAttribute("data-key");t===this.sortKey?this.sortDesc=!this.sortDesc:(this.sortDesc=!1,this.sortKey=t)}onSortChanged(e){this.sortedResults=e.detail.sortedData,this.sortKey=e.detail.sortKey,this.sortDesc=e.detail.sortDesc}onReplay(e){e.preventDefault();const t={url:e.currentTarget.getAttribute("data-url"),ts:e.currentTarget.getAttribute("data-ts")};return this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{data:t}})),!1}}customElements.define("wr-coll-resources",li);var ci=document.currentScript&&document.currentScript.src;class di extends re{constructor(){super(),this.replaybase="./replay/",this.swName="sw.js",this.view="replay",this.ts="",this.url="",this.query="",this.config="",this.coll="",this.paramString=null,this.deepLink=!1,this.swInited=!1,this.embed=null,this.reloadCount=0}static get properties(){return{url:{type:String},ts:{type:String},query:{type:String},source:{type:String},view:{type:String},embed:{type:String},replaybase:{type:String},swName:{type:String},title:{type:String},coll:{type:String},config:{type:String},swInited:{type:Boolean},paramString:{type:String},hashString:{type:String},deepLink:{type:Boolean},noSW:{type:Boolean}}}async doRegister(){try{await Se(this.swName,this.replaybase),console.log("done"),this.swInited=!0}catch(e){console.log(e),this.noSW=!0}}firstUpdated(){this.doRegister(),window.addEventListener("message",e=>{const t=this.renderRoot.querySelector("iframe");if(t&&e.source===t.contentWindow){if(e.data.title&&(this.title=e.data.title),!this.deepLink)return;const t=new URLSearchParams(e.data),i=new URL(window.location.href);i.hash="#"+t.toString(),window.history.replaceState({},"",i)}}),this.deepLink&&(this.updateFromHash(),window.addEventListener("hashchange",e=>this.updateFromHash()))}updateFromHash(){const e=new URLSearchParams(window.location.hash.slice(1));e.has("url")&&(this.url=e.get("url")),e.has("ts")&&(this.ts=e.get("ts")),e.has("query")&&(this.query=e.get("query")),e.has("view")&&(this.view=e.get("view"))}updated(e){(e.has("url")||e.has("ts")||e.has("query")||e.has("view")||e.has("source"))&&(this.embed=this.embed||"default",this.paramString=new URLSearchParams({source:this.source,customColl:this.coll,config:this.config,basePageUrl:window.location.href.split("#")[0],embed:this.embed}).toString(),this.hashString=new URLSearchParams({url:this.url,ts:this.ts,query:this.query,view:this.view}).toString())}static get styles(){return ue(ie` + `}onSort(e){e.preventDefault();const t=e.currentTarget.getAttribute("data-key");t===this.sortKey?this.sortDesc=!this.sortDesc:(this.sortDesc=!1,this.sortKey=t)}onSortChanged(e){this.sortedResults=e.detail.sortedData,this.sortKey=e.detail.sortKey,this.sortDesc=e.detail.sortDesc}onReplay(e){e.preventDefault();const t={url:e.currentTarget.getAttribute("data-url"),ts:e.currentTarget.getAttribute("data-ts")};return this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{data:t}})),!1}}customElements.define("wr-coll-resources",li);var ci=document.currentScript&&document.currentScript.src;class di extends re{constructor(){super(),this.replaybase="./replay/",this.swName="sw.js",this.view="replay",this.ts="",this.url="",this.query="",this.config="",this.coll="",this.paramString=null,this.deepLink=!1,this.swInited=!1,this.embed=null,this.reloadCount=0}static get properties(){return{url:{type:String},ts:{type:String},query:{type:String},source:{type:String},view:{type:String},embed:{type:String},replaybase:{type:String},swName:{type:String},title:{type:String},coll:{type:String},config:{type:String},swInited:{type:Boolean},paramString:{type:String},hashString:{type:String},deepLink:{type:Boolean},noSW:{type:Boolean}}}async doRegister(){try{await Se(this.swName,this.replaybase),console.log("done"),this.swInited=!0}catch(e){console.log(e),this.noSW=!0}}firstUpdated(){this.doRegister(),window.addEventListener("message",e=>{const t=this.renderRoot.querySelector("iframe");if(t&&e.source===t.contentWindow){if(e.data.title&&(this.title=e.data.title),!this.deepLink)return;const t=new URLSearchParams(e.data),i=new URL(window.location.href);i.hash="#"+t.toString(),window.history.replaceState({},"",i)}}),this.deepLink&&(this.updateFromHash(),window.addEventListener("hashchange",e=>this.updateFromHash()))}updateFromHash(){const e=new URLSearchParams(window.location.hash.slice(1));e.has("url")&&(this.url=e.get("url")),e.has("ts")&&(this.ts=e.get("ts")),e.has("query")&&(this.query=e.get("query")),e.has("view")&&(this.view=e.get("view"))}updated(e){if(e.has("url")||e.has("ts")||e.has("query")||e.has("view")||e.has("source")){this.embed=this.embed||"default";const e=new URL(this.source,document.baseURI);this.paramString=new URLSearchParams({source:e,customColl:this.coll,config:this.config,basePageUrl:window.location.href.split("#")[0],embed:this.embed}).toString(),this.hashString=new URLSearchParams({url:this.url,ts:this.ts,query:this.query,view:this.view}).toString()}}static get styles(){return ue(ie` .logo { margin: 1em; flex-grow: 1;