From 0a4dbfbd8cc741e7fa63d8a3977d27d67ba9656f Mon Sep 17 00:00:00 2001
From: Ayfri <pierre.ayfri@gmail.com>
Date: Tue, 26 Mar 2024 16:54:52 +0100
Subject: [PATCH] feat(website): Add tree without depth in documentation pages.

---
 .../kore/website/components/doc/DocArticle.kt |  1 +
 .../kore/website/components/doc/DocTree.kt    | 71 +++++++++++++++++++
 .../components/layouts/MarkdownLayout.kt      | 42 +++++++----
 3 files changed, 102 insertions(+), 12 deletions(-)
 create mode 100644 website/src/jsMain/kotlin/io/github/ayfri/kore/website/components/doc/DocTree.kt

diff --git a/website/src/jsMain/kotlin/io/github/ayfri/kore/website/components/doc/DocArticle.kt b/website/src/jsMain/kotlin/io/github/ayfri/kore/website/components/doc/DocArticle.kt
index 506ca730..d06c9204 100644
--- a/website/src/jsMain/kotlin/io/github/ayfri/kore/website/components/doc/DocArticle.kt
+++ b/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>,
 )
diff --git a/website/src/jsMain/kotlin/io/github/ayfri/kore/website/components/doc/DocTree.kt b/website/src/jsMain/kotlin/io/github/ayfri/kore/website/components/doc/DocTree.kt
new file mode 100644
index 00000000..87930124
--- /dev/null
+++ b/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)
+	}
+}
diff --git a/website/src/jsMain/kotlin/io/github/ayfri/kore/website/components/layouts/MarkdownLayout.kt b/website/src/jsMain/kotlin/io/github/ayfri/kore/website/components/layouts/MarkdownLayout.kt
index 35efae91..31232b4e 100644
--- a/website/src/jsMain/kotlin/io/github/ayfri/kore/website/components/layouts/MarkdownLayout.kt
+++ b/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)
+		}
+	}
 }