fix

news/0.md

@@ -1,22 +0,0 @@
----
-authors: Kleo
-title: Refactoring
-description: The current codebase isn't practical, so we are refractoring it
-image: https://preview.redd.it/axscigvvfik71.png?auto=webp&s=ddd458f865c6f50d21a66fe76dc12a07c8b1e198
-date: 2025-04-18
-tags: development, news
----
-Due to Minecraft's nature of refactors for the past decade (which is normal for all apps), we have decided to refactor the codebase to make it more maintainable and practical. This will also take us in other versions of Minecraft.
-
-We will be working on this in the next few weeks trying to improve both the codebase and the user experience.
-
-## Goals
-- 📖 Document every change done to the code, both in discord and in the github wiki, this is mandatory.
-- 🧩 Separate as much code from Minecraft as possible (abstractions), important for adding other versions.
-- 🎨 Make the UI as customizable as possible, good for user experience, we should keep this in mind.
-
-For updates, check out our [Discord](https://discord.gg/HFRsNxfCqT) or [GitHub issue](https://github.com/saturnclientmc/saturnclient/issues/1)
-
----
-
-Credits to [Electronic_Sample_96](https://www.reddit.com/r/Minecraft/comments/pejvos/an_ultrawide_wallpaper_on_minecraft_2560_x_1080/) for the image

src/app/news/[id]/page.tsx

@@ -1,41 +1,83 @@
-import { readFileSync } from "fs";
+"use client";
+
+import { useEffect, useState } from "react";
 import smartSplit from "@/lib/smartSplit";
-import { parseNews } from "@/lib/news";
+import { parseNews } from "@/lib/newsParser";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import Md from "./Markdown";
 
-export default async function News({
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
-  const contents = readFileSync(`news/${(await params).id}.md`, "utf-8");
+export default function News({ params }: { params: Promise<{ id: string }> }) {
+  const [newsData, setNewsData] = useState<{
+    authors: string[];
+    title: string;
+    description: string;
+    image: string;
+    date: string;
+    content: string;
+  } | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
 
+  useEffect(() => {
+    const fetchNews = async () => {
+      try {
+        const resolvedParams = await params;
+        const response = await fetch(`/news-md/${resolvedParams.id}.md`);
+        const contents = await response.text();
+        console.log(contents);
         const { authors, title, description, image, date } = parseNews(
           contents,
-    (await params).id
+          resolvedParams.id
         );
+        const content = smartSplit(contents, "---", 3)[2];
+        setNewsData({ authors, title, description, image, date, content });
+      } catch (error) {
+        console.error("Error fetching news:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchNews();
+  }, [params]);
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col min-h-screen items-center justify-center">
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  if (!newsData) {
+    return (
+      <div className="flex flex-col min-h-screen items-center justify-center">
+        <p>Failed to load news article</p>
+      </div>
+    );
+  }
 
   return (
     <div className="flex flex-col min-h-screen">
       <div
         className="bg-center bg-no-repeat h-96 flex-shrink-0"
-        style={{ backgroundImage: `url(${image})` }}
+        style={{ backgroundImage: `url(${newsData.image})` }}
       >
         <Header />
 
         <h1 className="font-black m-auto w-max font-['Panton'] !text-5xl mt-14">
-          {title}
+          {newsData.title}
         </h1>
 
-        <p className="m-auto w-max !text-xl mt-5">{description}</p>
-        <p className="m-auto w-max !text-lg">written by {authors.join(", ")}</p>
+        <p className="m-auto w-max !text-xl mt-5">{newsData.description}</p>
+        <p className="m-auto w-max !text-lg">
+          written by {newsData.authors.join(", ")}
+        </p>
       </div>
 
       <div className="w-[54rem] mx-auto mt-5">
         <div className="rounded-2xl bg-[#111] p-5 markdown">
-          <Md>{smartSplit(contents, "---", 3)[2]}</Md>
+          <Md>{newsData.content}</Md>
         </div>
       </div>
 

src/lib/news.ts

@@ -1,52 +1,14 @@
 import { readdirSync, readFileSync } from "fs";
-import smartSplit from "./smartSplit";
-
-export interface News {
-  authors: string[];
-  title: string;
-  description: string;
-  image: string;
-  date: string;
-  id: string;
-}
-
-export function parseNews(news: string, id: string): News {
-  const content = news.split("---", 2)[1];
-
-  const params: News = {
-    authors: [],
-    title: "Undefined title",
-    description: "",
-    image: "/background.png",
-    date: "Undefined date",
-    id,
-  };
-
-  content.split("\n").forEach((v) => {
-    const [key, value] = smartSplit(v, ":", 2).map((v) => v.trim());
-    if (key === "authors") {
-      params.authors = value.split(",").map((v) => v.trim());
-    } else if (
-      key === "title" ||
-      key === "description" ||
-      key === "image" ||
-      key === "date"
-    ) {
-      params[key] = value;
-    }
-  });
-
-  return params;
-}
+import { News, parseNews } from "./newsParser";
 
 export default function listNews(): News[] {
-  const newsIdList = readdirSync("news");
+  const newsIdList = readdirSync("public/news-md");
 
   if (newsIdList === null) return [];
 
   return newsIdList.map((v) => {
     return parseNews(
-      readFileSync(`news/${v}`, "utf-8"),
+      readFileSync(`public/news-md/${v}`, "utf-8"),
       v.replaceAll(".md", "")
     );
   });