Implement mastodon comments

public/js/webComponents/card.js

@@ -0,0 +1,33 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+<style>
+	#card {
+		align-items: flex-start;
+		background-color: var(--wc-card-background-color);
+		border-radius: var(--wc-card-border-radius);
+		box-shadow: var(--wc-card-box-shadow);
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: flex-start;
+		margin-bottom: 1em;
+		padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
+		width: 100%;
+	}
+</style>
+
+<div id="card" part="main">
+	<slot></slot>
+</div>
+`
+
+class card extends HTMLElement {
+	constructor() {
+		super();
+
+		this._shadowRoot = this.attachShadow({ 'mode': 'open' });
+		this._shadowRoot.appendChild(template.content.cloneNode(true));
+	}
+}
+
+window.customElements.define('wc-card', card);

public/js/webComponents/comment.js

@@ -0,0 +1,76 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+<style>
+	a {
+		color: var(--wc-link-color);
+		text-decoration-color: var(--wc-link-decoration-color);
+		text-decoration-thickness: var(--wc-link-decoration-thickness);
+	}
+	#comment {
+		margin: var(--wc-comment-text-margin);
+	}
+	#comment p {
+		margin: 0 auto 0 auto;
+	}
+	#meta {
+		display: flex;
+		flex-flow: row nowrap;
+	}
+	#meta-text {
+		display: flex;
+		flex-flow: column nowrap;
+		width: 100%;
+	}
+	#meta-text p {
+		margin: 0 1rem 0 1rem;
+	}
+</style>
+
+<article id="commentContainer" class="blog-comment" part="main">
+	<div id="meta" part="meta">
+		<div>
+			<wc-profile-pic url="" />
+		</div>
+		<div id="meta-text" part="meta-text">
+			<p id="author" part="author">
+				<a id="author-link" part="author-link"></a><span> says:</span>
+			</p>
+			<p id="publish-date" part="publish-date"></p>
+		</div>
+	</div>
+	<div id="comment" part="content">
+	</div>
+</article>
+`
+
+class comment extends HTMLElement {
+	constructor() {
+		super();
+
+		this._shadowRoot = this.attachShadow({ 'mode': 'open' });
+		this._shadowRoot.appendChild(template.content.cloneNode(true));
+		this.$comment = this._shadowRoot.querySelector('#commentContainer');
+	}
+
+	static get observedAttributes() {
+		return ['author_name', 'author_url', 'avatar_url', 'comment_content', 'publish_date'];
+	}
+
+	attributeChangedCallback(name, oldVal, newVal) {
+		if (oldVal != newVal) {
+			this[name] = newVal;
+			this.render();
+		}
+	}
+
+	render() {
+		this.$comment.querySelector('#author-link').innerHTML = this.author_name;
+		this.$comment.querySelector('#author-link').href = this.author_url;
+		this.$comment.querySelector('wc-profile-pic').setAttribute('url', this.avatar_url)
+		this.$comment.querySelector('#comment').innerHTML = this.comment_content;
+		this.$comment.querySelector('#publish-date').innerHTML = this.publish_date;
+	}
+}
+
+window.customElements.define('wc-comment', comment);

public/js/webComponents/profilePic.js

@@ -0,0 +1,40 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+<style>
+#profilePic {
+	border-radius: var(--wc-profile-pic-border-radius);
+	width: var(--wc-profile-pic-size);
+	height: var(--wc-profile-pic-size);
+}
+</style>
+
+<img src="" id="profilePic"/>
+`
+
+class profilePic extends HTMLElement {
+	constructor() {
+		super();
+
+		this._shadowRoot = this.attachShadow({ 'mode': 'open' });
+		this._shadowRoot.appendChild(template.content.cloneNode(true));
+		this.$profilePic = this._shadowRoot.querySelector('#profilePic');
+	}
+
+	static get observedAttributes() {
+		return ['url'];
+	}
+
+	attributeChangedCallback(name, oldVal, newVal) {
+		if (oldVal != newVal) {
+			this[name] = newVal;
+			this.render();
+		}
+	}
+
+	render() {
+		this.url ? this.$profilePic.src = this.url : null;
+	}
+}
+
+window.customElements.define('wc-profile-pic', profilePic);