Add 'Screenshots' section to avatars documentation #2640
Conversation
WalkthroughThis pull request adds documentation for an Avatars "Screenshots" feature across three files. It adds a "Screenshots" navigation item in the Avatars layout, inserts a new card linking to the Screenshots page on the main Avatars docs page, and adds a new detailed documentation page describing the Screenshots API (overview, parameters, viewport/full-page options, themes, geolocation, output, advanced options, rate limits, and multi-SDK examples). No public API or executable logic changes are included. Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/routes/docs/products/avatars/+layout.svelte(1 hunks)src/routes/docs/products/avatars/+page.markdoc(1 hunks)src/routes/docs/products/avatars/screenshots/+page.markdoc(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: tests
- GitHub Check: assets
- GitHub Check: build
🔇 Additional comments (7)
src/routes/docs/products/avatars/+layout.svelte (1)
51-54: LGTM!The navigation item is correctly structured and the href matches the new documentation page location. The placement between "Favicons" and "Image proxy" is logical.
src/routes/docs/products/avatars/+page.markdoc (1)
39-41: LGTM!The card item is well-structured with a clear description and correct href that matches the navigation and new documentation page.
src/routes/docs/products/avatars/screenshots/+page.markdoc (5)
1-11: LGTM!The front matter and overview are well-structured and provide clear context for the screenshots feature.
13-109: LGTM!The initial code examples are comprehensive, covering all major SDKs with consistent parameters and correct syntax.
111-136: LGTM!The parameters table is comprehensive and well-structured, with clear descriptions and validation constraints for each parameter.
648-656: LGTM!The rate limits section clearly explains the restrictions and provides helpful context about when limits apply (client SDKs, SSR with sessions) versus when they don't (Server SDKs with API keys).
658-669: LGTM!The use cases section provides a comprehensive list of practical applications for the screenshots feature, helping users understand when and how to use it.
| {% multicode %} | ||
| ```client-web | ||
| // Desktop viewport | ||
| const desktop = avatars.getScreenshot({ | ||
| url: 'https://example.com', | ||
| viewportWidth: 1920, | ||
| viewportHeight: 1080 | ||
| }); | ||
|
|
||
| // Tablet viewport | ||
| const tablet = avatars.getScreenshot({ | ||
| url: 'https://example.com', | ||
| viewportWidth: 768, | ||
| viewportHeight: 1024 | ||
| }); | ||
|
|
||
| // Mobile viewport | ||
| const mobile = avatars.getScreenshot({ | ||
| url: 'https://example.com', | ||
| viewportWidth: 375, | ||
| viewportHeight: 667 | ||
| }); | ||
| ``` | ||
| ```client-flutter | ||
| // Desktop viewport | ||
| Future desktop = avatars.getScreenshot( | ||
| url: 'https://example.com', | ||
| viewportWidth: 1920, | ||
| viewportHeight: 1080 | ||
| ); | ||
|
|
||
| // Tablet viewport | ||
| Future tablet = avatars.getScreenshot( | ||
| url: 'https://example.com', | ||
| viewportWidth: 768, | ||
| viewportHeight: 1024 | ||
| ); | ||
|
|
||
| // Mobile viewport | ||
| Future mobile = avatars.getScreenshot( | ||
| url: 'https://example.com', | ||
| viewportWidth: 375, | ||
| viewportHeight: 667 | ||
| ); | ||
| ``` | ||
| ```client-apple | ||
| // Desktop viewport | ||
| let desktop = try await avatars.getScreenshot( | ||
| url: "https://example.com", | ||
| viewportWidth: 1920, | ||
| viewportHeight: 1080 | ||
| ) | ||
|
|
||
| // Tablet viewport | ||
| let tablet = try await avatars.getScreenshot( | ||
| url: "https://example.com", | ||
| viewportWidth: 768, | ||
| viewportHeight: 1024 | ||
| ) | ||
|
|
||
| // Mobile viewport | ||
| let mobile = try await avatars.getScreenshot( | ||
| url: "https://example.com", | ||
| viewportWidth: 375, | ||
| viewportHeight: 667 | ||
| ) | ||
| ``` | ||
| ```client-android-kotlin | ||
| // Desktop viewport | ||
| val desktop = avatars.getScreenshot( | ||
| url = "https://example.com", | ||
| viewportWidth = 1920, | ||
| viewportHeight = 1080 | ||
| ) | ||
|
|
||
| // Tablet viewport | ||
| val tablet = avatars.getScreenshot( | ||
| url = "https://example.com", | ||
| viewportWidth = 768, | ||
| viewportHeight = 1024 | ||
| ) | ||
|
|
||
| // Mobile viewport | ||
| val mobile = avatars.getScreenshot( | ||
| url = "https://example.com", | ||
| viewportWidth = 375, | ||
| viewportHeight = 667 | ||
| ) | ||
| ``` | ||
| {% /multicode %} |
There was a problem hiding this comment.
Inconsistent SDK coverage: React Native examples missing.
The viewport configuration section includes examples for 4 SDKs (web, Flutter, Apple, Android Kotlin) but omits React Native, which was included in the initial example section. For consistency and completeness, consider adding React Native examples to all sections or clarify why certain SDKs are excluded from specific examples.
This pattern appears to repeat in subsequent sections as well.
🤖 Prompt for AI Agents
In src/routes/docs/products/avatars/screenshots/+page.markdoc around lines 142
to 231 the viewport examples include client-web, client-flutter, client-apple
and client-android-kotlin but omit React Native, causing inconsistent SDK
coverage; add a client-react-native code block showing the same three viewport
examples (desktop, tablet, mobile) using the React Native SDK call signature
consistent with the initial example section, and repeat the same addition for
any subsequent sections that follow this pattern so all SDK examples include
React Native or add a short note explaining why React Native is intentionally
excluded.
|
@eldadfux heads-up, I've added enums to the SDK examples mentioned on the pages but the new enums are yet to be merged in Android and Apple SDKs. We should wait until these are merged: |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/routes/docs/products/avatars/screenshots/+page.markdoc (1)
145-234: React Native examples missing from this section.This section includes examples for Web, Flutter, Apple, and Android Kotlin but omits React Native, which was included in the initial example section.
This inconsistency was already flagged in a previous review. The same pattern continues in subsequent sections (Full page capture, Theme and appearance, Geolocation and locale, Output configuration, Advanced configuration).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/routes/docs/products/avatars/screenshots/+page.markdoc(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: assets
- GitHub Check: tests
- GitHub Check: build
🔇 Additional comments (3)
src/routes/docs/products/avatars/screenshots/+page.markdoc (3)
13-112: LGTM!The initial example section provides comprehensive SDK coverage with correct syntax for each platform. The Theme enum usage appropriately varies by SDK (Web uses
Theme.Light, Flutter usesTheme.light, Apple uses.light, Android Kotlin usesTheme.LIGHT, and React Native uses the string'light').
675-683: LGTM!The rate limits section clearly documents the constraints and provides helpful context about Server SDK behavior and SSR considerations.
685-696: LGTM!The use cases section effectively communicates practical applications for the Screenshots API, helping users understand the feature's value.
| | quality | integer | Screenshot quality. Accepts values between `0` to `100`. Defaults to keep existing image quality. | | ||
| | output | string | Output format type. Accepts `"jpeg"`, `"jpg"`, `"png"`, `"gif"`, or `"webp"`. Use `Output` enum in Web SDK. | |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, find the structure of the repository to understand where API code might be
git ls-files | head -20Repository: appwrite/website
Length of output: 409
🏁 Script executed:
# Search for Avatar API implementation or configuration
fd -t f "avatar" | grep -E "\.(ts|js|py|md)$" | head -20Repository: appwrite/website
Length of output: 141
🏁 Script executed:
# Search for references to quality and output parameters in the codebase
rg "quality.*output" -t ts -t js -t py -A 2 -B 2Repository: appwrite/website
Length of output: 42
🏁 Script executed:
# Search for API endpoint or service implementation related to avatars and screenshots
rg "screenshot" -t ts -t js -A 5 | head -50Repository: appwrite/website
Length of output: 42
🏁 Script executed:
# Read the avatars reference documentation
cat -n src/routes/docs/references/[version]/[platform]/[service]/descriptions/avatars.md | head -100Repository: appwrite/website
Length of output: 521
🏁 Script executed:
# Search for quality or output parameter specifications in the entire codebase
rg "quality" -t md -A 2 -B 2 | grep -E "(quality|default|output)" | head -30Repository: appwrite/website
Length of output: 764
🏁 Script executed:
# Look for the specific file under review to understand context
cat -n src/routes/docs/products/avatars/screenshots/+page.markdoc | sed -n '130,145p'Repository: appwrite/website
Length of output: 1701
🏁 Script executed:
# Search for Appwrite SDK or API documentation about avatar screenshots
rg "Screenshot" -t md -A 3 | head -40Repository: appwrite/website
Length of output: 1288
🏁 Script executed:
# Look for any configuration files that might have API defaults
rg "quality.*100\|output.*png\|default" -t ts -t js -B 2 -A 2 | head -50Repository: appwrite/website
Length of output: 42
🏁 Script executed:
# Search for API endpoint implementations or SDKs
fd -t f "avatar" | grep -v node_modules | xargs grep -l "quality\|output" 2>/dev/nullRepository: appwrite/website
Length of output: 141
🏁 Script executed:
# Look for environment or configuration that specifies defaults
rg "Screenshot" -t ts -A 5 -B 2 | head -60Repository: appwrite/website
Length of output: 42
🏁 Script executed:
# Search across all markdown files for Avatar API documentation
rg "quality.*100\|output.*format\|Screenshot" -t md -A 3 | head -60Repository: appwrite/website
Length of output: 42
🌐 Web query:
Appwrite Avatar API screenshot quality output format default values
💡 Result:
Short answer:
- Screenshot quality: integer 0–100; defaults to "keep existing image quality" (SDK examples use quality: -1 to leave default). [1][2]
- Output format: supported values jpeg / jpg / png / gif / webp. The docs list these options but do not specify a separate explicit default; SDK examples set output to JPG. [1][2]
Sources:
[1] Appwrite Avatars — Screenshots endpoint (params: quality, output).
[2] Appwrite Avatars reference (general endpoints; quality default / SDK examples).
🌐 Web query:
Appwrite documentation screenshot endpoint quality parameter default
💡 Result:
The screenshot (Avatars.getScreenshot) quality parameter defaults to "keep existing image quality" — in SDK examples this is represented by passing quality: -1. [1][2]
Sources:
[1] Appwrite Avatars — getScreenshot (server Node.js reference).
[2] Appwrite Avatars — client/web reference (avatars examples showing quality: -1).
Specify the default value for the output parameter.
The output parameter is missing its default value. Based on Appwrite's API behavior, the default is "jpg".
-| output | string | Output format type. Accepts `"jpeg"`, `"jpg"`, `"png"`, `"gif"`, or `"webp"`. Use `Output` enum in Web SDK. |
+| output | string | Output format type. Accepts `"jpeg"`, `"jpg"`, `"png"`, `"gif"`, or `"webp"`. Use `Output` enum in Web SDK. Defaults to `"jpg"`. |The quality parameter's default ("keep existing image quality") is correct per the Appwrite specification, though it could be clarified that this uses the server's default quality setting when not explicitly specified.
📝 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.
| | quality | integer | Screenshot quality. Accepts values between `0` to `100`. Defaults to keep existing image quality. | | |
| | output | string | Output format type. Accepts `"jpeg"`, `"jpg"`, `"png"`, `"gif"`, or `"webp"`. Use `Output` enum in Web SDK. | | |
| | quality | integer | Screenshot quality. Accepts values between `0` to `100`. Defaults to keep existing image quality. | | |
| | output | string | Output format type. Accepts `"jpeg"`, `"jpg"`, `"png"`, `"gif"`, or `"webp"`. Use `Output` enum in Web SDK. Defaults to `"jpg"`. | |
🤖 Prompt for AI Agents
In src/routes/docs/products/avatars/screenshots/+page.markdoc around lines 138
to 139, the table row for the `output` parameter lacks the default value; update
the `output` description to state the default is "jpg" (e.g., Accepts "jpeg",
"jpg", "png", "gif", or "webp"; defaults to "jpg"), and optionally clarify the
`quality` row to indicate its default means the server's existing image quality
will be preserved when not specified.
| val withLocation = avatars.getScreenshot( | ||
| url = "https://example.com", | ||
| latitude = 40.7128, | ||
| longitude = -74.0060, | ||
| accuracy = 100.0, | ||
| permissions = listOf("geolocation") | ||
| ) |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Appwrite Android Kotlin SDK accuracy parameter type
💡 Result:
I couldn't find a clear reference to an "accuracy" parameter in the Appwrite Android / Kotlin SDK docs or source. Can you paste the code or API call where you see "accuracy" (or tell me which service/method/file you’re referring to)? I’ll look up the exact parameter type once I have that.
🏁 Script executed:
# First, let's look at the full context of the file to see all SDK examples
cd src/routes/docs/products/avatars/screenshots && wc -l +page.markdocRepository: appwrite/website
Length of output: 77
🏁 Script executed:
# Search for other accuracy parameter usages in this file
rg "accuracy\s*=" src/routes/docs/products/avatars/screenshots/+page.markdoc -A 1 -B 1Repository: appwrite/website
Length of output: 147
🏁 Script executed:
# Read the geolocation section (lines 362-443)
sed -n '362,443p' src/routes/docs/products/avatars/screenshots/+page.markdocRepository: appwrite/website
Length of output: 1951
Use integer 100 for accuracy parameter in Android Kotlin example to match other SDKs.
The Android Kotlin example uses accuracy = 100.0 (Double), while the Web, Flutter, and Apple SDKs all consistently use accuracy: 100 (integer). Since Kotlin accepts both types, update the example to use 100 for consistency across all SDKs.
🤖 Prompt for AI Agents
In src/routes/docs/products/avatars/screenshots/+page.markdoc around lines 428
to 434, the Android Kotlin sample sets accuracy = 100.0 (a Double) while other
SDK examples use an integer; change the accuracy value to 100 (integer) to
maintain consistency across SDK docs and ensure Kotlin still accepts the value.
What does this PR do?
This pull request adds documentation and navigation support for a new "Screenshots" feature in the avatars product section. The most important changes are:
Documentation updates:
src/routes/docs/products/avatars/+page.markdoc, describing the ability to capture website screenshots with customizable browser settings and viewport configuration.Navigation updates:
src/routes/docs/products/avatars/+layout.sveltefor easier access to the new documentation.Test Plan
Not needed
Related PRs and Issues
N/A
Have you read the Contributing Guidelines on issues?
Yes.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.