feat(website): Add tree without depth in documentation pages.

website/src/jsMain/kotlin/io/github/ayfri/kore/website/components/doc/DocArticle.kt

@@ -8,4 +8,5 @@ data class DocArticle(
 	val navTitle: String,
 	val keywords: List<String>,
 	val dateModified: String,
+	val slugs: List<String>,
 )

website/src/jsMain/kotlin/io/github/ayfri/kore/website/components/doc/DocTree.kt

@@ -0,0 +1,71 @@
+package io.github.ayfri.kore.website.components.doc
+
+import androidx.compose.runtime.Composable
+import com.varabyte.kobweb.compose.css.ListStyleType
+import com.varabyte.kobweb.compose.css.listStyle
+import com.varabyte.kobweb.core.rememberPageContext
+import io.github.ayfri.kore.website.GlobalStyle
+import io.github.ayfri.kore.website.docEntries
+import io.github.ayfri.kore.website.utils.A
+import io.github.ayfri.kore.website.utils.transition
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.Li
+import org.jetbrains.compose.web.dom.Ul
+
+@Composable
+fun Entry(article: DocArticle, selected: Boolean = false) {
+	A(article.path, article.navTitle) {
+		classes(DocTreeStyle.entry)
+		if (selected) classes(DocTreeStyle.selected)
+	}
+}
+
+@Composable
+fun DocTree() {
+	Style(DocTreeStyle)
+
+	val context = rememberPageContext().route
+	val entries = docEntries
+	val currentURL = context.path
+
+	Ul({
+		classes(DocTreeStyle.list)
+	}) {
+		Li {
+			entries.forEach { entry ->
+				Entry(entry, entry.path == currentURL)
+			}
+		}
+	}
+}
+
+object DocTreeStyle : StyleSheet() {
+	val list by style {
+		listStyle(ListStyleType.None)
+		padding(0.8.cssRem)
+		marginRight(1.cssRem)
+
+		height(100.vh)
+		position(Position.Sticky)
+		top(0.px)
+		left(0.px)
+	}
+
+	val entry by style {
+		padding(0.5.cssRem)
+
+		borderRadius(GlobalStyle.roundingButton)
+		color(GlobalStyle.textColor)
+		fontSize(1.2.cssRem)
+
+		transition(0.2.s, "background-color")
+
+		self + hover style {
+			backgroundColor(GlobalStyle.tertiaryBackgroundColor)
+		}
+	}
+
+	val selected by style {
+		color(GlobalStyle.linkColor)
+	}
+}

website/src/jsMain/kotlin/io/github/ayfri/kore/website/components/layouts/MarkdownLayout.kt

@@ -7,10 +7,14 @@ import com.varabyte.kobweb.core.rememberPageContext
 import com.varabyte.kobwebx.markdown.markdown
 import io.github.ayfri.kore.website.GlobalStyle
 import io.github.ayfri.kore.website.components.common.setDescription
+import io.github.ayfri.kore.website.components.doc.DocTree
+import io.github.ayfri.kore.website.utils.marginX
 import io.github.ayfri.kore.website.utils.marginY
 import io.github.ayfri.kore.website.utils.paddingX
 import io.github.ayfri.kore.website.utils.smMax
 import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.css.keywords.auto
+import org.jetbrains.compose.web.dom.Div
 
 @Composable
 fun MarkdownLayout(content: @Composable () -> Unit) {
@@ -20,11 +24,17 @@ fun MarkdownLayout(content: @Composable () -> Unit) {
 	val markdownData = context.markdown!!.frontMatter
 
 	PageLayout(markdownData["nav-title"]?.get(0) ?: "Untitled") {
-		if (markdownData["description"] != null) {
-			setDescription(markdownData["description"]!![0])
-		}
+		DocTree()
+
+		Div({
+			classes(MarkdownLayoutStyle.content)
+		}) {
+			if (markdownData["description"] != null) {
+				setDescription(markdownData["description"]!![0])
+			}
 
-		content()
+			content()
+		}
 	}
 }
 
@@ -36,14 +46,8 @@ object MarkdownLayoutStyle : StyleSheet() {
 		}
 
 		"main" style {
-			alignSelf(AlignSelf.Center)
-
-			maxWidth(800.px)
-
-			smMax {
-				maxWidth(92.percent)
-				paddingX(0.cssRem)
-			}
+			display(DisplayStyle.Flex)
+			flexDirection(FlexDirection.Row)
 		}
 
 		"h1" style {
@@ -73,4 +77,18 @@ object MarkdownLayoutStyle : StyleSheet() {
 			}
 		}
 	}
+
+	val content by style {
+		display(DisplayStyle.Flex)
+		flexDirection(FlexDirection.Column)
+		alignSelf(AlignSelf.Center)
+		marginX(auto)
+
+		maxWidth(800.px)
+
+		smMax {
+			maxWidth(92.percent)
+			paddingX(0.cssRem)
+		}
+	}
 }