{"id":15059558,"url":"https://github.com/joakin/context-cards","last_synced_at":"2025-04-10T05:34:06.334Z","repository":{"id":41815283,"uuid":"134134595","full_name":"joakin/context-cards","owner":"joakin","description":"Wikipedia page previews for any site","archived":false,"fork":false,"pushed_at":"2023-04-24T19:51:35.000Z","size":4866,"stargazers_count":31,"open_issues_count":4,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T06:51:46.586Z","etag":null,"topics":["context-cards","elm","elm-lang","wikimedia","wikipedia"],"latest_commit_sha":null,"homepage":null,"language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joakin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-05-20T08:55:50.000Z","updated_at":"2023-10-19T17:39:59.000Z","dependencies_parsed_at":"2024-04-12T18:47:41.569Z","dependency_job_id":"95c8d794-8175-40e2-af92-53933bdcf149","html_url":"https://github.com/joakin/context-cards","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joakin%2Fcontext-cards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joakin%2Fcontext-cards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joakin%2Fcontext-cards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joakin%2Fcontext-cards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joakin","download_url":"https://codeload.github.com/joakin/context-cards/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248163290,"owners_count":21057903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context-cards","elm","elm-lang","wikimedia","wikipedia"],"created_at":"2024-09-24T22:45:29.861Z","updated_at":"2025-04-10T05:34:06.301Z","avatar_url":"https://github.com/joakin.png","language":"Elm","funding_links":[],"categories":["Products"],"sub_categories":[],"readme":"# Wikipedia Context Cards\n\nGet Wikipedia page previews on any page!\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./popup.png\" alt=\"English Wikipedia Vorticism preview\" style=\"max-width:100%;\" width=\"754\" height=\"568\"\u003e\n\u003c/p\u003e\n\nSee some live examples at \u003chttps://joakin.github.io/context-cards\u003e, or check our\n[UI tests](https://joakin.github.io/context-cards/test.html) for examples of\nmany previews.\n\n## How to use\n\nInclude the library in your page:\n\n```\nhttps://unpkg.com/context-cards/dist/context-cards.js\n```\n\nMark some links with `data-wiki-title` and `data-wiki-lang`.\n\n```html\n\u003cul\u003e\n  \u003cli\u003e\n    \u003ca href=\"#\" data-wiki-lang=\"en\" data-wiki-title=\"Cake\"\u003eCake\u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003ca href=\"#\" data-wiki-lang=\"ca\" data-wiki-title=\"Pastís\"\u003ePastís\u003c/a\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nThose links should show the previews now on hover and focus!\n\n### Right to left languages: previews and content\n\nIf you add a link with a language that is right to left, the preview content\nwill automatically show up appropriately\n([example](https://chimeces.com/context-cards/test.html#LTR%20CONTENT,%20RTL%20POPUP%20-%20%D7%A4%D7%A8%D7%94%D7%99%D7%A1%D7%98%D7%95%D7%A8%D7%99%D7%94)).\n\nIf the content of your page is right to left, and you have the `dir` attribute\nset on any of the parent elements of the link, or the link itself, then things\nshould work fine by default, by positioning the card anchored to the bottom\nright of your link.\n\nIf you are doing something strange with your content and don't have those\nattributes, you can manually add `dir=\"rtl\"` to the link and the card will work\nas intended.\n\n### Dynamic content\n\nSometimes you have content that loads later on the page, and is not there on\n`DOMContentLoaded`. If that is the case, you will need to tell context cards to\nrefresh the links so that it can bind its interactions as needed.\n\nWhen including the script in the page, context cards binds itself to\n`window.ContextCards`. If you need to tell it to refresh the links and search\nfor new ones, you can call `ContextCards.bindLinks()`. That should appropriately\nbind the event handlers for the new links marked with the `data` attributes\nmentioned above.\n\n### Self hosting the script file\n\nIf you don't want to use a npm CDN like unpkg, you can always get the script\nfile for the popups from the npm package after installing it, in the\n`dist/context-cards.js` file.\n\nAnother alternative is getting it from this git repo. The file you can include\nis always in `dist/context-cards.js`, and you can get it from the master branch,\nor from the git tags which match the npm versions.\n\n## Credits\n\nBased on the original work on\n[Extension:Popups](https://mediawiki.org/wiki/Extension:Popups).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoakin%2Fcontext-cards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoakin%2Fcontext-cards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoakin%2Fcontext-cards/lists"}