feat: Support for Server-Side PNG Rasterization (/api/streak/png) (JhaSourav07#1205)

## Description — What does this PR do? Which issue does it fix?
This PR implements server-side PNG Rasterization by introducing a new
endpoint at `/api/streak/png` that returns a PNG buffer image instead of
an SVG. It leverages the `@resvg/resvg-js` library for accurate headless
SVG-to-PNG conversion without relying on browser rendering.

Fixes JhaSourav07#980

## Pillar — Which contribution pillar does this fall under?
- [x] 🚀 New Feature
- [ ] 🐛 Bug Fix
- [ ] 🎨 New Theme Design
- [ ] 📐 Geometric SVG Improvement
- [ ] ⏱️ Timezone Logic Optimization
- [ ] 🧹 Other (Bug fix, refactoring, docs)

## Checklist — Have you ticked off the quality checklist?
- [x] I have read the CONTRIBUTING.md guidelines.
- [x] I have added tests that prove my fix is effective or that my
feature works.
- [x] New and existing unit tests pass locally with my changes.
- [x] I have kept the scope of my changes strictly related to the issue.

Author: JhaSourav07

app/api/streak/png/route.test.ts

@@ -0,0 +1,94 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { GET } from './route';
+import { GET as getStreakSvg } from '../route';
+import { NextResponse } from 'next/server';
+
+// Mock the core route
+vi.mock('../route', () => ({
+  GET: vi.fn(),
+}));
+
+// Mock resvg-js
+vi.mock('@resvg/resvg-js', () => {
+  return {
+    Resvg: class {
+      constructor() {
+        if ((global as any).throwResvgError) {
+          throw new Error('Resvg crash');
+        }
+      }
+      render() {
+        return {
+          asPng: () => Buffer.from('mock-png-data'),
+        };
+      }
+    },
+  };
+});
+
+describe('PNG Route', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('converts SVG to PNG successfully', async () => {
+    const mockRequest = new Request('http://localhost:3000/api/streak/png?user=testuser');
+
+    // Setup mock SVG response
+    const mockSvgResponse = new NextResponse('<svg>test</svg>', {
+      status: 200,
+      headers: {
+        'Content-Type': 'image/svg+xml',
+        'Cache-Control': 'public, max-age=3600',
+      },
+    });
+    vi.mocked(getStreakSvg).mockResolvedValue(mockSvgResponse);
+
+    const response = await GET(mockRequest);
+
+    expect(response.status).toBe(200);
+    expect(response.headers.get('Content-Type')).toBe('image/png');
+    expect(response.headers.get('Cache-Control')).toBe('public, max-age=3600');
+
+    // Check if body contains buffer
+    const buffer = Buffer.from(await response.arrayBuffer());
+    expect(buffer.toString()).toBe('mock-png-data');
+  });
+
+  it('returns errors from the base route directly', async () => {
+    const mockRequest = new Request('http://localhost:3000/api/streak/png');
+
+    const mockErrorResponse = NextResponse.json({ error: 'Invalid parameters' }, { status: 400 });
+    vi.mocked(getStreakSvg).mockResolvedValue(mockErrorResponse);
+
+    const response = await GET(mockRequest);
+
+    expect(response.status).toBe(400);
+    const data = await response.json();
+    expect(data.error).toBe('Invalid parameters');
+  });
+
+  it('handles SVG conversion errors', async () => {
+    const mockRequest = new Request('http://localhost:3000/api/streak/png?user=testuser');
+
+    const mockSvgResponse = new NextResponse('<svg>invalid</svg>', {
+      status: 200,
+      headers: {
+        'Content-Type': 'image/svg+xml',
+      },
+    });
+    vi.mocked(getStreakSvg).mockResolvedValue(mockSvgResponse);
+
+    // Force an error in Resvg
+    (global as any).throwResvgError = true;
+
+    const response = await GET(mockRequest);
+
+    (global as any).throwResvgError = false;
+
+    expect(response.status).toBe(500);
+    const data = await response.json();
+    expect(data.error).toBe('Failed to convert SVG to PNG');
+  });
+});

app/api/streak/png/route.ts

@@ -0,0 +1,48 @@
+import { GET as getStreakSvg } from '../route';
+import { Resvg } from '@resvg/resvg-js';
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  // Call the original endpoint which returns the SVG text
+  const response = await getStreakSvg(request);
+
+  if (!response.ok || response.headers.get('Content-Type') !== 'image/svg+xml') {
+    // Return errors as is
+    return response;
+  }
+
+  const svgText = await response.text();
+
+  try {
+    const resvg = new Resvg(svgText, {
+      font: {
+        loadSystemFonts: true,
+      },
+      fitTo: {
+        mode: 'original',
+      },
+    });
+
+    const pngData = resvg.render();
+    const pngBuffer = pngData.asPng();
+
+    // Preserve the original cache headers
+    const cacheControl = response.headers.get('Cache-Control');
+
+    const headers = new Headers();
+    headers.set('Content-Type', 'image/png');
+    if (cacheControl) {
+      headers.set('Cache-Control', cacheControl);
+    }
+
+    return new NextResponse(pngBuffer as unknown as BodyInit, {
+      status: 200,
+      headers,
+    });
+  } catch (err) {
+    return NextResponse.json(
+      { error: 'Failed to convert SVG to PNG', details: String(err) },
+      { status: 500 }
+    );
+  }
+}

next.config.ts

@@ -3,7 +3,7 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   // Prevent Turbopack from bundling next/og through its shared module context,
   // which causes the "Next.js package not found" HMR panic on dynamic routes.
-  serverExternalPackages: ['next/og'],
+  serverExternalPackages: ['next/og', '@resvg/resvg-js'],
   // Allow the local network IP to access dev resources without cross-origin warnings
   allowedDevOrigins: ['172.31.128.1'],
   devIndicators: false,

package-lock.json

@@ -24,6 +24,7 @@
     "*.{md,css,json,yml,yaml}": "prettier --write"
   },
   "dependencies": {
+    "@resvg/resvg-js": "^2.6.2",
     "@tailwindcss/postcss": "^4.2.2",
     "@vercel/analytics": "^1.6.1",
     "framer-motion": "^12.38.0",