Layout and frontmatter updates

evidence-dev · Dec 20, 2024 · 4e1829b · 4e1829b
1 parent ba56d0b
commit 4e1829b
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 18 deletions.
diff --git a/.changeset/friendly-avocados-shake.md b/.changeset/friendly-avocados-shake.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Adjust spacing on mobile header
diff --git a/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte b/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte
@@ -101,6 +101,21 @@
 		sidebarFrontMatter = undefined;
 	}
 
+	$: hideBreadcrumbsFrontmatter = routeFrontMatter?.hide_breadcrumbs;
+	$: hideBreadcrumbsEffective = hideBreadcrumbsFrontmatter ?? hideBreadcrumbs;
+
+	$: fullWidthFrontmatter = routeFrontMatter?.full_width;
+	$: fullWidthEffective = fullWidthFrontmatter ?? fullWidth;
+
+	$: maxWidthFrontmatter = routeFrontMatter?.max_width;
+	$: maxWidthEffective = maxWidthFrontmatter ?? maxWidth;
+
+	$: hideHeaderFrontmatter = routeFrontMatter?.hide_header;
+	$: hideHeaderEffective = hideHeaderFrontmatter ?? hideHeader;
+
+	$: hideTocFrontmatter = routeFrontMatter?.hide_toc;
+	$: hideTocEffective = hideTocFrontmatter ?? hideTOC;
+
 	onMount(async () => {
 		if (!('serviceWorker' in navigator)) return;
 
@@ -136,16 +151,16 @@
 <DevTools>
 	<div data-sveltekit-preload-data={prefetchStrategy} class="antialiased">
 		<ErrorOverlay />
-		{#if !hideHeader}
+		{#if !hideHeaderEffective}
 			<Header
 				bind:mobileSidebarOpen
 				{title}
 				{logo}
 				{lightLogo}
 				{darkLogo}
 				{neverShowQueries}
-				{fullWidth}
-				{maxWidth}
+				fullWidth={fullWidthEffective}
+				maxWidth={maxWidthEffective}
 				{hideSidebar}
 				{githubRepo}
 				{slackCommunity}
@@ -156,9 +171,9 @@
 			/>
 		{/if}
 		<div
-			class={(fullWidth ? 'max-w-full ' : maxWidth ? '' : ' max-w-7xl ') +
+			class={(fullWidthEffective ? 'max-w-full ' : maxWidthEffective ? '' : ' max-w-7xl ') +
 				'print:w-[650px] print:md:w-[841px] mx-auto print:md:px-0 print:px-0 px-6 sm:px-8 md:px-12 flex justify-start'}
-			style="max-width:{maxWidth}px;"
+			style="max-width:{maxWidthEffective}px;"
 		>
 			{#if !hideSidebar && sidebarFrontMatter !== 'never'}
 				<div class="print:hidden">
@@ -169,24 +184,24 @@
 						{logo}
 						{homePageName}
 						{builtWithEvidence}
-						{hideHeader}
+						hideHeader={hideHeaderEffective}
 						{sidebarFrontMatter}
 					/>
 				</div>
 			{/if}
 			<main
-				class={(!hideSidebar ? 'md:pl-8 ' : '') +
-					(!hideTOC ? 'md:pr-8 ' : '') +
-					(!hideHeader
-						? !hideBreadcrumbs
+				class={(!hideSidebar && !['hide', 'never'].includes(sidebarFrontMatter) ? 'md:pl-8 ' : '') +
+					(!hideTocEffective ? 'md:pr-8 ' : '') +
+					(!hideHeaderEffective
+						? !hideBreadcrumbsEffective
 							? ' mt-16 sm:mt-20 '
 							: ' mt-16 sm:mt-[74px] '
-						: !hideBreadcrumbs
+						: !hideBreadcrumbsEffective
 							? ' mt-4 sm:mt-8 '
 							: ' mt-4 sm:mt-[26px] ') +
 					'flex-grow overflow-x-hidden print:px-0 print:mt-8'}
 			>
-				{#if !hideBreadcrumbs}
+				{#if !hideBreadcrumbsEffective}
 					<div class="print:hidden">
 						{#if $page.route.id !== '/settings'}
 							<BreadCrumbs {fileTree} />
@@ -201,9 +216,9 @@
 					<LoadingSkeleton />
 				{/if}
 			</main>
-			{#if !hideTOC}
+			{#if !hideTocEffective}
 				<div class="print:hidden">
-					<TableOfContents {hideHeader} />
+					<TableOfContents hideHeader={hideHeaderEffective} />
 				</div>
 			{/if}
 		</div>

diff --git a/packages/ui/core-components/src/lib/organisms/layout/header/Header.svelte b/packages/ui/core-components/src/lib/organisms/layout/header/Header.svelte
@@ -37,8 +37,7 @@
 </script>
 
 <header
-	class="fixed w-full top-0 z-40 flex h-12 shrink-0 justify-start items-center gap-x-4 border-b border-base-300/50 bg-base-100/90 backdrop-blur print:hidden
-  {sidebarFrontMatter === 'hide' ? 'md:pl-8' : ''}"
+	class="fixed w-full top-0 z-40 flex h-12 shrink-0 justify-start items-center gap-x-4 border-b border-base-300/50 bg-base-100/90 backdrop-blur print:hidden"
 >
 	<div
 		class={(fullWidth ? 'max-w-full ' : maxWidth ? '' : ' max-w-7xl ') +
@@ -53,7 +52,7 @@
 			<div class="flex gap-x-4 items-center">
 				<button
 					type="button"
-					class="text-base-content hover:bg-base-200 rounded-lg p-1 transition-all duration-500
+					class="text-base-content hover:bg-base-200 rounded-lg p-1 -ml-1 transition-all duration-500
           {sidebarFrontMatter === 'hide' ? 'block' : 'md:hidden'}"
 					on:click={() => {
 						mobileSidebarOpen = !mobileSidebarOpen;

diff --git a/sites/docs/pages/reference/layouts/index.md b/sites/docs/pages/reference/layouts/index.md
@@ -14,7 +14,7 @@ Evidence will use any `+layout.svelte` file in the `/pages` directory to overrid
 <Alert status=info>
 <b>Creating a Custom Layout</b>
 
-The recommended approach is to copy and edit the default layout file
+The recommended approach is to copy and edit the default layout file. You can do this with the `Add Custom Layout` command in VS Code or with the CLI command below:
 
 ```bash
 cp .evidence/template/src/pages/+layout.svelte pages

diff --git a/sites/docs/pages/reference/markdown/index.md b/sites/docs/pages/reference/markdown/index.md
@@ -232,6 +232,38 @@ E.g.
 `breadcrumb: &quot;select customer_name as breadcrumb from customers_table where customer_id = $&#123params.customer_id&#125&quot;`
 
 </PropListing>
+<PropListing
+    name="hide_header"
+    description="If true, header will not be shown on the page"
+    options={['true', 'false']}
+/>
+<PropListing
+    name="hide_toc"
+    description="If true, table of contents will not be shown on the page"
+    options={['true', 'false']}
+/>
+<PropListing
+    name="hide_breadcrumbs"
+    description="If true, breadcrumbs will not be shown on the page"
+    options={['true', 'false']}
+/>
+<PropListing
+    name="full_width"
+    description="Sets the width of the app content to the full width of the screen."
+    options={['true', 'false']}
+/>
+<PropListing
+    name="max_width"
+    options="Any number"
+    defaultValue=""
+>
+
+Sets the width of the app content in pixels. The default layout is about 1,280 px wide.
+
+</PropListing>
+
+
+
 
 Anything outside of these values won't do anything on their own, but they will be accessible as [variables](/core-concepts/syntax/#expressions) on the page.