Explore feasibility of adding MementoEmbed markup in the expanded banner

[ibnesayeed]

@shawnmjones has done an excellent work on MementoEmbed. We should explore how can it be leveraged to provide embedding code in the expanded replay banner interface. Also, we should discuss what advantages would it bring to the table for users? There is an obvious motivation for us to leverage various tools of our lab in each other when they make sense.

[machawk1]

Possible dependencies/relevant tickets:

• Migrate code from Python 2.7.x to Python 3 #51 - ipwb Py3 compat.
• Setup a webhook on a ws-dl machine for testing and deploying new builds in a clean environment #152 (blocked by Replay ignores supplied index when the context is not a TTY #426) - support for WS-DL machine deployment

I would love for @shawnmjones to chime in on this ticket on appropriateness, feasibility, and potential unique features of integrating MementoEmbed into the ipwb replay system.

[machawk1]

I tried to use a local deployment of MementoEmbed via Docker. I first ran ipwb index ipwb/samples/warcs/froggie.warc.gz | ipwb replay and ensured the memento was accessible and the embedded image correctly replayed at http://localhost:5000/memento/20170301192639/cs.odu.edu/~mkelly/semester/2017_spring/remotefroggie.html.

I then ran the MementoEmbed service, submitted http://localhost:5000/memento/20170301192639/cs.odu.edu/~mkelly/semester/2017_spring/remotefroggie.html and it quickly returned a failure, as pictured.

[shawnmjones]

Wow. Thanks for the kudos @ibnesayeed and @machawk1!

There are multiple threads here.

@machawk1's error

@machawk1, one of the things I want to happen, but have not tested, is the viability of surrogates for private web archives. Thanks for trying this already. Please make a MementoEmbed ticket detailing how I can reproduce this.

The integration of MementoEmbed

I like the idea of integrating MementoEmbed with the replay banner interface. One of the things I'm currently looking into is providing more options for social card generation. Also remember that MementoEmbed does thumbnails.

How would these cards work in the banner? At the moment I'm focusing on changes in size, but there are a whole host of other things that can be altered. Elements (like images, etc.) could be removed. At some point, it would be cool if the user could even request their own stylesheet.

It's been a while since I've used ipwb. Perhaps I should play with it a bit and see where things are before rejoining the conversation.

[ibnesayeed]

@ibnesayeed where was this documented?

#152 blocked by #426

[shawnmjones]

Thanks for the ticket.

Is this the expanded banner? It works on Safari 11.1.2 and Chrome 67.0.3396.99 but does not render for Firefox 61.0.1. Here it is in Chrome:

What are your plans for it? Are we looking to provide a social card for each memento in a list?

[machawk1]

That is the "expanded banner", @shawnmjones. @ibnesayeed has a graphic in his JCDL 2018 paper with some sample things we hope to include in the expanded banner but can potentially iterate on them further (since the 2-pager was limited on space).

[ibnesayeed]

@machawk1 the error you are seeing is because the container running MementoEmbed is trying to fetch resources from its own localhost which is inside of the container itself and not the host machine or any other container. For the two services to run, we will need to access them via non-local domain names (but that would require (HTTPS) for proper replay in browsers. These services that share the same overlay network in Docker deployment can access each other via their service names.

[machawk1]

@ibnesayeed Thanks for noticing that. Perhaps I will try to install MementoEmbed on my machine sans docker to re-test this. @shawnmjones Please take oduwsdl/MementoEmbed#116 with a grain of salt due to the caveat @ibnesayeed supplied.

[ibnesayeed]

Here are my thoughts, I don't think we necessarily need MementoEmbed server to be running in order to provide embedding code. The MementoEmbed server is to extract necessary pieces of information from different archives, while the same is locally available in IPWB (or any other archive for that matter). So, they archives would want to provide such embedding code, they can locally compile it. We will perhaps need to serve the additional JS file for making the card render better when the embedding is used.

However, if MementoEmbed is doing something beyond what I just described then running an instance of it would be useful.

[ibnesayeed]

Is this the expanded banner? It works on Safari 11.1.2 and Chrome 67.0.3396.99 but does not render for Firefox 61.0.1. Here it is in Chrome:

Yes, this is the expanded mode of the banner. In the FAB (floating action bar) mode the banner has minimal information that are already present in each memento's headers, but when expanded we can load many more related resources and visualizations to show in it. As @machawk1 noted, some prototypes were shared in the JCDL 2018 poster. So I thought, an embedding code would be another good thing to include there which will only show up for each individual root memento when the banner on it is manually expanded.

The Firefox issue is known and being tracked in #433. FF does not support custom element yet, but their next release is expected to have it. We can perhaps polyfill it if we really want to support, but I would rather wait.

What are your plans for it? Are we looking to provide a social card for each memento in a list?

No, we will not list all the embeddings at once, but one at a time, that too on demand when the associated banner is expanded.

[ibnesayeed]

@shawnmjones can you provide a sample embedding code here please? So we can see what the embedding template lokks like and what placeholders we can fill just because we know about our holdings.

[ibnesayeed]

Here I am including the prototype mockup of the expanded banner that shows some potential elements to be included in it. Not everything shown is feasible for every archive, but it was part of the Reconstructive Banner prototype that is generic enough to be used in any replay system, be it an individual archive or an aggregator.

[shawnmjones]

One of the (not quite yet realized) goals of MementoEmbed is that a user/machine can create embeds that do not require a MementoEmbed instance. If you cache its results and have the JavaScript file somewhere local to your application, they should continue to work without MementoEmbed.

Sample embedding code:

    <blockquote class="mementoembed"
    data-versionurl="http://wayback.archive-it.org/4172/20140210180744/http://matkelly.com/"
    data-originalurl="http://matkelly.com/"
    data-surrogate-creation-time="2018-08-07T16:51:10Z"
    data-image="http://wayback.archive-it.org/4172/20140210180744/http:/matkelly.com/_images/logo.png"
    data-archive-name="ARCHIVE-IT.ORG"
    data-archive-favicon="https://www.google.com/s2/favicons?domain=archive-it.org"
    data-archive-uri="https://archive-it.org"
    data-archive-collection-id="4172"
    data-archive-collection-uri="https://archive-it.org/collections/4172"
    data-archive-collection-name="Archive-It Crawler Capability Tests"
    data-original-favicon="https://www.google.com/s2/favicons?domain=matkelly.com"
    data-original-domain="matkelly.com"
    data-original-link-status="Live"
    data-versiondate="2014-02-10T18:07:44Z"
    style="width: 445px; font-size: 12px; border: 1px solid rgb(231, 231, 231);"
    >
    <div class="me-textright">
    <p class="me-title"><a class="me-title-link" 
        data-originalurl="http://matkelly.com/"
        data-versiondate="2014-02-10T18:07:44Z"
        href="http://wayback.archive-it.org/4172/20140210180744/http://matkelly.com/">Mat Kelly - web designer, programmer</a></p>
    <p class="me-snippet">Skills Languages, Programs and Systems JavaScript, Objective-C, PHP, Python, Java, Perl, OCaml, C, C++, ASP/VBScript, BASIC variants, Assembly (x86, PPC, 68k), MySQL, MSSQL, Apache, IIS, Mercurial,</p>
    </div>
    </blockquote>
    <script async src="//mementoembed.ws-dl.cs.odu.edu/static/js/mementoembed-v20180806.js">    
    </script>

[shawnmjones]

Let me know if GitHub did not render that well. I was having some issues with the Markdown.

[ibnesayeed]

This looks good @shawnmjones, but I see a few things that might not be relevant to some archives (e.g., collection ID). What attributes are mandatory and how do you deal with missing attributes?

<blockquote class="mementoembed"
  data-versionurl="http://wayback.archive-it.org/4172/20140210180744/http://matkelly.com/"
  data-originalurl="http://matkelly.com/"
  data-surrogate-creation-time="2018-08-07T16:51:10Z"
  data-image="http://wayback.archive-it.org/4172/20140210180744/http:/matkelly.com/_images/logo.png"
  data-archive-name="ARCHIVE-IT.ORG"
  data-archive-favicon="https://www.google.com/s2/favicons?domain=archive-it.org"
  data-archive-uri="https://archive-it.org"
  data-archive-collection-id="4172"
  data-archive-collection-uri="https://archive-it.org/collections/4172"
  data-archive-collection-name="Archive-It Crawler Capability Tests"
  data-original-favicon="https://www.google.com/s2/favicons?domain=matkelly.com"
  data-original-domain="matkelly.com"
  data-original-link-status="Live"
  data-versiondate="2014-02-10T18:07:44Z"
  style="width: 445px; font-size: 12px; border: 1px solid rgb(231, 231, 231);">
  <div class="me-textright">
    <p class="me-title">
      <a class="me-title-link" 
        data-originalurl="http://matkelly.com/"
        data-versiondate="2014-02-10T18:07:44Z"
        href="http://wayback.archive-it.org/4172/20140210180744/http://matkelly.com/">
      Mat Kelly - web designer, programmer
      </a>
    </p>
    <p class="me-snippet">Skills Languages, Programs and Systems JavaScript, Objective-C, PHP, Python, Java, Perl, OCaml, C, C++, ASP/VBScript, BASIC variants, Assembly (x86, PPC, 68k), MySQL, MSSQL, Apache, IIS, Mercurial,</p>
  </div>
</blockquote>
<script async src="//mementoembed.ws-dl.cs.odu.edu/static/js/mementoembed-v20180806.js"></script>