{"_id":"@daviddarnes/link-peek","_rev":"1-d38fe2576f6b8e12d3b73d9a95f29829","name":"@daviddarnes/link-peek","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@daviddarnes/link-peek","version":"1.0.0","description":"A Web Component to unfurl regular links into rich previews","main":"link-peek.js","scripts":{"start":"npx http-server ."},"repository":{"type":"git","url":"git+https://github.com/daviddarnes/link-peek.git"},"keywords":["web","component","components","web components","custom elements"],"license":"MIT","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/daviddarnes/link-peek/issues"},"author":{"name":"David Darnes","email":"me@daviddarnes.com","url":"https://darn.es/"},"homepage":"https://github.com/daviddarnes/link-peek#readme","gitHead":"a905fcd007eacfa61b81cd8ac59a18cd01341c70","_id":"@daviddarnes/link-peek@1.0.0","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-Chix5Lhb/+hLvUkNMCeakP+hojOZ5FhiDxT8uqd0vQMI5jxeATjh/WEMNNH6fR7U7wdJaKa24SKPkWLg8MdIFg==","shasum":"b7d721df093d8abf326aa314c094b51c0893e250","tarball":"https://registry.npmjs.org/@daviddarnes/link-peek/-/link-peek-1.0.0.tgz","fileCount":10,"unpackedSize":11489,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFgbmU2KtV0Yhu2SHIlo1kcypZkMGK96jJxqh5iWHCtnAiAWYX2PquOHfu06bd4xjmiMZ9ICMj+9/xCy/zv3TtNK5w=="}]},"_npmUser":{"name":"daviddarnes","email":"me@daviddarnes.com"},"directories":{},"maintainers":[{"name":"daviddarnes","email":"me@daviddarnes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/link-peek_1.0.0_1712855182074_0.9130387133345885"},"_hasShrinkwrap":false},"1.1.0":{"name":"@daviddarnes/link-peek","version":"1.1.0","description":"A Web Component to unfurl regular links into rich previews","main":"link-peek.js","scripts":{"start":"npx http-server ."},"repository":{"type":"git","url":"git+https://github.com/daviddarnes/link-peek.git"},"keywords":["web","component","components","web components","custom elements"],"license":"MIT","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/daviddarnes/link-peek/issues"},"author":{"name":"David Darnes","email":"me@daviddarnes.com","url":"https://darn.es/"},"homepage":"https://github.com/daviddarnes/link-peek#readme","gitHead":"d58f01bf5684739faf1d72439740eca7e5867694","_id":"@daviddarnes/link-peek@1.1.0","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-tm4uxBy9MqgrBfsrUKKZcALmWiTkk90zo8mhnnUfbumdlpyAczWBCbMqgTFmquObwdtt52BcaxmWH1sebsWyDw==","shasum":"a01c264b9156bbf167368580baede1f36d2f8ead","tarball":"https://registry.npmjs.org/@daviddarnes/link-peek/-/link-peek-1.1.0.tgz","fileCount":10,"unpackedSize":12555,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVfuKkxyhffdqK7e0MjLeXRYZEzKlk4oj0gbg2zGJeoAIgMeGxAsecz/74tVk1GQ/xr30MVzNY0Qcw3vNCyIOieTU="}]},"_npmUser":{"name":"daviddarnes","email":"me@daviddarnes.com"},"directories":{},"maintainers":[{"name":"daviddarnes","email":"me@daviddarnes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/link-peek_1.1.0_1713781080793_0.0688106960912771"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-11T17:06:21.945Z","1.0.0":"2024-04-11T17:06:22.269Z","modified":"2024-04-22T10:18:01.144Z","1.1.0":"2024-04-22T10:18:00.957Z"},"maintainers":[{"name":"daviddarnes","email":"me@daviddarnes.com"}],"description":"A Web Component to unfurl regular links into rich previews","homepage":"https://github.com/daviddarnes/link-peek#readme","keywords":["web","component","components","web components","custom elements"],"repository":{"type":"git","url":"git+https://github.com/daviddarnes/link-peek.git"},"author":{"name":"David Darnes","email":"me@daviddarnes.com","url":"https://darn.es/"},"bugs":{"url":"https://github.com/daviddarnes/link-peek/issues"},"license":"MIT","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<script type=\"module\" src=\"link-peek.js\"></script>\n\n<template id=\"link-peek-template\">\n  <figure>\n    <figcaption>\n      <a data-key=\"data.title, link\"></a>\n      <p data-key=\"data.description\"></p>\n      <img data-key=\"data.logo.url\" />\n      <small data-key=\"data.publisher\"></small>\n    </figcaption>\n    <img data-key=\"data.image.url\" />\n  </figure>\n</template>\n\n<link-peek api=\"https://api.microlink.io/?url=${link}\">\n  <a href=\"https://darn.es\">David Darnes</a>\n</link-peek>\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 `<template>` 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 `<template>` 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 `<p data-key=\"data.description\"></p>`.\n\nHere's that same example in context:\n\n```html\n<script type=\"module\" src=\"link-peek.js\"></script>\n\n<template id=\"link-peek-template\">\n  <p data-key=\"data.description\"></p>\n</template>\n\n<link-peek api=\"https://api.microlink.io/?url=${link}\">\n  <a href=\"https://darn.es\">David Darnes</a>\n</link-peek>\n```\n\nYou can also use different templates on the same page by using the template attribute to target `<template>` elements with a specific `id`:\n\n```html\n<template id=\"custom-template\">\n  <a data-key=\"data.description, data.url\"></a>\n</template>\n\n<link-peek\n  api=\"https://api.microlink.io/?url=${link}\"\n  template=\"custom-template\"\n>\n  <a href=\"https://darn.es\">David Darnes</a>\n</link-peek>\n```\n\n_Note that for <a> and <img> 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 `<script>` in your project (choose one of these):\n\n```html\n<!-- Host yourself -->\n<script type=\"module\" src=\"link-peek.js\"></script>\n```\n\n```html\n<!-- 3rd party CDN, not recommended for production use -->\n<script\n  type=\"module\"\n  src=\"https://www.unpkg.com/@daviddarnes/link-peek@1.1.0/link-peek.js\"\n></script>\n```\n\n```html\n<!-- 3rd party CDN, not recommended for production use -->\n<script\n  type=\"module\"\n  src=\"https://esm.sh/@daviddarnes/link-peek@1.1.0\"\n></script>\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","readmeFilename":"README.md"}