feat(overview): Show CHANGELOG.md on the overview page

frontend/src/components/dwe/markdown.tsx

@@ -8,8 +8,12 @@ const components: Components = {
   h2: ({ ...props }) => (
     <h3 className="text-lg font-semibold mt-4" {...props} />
   ),
+  h3: ({ ...props }) => (
+    <h4 className="text-base font-semibold mt-4" {...props} />
+  ),
+  h4: ({ ...props }) => <h5 className="font-semibold" {...props} />,
   p: ({ ...props }) => <p className="text-muted-foreground" {...props} />,
-  li: ({ ...props }) => <li className="mb-1 pl-1" {...props} />,
+  li: ({ ...props }) => <li className="mb-1 pl-1 text-muted-foreground" {...props} />,
   a: ({ ...props }) => (
     <a
       className="text-blue-500 hover:underline"

frontend/src/components/dwe/overview.tsx

@@ -1,22 +1,56 @@
 // pages/index.tsx
+import changelog from "../../../../CHANGELOG.md?raw";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Markdown } from "./markdown";
 
+// Drop the changelog's own title and split it into one entry per release
+const releases = changelog
+  .replace(/^# Changelog\s*/, "")
+  .split(/^(?=## )/m)
+  .filter((release) => release.trim());
+
+// Nest a release's headings under "## Changelog"
+const nestHeadings = (markdown: string) =>
+  markdown.replace(/^(#{1,5}) /gm, "#$1 ");
+
+const currentRelease = nestHeadings(releases[0] ?? "");
+const previousReleases = nestHeadings(releases.slice(1).join("\n"));
+
 const markdown = `
-# DWE OS Overview
+# dweOS Overview
+
+dweOS is an optional software designed to run on underwater systems, extending the functionality of DeepWater Exploration cameras.
 
-DWE OS is an optional software designed to run on underwater systems, extending the functionality of DeepWater Exploration cameras.
+For more detailed documentation, refer to the official project docs at [docs.dwe.ai](https://docs.dwe.ai/dwe-os/overview).
 
-## Key Features
+---
 
-- **Bus ID Camera Enumeration:** Ensures cameras retain their settings even after a reboot, eliminating port confusion.
-- **StellarHD Leader/Follower Support:** Enables PrecisionSync™ to work seamlessly out of the box with DWE OS.
-- **WiFi Configuration Interface:** Allows easy system updates directly from DWE OS.
-- **Light Control Integration:** Provides control over the on/off state and brightness of lights.
-- **Built-in Terminal:** Facilitates access to advanced features without the need for SSH.
+## Changelog
 
-For more detailed documentation, refer to the official project docs at [docs.dwe.ai](https://docs.dwe.ai/software/dwe-os/dwe-os-2).
+${currentRelease}
 `;
 
 export default function OverviewMarkdown() {
-  return <Markdown>{markdown}</Markdown>;
+  return (
+    <div className="space-y-6">
+      <Markdown>{markdown}</Markdown>
+      {previousReleases && (
+        <Accordion type="single" collapsible>
+          <AccordionItem value="previous-releases">
+            <AccordionTrigger className="font-semibold">
+              Previous releases
+            </AccordionTrigger>
+            <AccordionContent>
+              <Markdown>{previousReleases}</Markdown>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      )}
+    </div>
+  );
 }