fixed styling issues

builder/markdown.ts

@@ -2,14 +2,12 @@ import MarkdownIt from 'markdown-it';
 import { TypeDefMap } from './page';
 
 const md = new MarkdownIt({
-	html: true,     // Enable HTML tags in source
-	// linkify: true,  // Autoconvert URL-like text to links
+	html: true, // Enable HTML tags in source
 });
 
 const typeRegex = /\{@(type|function) ([^\}]+)\}/g;
 export function RenderMarkdown(ctx: TypeDefMap, source: string) {
 	return md.render(source.replace(typeRegex, (match, mode, typeName) => {
-		console.log(12, mode, typeName);
 		const href = ctx.get(typeName);
 		if (!href) return typeName;
 

builder/page.ts

@@ -83,7 +83,7 @@ export async function RenderInnerPage(path: string) {
 	const data = await readFile(path, "utf8");
 	const { html, type } = RenderPage(path, data);
 
-	AddIndex({ href, name, text: data });
+	AddIndex({ href, name, text: data, type });
 
 	return { html, type, path }
 }

builder/search.ts

@@ -1,4 +1,4 @@
-export type SearchItem = { href: string, name: string, text: string };
+export type SearchItem = { href: string, name: string, text: string, type: string };
 const index = new Array<SearchItem>();
 
 export function AddIndex(item: SearchItem) {

client/search.ts

@@ -10,7 +10,10 @@ let searchElm: HTMLInputElement;
 let loading = false;
 let timer: NodeJS.Timeout;
 let index: lunr.Index;
-const naming = new Map<string, string>();
+const naming: Map<string, {
+	name: string,
+	type: string
+}> = new Map();
 
 async function PreloadIndex() {
 	if (loading) return;
@@ -20,7 +23,7 @@ async function PreloadIndex() {
 	if (!req.ok) throw new Error(req.statusText);
 
 	const json = await req.json();
-	console.info("Loaded search index", json);
+	console.info("Loaded search index", json.length);
 
 	index = lunr(function () {
 		this.ref('href');
@@ -29,7 +32,10 @@ async function PreloadIndex() {
 		this.field('text');
 
 		for (const item of json) {
-			naming.set(item.href, item.name);
+			naming.set(item.href, {
+				name: item.name,
+				type: item.type
+			});
 			this.add(item);
 		}
 	});
@@ -80,18 +86,24 @@ function Search() {
 	resultsElm.innerHTML = "";
 
 	for (const opt of res) {
-		const elm = document.createElement("a");
-		elm.className = "result";
-		elm.innerText = naming.get(opt.ref) || "Unknown";
-		elm.href = opt.ref;
-		elm.setAttribute("entry", "true");
+		const ref = naming.get(opt.ref);
+
+		const line = document.createElement("a");
+		line.className = "result";
+		line.href = opt.ref;
+		line.setAttribute("entry", "true");
+
+		const name = document.createElement("span");
+		name.innerText = ref?.name || "Unknown";
+		if (ref) name.className = ref.type === "function" ? "name" : "type";
+		line.appendChild(name);
 
 		const ctx = document.createElement("span");
 		ctx.innerText = opt.ref.split("/").slice(0, -1).join("/");
 		ctx.className = "comment";
-		elm.appendChild(ctx);
+		line.appendChild(ctx);
 
-		resultsElm.appendChild(elm);
+		resultsElm.appendChild(line);
 	}
 }
 

public/main.css

@@ -64,7 +64,7 @@ a, a:visited {
 	text-decoration: none;
 
 	margin-top: 5px;
-	margin-left: 1.6rem;
+	margin-left: 1rem;
 
 	padding: 0 10px;
 }
@@ -192,10 +192,8 @@ a[folder][parent] + a[folder]:not([parent]) {
 	display: grid;
 	grid-template-columns: auto auto 1fr;
 	gap: 0 0.8em;
-}
-.entry[open] .cluster .indent {
-	margin-left: 2rem;
-	text-indent: -1rem;
+
+	padding-left: 1em;
 }
 
 
@@ -238,7 +236,7 @@ a[folder][parent] + a[folder]:not([parent]) {
 	position: relative;
 
 	padding: 0rem 10px;
-	width: 300px;
+	width: 100%;
 
 	transition-property: width;
 	transition-duration: .2s;
@@ -273,7 +271,7 @@ a[folder][parent] + a[folder]:not([parent]) {
 	inset: 12px 0px 0px;
 
 	height: 20px;
-	width: 340px;
+	width: 100%;
 
 	font-weight: 100;
 	text-align: center;
@@ -288,9 +286,6 @@ a[folder][parent] + a[folder]:not([parent]) {
 	transition-timing-function: ease-out;
 }
 
-#search:focus-within > * {
-	width: calc(100% - 2rem);
-}
 #search:focus-within input {
 	opacity: 100;
 }
@@ -303,9 +298,11 @@ a[folder][parent] + a[folder]:not([parent]) {
 	display: none;
 
 	position: absolute;
-	top: 45px; left: 15px; right: 0;
+	top: 45px; left: 15px;
 	z-index: 20;
 
+	width: calc(100% - 30px);
+
 	padding: 10px 0px;
 
 	flex-direction: column;