DocsArticle.svelte

<script lang="ts" context="module">
    export type TocItem = {
        title: string;
        href: string;
        step?: number;
        selected?: boolean;
        level: number;
        children?: Array<{
            title: string;
            href: string;
            selected: boolean;
            level?: number;
        }>;
    };

    export type HeaderSectionInfoAlert = {
        title?: string;
        description?: string;
    };
</script>

<script lang="ts">
    import { getContext, hasContext, setContext } from 'svelte';
    import { readable, type Readable, writable } from 'svelte/store';
    import { Feedback } from '$lib/components';
    import TableOfContents from '$lib/components/blog/table-of-contents.svelte';
    import { Button, Icon } from '$lib/components/ui';
    import Info from '$markdoc/tags/Info.svelte';
    import CopyAsMarkdown from '$lib/components/blog/copy-as-markdown.svelte';
    import { hasRoutePrompt } from '$lib/utils/routePrompts';

    export let title: string;
    export let toc: Array<TocItem>;
    export let back: string | undefined = undefined;
    export let date: string | undefined = undefined;
    export let promptPath: string | undefined = undefined;

    const reducedArticleSize = setContext('articleHasNumericBadge', writable(false));
    const headerSectionInfoAlert = hasContext('headerSectionInfoAlert')
        ? getContext<Readable<HeaderSectionInfoAlert | null>>('headerSectionInfoAlert')
        : readable(null);

    // Hide "Copy Page" button if a prompt exists (either co-located or via promptPath)
    const showCopyPage = !hasRoutePrompt(promptPath);
</script>

<main class="contents" id="main">
    <article class="web-article contents">
        <header class="web-article-header flex items-start justify-between">
            <div class="web-article-header-start web-u-cross-start flex flex-col">
                <div class="mobile-header-row mb-2 flex w-full items-center lg:hidden">
                    {#if back}
                        <a href={back} class="web-icon-button" aria-label="previous page">
                            <span class="web-icon-chevron-left" aria-hidden="true"></span>
                        </a>
                    {/if}
                    {#if showCopyPage}
                        <div class="copy-button-wrapper-mobile ml-auto">
                            <CopyAsMarkdown class="ml-0" />
                        </div>
                    {/if}
                </div>
                <ul class="web-metadata text-caption">
                    <slot name="metadata" />
                </ul>
                <div class="relative flex items-center">
                    {#if back}
                        <Button
                            href={back}
                            class="web-u-translate-x-negative absolute size-10 items-center"
                            aria-label="previous page"
                            variant="icon"
                        >
                            <Icon
                                name="chevron-left"
                                class="text-primary hidden text-[24px] md:flex"
                                aria-hidden="true"
                            />
                        </Button>
                    {/if}

                    <h1 class="text-title font-aeonik-pro text-primary">{title}</h1>
                </div>
            </div>
            {#if showCopyPage}
                <div class="web-article-header-end copy-button-wrapper hidden lg:block">
                    <CopyAsMarkdown class="ml-0" />
                </div>
            {/if}
        </header>
        <div class="web-article-content prose" class:web-reduced-article-size={$reducedArticleSize}>
            <slot />

            <Feedback {date} />
        </div>
        <aside class="web-references-menu ps-6">
            <div class="web-references-menu-content">
                {#if toc && toc.length > 0}
                    <TableOfContents heading="On This Page" {toc} />
                {/if}
            </div>
        </aside>
    </article>
</main>

<style>
    @media (min-width: 1280px) and (max-width: 1330px) {
        .web-reduced-article-size {
            /* original/default is 41.5rem */
            max-inline-size: 40.5rem;
        }
    }

    /* Mobile header row with back button and copy button */
    @media (max-width: 1023.9px) {
        .mobile-header-row {
            align-items: center;
            width: 100vw;
            position: relative;
            margin-left: calc(-1 * var(--p-grid-huge-navs-padding-inline, 1.25rem));
            margin-right: calc(-1 * var(--p-grid-huge-navs-padding-inline, 1.25rem));
            padding-left: var(--p-grid-huge-navs-padding-inline, 1.25rem);
            padding-right: var(--p-grid-huge-navs-padding-inline, 1.25rem);
        }

        .copy-button-wrapper-mobile {
            display: flex;
            align-items: center;
            margin-left: auto;
            margin-right: 0;
        }
    }

    /* Desktop copy button wrapper */
    @media (min-width: 1024px) {
        .copy-button-wrapper {
            align-self: center;
            width: auto;
        }
    }
</style>