various

Author: Rich-Harris

apps/svelte.dev/src/routes/content.json/+server.ts

@@ -31,7 +31,7 @@ async function content() {
 
 	for (const document of docs) {
 		const { slug, body, metadata } = document;
-		const breadcrumbs = document.breadcrumbs.map((x) => x.title);
+		const breadcrumbs = document.breadcrumbs.map((x) => removeMarkdown(x.title));
 
 		const sections = body.trim().split(/^## /m);
 		const intro = sections?.shift()?.trim()!;

packages/site-kit/src/lib/icons/document-dark.svg

@@ -43,8 +43,12 @@
 				</summary>
 				<ul>
 					{#each group.blocks as block (block.href)}
-						<a href={block.href} onclick={() => onselect?.(block.href)}>
-							<strong>{@html block.breadcrumbs.slice(2).join(' • ')}</strong>
+						<a
+							class:fragment={block.breadcrumbs.length > 4}
+							href={block.href}
+							onclick={() => onselect?.(block.href)}
+						>
+							<strong>{block.breadcrumbs.slice(2).join(' • ')}</strong>
 
 							{#if block?.content}
 								<div class="excerpt">
@@ -106,10 +110,35 @@
 		display: block;
 		text-decoration: none;
 		line-height: 1;
-		padding: 1rem;
+		padding: 1rem 1rem 1rem 5rem;
 		overflow: hidden;
 		background: var(--background);
 
+		&::before {
+			content: '';
+			position: absolute;
+			width: 5rem;
+			top: 0;
+			left: 0;
+			height: 100%;
+			background: url(../icons/document-light.svg) no-repeat 50% 50%;
+			background-size: 2rem;
+		}
+
+		&.fragment::before {
+			background-image: url(../icons/hash-light.svg);
+		}
+
+		:root.dark & {
+			&::before {
+				background-image: url(../icons/document-dark.svg);
+			}
+
+			&.fragment::before {
+				background-image: url(../icons/hash-dark.svg);
+			}
+		}
+
 		&:hover {
 			--background: var(--sk-back-4);
 		}
@@ -144,8 +173,7 @@
 			width: calc(100% + 1.4rem);
 			left: -0.7rem;
 			overflow: hidden;
-			color: var(--sk-text-4);
-			opacity: 0.7;
+			color: var(--sk-text-1);
 
 			&::before,
 			&::after {
@@ -167,6 +195,10 @@
 				background: linear-gradient(to right, transparent, var(--background));
 			}
 
+			span {
+				color: var(--sk-text-3);
+			}
+
 			:global(.spacer) {
 				display: inline-block;
 				width: 0.7rem;
@@ -178,7 +210,6 @@
 			font-size: var(--sk-text-xs);
 			color: #737373;
 			margin: 0.4rem 0 0 0;
-			/* font-family: var(--sk-font-body); */
 		}
 
 		:global(mark) {

packages/site-kit/src/lib/icons/document-light.svg

@@ -2,4 +2,4 @@ export { default as Search } from './Search.svelte';
 export { default as SearchBox } from './SearchBox.svelte';
 export { default as SearchResults } from './SearchResults.svelte';
 export { init, inited, lookup, search } from './search';
-export type { Block, Tree } from './types';
+export type { Block } from './types';

packages/site-kit/src/lib/icons/hash-dark.svg

@@ -1,5 +1,5 @@
 import flexsearch, { type Index as FlexSearchIndex } from 'flexsearch';
-import type { Block, BlockGroup, Tree } from './types';
+import type { Block, BlockGroup } from './types';
 
 // @ts-expect-error
 const Index = (flexsearch.Index as FlexSearchIndex) ?? flexsearch;
@@ -84,10 +84,6 @@ export function search(query: string): BlockGroup[] {
 	}
 
 	return Object.values(groups);
-
-	// const results = tree([], blocks).children;
-
-	return blocks;
 }
 
 /**
@@ -96,26 +92,3 @@ export function search(query: string): BlockGroup[] {
 export function lookup(href: string) {
 	return map.get(href);
 }
-
-function tree(breadcrumbs: string[], blocks: Block[]): Tree {
-	const depth = breadcrumbs.length;
-
-	const node = blocks.find((block) => {
-		if (block.breadcrumbs.length !== depth) return false;
-		return breadcrumbs.every((part, i) => block.breadcrumbs[i] === part);
-	});
-
-	const descendants = blocks.filter((block) => {
-		if (block.breadcrumbs.length <= depth) return false;
-		return breadcrumbs.every((part, i) => block.breadcrumbs[i] === part);
-	});
-
-	const child_parts = Array.from(new Set(descendants.map((block) => block.breadcrumbs[depth])));
-
-	return {
-		breadcrumbs,
-		href: hrefs.get(breadcrumbs.join('::'))!,
-		node: node!,
-		children: child_parts.map((part) => tree([...breadcrumbs, part], descendants))
-	};
-}

packages/site-kit/src/lib/icons/hash-light.svg

@@ -9,10 +9,3 @@ export interface BlockGroup {
 	breadcrumbs: string[];
 	blocks: Block[];
 }
-
-export interface Tree {
-	breadcrumbs: string[];
-	href: string;
-	node: Block;
-	children: Tree[];
-}