<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    const markdown = `## Linked Headings Demo

### Getting Started

Headings rendered by svelte-markdown include \`id\` attributes by default, but they don't have clickable anchor links. This example shows two ways to add them.

#### Installation

Install the package with your preferred package manager:

\`\`\`bash
pnpm add @humanspeak/svelte-markdown
\`\`\`

### Configuration

Configure the component with your markdown source and any options you need.

#### Basic Usage

Import and use the component in your Svelte file.

### Advanced Topics

#### Custom Slug Functions

You can provide a custom slug function for full control over heading IDs.

##### Nested Heading Example

This is a deeply nested heading to show all levels work correctly.`
</script>

<!--
  Default heading rendering — no override. Each heading gets an `id`
  derived from its text (so `#getting-started` works in the URL), but
  there's no visible anchor link.
-->
<div class="prose prose-sm dark:prose-invert mx-auto max-w-4xl px-6 py-6">
    <SvelteMarkdown source={markdown} />
</div>

<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import LinkedHeading from './LinkedHeading.svelte'

    const markdown = `## Linked Headings Demo

### Getting Started

Headings rendered by svelte-markdown include \`id\` attributes by default, but they don't have clickable anchor links. This example shows two ways to add them.

#### Installation

Install the package with your preferred package manager:

\`\`\`bash
pnpm add @humanspeak/svelte-markdown
\`\`\`

### Configuration

Configure the component with your markdown source and any options you need.

#### Basic Usage

Import and use the component in your Svelte file.

### Advanced Topics

#### Custom Slug Functions

You can provide a custom slug function for full control over heading IDs.

##### Nested Heading Example

This is a deeply nested heading to show all levels work correctly.`
</script>

<!--
  Custom component renderer — `LinkedHeading.svelte` replaces the default
  heading renderer for every depth. Best for reuse across multiple pages
  or when the override needs its own complex state.
-->
<div class="prose prose-sm dark:prose-invert mx-auto max-w-4xl px-6 py-6">
    <SvelteMarkdown source={markdown} renderers={{ heading: LinkedHeading }} />
</div>

<script lang="ts">
    import type { SvelteMarkdownOptions } from '@humanspeak/svelte-markdown'
    import type { Snippet } from 'svelte'

    interface Props {
        depth: number
        raw: string
        text: string
        options: SvelteMarkdownOptions
        slug: (val: string) => string
        children?: Snippet
    }

    const { depth, text, options, slug, children }: Props = $props()

    // Resolve the heading id the same way svelte-markdown's default
    // renderer would — honouring `headerIds` and `headerPrefix` so this
    // component drops in without surprises when the consumer toggles
    // those options.
    const id = $derived(options.headerIds ? options.headerPrefix + slug(text) : undefined)
</script>

<svelte:element this={`h${depth}`} {id} class="lh-heading">
    <a href={id ? `#${id}` : undefined} class="lh-link">
        {@render children?.()}
        {#if id}
            <span class="lh-icon" aria-hidden="true">🔗</span>
        {/if}
    </a>
</svelte:element>

<style>
    :global(.lh-heading) {
        position: relative;
    }
    :global(.lh-link) {
        color: inherit;
        text-decoration: none;
    }
    :global(.lh-link:hover) {
        text-decoration: underline;
    }
    :global(.lh-icon) {
        margin-left: 8px;
        font-size: 0.7em;
        opacity: 0;
        transition: opacity 0.15s;
        color: var(--brut-accent);
    }
    :global(.lh-heading:hover .lh-icon),
    :global(.lh-link:focus-visible .lh-icon) {
        opacity: 1;
    }
</style>

<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    const markdown = `## Linked Headings Demo

### Getting Started

Headings rendered by svelte-markdown include \`id\` attributes by default, but they don't have clickable anchor links. This example shows two ways to add them.

#### Installation

Install the package with your preferred package manager:

\`\`\`bash
pnpm add @humanspeak/svelte-markdown
\`\`\`

### Configuration

Configure the component with your markdown source and any options you need.

#### Basic Usage

Import and use the component in your Svelte file.

### Advanced Topics

#### Custom Slug Functions

You can provide a custom slug function for full control over heading IDs.

##### Nested Heading Example

This is a deeply nested heading to show all levels work correctly.`
</script>

<!--
  Snippet override — an inline `{#snippet heading()}` block adds a
  hover-reveal `#` anchor link after each heading. Best for one-off
  customizations that don't need their own component file.
-->
<div class="prose prose-sm dark:prose-invert mx-auto max-w-4xl px-6 py-6">
    <SvelteMarkdown source={markdown}>
        {#snippet heading({ depth, text, slug, options, children })}
            {@const id = options.headerIds ? options.headerPrefix + slug(text) : undefined}
            <svelte:element this={`h${depth}`} {id} class="lh-heading">
                {@render children?.()}
                {#if id}
                    <a href="#{id}" class="lh-anchor" aria-label="Link to {text}"> # </a>
                {/if}
            </svelte:element>
        {/snippet}
    </SvelteMarkdown>
</div>

<style>
    /* Reveal-on-hover anchor styled with brut tokens so it flips cleanly
       between light and dark themes. The wrapper heading uses `position:
       relative` so the absolute-positioned anchor (when we'd want one)
       could anchor to it; for now the anchor sits inline after the text. */
    :global(.lh-heading) {
        position: relative;
    }
    :global(.lh-anchor) {
        margin-left: 8px;
        color: var(--brut-accent);
        text-decoration: none;
        opacity: 0;
        font-size: 0.7em;
        transition: opacity 0.15s;
    }
    :global(.lh-heading:hover .lh-anchor),
    :global(.lh-anchor:focus-visible) {
        opacity: 1;
    }
</style>