Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout and frontmatter adjustments #2948

Merged
merged 4 commits into from
Jan 10, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/friendly-avocados-shake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@evidence-dev/core-components': patch
---

Adjust spacing on mobile header
Original file line number Diff line number Diff line change
Expand Up @@ -73,21 +73,25 @@
function convertFileTreeToFileMap(fileTree) {
const map = new Map();

function traverse(node) {
if (!node) {
return;
}
function traverse(node, currentPath = '') {
// Build the full path for the current node
const fullPath = node.href || currentPath;

if (node.href) {
const decodedHref = decodeURI(node.href);
map.set(decodedHref, node);
// Add the current node to the map if it's a page
if (node.isPage) {
map.set(decodeURI(fullPath), node);
}

Object.values(node.children).forEach(traverse);
// Traverse children
if (node.children) {
Object.entries(node.children).forEach(([key, child]) => {
const childPath = `${fullPath}/${key}`;
traverse(child, childPath);
});
}
}

traverse(fileTree);

return map;
}

Expand All @@ -101,6 +105,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;

Expand Down Expand Up @@ -136,16 +155,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}
Expand All @@ -156,9 +175,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">
Expand All @@ -169,24 +188,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} />
Expand All @@ -201,9 +220,9 @@
<LoadingSkeleton />
{/if}
</main>
{#if !hideTOC}
{#if !hideTocEffective}
<div class="print:hidden">
<TableOfContents {hideHeader} />
<TableOfContents hideHeader={hideHeaderEffective} />
</div>
{/if}
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,11 @@
</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 ') +
'mx-auto px-6 sm:px-8 md:px-12 flex flex-1 items-center justify-between'}
'mx-auto px-5 sm:px-6 md:px-12 flex flex-1 items-center justify-between'}
style="max-width:{maxWidth}px;"
>
{#if hideSidebar || sidebarFrontMatter === 'never'}
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion sites/docs/pages/reference/layouts/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
32 changes: 32 additions & 0 deletions sites/docs/pages/reference/markdown/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Loading