Updated developing guide to a fully working setup && Add an automated changelog system

content/docs/hydrodactyl/changelog/index.mdx

@@ -0,0 +1,10 @@
+---
+title: Changelog
+description: Hydrodactyl Changelog
+---
+
+import Changelog from '@/components/ui/Changelog';
+
+## Hydrodactyl Release Notes
+
+<Changelog />

content/docs/hydrodactyl/changelog/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Changelog",
+  "pages": ["index"]
+}

content/docs/hydrodactyl/changelog.mdx → content/docs/hydrodactyl/changelog/v5.mdx

@@ -1,6 +1,6 @@
 ---
-title: Changelog
-description: Hydrodactyl Changelog
+title: Changelog (v5 and earlier)
+description: Hydrodactyl Changelog for v5 and earlier releases
 ---
 
 This file is a running track of new features and fixes to each version of the panel released starting with `v4.0.0`.

content/docs/hydrodactyl/local-development/lerd.mdx

@@ -5,12 +5,8 @@ description: Setup a local development environment using Lerd
 
 
 <Callout type="warn">
-  The dev env currently is not 100% automated, some manual setup is required for the wings daemon
+  The dev env currently is not 100% automated, some manual setup is required for the wings daemon. See "installing wings"
 </Callout>
-<Callout type="info">
-  These docs are not finished yet, if you find something to fix or improve, make a pr!
-</Callout>
-
 
 
 ## Prerequisites
@@ -19,7 +15,6 @@ description: Setup a local development environment using Lerd
 - [pnpm](https://pnpm.io/)
 
 ## Initial setup
-
    <Callout type="warn">
    Note: Running a development environment on the same host as a production environment is not supported and will result in an error when connecting to port 80.
    </Callout>
@@ -28,11 +23,64 @@ description: Setup a local development environment using Lerd
    `git clone https://github.com/BlueprintFramework/hydrodactyl.git`
 
 1. Cd into the Hydrodactyl directory  
+
    `cd hydrodactyl`
 
+
+
 1. Run the dev env  
    `pnpm dev:setup`
 
 1. Access Hydrodactyl at your new url  
    [`http://hydrodactyl.test`](http://hydrodactyl.test)
 
+   <Callout type="info">
+   Your basic dev setup is now completed and you can login with **username** 'dev' and **password** 'dev'. Follow the guide below to setup wings and install a server. 
+   </Callout>
+
+## Installing wings
+
+1. Follow along [`https://pterodactyl.io/wings/1.0/installing.html`](https://pterodactyl.io/wings/1.0/installing.html) to install wings on your local machine.
+
+1. As we are using https, we have to install local certificates:
+
+   ```bash
+   mkcert hydrodactyl.test
+   ```
+
+1. The certificates have been created in your home directory.
+   Create the certificate directory:
+
+   ```bash
+   mkdir -p /etc/pterodactyl/certs
+   ```
+
+1. Copy the certificates to the certs directory:
+
+   ```bash
+   cp ./hydrodactyl.test.pem \
+    /etc/pterodactyl/certs/fullchain.pem
+
+   cp ./hydrodactyl.test-key.pem \
+    /etc/pterodactyl/certs/privkey.pem
+   ```
+
+1. Run ```nano /etc/pterodactyl/config.yml```, search and enter the correct certificate paths:
+
+   ```yaml
+   ssl:
+     enabled: true
+     cert: /etc/pterodactyl/certs/fullchain.pem
+     key: /etc/pterodactyl/certs/privkey.pem
+   ```
+1. Start wings:
+
+   ```bash
+   wings --debug
+   ```
+
+1. Now you can add nodes and servers and start developing!
+
+   <Callout type="info">
+   The error "Could not communicate with the machine running this server" means that Hydrodactyl has issues communicating with Wings. Check your Wings setup again!
+   </Callout>

src/components/ui/Changelog.tsx

@@ -0,0 +1,7 @@
+import { fetchAllReleases } from '@/lib/github-releases';
+import ChangelogList from './changelog/ChangelogList';
+
+export default async function Changelog() {
+  const releases = await fetchAllReleases();
+  return <ChangelogList releases={releases} />;
+}

src/components/ui/changelog/ChangelogList.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { parseBlocks, renderBlocks } from './markdown';
+import type { ReleaseSummary } from '@/lib/github-releases';
+
+
+export default function ChangelogList({ releases }: { releases: ReleaseSummary[] }) {
+
+  const visible = releases;
+
+  return (
+    <section className="space-y-6">
+      <div className="rounded-3xl border border-fd-border bg-fd-app-bg/80 p-6 shadow-sm">
+        <h2 className="text-2xl font-semibold">Hydrodactyl Release Notes (v6+)</h2>
+        <p className="max-w-3xl text-sm text-fd-muted-foreground">View our latest releases!</p>
+      </div>
+
+      {visible.length ? (
+        <div className="space-y-6">
+          {visible.map((release) => (
+            <article key={release.tagName} className="rounded-3xl border border-fd-border bg-fd-app-bg/80 p-6">
+              <div>
+                <p className="text-sm text-fd-muted-foreground">
+                  {release.publishedAt ? new Date(release.publishedAt).toLocaleDateString() : 'Unknown date'}
+                </p>
+                <h3 className="text-xl font-semibold">{release.tagName}</h3>
+              </div>
+
+              <div className="mt-6 text-sm leading-6 text-fd-foreground">
+                {release.body ? (
+                  renderBlocks(parseBlocks(release.body))
+                ) : (
+                  <p className="text-sm text-fd-muted-foreground">No details available.</p>
+                )}
+              </div>
+            </article>
+          ))}
+
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+            <Link
+              href="/docs/hydrodactyl/changelog/v5"
+              className="inline-flex items-center justify-center rounded-2xl border border-fd-border bg-fd-app-bg/80 px-4 py-3 text-sm font-medium transition hover:bg-fd-muted/40"
+            >
+              Older releases (before v6)
+            </Link>
+          </div>
+        </div>
+      ) : (
+        <div className="rounded-3xl border border-fd-border bg-fd-app-bg/80 p-6 text-sm text-fd-muted-foreground">
+          No releases found.
+        </div>
+      )
+      }
+    </section >
+  );
+}

src/components/ui/changelog/changelog-toc.ts

@@ -0,0 +1,44 @@
+import { parseBlocks, type Block } from '@/components/ui/changelog/markdown';
+import type { ReleaseSummary } from './github-releases';
+
+export type TocEntry = { title: string; url: string; depth: number };
+export type AnnotatedRelease = {
+  release: ReleaseSummary;
+  id: string;
+  blocks: Array<Block & { id?: string }>;
+};
+
+function slugify(text: string) {
+  return (
+    text.toLowerCase().trim().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-') ||
+    'section'
+  );
+}
+
+export function buildChangelogToc(releases: ReleaseSummary[]) {
+  const usedIds = new Set<string>();
+  const uniqueId = (raw: string) => {
+    let id = slugify(raw);
+    let n = 1;
+    while (usedIds.has(id)) id = `${slugify(raw)}-${n++}`;
+    usedIds.add(id);
+    return id;
+  };
+
+  const toc: TocEntry[] = [];
+  const annotated: AnnotatedRelease[] = releases.map((release) => {
+    const releaseId = uniqueId(release.tagName);
+    toc.push({ title: release.tagName, url: `#${releaseId}`, depth: 2 });
+
+    const blocks = parseBlocks(release.body).map((block) => {
+      if (block.type !== 'heading') return block;
+      const id = uniqueId(`${release.tagName}-${block.text}`);
+      toc.push({ title: block.text, url: `#${id}`, depth: Math.min(block.level + 2, 6) });
+      return { ...block, id };
+    });
+
+    return { release, id: releaseId, blocks };
+  });
+
+  return { annotated, toc };
+}