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.

Sign up for GitHub

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

Jump to bottom

Fixes to assets page #487

Merged
merged 3 commits into from
Jan 3, 2024
Merged

Fixes to assets page #487

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9c71651
fix assets navigation
TGlide Jan 2, 2024
4de6ee7
add copy btn fix
TGlide Jan 2, 2024
29e2716
cleanup imports
TGlide Jan 2, 2024
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
102 changes: 102 additions & 0 deletions src/lib/components/TocNav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<script lang="ts">
import { getTocCtx } from './TocRoot.svelte';
import TocTree from './TocTree.svelte';

export let showToc = true;

const {
toc: {
elements: { item },
states: { activeHeadingIdxs, headingsTree }
}
} = getTocCtx();

$: progress = Math.max(...$activeHeadingIdxs) / ($headingsTree.length - 1);
</script>

<aside class="aw-grid-120-1fr-auto-side" class:aw-is-mobile-closed={!showToc}>
<div class="aw-page-steps">
<div class="aw-page-steps-location aw-is-not-mobile" style="--location:{progress * 100}%;">
<span class="aw-page-steps-location-button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<g clip-path="url(#clip0_1684_10747)">
<g filter="url(#filter0_b_1684_10747)">
<circle
cx="8"
cy="8"
r="8"
fill="url(#paint0_linear_1684_10747)"
fill-opacity="0.32"
/>
<circle
cx="8"
cy="8"
r="7.75"
stroke="url(#paint1_linear_1684_10747)"
stroke-width="0.5"
/>
</g>
<circle cx="8" cy="7.99219" r="3" fill="white" />
</g>
<defs>
<filter
id="filter0_b_1684_10747"
x="-200"
y="-200"
width="416"
height="416"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="100" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_1684_10747"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_1684_10747"
result="shape"
/>
</filter>
<linearGradient
id="paint0_linear_1684_10747"
x1="2.02105"
y1="1.10843"
x2="16.3872"
y2="17.2901"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" stop-opacity="0.4" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient
id="paint1_linear_1684_10747"
x1="7.45643"
y1="-1.10615"
x2="5.53812"
y2="17.9973"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" stop-opacity="0.16" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<clipPath id="clip0_1684_10747">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
</span>
</div>
<TocTree tree={$headingsTree} activeHeadingIdxs={$activeHeadingIdxs} {item} />
</div>
</aside>
39 changes: 39 additions & 0 deletions src/lib/components/TocRoot.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<script context="module" lang="ts">
import {
createTableOfContents,
type CreateTableOfContentsArgs,
type TableOfContents
} from '@melt-ui/svelte';
import { getContext, setContext } from 'svelte';

const TOC_KEY = Symbol();
export type TocContext = {
toc: TableOfContents;
};

const setCtx = (ctx: TocContext) => {
setContext<TocContext>(TOC_KEY, ctx);
};

export const getTocCtx = () => {
return getContext<TocContext>(TOC_KEY);
};
</script>

<script lang="ts">
export let selector = '#main';
export let exclude: CreateTableOfContentsArgs['exclude'] = ['h1', 'h3', 'h4', 'h5', 'h6'];
export let activeType: CreateTableOfContentsArgs['activeType'] = 'lowest';
export let scrollOffset: CreateTableOfContentsArgs['scrollOffset'] = 120;

const toc = createTableOfContents({
selector,
exclude,
activeType,
scrollOffset
});

setCtx({ toc });
</script>

<slot />
4 changes: 2 additions & 2 deletions src/markdoc/layouts/PolicyTree.svelte → src/lib/components/TocTree.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import { type TableOfContentsItem, type TableOfContentsElements, melt } from '@melt-ui/svelte';
import { getPolicyCtx } from './Policy.svelte';
import { getTocCtx } from './TocRoot.svelte';

export let tree: TableOfContentsItem[] = [];
export let activeHeadingIdxs: number[];
Expand All @@ -11,7 +11,7 @@
toc: {
helpers: { isActive }
}
} = getPolicyCtx();
} = getTocCtx();
</script>

<ul class="aw-page-steps-list aw-sub-body-500">
Expand Down
178 changes: 32 additions & 146 deletions src/markdoc/layouts/Policy.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<script context="module" lang="ts">
const POLICY_KEY = Symbol();
export type PolicyContext = {
toc: TableOfContents;
transparentTableCells?: boolean;
};

Expand All @@ -26,11 +25,11 @@
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';

import { TITLE_SUFFIX } from '$routes/titles';
import { createTableOfContents, type TableOfContents } from '@melt-ui/svelte';

import { getContext, hasContext, setContext } from 'svelte';
import PolicyTree from './PolicyTree.svelte';
import TocNav from '$lib/components/TocNav.svelte';
import TocRoot from '$lib/components/TocRoot.svelte';
import { isHeaderHidden } from '$lib/layouts/Main.svelte';
import { getContext, hasContext, setContext } from 'svelte';

export let title: string;
export let transparentTableCells = false;
Expand All @@ -45,21 +44,7 @@

let showToc = false;

const toc = createTableOfContents({
exclude: ['h1', 'h3', 'h4', 'h5', 'h6'],
selector: '#main',
activeType: 'lowest',
scrollOffset: 120
});

setCtx({ toc, transparentTableCells });

const {
elements: { item },
states: { activeHeadingIdxs, headingsTree }
} = toc;

$: progress = Math.max(...$activeHeadingIdxs) / ($headingsTree.length - 1);
setCtx({ transparentTableCells });
</script>

<svelte:head>
Expand All @@ -80,131 +65,38 @@
</svelte:head>

<Main omitMainId>
<div class="aw-container">
<div class="aw-grid-120-1fr-auto">
<header class="aw-grid-120-1fr-auto-header">
<h1 class="aw-title aw-u-color-text-primary">{title}</h1>
</header>
<button
class="toc-btn u-position-sticky u-flex u-width-full-line u-main-space-between u-cross-center
<TocRoot>
<div class="aw-container">
<div class="aw-grid-120-1fr-auto">
<header class="aw-grid-120-1fr-auto-header">
<h1 class="aw-title aw-u-color-text-primary">{title}</h1>
</header>
<button
class="toc-btn u-position-sticky u-flex u-width-full-line u-main-space-between u-cross-center
aw-u-padding-20 aw-u-margin-inline-20-negative aw-u-color-text-primary aw-is-only-mobile
u-margin-block-start-24 aw-u-sep-block aw-u-filter-blur-8"
style:--inset-block-start="4.5rem"
style:inline-size="100vw"
style:background-color="hsl(var(--p-body-bg-color) / 0.1)"
style:translate="0 {$isHeaderHidden ? '-4.5rem' : '0'}"
on:click={() => (showToc = !showToc)}
>
<span class="aw-description">Table of contents</span>
<span class="icon-menu-alt-4" aria-hidden="true" />
</button>
<aside class="aw-grid-120-1fr-auto-side" class:aw-is-mobile-closed={!showToc}>
<div class="aw-page-steps">
<div
class="aw-page-steps-location aw-is-not-mobile"
style="--location:{progress * 100}%;"
>
<span class="aw-page-steps-location-button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<g clip-path="url(#clip0_1684_10747)">
<g filter="url(#filter0_b_1684_10747)">
<circle
cx="8"
cy="8"
r="8"
fill="url(#paint0_linear_1684_10747)"
fill-opacity="0.32"
/>
<circle
cx="8"
cy="8"
r="7.75"
stroke="url(#paint1_linear_1684_10747)"
stroke-width="0.5"
/>
</g>
<circle cx="8" cy="7.99219" r="3" fill="white" />
</g>
<defs>
<filter
id="filter0_b_1684_10747"
x="-200"
y="-200"
width="416"
height="416"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur
in="BackgroundImageFix"
stdDeviation="100"
/>
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_1684_10747"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_1684_10747"
result="shape"
/>
</filter>
<linearGradient
id="paint0_linear_1684_10747"
x1="2.02105"
y1="1.10843"
x2="16.3872"
y2="17.2901"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" stop-opacity="0.4" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient
id="paint1_linear_1684_10747"
x1="7.45643"
y1="-1.10615"
x2="5.53812"
y2="17.9973"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" stop-opacity="0.16" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<clipPath id="clip0_1684_10747">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
</span>
style:--inset-block-start="4.5rem"
style:inline-size="100vw"
style:background-color="hsl(var(--p-body-bg-color) / 0.1)"
style:translate="0 {$isHeaderHidden ? '-4.5rem' : '0'}"
on:click={() => (showToc = !showToc)}
>
<span class="aw-description">Table of contents</span>
<span class="icon-menu-alt-4" aria-hidden="true" />
</button>
<TocNav />
<main class="aw-grid-120-1fr-auto-main /aw-is-mobile-closed" id="main">
<div class="aw-content is-count-headers" class:aw-is-mobile-closed={showToc}>
<!-- svelte-ignore a11y-hidden -->
<h2 aria-hidden="true">Introduction</h2>
<slot />
</div>
<PolicyTree
tree={$headingsTree}
activeHeadingIdxs={$activeHeadingIdxs}
{item}
/>
</div>
</aside>
<main class="aw-grid-120-1fr-auto-main /aw-is-mobile-closed" id="main">
<div class="aw-content is-count-headers" class:aw-is-mobile-closed={showToc}>
<!-- eslint-disable-next-line svelte/valid-compile -->
<h2 aria-hidden="true">Introduction</h2>
<slot />
</div>
</main>
</main>
</div>
<FooterNav />
<MainFooter />
</div>
<FooterNav />
<MainFooter />
</div>
</TocRoot>
</Main>

<style lang="scss">
Expand All @@ -216,10 +108,4 @@
.toc-btn {
transition: translate 0.3s ease;
}

@media screen and (max-width: 1023px) {
.aw-page-steps {
margin-block-start: 2rem;
}
}
</style>
Loading