feat: use web-component-base

static/enhance-content.js

@@ -1,8 +1,15 @@
-class EnhanceContent extends HTMLElement {
-  connectedCallback() {
+import { WebComponent } from "web-component-base";
+
+class EnhanceContent extends WebComponent {
+  static props = {
+    server: "",
+    tagUrl: "",
+  };
+
+  onInit() {
     const el = this.getElementsByClassName("hashtag");
-    const server = this.dataset.server;
-    const tagUrl = this.dataset.tagUrl;
+    const server = this.props.server;
+    const tagUrl = this.props.tagUrl;
 
     for (let i = 0; i < el.length; i++) {
       const tagEl = el.item(i);
@@ -31,6 +38,10 @@ class EnhanceContent extends HTMLElement {
       }
     }
   }
+
+  get template() {
+    return this.innerHtml;
+  }
 }
 
 customElements.define("enhance-content", EnhanceContent);

templates/_home.html

@@ -18,9 +18,7 @@
   <meta property="og:site_name" content="{{ app.site_name }}" />
   <meta property="og:title" content="{{ app.title }}" />
 
-  <script type="module">
-    import TimeAgo from 'https://esm.sh/v135/@github/relative-time-element@4.4.0'
-  </script>
+  {% include "import-map.html" %}
 
   <!-- Use parent app's variables & reset stylesheets -->
   <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />

templates/_tag.html

@@ -18,9 +18,7 @@
   <meta property="og:site_name" content="{{ app.site_name }}" />
   <meta property="og:title" content="{{ app.title }} / {{ tag }}" />
 
-  <script type="module">
-    import TimeAgo from 'https://esm.sh/v135/@github/relative-time-element@4.4.0'
-  </script>
+  {% include "import-map.html" %}
 
   <!-- Use parent app's variables & reset stylesheets -->
   <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />

templates/card.html

@@ -187,7 +187,7 @@
 
     <div class="body">
 
-      <enhance-content data-server={{server}} data-tag-url={{url_for('threads.tag', id='' )}}>
+      <enhance-content server={{server}} tag-url={{url_for('threads.tag', id='' )}}>
         {{thread.content | safe}}
       </enhance-content>
       {% for media in thread.media_attachments %}

templates/import-map.html

@@ -0,0 +1,11 @@
+<script type="importmap">
+{
+  "imports": {
+    "web-component-base": "https://esm.sh/web-component-base@2.1.2/es2022/web-component-base.mjs"
+  }
+}
+</script>
+
+<script type="module">
+    import TimeAgo from "https://esm.sh/v135/@github/relative-time-element@4.4.0/es2022/relative-time-element.mjs"
+</script>