add blog section to home page

src/webpage/home.html

@@ -56,6 +56,14 @@
 				<div id="instancebox"></div>
 			</div>
 
+			<div class="pagebox">
+				<h2 id="box5title">Fermi Blog</h2>
+				<p id="box5description">Read or subscribe to the blog for updates on Fermi!</p>
+				<br />
+				<a href="https://blog.fermi.chat" class="TitleButtons" id="blog"> Blog </a>
+				<div id="recentBlog" class="flexttb"></div>
+			</div>
+
 			<div class="pagebox">
 				<h2 id="box4title">Translate Fermi</h2>
 				<p id="box4description">You can help translate Fermi into your own language!</p>

src/webpage/home.ts

@@ -17,6 +17,10 @@ const serverbox = document.getElementById("instancebox") as HTMLDivElement;
 	const box4title = document.getElementById("box4title");
 	const box4description = document.getElementById("box4description");
 	const translate = document.getElementById("translate");
+
+	const box5title = document.getElementById("box5title");
+	const box5description = document.getElementById("box5description");
+	const blog = document.getElementById("blog");
 	if (
 		openClient &&
 		welcomeJank &&
@@ -27,8 +31,15 @@ const serverbox = document.getElementById("instancebox") as HTMLDivElement;
 		box1Items &&
 		box4title &&
 		box4description &&
-		translate
+		translate &&
+		box5title &&
+		box5description &&
+		blog
 	) {
+		blog.textContent = I18n.blog.blog();
+		box5title.textContent = I18n.blog.fermi();
+		box5description.textContent = I18n.blog.desc();
+
 		openClient.textContent = I18n.getTranslation("htmlPages.openClient");
 		welcomeJank.textContent = I18n.getTranslation("htmlPages.welcomeJank");
 		box1title.textContent = I18n.getTranslation("htmlPages.box1title");
@@ -60,7 +71,26 @@ const serverbox = document.getElementById("instancebox") as HTMLDivElement;
 		);
 	}
 })();
-
+const recent = document.getElementById("recentBlog");
+if (recent) {
+	fetch("https://blog.fermi.chat/feed_json_created.json")
+		.then((_) => _.json())
+		.then(
+			(json: {
+				items: {
+					url: string;
+					title: string;
+				}[];
+			}) => {
+				for (const thing of json.items) {
+					const a = document.createElement("a");
+					a.href = thing.url;
+					a.textContent = thing.title;
+					recent.append(a);
+				}
+			},
+		);
+}
 fetch("/instances.json")
 	.then((_) => _.json())
 	.then(

src/webpage/style.css

@@ -81,6 +81,10 @@ body {
 .traceBars {
 	height: 30px;
 }
+#recentBlog {
+	padding-top: 12px;
+	gap: 12px;
+}
 .flexttb {
 	min-width: 0;
 	display: flex;

translations/en.json

@@ -27,6 +27,11 @@
 		"composer": "Composer: $1",
 		"length": "Length: $1 minutes and $2 seconds"
 	},
+	"blog": {
+		"blog": "Blog",
+		"fermi": "Fermi Blog",
+		"desc": "You can help translate Fermi into your own language!"
+	},
 	"permissions": {
 		"descriptions": {
 			"CREATE_INSTANT_INVITE": "Allows the user to create invites for the guild",