{"id":14990145,"url":"https://github.com/daviddarnes/link-peek","last_synced_at":"2025-04-12T02:05:34.970Z","repository":{"id":232865372,"uuid":"784652683","full_name":"daviddarnes/link-peek","owner":"daviddarnes","description":"A Web Component to unfurl regular links into rich previews","archived":false,"fork":false,"pushed_at":"2024-04-22T10:17:42.000Z","size":32,"stargazers_count":53,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-12T02:05:29.423Z","etag":null,"topics":["component","components","customelement","customelements","webcomponent","webcomponents"],"latest_commit_sha":null,"homepage":"https://daviddarnes.github.io/link-peek/demo.html","language":"HTML","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/daviddarnes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"buy_me_a_coffee":"daviddarnes"}},"created_at":"2024-04-10T09:25:14.000Z","updated_at":"2025-03-03T19:19:13.000Z","dependencies_parsed_at":"2024-04-22T11:27:09.244Z","dependency_job_id":"ed1473f0-7417-4844-b64d-ef96889186f7","html_url":"https://github.com/daviddarnes/link-peek","commit_stats":null,"previous_names":["daviddarnes/link-peek"],"tags_count":2,"template":false,"template_full_name":"daviddarnes/component-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daviddarnes%2Flink-peek","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daviddarnes%2Flink-peek/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daviddarnes%2Flink-peek/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daviddarnes%2Flink-peek/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daviddarnes","download_url":"https://codeload.github.com/daviddarnes/link-peek/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505863,"owners_count":21115354,"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":["component","components","customelement","customelements","webcomponent","webcomponents"],"created_at":"2024-09-24T14:19:34.758Z","updated_at":"2025-04-12T02:05:34.938Z","avatar_url":"https://github.com/daviddarnes.png","language":"HTML","funding_links":["https://buymeacoffee.com/daviddarnes"],"categories":[],"sub_categories":[],"readme":"# `link-peek`\n\nA Web Component to unfurl regular links into rich previews.\n\n**[Demo](https://daviddarnes.github.io/link-peek/demo.html)** | **[Simple demo](https://daviddarnes.github.io/link-peek/demo-simple-example.html)** | **[Further reading](https://darn.es/link-peek-web-component/)**\n\n## Examples\n\nGeneral usage example:\n\n```html\n\u003cscript type=\"module\" src=\"link-peek.js\"\u003e\u003c/script\u003e\n\n\u003ctemplate id=\"link-peek-template\"\u003e\n  \u003cfigure\u003e\n    \u003cfigcaption\u003e\n      \u003ca data-key=\"data.title, link\"\u003e\u003c/a\u003e\n      \u003cp data-key=\"data.description\"\u003e\u003c/p\u003e\n      \u003cimg data-key=\"data.logo.url\" /\u003e\n      \u003csmall data-key=\"data.publisher\"\u003e\u003c/small\u003e\n    \u003c/figcaption\u003e\n    \u003cimg data-key=\"data.image.url\" /\u003e\n  \u003c/figure\u003e\n\u003c/template\u003e\n\n\u003clink-peek api=\"https://api.microlink.io/?url=${link}\"\u003e\n  \u003ca href=\"https://darn.es\"\u003eDavid Darnes\u003c/a\u003e\n\u003c/link-peek\u003e\n```\n\nIn the above example we're utilising the [microlink](https://microlink.io) API to retrieve metadata of the linked page and then using the marked up template to present that data.\n\n_Note that there are no defaults set for the API or template being used. `link-peek` operates agnostically of these APIs for great control and independance. This also means we cannot assume a default built in template_\n\n## Features\n\nThis Web Component allows you to:\n\n- Use public APIs to return and present metadata on a linked web page\n- Create custom templates for your 'unfurled' link previews using a `\u003ctemplate\u003e` element and `data-key=\"name\"` data attributes\n- Use a custom template for specific instances using the `template` attribute\n- Use any public API to populate your 'unfurled' previews\n\n## Installation\n\nYou have a few options (choose one of these):\n\n1. Install via [npm](https://www.npmjs.com/package/@daviddarnes/link-peek): `npm install @daviddarnes/link-peek`\n1. [Download the source manually from GitHub](https://github.com/daviddarnes/link-peek/releases) into your project.\n1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)\n\n## Templating\n\nTemplates are created using the `\u003ctemplate\u003e` element with an ID of `link-peek-template`. Within the template you can use regular HTML elements and to populate them you use the `data-key` attribute to name the data point you want it to use. For example if I want to use the data point `data.description` to render a line of text I would write within my template `\u003cp data-key=\"data.description\"\u003e\u003c/p\u003e`.\n\nHere's that same example in context:\n\n```html\n\u003cscript type=\"module\" src=\"link-peek.js\"\u003e\u003c/script\u003e\n\n\u003ctemplate id=\"link-peek-template\"\u003e\n  \u003cp data-key=\"data.description\"\u003e\u003c/p\u003e\n\u003c/template\u003e\n\n\u003clink-peek api=\"https://api.microlink.io/?url=${link}\"\u003e\n  \u003ca href=\"https://darn.es\"\u003eDavid Darnes\u003c/a\u003e\n\u003c/link-peek\u003e\n```\n\nYou can also use different templates on the same page by using the template attribute to target `\u003ctemplate\u003e` elements with a specific `id`:\n\n```html\n\u003ctemplate id=\"custom-template\"\u003e\n  \u003ca data-key=\"data.description, data.url\"\u003e\u003c/a\u003e\n\u003c/template\u003e\n\n\u003clink-peek\n  api=\"https://api.microlink.io/?url=${link}\"\n  template=\"custom-template\"\n\u003e\n  \u003ca href=\"https://darn.es\"\u003eDavid Darnes\u003c/a\u003e\n\u003c/link-peek\u003e\n```\n\n_Note that for \u003ca\u003e and \u003cimg\u003e elements the value won't be applied to it's content if the string being returned starts with http and instead will be applied to the href and src attributes respectively._\n\n### Usage\n\nMake sure you include the `\u003cscript\u003e` in your project (choose one of these):\n\n```html\n\u003c!-- Host yourself --\u003e\n\u003cscript type=\"module\" src=\"link-peek.js\"\u003e\u003c/script\u003e\n```\n\n```html\n\u003c!-- 3rd party CDN, not recommended for production use --\u003e\n\u003cscript\n  type=\"module\"\n  src=\"https://www.unpkg.com/@daviddarnes/link-peek@1.1.0/link-peek.js\"\n\u003e\u003c/script\u003e\n```\n\n```html\n\u003c!-- 3rd party CDN, not recommended for production use --\u003e\n\u003cscript\n  type=\"module\"\n  src=\"https://esm.sh/@daviddarnes/link-peek@1.1.0\"\n\u003e\u003c/script\u003e\n```\n\n## Credit\n\nWith thanks to the following people:\n\n- [Zach Leatherman](https://zachleat.com) for inspiring this [Web Component repo template](https://github.com/daviddarnes/link-peek)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaviddarnes%2Flink-peek","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaviddarnes%2Flink-peek","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaviddarnes%2Flink-peek/lists"}