1-removing markdown files for component documentation instead relying…

… on jsdoc 2-adjusting some components
EMPTYVOID-DEV · Mar 7, 2024 · 42fbeab · 42fbeab
1 parent 15e64de
commit 42fbeab
Show file tree

Hide file tree

Showing 55 changed files with 77 additions and 213 deletions.
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -33,7 +33,7 @@
 	"dependencies": {
 		"svelte-markdown": "^0.4.1",
 		"svelte-sonner": "^0.3.19",
-		"sveltedocsmaker": "^0.6.4",
+		"sveltedocsmaker": "^0.6.5",
 		"zero-ui-registry": "workspace:*"
 	}
 }
diff --git a/apps/docs/pnpm-lock.yaml b/apps/docs/pnpm-lock.yaml
diff --git a/apps/docs/src/app.d.ts b/apps/docs/src/app.d.ts
@@ -3,7 +3,7 @@
 declare global {
 	namespace App {
 		// interface Error {}
-		// interface Locals {}
+		//interface Locals {}
 		// interface PageData {}
 		// interface PageState {}
 		// interface Platform {}

diff --git a/apps/docs/src/lib/components/core/docsNav.svelte b/apps/docs/src/lib/components/core/docsNav.svelte
@@ -49,8 +49,8 @@
 		height: fit-content;
 		display: flex;
 		align-items: center;
-		gap: 2px;
-		padding-inline: 8px;
+		gap: 0.5rem;
+		padding-inline: 0.75rem;
 	}
 	.docsNav > :global(nav) {
 		padding: 0;
@@ -59,10 +59,7 @@
 	.control {
 		display: none;
 	}
-	.control :global(svg) {
-		width: 28px;
-		height: 28px;
-	}
+
 	@media screen and (width<768px) {
 		.control {
 			display: flex;

diff --git a/apps/docs/src/lib/components/core/homeNav.svelte b/apps/docs/src/lib/components/core/homeNav.svelte
@@ -25,12 +25,13 @@
 		<Link href="/docs/Getting Started/Introduction" text="docs" isBlank={false} />
 		<Link href="/components/accordian/default" text="components" isBlank={false} />
 	</div>
+
 	<div class="utility">
-		<Link href="https://github.com/EMPTYVOID-DEV/Zero-UI" icon={Github} text="" />
 		<ThemeToggle on:change active={theme} --left="-50px" --top="40px" />
+		<Link href="https://github.com/EMPTYVOID-DEV/Zero-UI" icon={Github} text="" />
 	</div>
 	{#key $page.url}
-		<SearchDefault {categories} placeholder="Search for components" />
+		<SearchDefault {categories} placeholder="Search ..." --width="200px" />
 	{/key}
 </nav>
 
@@ -40,8 +41,8 @@
 		height: 80px;
 		display: flex;
 		align-items: center;
-		padding-inline: 12px;
-		gap: 8px;
+		padding-inline: 0.75rem;
+		gap: 0.5rem;
 	}
 	.logo {
 		display: flex;
@@ -54,14 +55,6 @@
 	.utility {
 		display: flex;
 		align-items: center;
-		gap: 8px;
-	}
-	@media screen and (width <768px) {
-		.links {
-			display: none;
-		}
-		.homeNav {
-			padding-left: 2px;
-		}
+		gap: 0.5rem;
 	}
 </style>
diff --git a/apps/docs/src/lib/components/icons/close.svelte b/apps/docs/src/lib/components/icons/close.svelte
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"
 	><path
 		fill="currentColor"
 		d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59L7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12L5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4"

diff --git a/apps/docs/src/lib/components/icons/menu.svelte b/apps/docs/src/lib/components/icons/menu.svelte
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"
 	><path fill="currentColor" d="M16 18v2H5v-2zm5-7v2H3v-2zm-2-7v2H8V4z" /></svg
 >
 

diff --git a/apps/docs/src/lib/components/md/coreMd.svelte b/apps/docs/src/lib/components/md/coreMd.svelte
diff --git a/apps/docs/src/lib/components/md/headerMdHandler.svelte b/apps/docs/src/lib/components/md/headerMdHandler.svelte
diff --git a/apps/docs/src/lib/components/md/linkMdHandler.svelte b/apps/docs/src/lib/components/md/linkMdHandler.svelte
diff --git a/apps/docs/src/lib/components/md/listMdHandler.svelte b/apps/docs/src/lib/components/md/listMdHandler.svelte
diff --git a/apps/docs/src/lib/components/md/paragraphMdHandler.svelte b/apps/docs/src/lib/components/md/paragraphMdHandler.svelte
diff --git a/apps/docs/src/lib/components/zeroUIWrappers/defaultSiteSearch.svelte b/apps/docs/src/lib/components/zeroUIWrappers/defaultSiteSearch.svelte
@@ -8,7 +8,6 @@
 </script>
 
 <SiteSearch
-	showFullMobile={true}
 	{placeholder}
 	categories={filteredCategories}
 	on:change={(e) => {

diff --git a/apps/docs/src/lib/components/zeroUIWrappers/skeletonLoading.svelte b/apps/docs/src/lib/components/zeroUIWrappers/skeletonLoading.svelte
@@ -4,7 +4,6 @@
 
 <div class="skeletonLoadingTest">
 	<SkeletonLoading --border-radius="50%" />
-	<SkeletonLoading --height="2.5rem" --width="82%" --border-radius="8px" />
 	<SkeletonLoading --height="2.5rem" --width="90%" --border-radius="8px" />
 	<SkeletonLoading --height="2.5rem" --width="90%" --border-radius="8px" />
 </div>
@@ -13,8 +12,8 @@
 	.skeletonLoadingTest {
 		width: 100%;
 		display: flex;
+		flex-direction: column;
 		gap: 10px;
-		align-items: center;
 		flex-wrap: wrap;
 	}
 </style>
diff --git a/apps/docs/src/lib/utils/server.js b/apps/docs/src/lib/utils/server.js
@@ -49,7 +49,7 @@ export function getSearchContent(registry) {
 		searchContent.sections.push(searchEntry);
 	}
 	orderSearchResults([searchContent]);
-	return [searchContent];
+	return addDocsLinks([searchContent]);
 }
 
 /**
@@ -74,3 +74,33 @@ function orderSearchResults(categories) {
 export function capitalize(word) {
 	return word[0].toUpperCase() + word.slice(1);
 }
+
+/**
+ * @param {import("zero-ui-registry/types").category[]} searchContent
+ * @returns {import("zero-ui-registry/types").category[]}
+ */
+export function addDocsLinks(searchContent) {
+	const docsSections = [
+		'introduction',
+		'installation',
+		'folder structure',
+		'components',
+		'theming',
+		'jsdoc',
+		'registry.json'
+	];
+	/**@type {import("zero-ui-registry/types").category} */
+	const docsCategory = {
+		categoryName: 'Getting started',
+		sections: []
+	};
+	docsSections.forEach((section) => {
+		const capitalizedSection = capitalize(section);
+		docsCategory.sections.push({
+			link: `/docs/Getting Started/${capitalizedSection}`,
+			sectionName: capitalizedSection
+		});
+	});
+	searchContent.unshift(docsCategory);
+	return searchContent;
+}
diff --git a/apps/docs/src/routes/components/[name]/[variant]/+page.js b/apps/docs/src/routes/components/[name]/[variant]/+page.js
@@ -2,15 +2,13 @@ import { capitalize } from '$lib/utils/server';
 
 /** @type {import('./$types').PageLoad} */
 // @ts-ignore
-export const load = async ({ params, data }) => {
+export const load = async ({ params }) => {
 	const currentComponent = (
 		await import(
 			`../../../../lib/components/zeroUIWrappers/${params.variant}${capitalize(params.name)}.svelte`
 		)
 	).default;
 	return {
-		currentComponent,
-		// @ts-ignore
-		md: data.md
+		currentComponent
 	};
 };
diff --git a/apps/docs/src/routes/components/[name]/[variant]/+page.server.js b/apps/docs/src/routes/components/[name]/[variant]/+page.server.js
diff --git a/apps/docs/src/routes/components/[name]/[variant]/+page.svelte b/apps/docs/src/routes/components/[name]/[variant]/+page.svelte
@@ -4,7 +4,6 @@
 	import PuzzleIcon from '$lib/components/icons/puzzle.svelte';
 	import HomeNav from '$lib/components/core/homeNav.svelte';
 	import { changeTheme } from '$lib/utils/client';
-	import CoreMd from '$lib/components/md/coreMd.svelte';
 </script>
 
 <div class="playGround">
@@ -23,9 +22,6 @@
 		<section class="component">
 			<svelte:component this={$page.data.currentComponent} />
 		</section>
-		<section class="md">
-			<CoreMd source={$page.data.md} />
-		</section>
 	</div>
 </div>
 
@@ -80,15 +76,6 @@
 		border-radius: var(--border-radius);
 		border: 1px solid var(--primaryColor);
 	}
-	.md {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
-	}
-	.md {
-		color: var(--foregroundColor);
-	}
 	@media screen and (width<768px) {
 		.content {
 			width: 90%;

diff --git a/apps/docs/src/routes/docs/[category]/[section]/+page.svelte b/apps/docs/src/routes/docs/[category]/[section]/+page.svelte
@@ -5,7 +5,6 @@
 	import { onMount } from 'svelte';
 	import { changeMode } from 'sveltedocsmaker/utils';
 	import CodeMdHandler from '$lib/components/md/codeMdHandler.svelte';
-	import ListMdHandler from '$lib/components/md/listMdHandler.svelte';
 	const sectionsMap = new Map([
 		[
 			'Getting Started',
@@ -32,7 +31,6 @@
 
 <Main
 	mdHandlers={{
-		list: ListMdHandler,
 		code: CodeMdHandler
 	}}
 	{sectionsMap}