{"id":43924437,"url":"https://github.com/rolemodel/spider","last_synced_at":"2026-02-27T22:44:38.051Z","repository":{"id":336471281,"uuid":"1149817646","full_name":"RoleModel/spider","owner":"RoleModel","description":"Shared web components library","archived":false,"fork":false,"pushed_at":"2026-02-04T21:51:14.000Z","size":105,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-05T02:29:31.207Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RoleModel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-04T14:59:43.000Z","updated_at":"2026-02-04T21:48:03.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/RoleModel/spider","commit_stats":null,"previous_names":["rolemodel/spider"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/RoleModel/spider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoleModel%2Fspider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoleModel%2Fspider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoleModel%2Fspider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoleModel%2Fspider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RoleModel","download_url":"https://codeload.github.com/RoleModel/spider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoleModel%2Fspider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29179561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T22:12:24.066Z","status":"ssl_error","status_checked_at":"2026-02-06T22:12:09.859Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2026-02-06T23:00:32.335Z","updated_at":"2026-02-27T22:44:38.038Z","avatar_url":"https://github.com/RoleModel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spider Web Components\n\nBy RoleModel Software\n\nSpider is a set of reusable web components built with Lit. It currently provides:\n\n- `rm-pdf-viewer`: reskinned PDF viewer built on [PDF.js](https://mozilla.github.io/pdf.js)\n- `rm-tabs-root`, `rm-tabs-trigger`, `rm-tabs-panel`: unstyled behavior-first tabs primitives\n\nA customizable PDF viewer web component built on [PDF.js](https://mozilla.github.io/pdf.js). This component provides a reskinned, embeddable PDF viewing experience with text selection, zoom controls, thumbnail navigation, and theme customization.\n\n## Installation\n\n```bash\nyarn add @rolemodel/spider\n```\n\n## Usage\n\nImport once to register all components:\n\n```js\nimport '@rolemodel/spider'\n```\n\nOr import specific component modules from the package distribution output.\n\n## Development\n\n```bash\nyarn dev\nyarn test\n```\n\n## Components\n\n### PDF Viewer `rm-pdf-viewer`\n\n[PDF.js](https://mozilla.github.io/pdf.js) is awesome, but you will notice this paragraph in their setup instructions:\n\u003e The viewer is built on the display layer and is the UI for PDF viewer in Firefox and the other browser extensions within the project. It can be a good starting point for building your own viewer. However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please re-skin it or build upon it.\n\nThis component aims to be that skin layer built upon PDF.js packaged in a lovely drop-in web component.\n\n#### Basic usage\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003crm-pdf-viewer src=\"/path/to/document.pdf\"\u003e\u003c/rm-pdf-viewer\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### With custom close button\n\n```html\n\u003crm-pdf-viewer src=\"/document.pdf\"\u003e\n  \u003cbutton slot=\"close-button\" onclick=\"window.location.href='/'\"\u003e\n    Back to Home\n  \u003c/button\u003e\n\u003c/rm-pdf-viewer\u003e\n```\n\n#### Attributes / properties\n\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| `src` | `string` | `''` | PDF URL/path |\n| `open` | `boolean` | `false` | Shows the viewer when present/true |\n| `initial-page` | `number` | `1` | Initial page to open |\n| `theme-hue` | `number` | `217` | Theme hue (`0-360`) |\n| `theme-saturation` | `number` | `89` | Theme saturation (`0-100`) |\n| `escape-closes-viewer` | `boolean` | `false` | Closes viewer on `Escape` when search is not open |\n\n#### Slot\n\n| Slot | Description |\n|------|-------------|\n| `close-button` | Custom close action element rendered in the toolbar |\n\n#### Public methods\n\n| Method | Description |\n|--------|-------------|\n| `loadPDF()` | Loads the PDF from `src` |\n| `printPDF()` | Opens browser print flow for the loaded PDF |\n| `downloadPDF()` | Downloads the current `src` |\n| `fitPDFToScreen()` | Applies calculated fit-to-screen zoom |\n| `performSearch(term)` | Searches text across pages |\n| `goToNextMatch()` / `goToPreviousMatch()` | Navigates search matches |\n\n### Tabs components\n\nTabs are split into three composable components so behavior is provided without enforcing styling.\n\n#### `rm-tabs-root`\n\nOwns the active tab state and coordinates triggers/panels.\n\n| Name | Type | Description |\n|------|------|-------------|\n| `active` | `string` | Current active tab name |\n\n#### `rm-tabs-trigger`\n\nDeclares a selectable tab trigger.\n\n| Name | Type | Description |\n|------|------|-------------|\n| `name` | `string` | Tab name this trigger controls |\n| `activeClass` | `string` | Class toggled on slotted elements when active |\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `isActive` | getter | `true` when this trigger is selected |\n| `activate()` | method | Dispatches a tab select event for this trigger |\n\n#### `rm-tabs-panel`\n\nDeclares content for a tab.\n\n| Name | Type | Description |\n|------|------|-------------|\n| `name` | `string` | Tab name this panel belongs to |\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `active` | getter | `true` when this panel is visible |\n| `activate()` | method | Dispatches a tab select event for this panel |\n\n#### Tabs event\n\n| Event | Detail | Description |\n|-------|--------|-------------|\n| `rm-tab-select` | `{ name: string }` | Emitted by triggers/panels to request active tab changes |\n\n#### Tabs usage example\n\n```html\n\u003crm-tabs-root class=\"tabs\" active=\"first\"\u003e\n  \u003cdiv role=\"tablist\"\u003e\n    \u003crm-tabs-trigger name=\"first\" activeClass=\"active\"\u003e\n      \u003cbutton type=\"button\"\u003eFirst\u003c/button\u003e\n    \u003c/rm-tabs-trigger\u003e\n    \u003crm-tabs-trigger name=\"second\" activeClass=\"active\"\u003e\n      \u003cbutton type=\"button\"\u003eSecond\u003c/button\u003e\n    \u003c/rm-tabs-trigger\u003e\n  \u003c/div\u003e\n\n  \u003crm-tabs-panel name=\"first\"\u003e\n    \u003cspan\u003eFirst tab content\u003c/span\u003e\n  \u003c/rm-tabs-panel\u003e\n\n  \u003crm-tabs-panel name=\"second\"\u003e\n    \u003cspan\u003eSecond tab content\u003c/span\u003e\n  \u003c/rm-tabs-panel\u003e\n\u003c/rm-tabs-root\u003e\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frolemodel%2Fspider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frolemodel%2Fspider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frolemodel%2Fspider/lists"}