From b6593651a83e3eeb4dd3166e0087f4287d8845eb Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Sun, 19 Jan 2025 20:12:52 +0100
Subject: [PATCH] refactor(enhance-content): extend from HTMLElement

---
 static/enhance-content.js | 19 ++++---------------
 templates/card.html       |  2 +-
 templates/import-map.html |  2 +-
 3 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/static/enhance-content.js b/static/enhance-content.js
index 4f109ca..9cf8c98 100644
--- a/static/enhance-content.js
+++ b/static/enhance-content.js
@@ -1,15 +1,8 @@
-import { WebComponent } from "web-component-base";
-
-class EnhanceContent extends WebComponent {
-  static props = {
-    server: "",
-    tagUrl: "",
-  };
-
-  onInit() {
+class EnhanceContent extends HTMLElement {
+  connectedCallback() {
     const el = this.getElementsByClassName("hashtag");
-    const server = this.props.server;
-    const tagUrl = this.props.tagUrl;
+    const server = this.dataset.server;
+    const tagUrl = this.dataset.tagUrl;
 
     for (let i = 0; i < el.length; i++) {
       const tagEl = el.item(i);
@@ -38,10 +31,6 @@ class EnhanceContent extends WebComponent {
       }
     }
   }
-
-  get template() {
-    return this.innerHtml;
-  }
 }
 
 customElements.define("enhance-content", EnhanceContent);
diff --git a/templates/card.html b/templates/card.html
index f9cbf87..88e5f10 100644
--- a/templates/card.html
+++ b/templates/card.html
@@ -25,7 +25,7 @@
 
     <div class="body">
 
-      <enhance-content server={{server}} tag-url={{url_for('threads.tag', id='' )}}>
+      <enhance-content data-server={{server}} data-tag-url={{url_for('threads.tag', id='' )}}>
         {{thread.content | safe}}
       </enhance-content>
       {% for media in thread.media_attachments %}
diff --git a/templates/import-map.html b/templates/import-map.html
index 534903f..8219586 100644
--- a/templates/import-map.html
+++ b/templates/import-map.html
@@ -7,5 +7,5 @@
 </script>
 
 <script type="module">
-    import TimeAgo from "https://esm.sh/v135/@github/relative-time-element@4.4.0/es2022/relative-time-element.mjs"
+  import TimeAgo from "https://esm.sh/v135/@github/relative-time-element@4.4.0/es2022/relative-time-element.mjs"
 </script>
\ No newline at end of file