{"id":22337969,"url":"https://github.com/fallaciousreasoning/pagify-content","last_synced_at":"2026-05-02T14:38:32.833Z","repository":{"id":57318154,"uuid":"413824281","full_name":"fallaciousreasoning/pagify-content","owner":"fallaciousreasoning","description":"A simple Typescript utility for paginating HTML content.","archived":false,"fork":false,"pushed_at":"2021-10-05T13:24:48.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-04T10:55:18.776Z","etag":null,"topics":["pagination","paging","typescript","web-component"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/fallaciousreasoning.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}},"created_at":"2021-10-05T13:13:56.000Z","updated_at":"2021-11-16T09:23:14.000Z","dependencies_parsed_at":"2022-08-25T20:41:10.629Z","dependency_job_id":null,"html_url":"https://github.com/fallaciousreasoning/pagify-content","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fallaciousreasoning%2Fpagify-content","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fallaciousreasoning%2Fpagify-content/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fallaciousreasoning%2Fpagify-content/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fallaciousreasoning%2Fpagify-content/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fallaciousreasoning","download_url":"https://codeload.github.com/fallaciousreasoning/pagify-content/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245616689,"owners_count":20644699,"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":["pagination","paging","typescript","web-component"],"created_at":"2024-12-04T06:12:40.757Z","updated_at":"2026-05-02T14:38:27.794Z","avatar_url":"https://github.com/fallaciousreasoning.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# README\nPagify is a simple web component for pagifying content. At the moment it's pretty bare bones but it does what I need it to.\n\n## Usage\n\nThis library defines a simple web component `pagify-content` for pagifying some html. **Note:** the component will fill available space, so make sure the element it's inside has a height.\n\nExamples available [here](https://fallaciousreasoning.github.io/pagify-content/test.html)\n\n```html\n\u003c!-- Render the second page of the following html --\u003e\n\u003cpagify-content currentPage=\"2\"\u003e\n    \u003cdiv\u003eOne\u003c/div\u003e\n    \u003cdiv\u003eTwo\u003c/div\u003e\n    \u003cdiv\u003eThree\u003c/div\u003e\n    \u003cdiv\u003eFour\u003c/div\u003e\n\u003c/pagify-content\u003e\n```\n\nThe component exposes the following methods, which are pretty self explanatory:\n\n```ts\nconst component = document.querySelector('pagify-content');\ncomponent.nextPage(); // Goes to the next page, if available.\ncomponent.previousPage(); // Goes to the previous page, if available.\ncomponent.hasNext(); // Indicates if there is another page.\ncomponent.hasPrevious(); // Indicates if there is another page.\ncomponent.pageCount; // The number of pages available.\ncomponent.currentPage; // The current page of the component.\ncomponent.currentPage = 3; // Jump to the third page.\n```\n\n## Development\n\n1. Install dependencies\n\n    npm install\n\n2. Start watching the typescript files\n\n    npm run dev\n\n3. Serve the development folder, so you can access `test.html` in a browser\n\n    npx serve .\n\n4. Open `localhost:5000/test.html` to view the file.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffallaciousreasoning%2Fpagify-content","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffallaciousreasoning%2Fpagify-content","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffallaciousreasoning%2Fpagify-content/lists"}