feat: split URL categories to featured / archive (#142)

Before Submitting This PR, Please Ensure You Have Completed The
Following:

1. [ ] Are internal links to wiki documents using [relative file
links](https://docusaurus.io/docs/markdown-features/links)?
2. [ ] Are all new documentation files lowercase, with dash separated
names (ex. unraid-os.mdx)?
3. [ ] Are all assets (images, etc), located in an assets/ subfolder
next to the .md/mdx files?
4. [ ] Have you checked to ensure there aren't other open [Pull
Requests](../../../pulls) for the same update/change?
5. [ ] Is the build succeeding?

Author: ljm42

src/components/ReleasesList/index.tsx

@@ -2,17 +2,75 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 
 import React, { useEffect, useState } from "react";
 
+interface Release extends Object {
+  tags: string[];
+  version: string;
+  date: string;
+  basefile: string;
+  url: string;
+  md5: string;
+  sha256: string;
+  changelog_pretty: string;
+}
+
+type ParsedReleaseObject = {
+  featured?: { releases: Release[]; title: string; description: string };
+  archive?: { releases: Release[]; title: string; description: string };
+};
+type Releases = Release[];
+
 export function ReleasesListViewer() {
-  const [releases, setReleases] = useState([]);
+  const [releases, setReleases] = useState<ParsedReleaseObject>({
+    featured: {
+      releases: [],
+      title: "Featured",
+      description: "Recommended Releases",
+    },
+    archive: {
+      releases: [],
+      title: "Archive",
+      description: "Older / Non-Recommended Releases",
+    },
+  });
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await fetch(
-          "https://releases.unraid.net/json?archived=true"
+        const response = await fetch("https://releases.unraid.net/json");
+        const data: Release[] = await response.json();
+        const parsedReleases = data.reduce<{
+          featured: Release[];
+          archive: Release[];
+        }>(
+          (acc, releases) => {
+            if (releases.tags.includes("featured")) {
+              acc.featured.push(releases);
+            } else {
+              acc.archive.push(releases);
+            }
+            return acc;
+          },
+          { featured: [], archive: [] }
         );
-        const data = await response.json();
-        setReleases(data);
+
+        setReleases({
+          ...(parsedReleases.featured.length
+            ? {
+                featured: {
+                  ...releases.featured,
+                  releases: parsedReleases.featured,
+                },
+              }
+            : {}),
+          ...(parsedReleases.archive.length
+            ? {
+                archive: {
+                  ...releases.archive,
+                  releases: parsedReleases.archive,
+                },
+              }
+            : {}),
+        });
       } catch (error) {
         console.error(error);
       }
@@ -22,32 +80,47 @@ export function ReleasesListViewer() {
   }, []);
 
   return (
-    <table>
-      <thead>
-        <th>Version</th>
-        <th>Created</th>
-        <th>Download</th>
-        <th>Changelog</th>
-        <th>MD5</th>
-      </thead>
-      <tbody>
-        {releases.map((release) => (
-          <tr>
-            <td>{release.version}</td>
-            <td>{release.date}</td>
-            <td>
-              <a download href={release.url}>
-                {release.basefile}
-              </a>
-            </td>
-            <td>
-              <a href={release.changelog_pretty}>Changelog</a>
-            </td>
-            <td>{release.md5}</td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
+    <>
+      {Object.values(releases).map(({ title, description, releases }) => (
+        <div
+          key={title}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            flex: 1,
+          }}
+        >
+          <h2>{title}</h2>
+          <p>{description}</p>
+          <table>
+            <thead>
+              <th>Version</th>
+              <th>Created</th>
+              <th>Download</th>
+              <th>Changelog</th>
+              <th>MD5</th>
+            </thead>
+            <tbody>
+              {releases.map((release) => (
+                <tr key={release.version}>
+                  <td>{release.version}</td>
+                  <td>{release.date}</td>
+                  <td>
+                    <a download href={release.url}>
+                      {release.basefile}
+                    </a>
+                  </td>
+                  <td>
+                    <a href={release.changelog_pretty}>Changelog</a>
+                  </td>
+                  <td>{release.md5}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ))}
+    </>
   );
 }