internetarchive / internetarchive/bookreader

Prototype an Open Library Citation Embed feature (experimental)

Open
#1,363 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.2k
Forks
491
Avg merge
2d 15h
Merged PRs (30d)
3

Description

### Proposal

The BookReader and CORS policies are likely not perfectly set up for this and there's no guarantee this feature ships to production, but for anyone interested, the idea is to create a prototype (similar to youtube embeds) which allows someone from Open Library to find a readable book, search inside that book, and then click a button to create an embeddable preview (copying the code to their clipboard)

TL;DR e.g. highlight region on book + click "create sharable citation" -> gives embed code

e.g.
1. open up an archive.org book
2. highlight the region of text to share
3. upon highlight, a button emerges to create as "youtube" style share/embed
4. you get a snippet of code copied to your clipboard one may paste anywhere on the web and hovering over results in a cropped snippet that is the citation OR another [better] option is that the button generates something like of like a gist or pastebin which is just an item filled with citation regions that you link directly to (e.g. on x) w/o copying code.

### Design / Demo

https://codepen.io/mekarpeles/pen/OPLgGyR

In this codepen, hovering over the eye pulls up a limited preview, ideally to the correct page with the region highlighted:

Screenshot 2024-12-25 at 10 27 17 AM

### Justification

Let more sits like wikipedia round the web reference and cite books in an interactive way with previews.

Brainstorm:
Screenshot 2024-12-25 at 12 33 49 PM

### Research

Are there any precedents or findings from other projects or studies that support this feature? (link or screenshot if possible)

See Youtube's Share flow

#### 1. Select "Share":

Screenshot 2024-12-25 at 10 32 15 AM

#### 2. Click "Embed" option:

Screenshot 2024-12-25 at 10 32 37 AM

#### 3. Copy the code

Screenshot 2024-12-25 at 10 31 50 AM

### Breakdown

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.