Merge pull request #2 from daviddarnes/feature/custom-templates

Allow for custom templates, closes #1
daviddarnes · Apr 22, 2024 · 1690033 · 1690033
2 parents a905fcd + e8e2833
commit 1690033
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -13,14 +13,14 @@ General usage example:
 
 <template id="link-peek-template">
   <figure>
-  <figcaption>
-    <a data-key="data.title, link"></a>
-    <p data-key="data.description"></p>
-    <img data-key="data.logo.url" />
-    <small data-key="data.publisher"></small>
-  </figcaption>
-  <img data-key="data.image.url" />
-</figure>
+    <figcaption>
+      <a data-key="data.title, link"></a>
+      <p data-key="data.description"></p>
+      <img data-key="data.logo.url" />
+      <small data-key="data.publisher"></small>
+    </figcaption>
+    <img data-key="data.image.url" />
+  </figure>
 </template>
 
 <link-peek api="https://api.microlink.io/?url=${link}">
@@ -37,7 +37,8 @@ _Note that there are no defaults set for the API or template being used. `link-p
 This Web Component allows you to:
 
 - Use public APIs to return and present metadata on a linked web page
-- Create custom templates for your 'unfurled' link previews for greater design control
+- Create custom templates for your 'unfurled' link previews using a `<template>` element and `data-key="name"` data attributes
+- Use a custom template for specific instances using the `template` attribute
 - Use any public API to populate your 'unfurled' previews
 
 ## Installation
@@ -66,6 +67,21 @@ Here's that same example in context:
 </link-peek>
 ```
 
+You can also use different templates on the same page by using the template attribute to target `<template>` elements with a specific `id`:
+
+```html
+<template id="custom-template">
+  <a data-key="data.description, data.url"></a>
+</template>
+
+<link-peek
+  api="https://api.microlink.io/?url=${link}"
+  template="custom-template"
+>
+  <a href="https://darn.es">David Darnes</a>
+</link-peek>
+```
+
 _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._
 
 ### Usage
@@ -81,15 +97,15 @@ Make sure you include the `<script>` in your project (choose one of these):
 <!-- 3rd party CDN, not recommended for production use -->
 <script
   type="module"
-  src="https://www.unpkg.com/@daviddarnes/link-peek@1.0.0/link-peek.js"
+  src="https://www.unpkg.com/@daviddarnes/link-peek@1.1.0/link-peek.js"
 ></script>
 ```
 
 ```html
 <!-- 3rd party CDN, not recommended for production use -->
 <script
   type="module"
-  src="https://esm.sh/@daviddarnes/link-peek@1.0.0"
+  src="https://esm.sh/@daviddarnes/link-peek@1.1.0"
 ></script>
 ```
 

diff --git a/demo-simple-example.html b/demo-simple-example.html
@@ -7,15 +7,34 @@
     <title>link-peek Web Component Demo</title>
 
     <script type="module" src="link-peek.js"></script>
+
+    <style>
+      link-peek[template="custom-template"]:defined a:not([data-key]) {
+        display: none;
+      }
+    </style>
   </head>
   <body>
-    <h2>Simple example</h2>
+    <h2>Simple template example</h2>
     <template id="link-peek-template">
       <p data-key="data.description"></p>
     </template>
 
     <link-peek api="https://api.microlink.io/?url=${link}">
       <a href="https://darn.es">David Darnes</a>
     </link-peek>
+
+    <h2>Custom template example using <code>template</code> attribute</h2>
+
+    <template id="custom-template">
+      <a data-key="data.description, data.url"></a>
+    </template>
+
+    <link-peek
+      api="https://api.microlink.io/?url=${link}"
+      template="custom-template"
+    >
+      <a href="https://darn.es">David Darnes</a>
+    </link-peek>
   </body>
 </html>
diff --git a/link-peek.js b/link-peek.js
@@ -50,7 +50,9 @@ class LinkPeek extends HTMLElement {
 
   get template() {
     return document
-      .getElementById(`${this.localName}-template`)
+      .getElementById(
+        this.getAttribute("template") || `${this.localName}-template`
+      )
       .content.cloneNode(true);
   }