Merge branch 'main' into docs/fix-headless-login-cicd-article

Author: ebenezerdon

.github/workflows/tests.yml

@@ -77,3 +77,27 @@ jobs:
                   APPWRITE_API_KEY_INIT: ${{ secrets.APPWRITE_API_KEY_INIT }}
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
               run: bun run build
+    assets:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+              with:
+                  ref: ${{ github.event.pull_request.head.sha }}
+            - uses: oven-sh/setup-bun@v2
+              with:
+                  bun-version: 1.3
+            - name: Install dependencies
+              run: bun install --frozen-lockfile
+            - name: Optimize assets
+              run: CI=true bun run optimize
+            - name: Check for uncommitted changes
+              run: |
+                  if ! git diff --exit-code; then
+                    echo "Assets are not optimized! The following changes were detected:"
+                    echo ""
+                    git diff
+                    echo ""
+                    echo "Please run 'bun run optimize' locally and commit the changes."
+                    exit 1
+                  fi
+                  echo "✅ All assets are properly optimized."

.gitignore

@@ -1,3 +1,4 @@
+assets/**/*.optimized
 .DS_Store
 node_modules
 /build

scripts/optimize-assets.js

@@ -11,9 +11,7 @@ const exceptions = ['assets/'];
  * @type {{
  *     jpeg: sharp.JpegOptions,
  *     webp: sharp.WebpOptions,
- *     png: sharp.PngOptions,
- *     gif: sharp.GifOptions,
- *     avif: sharp.AvifOptions
+ *     png: sharp.PngOptions
  * }}
  */
 const config = {
@@ -25,12 +23,6 @@ const config = {
     },
     png: {
         quality: 100
-    },
-    gif: {
-        quality: 100
-    },
-    avif: {
-        lossless: true
     }
 };
 
@@ -67,27 +59,84 @@ function get_relative_path(file) {
 }
 
 async function main() {
+    console.log(
+        'This script runs for ~5 mins. It runs silently if all files are already optimized.'
+    );
+
     for (const file of walk_directory(join(__dirname, '../static'))) {
         const relative_path = get_relative_path(file);
-        const is_animated = file.endsWith('.gif');
         if (!is_image(file)) continue;
         if (exceptions.some((exception) => relative_path.startsWith(exception))) continue;
 
-        const image = sharp(file, {
-            animated: is_animated
-        });
-        const size_before = (await image.toBuffer()).length;
-        const meta = await image.metadata();
+        const image = sharp(file);
+
+        let meta;
+        try {
+            meta = await image.metadata();
+        } catch (err) {
+            const msg = `${relative_path} failed: ${err.message}`;
+            if (Bun.env.CI) {
+                throw new Error(msg);
+            }
+
+            console.log(msg);
+            continue;
+        }
+
+        if (Bun.env.CI && (meta.width > 1980 || meta.height > 1980)) {
+            const msg = `${relative_path} is too large: ${meta.width}x${meta.height}`;
+            throw new Error(msg);
+        }
+
         const buffer = await image[meta.format](config[meta.format])
             .resize(resize_config)
             .toBuffer();
-        const size_after = buffer.length;
 
-        if (size_after >= size_before) continue;
+        await sharp(buffer).toFile(file + '.optimized');
 
-        console.log(relative_path);
+        const file_before = Bun.file(file);
+        await file_before.arrayBuffer();
+        const size_before = file_before.size;
 
-        await sharp(buffer).toFile(file);
+        const file_after = Bun.file(file + '.optimized');
+        const file_after_contents = await file_after.arrayBuffer();
+        const size_after = file_after.size;
+
+        const size_diff = size_before - size_after;
+        if (size_diff <= 0) {
+            await Bun.file(file + '.optimized').delete();
+            continue;
+        }
+
+        const size_diff_percent = size_diff / size_before;
+        if (size_diff_percent < 0.2) {
+            await Bun.file(file + '.optimized').delete();
+            continue;
+        }
+
+        // Atomic rewrite
+        try {
+            await Bun.write(file, file_after_contents);
+            await Bun.file(file + '.optimized').delete();
+        } catch (error) {
+            try {
+                await Bun.file(file + '.optimized').delete();
+            } catch {
+                // Silenced
+            }
+
+            throw new Error(`Failed to replace ${relative_path}: ${error.message}`);
+        }
+
+        const diff_verbose = Math.round(size_diff_percent * 100);
+        console.log(`✅ ${relative_path} has been optimized (-${diff_verbose}%)`);
+
+        if (Bun.env.CI) {
+            console.log(
+                `Stopping optimization in CI/CD env, as one diff is enough to make test fail`
+            );
+            break;
+        }
     }
 }
 

src/lib/components/BlogCta.svelte

@@ -2,18 +2,30 @@
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
     import { Button } from '$lib/components/ui';
 
-    export let heading: string = 'Start building with Appwrite today';
-    export let label: string = 'Get started';
+    let {
+        heading = 'Start building with Appwrite today',
+        label = 'Get started',
+        description = undefined,
+        href = getAppwriteDashboardUrl(),
+        event = 'blog-cta-get_started_btn-click'
+    }: {
+        heading?: string;
+        label?: string;
+        description?: string;
+        href?: string;
+        event?: string;
+    } = $props();
 </script>
 
 <div
-    class="bg relative mt-12 -mb-6 flex min-h-[12rem] items-center justify-center overflow-hidden border-t border-[hsl(var(--web-color-subtle))] py-12"
+    class="bg relative mt-12 -mb-6 flex min-h-48 items-center justify-center overflow-hidden border-t border-[hsl(var(--web-color-subtle))] py-12"
 >
     <div class="flex max-w-3xs flex-col items-center justify-center gap-5 text-center">
         <h2 class="text-label text-primary font-aeonik-pro">{heading}</h2>
-        <Button href={getAppwriteDashboardUrl()} event="blog-cta-get_started_btn-click"
-            >{label}</Button
-        >
+        {#if description}
+            <p class="text-main-body text-muted-foreground">{description}</p>
+        {/if}
+        <Button {href} {event}>{label}</Button>
     </div>
 </div>