Add toot embedding

public/css/index.css

@@ -18,9 +18,10 @@
 	--font-variation-default: "opsz" 18, "wght" 310, "SOFT" 40, "WONK" 0;
 	--font-variation-ui: "wght" 500;
 	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
-	--meta-font-size: var(--step--1);
-	--meta-font-style: italic;
-	--meta-font-variation-settings: "opsz" 12, "wght" 310, "SOFT" 40, "WONK" 0;
+	--meta-font-family: var(--font-family-ui);
+	--meta-font-size: var(--step--2);
+	--meta-font-style: normal;
+	--meta-font-variation-settings: var(--font-variation-ui);
 	--ui-letter-spacing: calc(var(--space-3xs) * 0.5);
 }
 
@@ -386,20 +387,30 @@ table th {
 .continue-discussion button {
 	margin-top: var(--space-xs);
 }
-wc-comment::part(author-link) {
+wc-comment::part(author-link), wc-toot::part(author-link) {
 	font-size: var(--step-0);
 	text-decoration: none;
 }
 wc-comment::part(main) {
 	margin-bottom: var(--space-l);
 }
-wc-comment::part(publish-date) {
+wc-comment::part(publish-date), wc-toot::part(publish-date) {
+	font-family: var(--meta-font-family);
 	font-size: var(--meta-font-size);
 	font-style: var(--meta-font-style);
 	font-variation-settings: var(--font-variation-settings);
 	margin-top: -.25rem;
 }
-
+wc-toot::part(main) {
+	color: white;
+	font-family: var(--meta-font-family);
+	font-size: var(--step--1);
+}
+wc-toot::part(author), wc-toot::part(author-link){
+	color: white;
+	font-style: var(--meta-font-style);
+	font-variation-settings: "wght" 600;
+}
 /* Code Fences */
 pre,
 code {

public/js/main.js

@@ -1,3 +1,4 @@
 import './webComponents/card.js';
 import './webComponents/profilePic.js';
 import './webComponents/comment.js';
+import './webComponents/toot.js';

public/js/modules/mastodonDateTools.js

@@ -0,0 +1,22 @@
+const dateSuffixAdder = (date) => {
+	if (date > 9 && date < 20) {
+		return "th";
+	} else {
+		let dateString = date < 10 ? "0" + date : "" + date;
+		if (dateString[1] < 4 && dateString[1] > 0) {
+			return dateString[1] == 1 ? "st" :
+			dateString[1] == 2 ? "nd" :
+			dateString[1] == 3 ? "rd" : null;
+		} else {
+			return "th"
+		}
+	}
+}
+
+const monthMap = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+const timeFormatter = (hours, minutes) => {
+	return `${hours < 12 ? hours : hours - 12}:${minutes < 10 ? "0" : ""}${minutes} ${hours < 12 ? "AM" : "PM"}`
+}
+
+export {dateSuffixAdder, monthMap, timeFormatter};