feat: Add Magic v3.0.0 documentation + little redesign

src/components/Nav.astro

@@ -8,6 +8,8 @@ const t = useTranslations(lang);
 const translations = {
 	name: t("nav.name"),
 	magic: t("nav.magic"),
+	main: t("nav.main"),
+	github: t("nav.github"),
 };
 ---
 

src/components/Nav.svelte

@@ -8,6 +8,8 @@
 		translations: {
 			name: string;
 			magic: string;
+			main: string;
+			github: string;
 		};
 	}
 
@@ -16,13 +18,21 @@
 	let isMenuOpen = $state(false);
 
 	const links = [
+		{
+			name: translations.main,
+			link: "https://liphium.com",
+		},
 		{
 			name: translations.magic,
 			link: getAbsoluteLocaleUrl(
 				lang,
 				"/magic/getting-started/introduction",
 			),
 		},
+		{
+			name: translations.github,
+			link: "https://github.com/Liphium/dev",
+		},
 	];
 
 	function toggleMenu() {
@@ -40,35 +50,50 @@
 	}
 </script>
 
-<nav class="flex flex-row justify-center p-4">
+<!-- Desktop nav -->
+<div class="hidden md:flex justify-center sticky top-2 left-0 z-10 px-4 py-2">
 	<div
-		class="flex w-full max-w-6xl items-center justify-center text-bg-100 font-mono"
+		class="flex items-center gap-6 rounded-full border-2 border-bg-500 px-4 py-2 font-mono text-bg-100 backdrop-blur-2xl"
 	>
 		<!-- Logo and brand -->
 		<div class="flex items-center gap-2">
-			<img src={favicon.src} alt="Logo" class="w-6 h-6 rounded-sm" />
+			<img src={favicon.src} alt="Logo" class="w-5 h-5 rounded-sm" />
 			<a
-				class="border-b-2 border-transparent font-bold hover:border-b-2 hover:border-bg-100 transition-colors"
+				class="border-b-2 border-transparent font-bold hover:border-bg-100 transition-colors"
 				href="/">{translations.name}</a
 			>
 		</div>
 
 		<!-- Desktop navigation links -->
-		<div class="hidden md:flex gap-8 ml-8">
-			{#each links as link}
-				<a
-					class="border-b-2 border-transparent hover:border-b-2 hover:border-bg-100 transition-colors"
-					href={link.link}
-				>
-					{link.name}
-				</a>
-			{/each}
+		{#each links as link}
+			<a
+				class="border-b-2 border-transparent hover:border-bg-100 transition-colors"
+				href={link.link}
+			>
+				{link.name}
+			</a>
+		{/each}
+	</div>
+</div>
+
+<!-- Mobile nav -->
+<div class="md:hidden sticky top-2 left-0 z-50 px-4 py-2">
+	<div
+		class="flex w-full items-center justify-between rounded-full border-2 border-bg-500 px-4 py-2 font-mono text-bg-100 backdrop-blur-2xl"
+	>
+		<!-- Logo and brand -->
+		<div class="flex items-center gap-2">
+			<img src={favicon.src} alt="Logo" class="w-5 h-5 rounded-sm" />
+			<a
+				class="border-b-2 border-transparent font-bold hover:border-bg-100 transition-colors"
+				href="/">{translations.name}</a
+			>
 		</div>
 
 		<!-- Mobile menu button -->
 		<button
 			onclick={toggleMenu}
-			class="md:hidden relative flex justify-center items-center w-8 h-8 cursor-pointer z-50 ml-auto"
+			class="relative flex justify-center items-center w-8 h-8 cursor-pointer"
 			aria-label="Toggle menu"
 		>
 			<Menu
@@ -83,7 +108,7 @@
 			/>
 		</button>
 	</div>
-</nav>
+</div>
 
 <!-- Mobile menu overlay -->
 <div
@@ -110,7 +135,7 @@
 		{#each links as link}
 			<a
 				onclick={closeMenu}
-				class="text-2xl border-b-2 border-transparent hover:border-b-2 hover:border-bg-100 transition-colors"
+				class="text-2xl border-b-2 border-transparent hover:border-bg-100 transition-colors"
 				href={link.link}
 			>
 				{link.name}

src/components/PanelWrapper.svelte

@@ -8,12 +8,21 @@
 		link: string;
 	}
 
+	interface ProcessedLinkItem extends LinkItem {
+		href: string;
+		external: boolean;
+	}
+
 	interface Section {
 		name: string;
 		linkPrefix: string;
 		links: LinkItem[];
 	}
 
+	interface ProcessedSection extends Section {
+		links: ProcessedLinkItem[];
+	}
+
 	interface Props {
 		software: string;
 		linkPrefix: string;
@@ -25,6 +34,22 @@
 	let { software, linkPrefix, children, sections, currentPath }: Props =
 		$props();
 
+	const processedSections: ProcessedSection[] = $derived(
+		sections.map((section) => ({
+			...section,
+			links: section.links.map((link) => {
+				const external =
+					link.link.startsWith("https://") ||
+					link.link.startsWith("http://");
+				return {
+					...link,
+					href: external ? link.link : linkPrefix + link.link,
+					external,
+				};
+			}),
+		})),
+	);
+
 	let isSidebarOpen = $state(false);
 
 	function toggleSidebar() {
@@ -63,14 +88,14 @@
 					<div class="align-center flex gap-2">
 						<img
 							src={favicon.src}
-							alt="Planet logo"
+							alt="Software logo"
 							class="h-6 w-6 rounded-sm"
 						/>
-						<p class="font-bold text-bg-200">{software}</p>
+						<p class="font-bold text-p-blue-100">{software}</p>
 					</div>
 
 					<!-- Links at the top of the sidebar -->
-					{#each sections as section}
+					{#each processedSections as section}
 						<div class="flex flex-col gap-3">
 							{#if section.name}
 								<p class="font-bold text-bg-100">
@@ -81,7 +106,13 @@
 							{#each section.links as link}
 								<a
 									class={`w-max border-b-2 transition-colors ${currentPath.includes(link.link) ? "border-bg-100 text-bg-100" : "border-transparent text-bg-200"} hover:border-b-2 hover:border-bg-100`}
-									href={linkPrefix + link.link}
+									href={link.href}
+									target={link.external
+										? "_blank"
+										: undefined}
+									rel={link.external
+										? "noopener noreferrer"
+										: undefined}
 								>
 									{link.name}
 								</a>
@@ -132,14 +163,14 @@
 				<div class="align-center flex gap-2">
 					<img
 						src={favicon.src}
-						alt="Planet logo"
+						alt="Software logo"
 						class="h-6 w-6 rounded-sm"
 					/>
-					<p class="font-bold text-bg-200">{software}</p>
+					<p class="font-bold text-p-blue-100">{software}</p>
 				</div>
 
 				<!-- Links -->
-				{#each sections as section}
+				{#each processedSections as section}
 					<div class="flex flex-col gap-3">
 						{#if section.name}
 							<p class="font-bold text-bg-100">
@@ -151,7 +182,11 @@
 							<a
 								onclick={closeSidebar}
 								class={`w-max border-b-2 transition-colors ${currentPath.includes(link.link) ? "border-bg-100 text-bg-100" : "border-transparent text-bg-200"} hover:border-b-2 hover:border-bg-100`}
-								href={linkPrefix + link.link}
+								href={link.href}
+								target={link.external ? "_blank" : undefined}
+								rel={link.external
+									? "noopener noreferrer"
+									: undefined}
 							>
 								{link.name}
 							</a>
@@ -169,7 +204,7 @@
 <!-- Floating Action Button (Mobile only) -->
 <button
 	onclick={toggleSidebar}
-	class="fixed bottom-6 right-6 w-14 h-14 bg-bg-600 hover:bg-bg-500 text-bg-100 rounded-full shadow-lg lg:hidden flex items-center justify-center transition-all duration-300 hover:scale-110 active:scale-95 z-[60]"
+	class="fixed bottom-6 right-6 w-14 h-14 bg-bg-600 hover:bg-bg-500 text-bg-100 rounded-full shadow-lg lg:hidden flex items-center justify-center transition-all duration-300 hover:scale-110 active:scale-95 z-60"
 	aria-label={isSidebarOpen
 		? "Close documentation sidebar"
 		: "Open documentation sidebar"}

src/content/magic/en/databases/postgresql.md

@@ -0,0 +1,51 @@
+---
+title: "Using a PostgreSQL Database"
+description: "A guide on how to set up Magic so it automatically starts a PostgreSQL container on startup and how to create databases within that container."
+---
+
+Using [PostgreSQL](https://www.postgresql.org/) with Magic is really simple, but there are still a few things to keep in mind. There are currently two PostgreSQL drivers available that each support different versions due to changes that happened in PostgreSQL 18:
+
+- **Postgres**: The normal driver that currently supports PostgreSQL 18.
+- **Postgres Legacy (deprecated)**: Supports PostgreSQL 14-17. It will still be kept around until PostgreSQL 20 comes out.
+
+This documentation focuses on the newer driver as that one will be actively maintained by us while the old one only receives bug fixes. However, all of the things shown here should work similarly for the legacy driver, in case you need it.
+
+## Usage
+
+**1.** Import the `postgres` package from Magic that provides the driver using the following command:
+
+```sh
+go get -u github.com/Liphium/magic/v3/pkg/databases/postgres@latest
+```
+
+**2.** You can now use the driver in your code like this:
+
+```go
+driver := postgres.NewDriver("postgres:18") // Make sure you use a version that is supported
+
+// Create a new database like this:
+driver.NewDatabase("test")
+```
+
+This driver also supports a builder pattern, meaning you can do stuff like this:
+
+```go
+driver := postgres.NewDriver("postgres:18").
+	NewDatabase("test").
+	NewDatabase("test2")
+```
+
+For environment values this driver provides, read more below. If you want to now **register the driver** and don't know how to do that yet, [learn more here](/magic/documentation/configuring-magic).
+
+## Environment values
+
+As with every driver in Magic, the PostgreSQL driver also provides some environment variables you may want to use to connect to a database it created (`ctx` is your `mconfig.Context`):
+
+- `driver.Host(ctx)`: The hostname of the database (`127.0.0.1`, just use it anyway because it might change in the future).
+- `driver.Port(ctx)`: The port of the database container on your local system.
+- `driver.Username()`: The username for the database server (is always "postgres").
+- `driver.Password()`: The password for the database server (is always "postgres").
+
+While some of the values might seem redundant as they always return the same, it's still **best practice** to use them instead of defining them yourself as the defaults might change in the future. We don't have any plans to do this kind of thing, but it _could_ happen.
+
+If you're wondering what the database name will be, that's just the thing you passed into `driver.NewDatabase(/* into here */)`.

src/content/magic/en/documentation/ci-cd.md

@@ -0,0 +1,41 @@
+---
+title: "Magic in CI/CD pipelines"
+description: "How to set up a CI/CD pipeline with integration testing and everything else using Magic."
+---
+
+If you want to run Magic in CI/CD, the environment needs Docker, or anything Socket-compatible to Docker (like Podman), installed.
+
+Since explaining all of this would be stupid anyway, we provide some samples for some providers below, if you are using any other CI/CD provider and created a config for them, [feel free to contribute](https://github.com/Liphium/dev).
+
+Normally though, you can just use a normal pipeline for Go, as long as Docker is available in the pipeline.
+
+## GitHub Actions
+
+```yml
+# This workflow tests the application and uploads the cover profile as an artifact
+
+name: Test (Ubuntu)
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Go
+        uses: actions/setup-go@v4
+        with:
+          go-version: "1.25.7"
+
+      - name: Test
+        run: go test -timeout 20m -v ./... -coverpkg="./..." -coverprofile="coverage.out"
+
+      - uses: actions/upload-artifact@v5.0.0
+        with:
+          name: test-coverage.out
+          path: coverage.out
+```