{"id":15376981,"url":"https://github.com/matthewp/comic-reader","last_synced_at":"2025-07-12T00:05:42.719Z","repository":{"id":34521617,"uuid":"171142727","full_name":"matthewp/comic-reader","owner":"matthewp","description":"A comic reader web component","archived":false,"fork":false,"pushed_at":"2023-07-10T23:03:44.000Z","size":47636,"stargazers_count":10,"open_issues_count":11,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-22T18:51:55.255Z","etag":null,"topics":["comic","comic-book","web-components"],"latest_commit_sha":null,"homepage":"https://pkg.spooky.click/comic-reader/","language":"JavaScript","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/matthewp.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,"publiccode":null,"codemeta":null}},"created_at":"2019-02-17T16:12:17.000Z","updated_at":"2024-12-09T02:14:24.000Z","dependencies_parsed_at":"2024-10-20T16:18:16.654Z","dependency_job_id":null,"html_url":"https://github.com/matthewp/comic-reader","commit_stats":{"total_commits":98,"total_committers":4,"mean_commits":24.5,"dds":"0.12244897959183676","last_synced_commit":"d39dcc1edb420539a2a85f78048955e2d94b6b09"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/matthewp/comic-reader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewp%2Fcomic-reader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewp%2Fcomic-reader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewp%2Fcomic-reader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewp%2Fcomic-reader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matthewp","download_url":"https://codeload.github.com/matthewp/comic-reader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewp%2Fcomic-reader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264915981,"owners_count":23682956,"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":["comic","comic-book","web-components"],"created_at":"2024-10-01T14:09:24.639Z","updated_at":"2025-07-12T00:05:42.693Z","avatar_url":"https://github.com/matthewp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026lt;comic-reader\u0026gt;\n\n\u003e ___Note___: This component is in very early development and should not be used in production.\n\nA comic reader as a web component. Usage is as simple as:\n\n```html\n\u003ccomic-reader src=\"https://example.com/whiz-comics-01.cbz\"\u003e\u003c/comic-reader\u003e\n```\n\n## Install\n\nUsing Yarn:\n\n```shell\nyarn add comic-reader\n```\n\nnpm:\n\n```shell\nnpm install comic-reader\n```\n\n## API\n\n### Attributes / Properties\n\nEvery attribute is also available as a property (and vice versa). Here are the properties for configuring the reader:\n\n#### src\n\nThere are 2 forms, a string URL (relative to the `document.baseURI`) and an object. Here are how they are used:\n\n```html\n\u003ccomic-reader src=\"./whiz-comics-01.cbz\"\u003e\u003c/comic-reader\u003e\n```\n\nAlternatively this can be set by a property:\n\n```js\nlet reader = document.querySelector('comic-reader');\nreader.src = './whiz-comics-01-cbz';\n```\n\nThis will fetch `whiz-comics-01.cbz` and extract the comic into the reader. The supported formats are:\n\n* __cbz__: A zip archive. Extension does not matter.\n* __cbr__: A rar archive. Extension does not matter.\n\n#### page\n\nSet the page. This will navigate to that page immediately. This is useful, for example, to restore the page that the user was previously reading.\n\n```html\n\u003ccomic-reader src=\"./whiz-comics-01.cbz\" page=\"8\"\u003e\u003c/comic-reader\u003e\n```\n\nAlternatively set via a property:\n\n```js\nlet reader = document.querySelector('comic-reader');\nreader.page = 18;\n```\n\n#### title\n\nShow a title in the top pane navigation. This is useful to, for example, show the comic title and issue number in a context where this might not be obvious to the reader otherwise.\n\nThe title will be displayed above the page progress.\n\n```html\n\u003ccomic-reader title=\"Baffling Mysteries #9\"\u003e\u003c/comic-reader\u003e\n```\n\nOr with JavaScript:\n\n```js\nlet reader = document.querySelector('comic-reader');\nreader.title = 'Baffling Mysteries #9';\n```\n\n#### cover\n\nShow a cover image while the book is loaded. When loading from an archive such as cbr or cbz there can be a delay before the first page is visible to the user. Using `cover` lets them see an image (usually the cover of the comic) while the loading is happening. As soon as the first page is painted the cover will no longer be shown.\n\nThis is similar to the `poster` attribute on `\u003cvideo\u003e` elements.\n\n```html\n\u003ccomic-reader src=\"./path/to/book.cbz\" cover=\"./path/to/cover.jpg\"\u003e\u003c/comic-reader\u003e\n```\n\n#### controls\n\nShow the top and bottom toolbars. Normally this is controlled by the user clicking within the middle of the image. Setting the boolean `controls` attribute will make these be shown.\n\n```html\n\u003ccomic-reader src=\"./path/to/book.cbz\" controls\u003e\u003c/comic-reader\u003e\n```\n\nThe user can still disable the controls by clicking within the middle of the page, this doesn't change that. It just makes them be initially shown (if present in the HTML), or makes them be shown when hidden (if added dynamically).\n\n### Events\n\nThese events are emitted:\n\n#### page\n\nThis event is emitted as pages are navigated. You might use this, for example, to store the current page in order to restore it later.\n\n```js\nlet reader = document.querySelector('comic-reader');\n\nreader.addEventListener('page', ev =\u003e {\n  let page = ev.detail;\n  \n  // Do something with the page...\n});\n```\n\n### Slots\n\nThe following optional slots are provided to customize the look of `\u003ccomic-reader\u003e`.\n\n#### top-left-nav\n\nThe top pane navigation is activated when the user clicks within the middle third area of the viewport. It contains a button to turn on fullscreen mode and also displays the current page.\n\nYou can add content to the top left portion of the nav; immediately to the left of the page progress and title section. The follow example displays a back button using this slot:\n\n```html\n\u003ccomic-reader title=\"Baffling Mysteries #9\" src=\"./demo.cbz\"\u003e\n  \u003ca href=\"./\" slot=\"top-left-nav\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"\u003e\n      \u003ctitle\u003eBack\u003c/title\u003e\n      \u003cpath d=\"M427 234.625H167.296l119.702-119.702L256 85 85 256l171 171 29.922-29.924-118.626-119.701H427v-42.75z\"/\u003e\n    \u003c/svg\u003e\n  \u003c/a\u003e\n\u003c/comic-reader\u003e\n```\n\nWhich will look like so:\n\n![Example of usage of the top-left-nav slot displaying a back button](https://user-images.githubusercontent.com/361671/53805364-ecbb3400-3f17-11e9-8ec8-0a34deaa12b6.png)\n\n## License \n\nBSD-2-Clause","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthewp%2Fcomic-reader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatthewp%2Fcomic-reader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthewp%2Fcomic-reader/lists"}