@daviddarnes/mastodon-post - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

mastodon-post.js

@@ -39,9 +39,11 @@ const mastodonPostTemplate = document.createElement("template");
       const { key } = slot.dataset;
+      const value = data[key];
 
       if (key === "content") {
-        slot.innerHTML = data[key];
-      } else if (key === "url") {
-        slot.href = this.link;
+        slot.innerHTML = value;
+      } else if (typeof value === "string" && value.startsWith("http")) {
+        if (slot.localName === "a") slot.href = value;
+        if (slot.localName === "img") slot.src = value;
       } else {
-        slot.textContent = data[key];
+        slot.textContent = value;
       }
@@ -52,3 +54,5 @@ });
   get template() {
-    return document.getElementById(mastodonPostTemplate.id).content.cloneNode(true);
+    return document
+      .getElementById(mastodonPostTemplate.id)
+      .content.cloneNode(true);
   }
@@ -64,5 +68,6 @@
     return {
+      url: this.link,
       hostname: url.hostname,
       username: paths.find((path) => path.startsWith("@")),
-      postId: paths.find((path) => !path.startsWith("@"))
+      postId: paths.find((path) => !path.startsWith("@")),
     };
@@ -69,0 +74,0 @@ }

package.json

 {
   "name": "@daviddarnes/mastodon-post",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A Web Component to display Mastodon posts and their metadata",
@@ -5,0 +5,0 @@ "main": "mastodon-post.js",

README.md

@@ -5,3 +5,3 @@ # `mastodon-post`
 
-**[Demo](https://daviddarnes.github.io/component-template/demo.html)**
+**[Demo](https://daviddarnes.github.io/mastodon-post/demo.html)** | **[Custom template demo](https://daviddarnes.github.io/mastodon-post/demo-custom-template.html)**
 
@@ -16,3 +16,5 @@ ## Examples
 <mastodon-post>
-  <a href="https://mastodon.design/@DavidDarnes/109824258017750161">Discuss on Mastodon</a>
+  <a href="https://mastodon.design/@DavidDarnes/109824258017750161">
+    Discuss on Mastodon
+  </a>
 </mastodon-post>
@@ -31,3 +33,5 @@ ```
 <mastodon-post>
-  <a href="https://mastodon.design/@DavidDarnes/109824258017750161">Discuss on Mastodon</a>
+  <a href="https://mastodon.design/@DavidDarnes/109824258017750161">
+    Discuss on Mastodon
+  </a>
 </mastodon-post>
@@ -79,4 +83,67 @@ ```
 
-TBC
+The default template for the component looks like this:
 
+```html
+<figure>
+  <blockquote data-key="content"></blockquote>
+  <figcaption>
+    <cite>
+      <a data-key="url">
+        <span data-key="username"></span>
+        @
+        <span data-key="hostname"></span>
+      </a>
+    </cite>
+    <dl>
+      <dt>Reposts</dt>
+      <dd data-key="reblogs_count"></dd>
+      <dt>Replies</dt>
+      <dd data-key="replies_count"></dd>
+      <dt>Favourites</dt>
+      <dd data-key="favourites_count"></dd>
+    </dl>
+  </figcaption>
+</figure>
+```
+
+However you can customise the template by using a `<template>` element with an `id` of `mastodon-post-template`, which will be used for every instance of the component on the page. Here's an example which just exposes the vanity metrics of the Mastodon post as a `<dl>`:
+
+```html
+<template id="mastodon-post-template">
+  <dl>
+    <dt>Reposts</dt>
+    <dd data-key="reblogs_count"></dd>
+    <dt>Replies</dt>
+    <dd data-key="replies_count"></dd>
+    <dt>Favourites</dt>
+    <dd data-key="favourites_count"></dd>
+  </dl>
+</template>
+```
+
+Data is applied using a `data-key` data attribute. The value of this attribute corresponds to one of the following data points returned by the Mastodon API plus some pieces of data formed within the component itself:
+
+- content: The post content itself, as a HTML string "<p>Example content</p>"
+- `created_at`: The time of the post in UTC, e.g. "2023-02-07T15:53:07.042Z"
+- `edited_at`: The time of the post being last edited in UTC, e.g. "2023-02-08T15:53:07.042Z"
+- `favourites_count`: Favourite count
+- `hostname`: The Mastodon host site, e.g. "mastodon.social"
+- `id`: The ID of the post
+- `in_reply_to_account_id`: The ID of the account being replied to, if it's a reply
+- `in_reply_to_id`: The ID of the post being replied to, if it's a reply
+- `language`: The language locale code
+- `postId`: The post ID
+- `reblogs_count`: The reblog or boost count
+- `replies_count`: The replies count
+- `sensitive`: If the post has been marked as sensitive, boolean
+- `spoiler_text`: The hidden spoiler text, if applied
+- `uri`: The post URI
+- `url`: The original post URL from the anchor in the component
+- `username`: The username, lifted from the original post URL
+- `visibility`: The visibility type
+
+For `<a>` and `<img>` elements the value won't be applied to it's content if the string being returned starts with `http` and will be instead be applied to the `href` and `src` attributes respectively.
+
+Check out the [custom template demo](https://daviddarnes.github.io/mastodon-post/demo-custom-template.html) as well as [the source code](https://github.com/daviddarnes/mastodon-post/blob/main/demo-custom-template.html) for reference.
+
 ## Credit
@@ -83,0 +150,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13616

increased by61.04%

Number of package files

9

increased by12.5%

Lines of code

68

increased by7.94%

Number of lines in readme file

150

increased by80.72%

No dependency changes