{"id":23100088,"url":"https://github.com/dashpilot/fragmentjs","last_synced_at":"2025-04-03T20:42:56.782Z","repository":{"id":264348994,"uuid":"893118482","full_name":"dashpilot/fragmentjs","owner":"dashpilot","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-23T15:32:29.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T08:45:05.844Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://fragmentjs.vercel.app","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/dashpilot.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":"2024-11-23T15:28:33.000Z","updated_at":"2024-11-23T15:32:32.000Z","dependencies_parsed_at":"2024-11-23T16:40:12.064Z","dependency_job_id":null,"html_url":"https://github.com/dashpilot/fragmentjs","commit_stats":null,"previous_names":["dashpilot/fragmentjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Ffragmentjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Ffragmentjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Ffragmentjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashpilot%2Ffragmentjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dashpilot","download_url":"https://codeload.github.com/dashpilot/fragmentjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247078783,"owners_count":20879950,"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":[],"created_at":"2024-12-16T23:29:40.249Z","updated_at":"2025-04-03T20:42:56.755Z","avatar_url":"https://github.com/dashpilot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fragment.js, SPA-like navigation without the need for a SPA ...or a server.\n\n`Fragment` is a JavaScript utility designed to enhance web pages with Single Page Application (SPA)-like behavior. It intercepts link clicks on elements with the `data-fragment` attribute, fetches the content from the specified URL, and updates a specific part of the page without reloading AND without the need to render different versions of a page. Fragment automatically extracts just the part that needs to be replaced.\n\n## but why...? we already have HTMX!\n\nAlthough I love and use HTMX, it has one big downside: you need a SERVER to generate the HTMX fragment that gets replaced. Which makes it less suitable for static sites or content loaded via a CDN.\n\nAnother 'downside' of HTMX is that links lose their `href` attribute in favour of `hx-get`. This is by design, but it makes your html less semantic (with possible SEO consequences). Fragment-links degrade gracefuly to their default behavior, even when javascript is disabled.\n\n## Features\n\n-   **Dynamic Content Loading**: Fetches and updates content for a specified fragment ID from the clicked link's URL.\n-   **Active Link Highlighting**: Manages active state for links with the `data-fragment` attribute.\n-   **Browser History Management**: Updates the URL in the address bar and the browser's history stack.\n-   **Title Update**: Extracts and updates the document title from the fetched content.\n-   **Custom Event Emission**: Emits a `fragment:loaded` event after content is loaded and the URL is updated, allowing for additional custom logic.\n\n## Usage\n\n### HTML Structure\n\nEnsure your links have the `data-fragment` attribute and point to the desired URL. The value of `data-fragment` is the id of the element that will be replaced.\n\n```html\n\u003ca href=\"page1.html\" data-fragment=\"main\"\u003ePage 1\u003c/a\u003e\n\u003ca href=\"page2.html\" data-fragment=\"main\"\u003ePage 2\u003c/a\u003e\n\u003cdiv id=\"main\"\u003e\n    \u003c!-- Content will be dynamically loaded here --\u003e\n\u003c/div\u003e\n```\n\n### Active page\n\nFragment automatically gives the active link a class of `.active-fragment`, so you can style it however you like.\n\n### Listening for the Custom Event\n\nYou can hook into the `fragment:loaded` event to perform additional actions:\n\n```javascript\ndocument.addEventListener('fragment:loaded', function (e) {\n    console.log('Fragment loaded for URL:', e.detail.url);\n    console.log('Updated fragment ID:', e.detail.fragmentId);\n    // Add your custom logic here\n});\n```\n\n## Demo\n\nTo see Fragment in action, visite the demo:\nhttps://fragmentjs.vercel.app/\n\n## Press the :star: button\n\nDon't forget to press the :star: button to let me know I should continue improving this project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashpilot%2Ffragmentjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdashpilot%2Ffragmentjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashpilot%2Ffragmentjs/lists"}