add melt-ui toc in (pages)

package.json

@@ -20,6 +20,8 @@
 	"devDependencies": {
 		"@histoire/plugin-svelte": "^0.17.17",
 		"@iconify/svelte": "^4.0.2",
+		"@melt-ui/pp": "^0.3.2",
+		"@melt-ui/svelte": "^0.86.0",
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.5.25",
 		"@types/swiper": "^5.4.3",
@@ -44,15 +46,19 @@
 		"svelte": "^4.2.19",
 		"svelte-check": "^3.8.0",
 		"svelte-sitemap": "^2.6.0",
+		"tailwindcss": "^3.4.14",
 		"typescript": "^5.5.4",
 		"vite": "^5.2.12"
 	},
 	"type": "module",
 	"dependencies": {
 		"@fontsource-variable/roboto-mono": "^5.0.19",
 		"@fontsource-variable/roboto-slab": "^5.0.20",
+		"@tailwindcss/typography": "^0.5.15",
+		"autoprefixer": "^10.4.20",
 		"feather-icons": "^4.29.2",
 		"flexsearch": "^0.7.43",
+		"postcss": "^8.4.49",
 		"shiki": "^1.6.1",
 		"shiki-es": "^0.14.0",
 		"svelte-toc": "^0.5.9",

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};

src/app.css

@@ -0,0 +1,7 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+/* src/app.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/lib/components/atoms/Banner.svelte

@@ -29,4 +29,9 @@
 		display: flex;
 		text-align: center;
 	}
+
+	h1 {
+		font-size: 2.5rem;
+		font-weight: bolder;
+	}
 </style>

src/lib/components/atoms/Card.svelte

@@ -8,7 +8,7 @@
 		{@html title.icon}
 	</span>
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-	<h2>{@html title.title}</h2>
+	<h3>{@html title.title}</h3>
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	<p>{@html title.para}</p>
 </div>
@@ -26,9 +26,10 @@
 			display: inline-block;
 		}
 
-		h2 {
+		h3 {
 			font-size: 20px;
 			color: rgba(245, 245, 245, 0.96);
+			font-weight: bold;
 		}
 
 		p {

src/lib/components/atoms/PagesWrapper.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	export let heading: string;
+</script>
+
+<div class="para">
+	{#if heading}
+		<h1>{heading}</h1>
+	{/if}
+	<div class="layout">
+		<slot />
+	</div>
+</div>
+
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
+	.para {
+		display: flex;
+		flex-direction: column;
+		max-width: 1100px;
+		margin: 0 auto;
+	}
+
+	h1 {
+		padding-inline: 2.5rem;
+		font-size: 2rem;
+		padding-top: 6rem;
+	}
+
+	.layout {
+		display: flex;
+		flex-direction: column;
+		padding-top: 4rem;
+		padding-inline: 2.5rem;
+	}
+
+	@include for-desktop-up {
+		.layout {
+			height: 100vh;
+			flex-direction: row;
+			gap: 4rem;
+		}
+	}
+</style>

src/lib/components/atoms/TableOfContents.svelte

@@ -23,7 +23,7 @@
 					}
 				});
 			},
-			{ threshold: 0.9 }
+			{ threshold: 0.1 }
 		);
 
 		sections.forEach((section) => {

src/lib/components/atoms/Toc.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { onMount } from 'svelte'; // ✨ Import Svelte onMount
+	import Tree from './Tree.svelte';
+	import { createTableOfContents } from '@melt-ui/svelte';
+	import { pushState } from '$app/navigation';
+
+	let isMobileScreen = false;
+
+	onMount(() => {
+		isMobileScreen = window.innerWidth <= 1200;
+
+		const handleResize = () => {
+			isMobileScreen = window.innerWidth <= 1024;
+		};
+		window.addEventListener('resize', handleResize);
+		return () => window.removeEventListener('resize', handleResize); // ✨ Clean up
+	});
+
+	const {
+		elements: { item },
+		states: { activeHeadingIdxs, headingsTree }
+	} = createTableOfContents({
+		selector: '#toc-builder-preview',
+		exclude: [],
+		activeType: 'highest',
+		pushStateFn: pushState,
+		headingFilterFn: (heading) => !heading.hasAttribute('data-toc-ignore'),
+
+		scrollFn: (id) => {
+			const container = document.getElementById('toc-builder-preview');
+			const element = document.getElementById(id);
+
+			if (container && element) {
+				const containerTopOffset = container.offsetTop;
+				const elementTopOffset = element.offsetTop;
+
+				if (isMobileScreen) {
+					element.scrollIntoView({
+						behavior: 'smooth',
+						block: 'start'
+					});
+				} else {
+					container.scrollTo({
+						top: elementTopOffset - containerTopOffset,
+						behavior: 'smooth'
+					});
+				}
+			}
+		}
+	});
+</script>
+
+<div class="lg:overflow-y-auto rounded-lg text-white">
+	<nav>
+		{#key $headingsTree}
+			<Tree tree={$headingsTree} activeHeadingIdxs={$activeHeadingIdxs} {item} />
+		{/key}
+	</nav>
+</div>

src/lib/components/atoms/Tree.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { type TableOfContentsItem, type TableOfContentsElements, melt } from '@melt-ui/svelte';
+
+	export let tree: TableOfContentsItem[] = [];
+	export let activeHeadingIdxs: number[];
+	export let item: TableOfContentsElements['item'];
+	export let level = 1;
+</script>
+
+<ul class="mt-0 list-none {level !== 1 ? 'pl-4' : ''}">
+	{#if tree && tree.length}
+		{#each tree as heading, i (i)}
+			<li class="mt-0 pt-2">
+				<a
+					href="#{heading.id}"
+					use:melt={$item(heading.id)}
+					class="inline-flex items-center justify-center gap-1 text-white no-underline transition-colors
+             hover:text-[rgba(255,_49,_0,_1)] data-[active]:text-[rgba(255,_49,_0,_1)]"
+				>
+					<!--
+              Along with the heading title, the original heading node
+              is also passed down, so you can display headings
+              however you want.
+            -->
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+					{@html heading.node.innerHTML}
+				</a>
+				{#if heading.children && heading.children.length}
+					<svelte:self tree={heading.children} level={level + 1} {activeHeadingIdxs} {item} />
+				{/if}
+			</li>
+		{/each}
+	{/if}
+</ul>
+
+<style>
+	a {
+		word-break: keep-all;
+	}
+</style>

src/lib/components/molecules/CardContainer.svelte

@@ -19,7 +19,9 @@
 			grid-template-columns: repeat(2, 1fr);
 			grid-template-rows: repeat(1, 1fr);
 			grid-column-gap: 24px;
-			grid-row-gap: 24px;
+			grid-row-gap: 2px;
+			max-width: 1200px;
+			padding-inline: 1.5rem;
 		}
 	}
 

src/lib/components/organisms/Header.svelte

@@ -84,6 +84,7 @@
 			align-items: center;
 			width: 100%;
 			margin: 0 auto;
+			padding-top: 0.25rem;
 
 			@include for-phone-only {
 				height: 64px;

src/lib/components/organisms/Hero.svelte

@@ -67,6 +67,7 @@
 			font-size: 48px;
 			margin-top: 2rem;
 			line-height: 48px;
+			font-weight: bold;
 		}
 
 		p {

src/lib/components/singletons/TorrustIndexPost.svelte

@@ -1,38 +1,13 @@
 <script lang="ts">
-	import TableOfContents from '$lib/components/atoms/TableOfContents.svelte'; // Adjust the path if needed
 	import CodeBlock from '$lib/components/molecules/CodeBlock.svelte';
-
-	// Array of section objects with display names and IDs
-	let sections = [
-		{
-			name: 'Installation',
-			id: 'installation',
-			subsections: [
-				{ name: 'Software requirements', id: 'softwareRequirements' },
-				{ name: 'Build from sources', id: 'buildSources' },
-				{ name: 'Run with docker', id: 'docker' }
-			]
-		},
-		{ name: 'Roadmap', id: 'roadmap' },
-		{
-			name: 'License',
-			id: 'license',
-			subsections: [
-				{ name: 'Copyright', id: 'copyright' },
-				{ name: 'Legacy Exception', id: 'legacyException' }
-			]
-		}
-	];
-
-	let activeSection = '';
+	import Toc from '../atoms/Toc.svelte';
+	import PagesWrapper from '../atoms/PagesWrapper.svelte';
 </script>
 
-<div class="layout">
-	<div>
-		<TableOfContents {sections} {activeSection} />
-	</div>
+<PagesWrapper heading="">
+	<Toc />
 
-	<div class="content">
+	<div id="toc-builder-preview" class="content-preview">
 		<h2 id="installation">Installation</h2>
 
 		<p>
@@ -245,55 +220,47 @@ cd /tmp \
 			> license.
 		</p>
 	</div>
-</div>
+</PagesWrapper>
 
 <style lang="scss">
 	@import '$lib/scss/breakpoints.scss';
 
-	.layout {
-		padding-inline: 1.5rem;
-		margin-top: 8rem;
-		border: 1px solid transparent;
-	}
-
-	.content {
-		margin-top: 2rem;
+	.content-preview {
+		flex: 1;
+		word-break: keep-all;
+		padding-top: 2rem;
 	}
 
-	/*h1 {
-		padding-top: 1rem;
-		font-size: 2.25rem;
-	}*/
-
-	h2 {
-		padding-top: 0.5rem;
+	#toc-builder-preview > h2 {
 		font-size: 1.8rem;
 	}
 
-	h2:not(:first-of-type) {
-		padding-top: 1.5rem; /* Add top padding to all h2 elements except the first one */
+	#toc-builder-preview > h2:not(:first-of-type) {
+		padding-top: 1.5rem;
 	}
 
-	h3 {
-		padding-top: 2rem;
+	#toc-builder-preview > h3 {
 		font-size: 1.3rem;
+		font-weight: bold;
+		padding-top: 1rem;
 	}
 
 	p {
 		font-size: 1rem;
 		padding-top: 1.5rem;
 		color: rgba(245, 245, 245, 0.8);
+		word-break: keep-all;
 	}
 
-	@include for-desktop-up {
-		.layout {
-			display: flex;
-			gap: 2rem;
-			padding-inline: 0rem;
-		}
+	a {
+		word-break: keep-all;
+		color: rgba(255, 49, 0, 1);
+	}
 
-		.content {
-			margin-top: 0rem;
+	@include for-desktop-up {
+		.content-preview {
+			overflow-y: auto;
+			padding-top: 0rem;
 		}
 	}
 </style>