ayo/threads
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: use web-component-base

Browse source
This commit is contained in:
Ayo Ayco 2025-01-19 15:20:02 +01:00
parent 48ca6ec3ea
commit 2022c14668
5 changed files with 29 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
static/enhance-content.js
View file

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

4
templates/_home.html
View file

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

4
templates/_tag.html
View file

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

2
templates/card.html
View file

@ -187,7 +187,7 @@
<div class="body"> <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}} {{thread.content | safe}}
</enhance-content> </enhance-content>
{% for media in thread.media_attachments %} {% for media in thread.media_attachments %}

11
templates/import-map.html Normal file
View file

@ -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>