Merge branch 'main' into fix-SER-1068-search-console-issues

Author: HarshMN2345

src/routes/(marketing)/(components)/developers-toolkit.svelte

@@ -52,17 +52,19 @@
         </p>
     </div>
 
-    <div class="mt-6 flex flex-wrap items-center justify-center gap-0">
+    <div
+        class="mt-6 flex flex-col items-center justify-center gap-2 lg:flex-row lg:flex-wrap lg:gap-0"
+    >
         <!-- Build group -->
         <div
-            class="text-primary flex h-10 items-center gap-4 rounded-full border border-dashed border-black/8 bg-white p-1 text-sm"
+            class="text-primary flex h-10 w-full items-center gap-4 rounded-full border border-dashed border-black/8 bg-white p-1 text-sm lg:w-auto"
         >
             <span class="text-eyebrow text-secondary font-aeonik-fono ml-3 uppercase">Build</span>
             <div class="flex h-full w-full justify-between gap-2">
                 {#each build as product}
                     <a
                         href={product.href}
-                        class="bg-smooth hover:bg-smooth/50 flex h-full w-fit items-center justify-center gap-2 rounded-full px-3 backdrop-blur-lg transition-opacity"
+                        class="bg-smooth hover:bg-smooth/50 flex h-full w-fit items-center justify-center gap-2 rounded-full px-0.5 backdrop-blur-lg transition-opacity sm:px-1 md:px-2 lg:px-3"
                     >
                         <span
                             class="text-primary text-caption flex items-center justify-center gap-1 font-medium"
@@ -73,16 +75,15 @@
                                 alt={product.label}
                                 class="size-6"
                             />
-                            {product.label}
+                            <span class="hidden lg:inline">{product.label}</span>
                         </span>
                     </a>
                 {/each}
             </div>
         </div>
-        <!-- dashed gap between groups (horizontal) -->
         <div
             aria-hidden="true"
-            class="mx-0 h-px w-6 self-center border-t border-dashed border-black/8"
+            class="mx-0 hidden h-px w-6 self-center border-t border-dashed border-black/8 lg:block"
         ></div>
         <!-- Deploy group -->
         <div
@@ -93,7 +94,7 @@
                 {#each deploy as product}
                     <a
                         href={product.href}
-                        class="bg-smooth hover:bg-smooth/50 flex h-full w-fit items-center justify-center gap-2 rounded-full px-3 backdrop-blur-lg transition-opacity"
+                        class="bg-smooth hover:bg-smooth/50 flex h-full w-fit items-center justify-center gap-2 rounded-full px-0.5 backdrop-blur-lg transition-opacity sm:px-1 md:px-2 lg:px-3"
                     >
                         <span
                             class="text-primary text-caption flex items-center justify-center gap-1 font-medium"
@@ -104,7 +105,7 @@
                                 alt={product.label}
                                 class="size-6"
                             />
-                            {product.label}
+                            <span class="hidden lg:inline">{product.label}</span>
                         </span>
                     </a>
                 {/each}

src/routes/assets/+page.svelte

@@ -360,7 +360,7 @@
                                     Use these product visuals to enhance your articles,
                                     presentations, and content related to Appwrite.
                                 </p>
-                                <div class="mt-5 grid grid-cols-2 gap-8">
+                                <div class="mt-5 grid grid-cols-1 gap-8 sm:grid-cols-2">
                                     <div class="media-wrapper">
                                         <img
                                             class="web-u-border-radius-8 web-u-media-ratio-16-9 w-full"
@@ -542,8 +542,10 @@
                 </main>
             </div>
 
-            <FooterNav />
-            <MainFooter />
+            <div class="footer-wrapper">
+                <FooterNav />
+                <MainFooter />
+            </div>
         </div>
     </TocRoot>
 </Main>
@@ -580,7 +582,8 @@
         }
 
         header,
-        main {
+        main,
+        .footer-wrapper {
             padding-left: var(--spacing-5, 1.25rem);
             padding-right: var(--spacing-5, 1.25rem);
         }

src/routes/blog/post/announcing-screenshots-api/+page.markdoc

@@ -0,0 +1,103 @@
+---
+layout: post
+title: "Announcing Screenshots API: Generate pixel-perfect webpage screenshots on demand"
+description: Appwrite's new Screenshots API lets you generate screenshots of any public webpage with a single API call. Control browser environment, device settings, locale, and more without needing to configure your own headless browser infrastructure.
+date: 2026-01-21
+cover: /images/blog/announcing-screenshots-api/cover.png
+timeToRead: 5
+author: aditya-oberai
+category: announcement
+featured: false
+callToAction: true
+---
+
+Capturing consistent, high-quality screenshots of web pages is harder than it should be.
+
+What starts as a simple requirement, “render this page as an image,” quickly turns into a fragile setup of headless browsers, custom scripts, and environment-specific workarounds. Fonts render differently across machines. Animations race your screenshot timer. Cookie banners and permission prompts block content. Pages behave one way locally and another in CI. Keeping screenshots reliable across devices, locales, and time zones often means babysitting a complex Playwright or Puppeteer pipeline that breaks the moment a browser update lands.
+
+Most teams do not want to run their own headless browser infrastructure. They just want the result.
+
+Today, we are excited to announce the **Screenshots API**, a new addition to **Appwrite Avatars**, that lets you generate fully customizable webpage screenshots with a single API call, without maintaining any headless browser infrastructure.
+
+# Capture webpages exactly as users see them
+
+The Screenshots API allows you to capture screenshots of any public webpage while controlling the browser environment in which it is rendered.
+
+With one request, you can customize:
+
+- Browser viewport size and device scale
+- Light or dark theme rendering
+- Full-page or viewport-only screenshots
+- Custom headers, user agents and locales
+- Timezone and geolocation simulation
+- Touch support and browser permissions
+- Output format, dimensions, and quality
+
+This means your screenshots are no longer best guesses. They are accurate representations of real user experiences.
+
+# Built for real-world developer workflows
+
+Screenshots are not just images. They are an essential building block for modern developer workflows.
+
+The Screenshots API is designed for use cases like:
+
+- Generating visual documentation automatically
+- Creating rich link previews for apps and dashboards
+- Running QA checks across devices and browsers
+- Validating responsive and localized layouts
+- Archiving web pages for compliance and records
+- Powering automated reports and visual dashboards
+
+Instead of maintaining your own headless browser infrastructure, you can rely on a managed, consistent API that scales with your application.
+
+# Simple API, powerful customization
+
+Getting started with the Screenshots API is as simple as providing a URL.
+
+```js
+import { Client, Avatars } from "appwrite";
+
+const client = new Client()
+  .setEndpoint("https://<REGION>.cloud.appwrite.io/v1")
+  .setProject("<PROJECT_ID>");
+
+const avatars = new Avatars(client);
+
+const screenshot = avatars.getScreenshot({
+  url: "https://appwrite.io"
+});
+
+console.log(screenshot);
+```
+
+From there, you can dial in exactly how the page should be rendered.
+
+Capture mobile, tablet, or desktop views. Enable full-page scrolling. Render pages in dark mode. Simulate a specific country, language, or timezone. Even pre-grant browser permissions to avoid blocked or degraded states.
+
+# Simulate browsers, devices, and locations
+
+Modern web apps behave differently depending on where and how they are accessed. The Screenshots API lets you reflect that reality.
+
+You can:
+
+- Test responsive layouts across viewport sizes
+- Verify localized content using different locales and timezones
+- Capture region-specific content with geolocation simulation
+- Render pages as touch devices or desktop browsers
+- Validate pages that depend on browser permissions
+
+This makes it easier to test, document, and ship with confidence.
+
+# Part of Appwrite Avatars
+
+The Screenshots API lives alongside other Avatars endpoints, making it easy to integrate into existing Appwrite projects. Whether you are generating previews, reports, or automated documentation, screenshots become just another API resource you can depend on.
+
+# Available now
+
+The Screenshots API is available today as part of Appwrite Avatars. You can start generating screenshots immediately using the Appwrite SDKs and REST API.
+
+This API is already being used in production by [Imagine](https://imagine.dev) to generate real-time preview screenshots for projects built on the platform, validating it against real user traffic.
+
+To get started, head over to the [documentation](/docs/products/avatars/screenshots) and try it out in your next project.
+
+As always, we would love to see what you build with it.