chore: improve styling patterns

Author: ryanatkn

.changeset/rich-eggs-burn.md

@@ -0,0 +1,5 @@
+---
+'@fuzdev/fuz_gitops': minor
+---
+
+chore: improve styling patterns

src/lib/ModulesDetail.svelte

@@ -33,8 +33,8 @@
 	// TODO add favicon (from library? gro?)
 </script>
 
-<div class="modules_detail">
-	<div class="nav_wrapper">
+<div class="modules-detail">
+	<div class="nav-wrapper">
 		<section>
 			<ModulesNav {repos_modules} />
 		</section>
@@ -43,7 +43,7 @@
 	<ul class="width_atmost_md box unstyled">
 		{#each repos_modules as repo_modules (repo_modules)}
 			{@const {repo, modules} = repo_modules}
-			<li class="repo_module">
+			<li class="repo-module">
 				<header class="width:100% position:relative">
 					<a href="#{repo.name}" id={repo.name} class="subtitle">🔗</a>
 					<a href={resolve(`/tree/${repo.repo_name}`)}>{repo.name}</a>
@@ -58,7 +58,7 @@
 							class:css={path.endsWith('.css')}
 							class:json={path.endsWith('.json')}
 						>
-							<div class="module_file">
+							<div class="module-file">
 								{#if repo.repo_url}
 									<div class="chip row">
 										<!-- TODO this is a hack that could be fixed by adding an optional `base: './'` that defaults to './src/lib/'  -->
@@ -76,7 +76,7 @@
 								<ul class="declarations unstyled">
 									{#each declarations as { name, kind } (name)}
 										{#if name !== 'default'}
-											<li class="declaration chip {kind}_declaration">
+											<li class="declaration chip {kind}-declaration">
 												{name}
 											</li>
 										{/if}
@@ -94,7 +94,7 @@
 <!-- TODO better rendering, also show author, etc -->
 
 <style>
-	.modules_detail {
+	.modules-detail {
 		position: relative;
 		padding: var(--space_lg);
 		display: flex;
@@ -109,13 +109,13 @@
 		top: 0;
 		text-align: right;
 	}
-	.repo_module {
+	.repo-module {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
 		margin-bottom: var(--space_xl5);
 	}
-	.repo_module > header {
+	.repo-module > header {
 		display: flex;
 		padding: var(--space_xs) var(--space_md);
 		font-size: var(--font_size_lg);
@@ -130,7 +130,7 @@
 		margin-bottom: var(--space_lg);
 		--link_color: var(--text_70);
 	}
-	.module_file {
+	.module-file {
 		margin-bottom: var(--space_xs);
 	}
 	.ts {
@@ -159,20 +159,20 @@
 		font-family: var(--font_family_mono);
 		font-size: var(--font_size_sm);
 	}
-	.variable_declaration {
+	.variable-declaration {
 		color: var(--color_d_50);
 	}
-	.function_declaration {
+	.function-declaration {
 		color: var(--color_c_50);
 	}
-	.type_declaration {
+	.type-declaration {
 		color: var(--color_g_50);
 	}
-	.class_declaration {
+	.class-declaration {
 		color: var(--color_f_50);
 	}
 	/* TODO extract  */
-	.nav_wrapper {
+	.nav-wrapper {
 		position: sticky;
 		top: var(--space_xl);
 		display: flex;

src/lib/ModulesNav.svelte

@@ -17,7 +17,7 @@
 	// TODO add favicon (from library? gro?)
 </script>
 
-<nav class="modules_nav">
+<nav class="modules-nav">
 	<h6>packages</h6>
 	<ul class="unstyled">
 		{#each repos_modules as pkg_modules (pkg_modules)}
@@ -31,7 +31,7 @@
 </nav>
 
 <style>
-	.modules_nav {
+	.modules-nav {
 		width: 100%;
 	}
 	h6 {

src/lib/ReposTable.svelte

@@ -38,7 +38,7 @@
 			deps.map((dep) => {
 				const repo = repos.find((repo) => repo.package_json.name === dep);
 				if (!repo?.package_json) return [dep, null];
-				return [dep, repo.package_json.version];
+				return [dep, repo.package_json.version ?? null];
 			}),
 		),
 	);

src/lib/ReposTree.svelte

@@ -19,12 +19,12 @@
 	} = $props();
 </script>
 
-<div class="repos_tree">
+<div class="repos-tree">
 	<ReposTreeNav {repos} {selected_repo}>
 		{@render nav()}
 	</ReposTreeNav>
 	{#if selected_repo}
-		<section class="detail_wrapper">
+		<section class="detail-wrapper">
 			<div class="panel detail p_md">
 				<LibraryDetail library={selected_repo.library} />
 			</div>
@@ -36,7 +36,7 @@
 					{#if repo.package_json}
 						<LibrarySummary library={repo.library}>
 							{#snippet repo_name(repo_name)}
-								<a href={resolve(`/tree/${repo_name}`)} class="repo_name">{repo_name}</a>
+								<a href={resolve(`/tree/${repo_name}`)} class="repo-name">{repo_name}</a>
 							{/snippet}
 						</LibrarySummary>
 					{:else}
@@ -56,7 +56,7 @@
 </div>
 
 <style>
-	.repos_tree {
+	.repos-tree {
 		width: 100%;
 		display: flex;
 		flex-direction: row;
@@ -74,13 +74,13 @@
 	.summaries li {
 		margin-bottom: var(--space_xl);
 	}
-	.repo_name {
+	.repo-name {
 		font-size: var(--font_size_xl2);
 		font-weight: 500;
 		text-align: center;
 		margin-bottom: var(--space_xl);
 	}
-	.detail_wrapper {
+	.detail-wrapper {
 		padding: var(--space_lg);
 		width: 100%;
 	}

src/lib/TablePage.svelte

@@ -17,7 +17,7 @@
 	<title>table {repo.package_json.glyph} {repo.package_json.name}</title>
 </svelte:head>
 
-<main class="box">
+<main class="box mx_auto">
 	<div class="p_lg">
 		<PageHeader {repo} />
 	</div>
@@ -32,12 +32,6 @@
 </main>
 
 <style>
-	main {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		margin: 0 auto;
-	}
 	section {
 		margin-bottom: var(--space_xl4);
 	}

src/lib/TreeItemPage.svelte

@@ -38,7 +38,7 @@
 		{/if}
 		<ReposTree {repos} selected_repo={route_repo}>
 			{#snippet nav()}
-				<div class="repos_tree_nav">
+				<div class="repos-tree-nav">
 					<Breadcrumb>{repo.package_json.glyph}</Breadcrumb>
 				</div>
 			{/snippet}
@@ -66,12 +66,12 @@
 		align-items: center;
 		width: 100%;
 	}
-	.repos_tree_nav {
+	.repos-tree-nav {
 		display: flex;
 		margin-top: var(--space_xl);
 	}
 	/* TODO hacky */
-	.repos_tree_nav :global(.breadcrumb) {
+	.repos-tree-nav :global(.breadcrumb) {
 		justify-content: flex-start;
 	}
 </style>

src/lib/TreePage.svelte

@@ -28,7 +28,7 @@
 	<section class="tree">
 		<ReposTree {repos}>
 			{#snippet nav()}
-				<div class="repos_tree_nav">
+				<div class="repos-tree-nav">
 					<Breadcrumb>{repo.package_json.glyph}</Breadcrumb>
 				</div>
 			{/snippet}
@@ -54,12 +54,12 @@
 		flex-direction: row;
 		align-items: flex-start;
 	}
-	.repos_tree_nav {
+	.repos-tree-nav {
 		display: flex;
 		margin-top: var(--space_xl);
 	}
 	/* TODO hacky */
-	.repos_tree_nav :global(.breadcrumb) {
+	.repos-tree-nav :global(.breadcrumb) {
 		justify-content: flex-start;
 	}
 </style>

src/routes/+page.svelte

@@ -13,7 +13,7 @@
 	<title>{library.package_json.name}</title>
 </svelte:head>
 
-<main class="box">
+<main class="box mx_auto">
 	<section style:margin-top="var(--docs_primary_nav_height, 60px)">
 		<MainHeader />
 	</section>
@@ -47,12 +47,6 @@
 </main>
 
 <style>
-	main {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		margin: 0 auto;
-	}
 	menu {
 		gap: var(--space_lg);
 		width: 100%;

src/routes/about/+page.svelte

@@ -13,7 +13,7 @@
 	<title>about {library.package_json.glyph} {library.package_json.name}</title>
 </svelte:head>
 
-<main class="width_atmost_md">
+<main class="width_atmost_md box mx_auto">
 	<div class="p_lg">
 		<PageHeader repo={library}></PageHeader>
 	</div>
@@ -25,12 +25,3 @@
 	</section>
 	<PageFooter />
 </main>
-
-<style>
-	main {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		margin: 0 auto;
-	}
-</style>