Get rid of web components

public/js/webComponents/card.js

@@ -1,33 +0,0 @@
-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: var(--wc-card-margin);
-		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

@@ -1,76 +0,0 @@
-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/musicPlayer.js

@@ -1,51 +0,0 @@
-const template = document.createElement("template");
-
-template.innerHTML = `
-<style>
-	.cover {
-		object-fit: cover;
-	}
-</style>
-
-<figure class="mplayer" part="main">
-	<div class="coverContainer" part="coverContainer">
-		<img src="" class="cover" part="cover">
-	</div>
-	<div part="captionAndPlayer">
-		<figcaption part="caption">
-			<span class="title" part="title"></span><br /><span class="artist" part="artist"></span>
-		</figcaption>
-		<audio controls src="" class="player" part="player"></audio>
-	</div>
-</figure>
-`;
-
-class mplayer extends HTMLElement {
-	constructor() {
-		super();
-
-		this._shadowRoot = this.attachShadow({ mode: "open" });
-		this._shadowRoot.appendChild(template.content.cloneNode(true));
-		this.$mplayer = this._shadowRoot.querySelector(".mplayer");
-	}
-
-	static get observedAttributes() {
-		return ["title", "artist", "media_url", "cover_url"];
-	}
-
-	attributeChangedCallback(name, oldVal, newVal) {
-		if (oldVal != newVal) {
-			this[name] = newVal;
-			this.render();
-		}
-	}
-
-	render() {
-		this.$mplayer.querySelector(".title").innerHTML = this.title;
-		this.$mplayer.querySelector(".artist").innerHTML = this.artist;
-		this.$mplayer.querySelector(".player").src = this.media_url;
-		this.$mplayer.querySelector(".coverContainer > img").src = this.cover_url;
-	}
-}
-
-window.customElements.define("wc-mplayer", mplayer);

public/js/webComponents/profilePic.js

@@ -1,40 +0,0 @@
-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);