✨ Add welcome page to /docs

Author: SnaveSutit

src/routes/+layout.svelte

@@ -54,10 +54,10 @@
 			console.error(error)
 		}
 	}
-
 	getCurrentRelease()
 
 	const { activeCategory } = createSidebarContext(data.sidebar)
+
 	$: category = $activeCategory ? `${$activeCategory} — ` : ''
 	$: title = data.meta ? `Animated Java | ${category}${data.meta.title}` : 'Animated Java'
 	$: description = data.meta?.description || SLOGAN
@@ -92,6 +92,17 @@
 
 		<div class="hide-parent" slot="navbar-right-alt"></div>
 
+		<ul
+			slot="sidebar-top"
+			class={'custom-sidebar-top' + ($page.url.pathname === '/docs' ? ' active' : '')}
+		>
+			<li>
+				<a href="/docs">
+					<h5 class="">Welcome!</h5>
+				</a>
+			</li>
+		</ul>
+
 		<div class="logo" slot="navbar-left">
 			<Button href="/">
 				<div class="header-container">
@@ -148,6 +159,32 @@
 		display: none;
 	}
 
+	.custom-sidebar-top {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		/* font-size: 1.125rem; */
+		font-weight: 400;
+		margin-bottom: 2rem;
+		color: rgb(var(--kd-color-soft) / var(--tw-text-opacity));
+		border-left: 1px solid rgb(var(--kd-color-elevate));
+		padding-left: 1rem;
+		padding-top: 0.25rem;
+		padding-bottom: 0.25rem;
+	}
+	.custom-sidebar-top > li {
+		flex-grow: 1;
+	}
+	.custom-sidebar-top:hover {
+		color: rgb(var(--kd-color-inverse) / var(--tw-text-opacity));
+		border-color: rgb(var(--kd-color-inverse) / var(--tw-border-opacity));
+	}
+	.custom-sidebar-top.active {
+		color: rgb(var(--kd-color-brand));
+		border-color: rgb(var(--kd-color-brand));
+		font-weight: 600;
+	}
+
 	.nav-links {
 		display: flex;
 		flex-direction: row;

src/routes/docs/+page.md

@@ -1,22 +1,20 @@
 ---
-title: Welcome to Animated Java!
+title: Documentation
+description: Learn how to use Animated Java
 ---
 
 <div class="aj-welcome-page-header">
-	<h1 style="	margin-top: 0px; margin-bottom: 0">Welcome to Animated Java!</h1>
+	<h1 style="	margin-top: 0px; margin-bottom: 0">Welcome!</h1>
 	<img
 		src="/img/armor_stand_wave.gif"
 		alt="Armor Stand Waving"
 		width="80px"
 		style="margin-left: 16px"
 	/>
-
 </div>
 
-Take your Map or Data Pack polish to the next level with Animated Java!
-
-Animated Java empowers **you** 🫵 to easily create intricate entity animations with Blockbench, and seamlessly integrate them into your Minecraft projects!
+This documentation will help **you** 🫵 take your Map or Data Pack polish to the next level with Animated Java!
 
-This documentation will guide you through the process of installing Animated Java, creating your first Blueprint, and using the API to summon, and control rig instances.
+You will be guided you through the process of installing Animated Java, creating your first Blueprint, and using the API to summon, and control rig instances.
 
 Click the next page to get started!