internetarchive / internetarchive/openlibrary

Replace the Wikipedia citation dialog with an ol-popover

Open
#13,651 4 comments 0 reactions 1 assignee Claimed by @iamshravanijadhav View on GitHub
Good First Issue Lead: @lokesh Team: Front-end Theme: Design Type: Refactor/Clean-up
Dominant language
Python
Stars
6.7k
Forks
2k
Avg merge
2d 14h
Merged PRs (30d)
126

Description

### Summary

On edition pages (`/books/OL…M`), the "Wikipedia citation" link at the bottom of the page opens an old jQuery dialog with a `` holding the `{{cite book|…}}` code. Replace it with an `<ol-popover>` that has a one-click copy button, and style the link and copy button like the ones on the [Icons design page](https://openlibrary.org/developers/design/icons). Click any icon there to see the popover.

<img width="446" height="121" alt="Image" src="https://github.com/user-attachments/assets/d283192f-8986-4013-a572-796de8b05db2" />

<img width="847" height="385" alt="Image" src="https://github.com/user-attachments/assets/3b880858-3beb-44ef-b025-c9d8d567dd39" />

### Where it lives

- **Template:** `openlibrary/templates/lib/exports.html`. It renders the `#wikilink` trigger (`.dialog--open`) and the hidden `#wikicode` dialog.
- **JS:** `openlibrary/plugins/openlibrary/js/dialog.js` (`.dialog--open` / `.dialog--close`), wired up in `js/main.js`
- **Data:** `Edition.wp_citation_fields` in `openlibrary/plugins/upstream/models.py`. It only exists on editions, so the link only appears on `/books/…` URLs, not on work or author pages.

### Reference implementation

- **Popover and copy well:** the `icon_popover()` macro in `openlibrary/templates/design/icons.html.jinja`
- **Styles:** `.ds-icon-popover__*` in `static/css/page-design.css`. When you click, the copy glyph swaps for a check.
- **Copy handler:** `openlibrary/plugins/openlibrary/js/design-system/index.js` (`data-ds-copy`)
- **Popover component:** `openlibrary/components/lit/OlPopover.js`, documented under [Popover on the Components design page](https://openlibrary.org/developers/design/components#popover) (examples plus the API reference)

### Acceptance criteria

- [ ] Clicking "Wikipedia citation" opens an `<ol-popover>` anchored to the link, and a bottom tray on mobile.
- [ ] The popover shows the `{{cite book|…}}` code, a copy button with copied feedback, and the existing "Need help?" link to Wikipedia's Cite book template.
- [ ] The link and copy button match the styling on the Icons page. Move shared styles out of `page-design.css` rather than reusing `ds-` classes on book pages.
- [ ] The citation wraps or scrolls legibly. It is much longer than an icon snippet.
- [ ] The old `#wikicode` markup is removed. Leave `dialog.js` alone, since other templates still use `.dialog--open`.
- [ ] Keyboard works end to end: open, Tab to copy, Escape closes and focus returns to the link.
- [ ] Strings stay translatable, following `docs/ai/i18n.md`.

### Getting started

- Read `docs/ai/design.md` and `docs/ai/web-components.md` first.
- Test on a local edition page, e.g. `http://localhost:8080/books/OL6M`.

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.