From 0108c871b871839c9e733b3785c93b195fb23b30 Mon Sep 17 00:00:00 2001
From: ktyl <me@ktyl.dev>
Date: Sun, 4 Aug 2024 15:18:12 +0100
Subject: [PATCH] wip: add icon cluster

---
 README.md                 |  2 ++
 icon/bookmark-regular.svg |  1 +
 icon/retweet-solid.svg    |  1 +
 icon/star-regular.svg     |  1 +
 main.js                   | 41 +++++++++++++++++++++++++++++++++++++++
 styles.css                | 38 ++++++++++++++++++++++++++++++++++++
 6 files changed, 84 insertions(+)
 create mode 100644 icon/bookmark-regular.svg
 create mode 100644 icon/retweet-solid.svg
 create mode 100644 icon/star-regular.svg

diff --git a/README.md b/README.md
index 85741ca..11ced71 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,4 @@
 infinite scrolling
 https://webdesign.tutsplus.com/how-to-implement-infinite-scrolling-with-javascript--cms-37055t
+
+Icons from https://fontawesome.com/
diff --git a/icon/bookmark-regular.svg b/icon/bookmark-regular.svg
new file mode 100644
index 0000000..ea49a09
--- /dev/null
+++ b/icon/bookmark-regular.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 48C0 21.5 21.5 0 48 0l0 48 0 393.4 130.1-92.9c8.3-6 19.6-6 27.9 0L336 441.4 336 48 48 48 48 0 336 0c26.5 0 48 21.5 48 48l0 440c0 9-5 17.2-13 21.3s-17.6 3.4-24.9-1.8L192 397.5 37.9 507.5c-7.3 5.2-16.9 5.9-24.9 1.8S0 497 0 488L0 48z"/></svg>
\ No newline at end of file
diff --git a/icon/retweet-solid.svg b/icon/retweet-solid.svg
new file mode 100644
index 0000000..049c9b7
--- /dev/null
+++ b/icon/retweet-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M272 416c17.7 0 32-14.3 32-32s-14.3-32-32-32l-112 0c-17.7 0-32-14.3-32-32l0-128 32 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l32 0 0 128c0 53 43 96 96 96l112 0zM304 96c-17.7 0-32 14.3-32 32s14.3 32 32 32l112 0c17.7 0 32 14.3 32 32l0 128-32 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8l-32 0 0-128c0-53-43-96-96-96L304 96z"/></svg>
\ No newline at end of file
diff --git a/icon/star-regular.svg b/icon/star-regular.svg
new file mode 100644
index 0000000..ede81f2
--- /dev/null
+++ b/icon/star-regular.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/></svg>
\ No newline at end of file
diff --git a/main.js b/main.js
index 8947efe..350d6d3 100644
--- a/main.js
+++ b/main.js
@@ -60,6 +60,8 @@ class Post {
         this.replyTo = data.replyTo;
         this.parentPost = null;
 
+        this.stars = 420;
+
         this.replies = [];
     }
 
@@ -113,6 +115,44 @@ class Post {
     getContentElement() {
         const elem = document.createElement("p");
         elem.innerHTML = this.content;
+
+
+        return elem;
+    }
+
+    getIconElement(svg, right) {
+        const elem = document.createElement("div");
+        elem.className = "icon";
+        right *= 94;
+        elem.style.right = `${right}px`;
+
+        const imgElem = document.createElement("img");
+        imgElem.className = "icon-img";
+        imgElem.setAttribute("src", svg);
+        elem.appendChild(imgElem);
+
+        const countElem = document.createElement("span");
+        // TODO: make an icon class to store count OR i guess just parse it out of the DOM
+        countElem.className = "icon-count";
+        countElem.innerHTML = "42069";
+        elem.appendChild(countElem);
+
+        return elem;
+    }
+
+    getFooterElement() {
+        const elem = document.createElement("div");
+        elem.className = "post-footer";
+
+        const starIconElem = this.getIconElement("icon/star-regular.svg", 0);
+        elem.appendChild(starIconElem);
+
+        const repostElem = this.getIconElement("icon/retweet-solid.svg", 1)
+        elem.appendChild(repostElem);
+
+        const bookmarkElem = this.getIconElement("icon/bookmark-regular.svg", 2);
+        elem.appendChild(bookmarkElem);
+
         return elem;
     }
 
@@ -138,6 +178,7 @@ class Post {
         elem.className = classes.join(" ");
         elem.appendChild(this.getHeaderElement());
         elem.appendChild(this.getContentElement());
+        elem.appendChild(this.getFooterElement());
         elem.appendChild(this.getReplyButton());
 
         for (let i = 0; i < this.replies.length; i++) {
diff --git a/styles.css b/styles.css
index 64865d3..a995676 100644
--- a/styles.css
+++ b/styles.css
@@ -2,6 +2,10 @@
     --header-height: 64px;
     --blue-gray: #374955;
     --sky-blue: #86b1cc;
+    /* use filter: instead of color: to color SVGs
+     * https://isotropic.co/tool/hex-color-to-css-filter/ */
+    --blue-gray-filter: invert(27%) sepia(20%) saturate(575%) hue-rotate(161deg) brightness(93%) contrast(93%);
+    --sky-blue-filter: invert(73%) sepia(16%) saturate(657%) hue-rotate(160deg) brightness(90%) contrast(91%);
     --comment-column-width: 3px;
 }
 
@@ -154,6 +158,40 @@ body {
     justify-content: left;
 }
 
+.post-footer {
+    position: relative;
+}
+
+.icon {
+    color: var(--sky-blue);
+    height: 32px;
+    width: 100px;
+    position: absolute;
+    top: 16px;
+}
+
+.icon-img {
+    filter: var(--blue-gray-filter);
+    height: 32px;
+    width: 32px;
+    display: inline-block;
+}
+
+.icon-img.active {
+    filter: var(--sky-blue-filter)
+}
+
+.icon-count {
+    color: var(--blue-gray);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 32px;
+    margin-left: 4px;
+}
+
 .write-post {
     cursor: pointer;
     color: var(--blue-gray);