Skip to content
Merged
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
19 changes: 13 additions & 6 deletions src/lib/layouts/DocsArticle.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
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>;
Expand All @@ -37,6 +38,8 @@
const headerSectionInfoAlert = hasContext('headerSectionInfoAlert')
? getContext<Readable<HeaderSectionInfoAlert | null>>('headerSectionInfoAlert')
: readable(null);
const showCopyPage = !hasRoutePrompt();
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, let's look at the DocsArticle.svelte file around the flagged lines
head -100 src/lib/layouts/DocsArticle.svelte | cat -n

Repository: appwrite/website

Length of output: 4702


🏁 Script executed:

# Find the hasRoutePrompt function
rg -n 'hasRoutePrompt' --type=svelte -B 2 -A 5

Repository: appwrite/website

Length of output: 90


🏁 Script executed:

# Check the layout structure to understand component lifecycle
fd -e svelte 'layout' src/ | head -20

Repository: appwrite/website

Length of output: 945


🏁 Script executed:

# Look for +layout files which define component persistence
fd '\+layout' src/ -e svelte -e ts -e js

Repository: appwrite/website

Length of output: 3191


🏁 Script executed:

# Find the hasRoutePrompt function implementation
find src -name "*.ts" -o -name "*.js" | xargs grep -l "hasRoutePrompt" | head -5

Repository: appwrite/website

Length of output: 89


🏁 Script executed:

# Search for the actual implementation
rg -n "export.*hasRoutePrompt|function.*hasRoutePrompt" --type=ts --type=js -A 10

Repository: appwrite/website

Length of output: 501


🏁 Script executed:

# Check the docs layout that uses DocsArticle
cat -n src/routes/docs/+layout.svelte | head -150

Repository: appwrite/website

Length of output: 468


🏁 Script executed:

# Also check the utils/routePrompts file
find src -path "*utils*routePrompts*" -type f

Repository: appwrite/website

Length of output: 89


🏁 Script executed:

# Read the entire routePrompts.ts file
cat -n src/lib/utils/routePrompts.ts

Repository: appwrite/website

Length of output: 1910


🏁 Script executed:

# Also check if SvelteKit page store is imported/used
rg -n "from.*page|import.*page|getRoutePrompt" src/lib/utils/routePrompts.ts -B 2 -A 2

Repository: appwrite/website

Length of output: 575


🏁 Script executed:

# Check package.json or svelte.config.js for Svelte version
cat package.json | grep -A 2 -B 2 "svelte"

Repository: appwrite/website

Length of output: 2167


Make showCopyPage reactive to update on route changes.

The hasRoutePrompt() function reads from reactive state (page.route.id), but calling it as a plain function only captures the value once. Since DocsArticle.svelte persists across SvelteKit client-side navigation, the flag won't update when navigating between routes with and without prompt.md files, causing the copy button to display with stale visibility.

Use $derived to ensure the flag updates whenever the route changes:

Proposed fix
-const showCopyPage = !hasRoutePrompt();
+const showCopyPage = $derived(!hasRoutePrompt());
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const showCopyPage = !hasRoutePrompt();
const showCopyPage = $derived(!hasRoutePrompt());
🤖 Prompt for AI Agents
In src/lib/layouts/DocsArticle.svelte around line 42, replace the one-time
evaluation "const showCopyPage = !hasRoutePrompt();" with a derived store so the
value updates on client-side navigation: import { derived } from 'svelte/store'
(if not already), then create "const showCopyPage = derived(page, $page =>
!hasRoutePrompt($page.route?.id ?? $page.route));" (or "derived(page, $page =>
!hasRoutePrompt())" if hasRoutePrompt accepts no args but reads page) so the
derived recomputes when the page store changes, and update template usage to use
$showCopyPage where needed.

Copy link
Member Author

@atharvadeosthale atharvadeosthale Jan 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working just fine while navigating pages, should we still do it?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@atharvadeosthale If you've tested navigation between routes with and without prompt.md files and the copy button visibility updates correctly, then you're good to go!

The reactive change would only be necessary if the component instance persists across client-side navigations in SvelteKit. If DocsArticle.svelte gets re-mounted on each route change (which appears to be the case based on your testing), then hasRoutePrompt() gets called fresh each time and the plain constant works perfectly fine.

Your real-world testing trumps theoretical concerns, so no need to change it if it's working correctly! 👍

</script>

<main class="contents" id="main">
Expand All @@ -49,9 +52,11 @@
<span class="web-icon-chevron-left" aria-hidden="true"></span>
</a>
{/if}
<div class="copy-button-wrapper-mobile ml-auto">
<CopyAsMarkdown class="ml-0" />
</div>
{#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" />
Expand All @@ -75,9 +80,11 @@
<h1 class="text-title font-aeonik-pro text-primary">{title}</h1>
</div>
</div>
<div class="web-article-header-end copy-button-wrapper hidden lg:block">
<CopyAsMarkdown class="ml-0" />
</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 />
Expand Down