* fix: optimize PageSpeed Insights performance This commit addresses several PageSpeed Insights issues to improve the performance score from 56 to a target of 90+. Changes: - Add SWC config to output modern ES2022 JavaScript, eliminating unnecessary polyfills (~12 KiB savings) - Convert vocalinux.png to WebP format (17KB vs 207KB - 92% reduction) - Add OptimizedImage component with WebP/PNG fallback support - Add _headers file for proper static asset caching (1 year cache for immutable assets) - Configure Next.js with optimizePackageImports for framer-motion and lucide-react - Fix heading hierarchy issue (Quick Install h3 -> h2) - Add console.log removal in production builds Expected improvements: - Image delivery: ~41 KiB savings - Legacy JavaScript: ~12 KiB savings - Cache lifetime: 754 KiB proper caching - Accessibility score: 98 -> 100 (heading order fix) * test: add coverage for PageSpeed optimization Add comprehensive test suite for PageSpeed Insights optimization changes: - WebP image loading tests (optimized-image.tsx) - next/image component configuration tests (next.config.js) - _headers file generation and cache header tests - Lazy loading behavior tests Includes: - Jest configuration with TypeScript support - React Testing Library setup - 54 test cases covering all PageSpeed optimization features - Build verification All tests pass: npm run test Build passes: npm run build * ci: trigger workflow * ci: trigger workflow run * ci: trigger workflow
34 lines
2.8 KiB
TypeScript
34 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import Image from "next/image";
|
|
|
|
// Re-export from optimized-image component for backward compatibility
|
|
export { VocalinuxLogo } from "./optimized-image";
|
|
|
|
// Legacy export - use VocalinuxLogo from optimized-image instead
|
|
export const VocalinuxLogoLegacy: React.FC<{ className?: string }> = ({ className = "" }) => {
|
|
return (
|
|
<Image
|
|
src="/vocalinux.png"
|
|
alt="Vocalinux Logo"
|
|
width={36}
|
|
height={36}
|
|
className={className}
|
|
priority
|
|
/>
|
|
);
|
|
};
|
|
|
|
// Alternative: Inline SVG version for when color customization is needed
|
|
export const VocalinuxLogoInline: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
|
|
return (
|
|
<svg width="36" height="36" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
|
<path d="M243.33 120.92c-58.29 1.8-107.88 51.39-107.88 110.12v100.24c0 20.87 5.16 39.95 14.02 57.07l-44.12 44.12c-3.27 3.27-3.27 8.58 0 11.86 1.64 1.64 3.79 2.46 5.93 2.46 2.14 0 4.29-.82 5.93-2.46l43.39-43.39a107.388 107.388 0 0074.73 30.13h.01c20.94 0 40.83-6.05 57.99-16.52 23.86-14.53 42.22-37.58 49.7-64.48.8-2.89-1.18-5.8-4.17-6.14-2.99-.33-5.57 1.79-5.75 4.8-2.91 48.11-43.05 85.82-91.5 85.82h-.76c-50.83-1.57-93.56-42.09-93.56-93.67V231.04c0-51.11 41.57-93.67 92.68-93.67 46.36 0 86.43 35.37 93.54 80.62.41 2.64 2.69 4.56 5.38 4.5 2.67-.06 4.84-2.1 5.13-4.75 7.65-71.11-46.43-98.62-99.69-96.82z" fill="currentColor" />
|
|
<path d="M299.33 256.96c0-2.36-1.91-4.27-4.27-4.27s-4.27 1.91-4.27 4.27v62.09c0 2.36 1.91 4.27 4.27 4.27s4.27-1.91 4.27-4.27v-62.09z" fill="currentColor" />
|
|
<path d="M361.42 164.01v-17.06c0-2.36-1.91-4.27-4.27-4.27s-4.27 1.91-4.27 4.27v17.06c0 2.36 1.91 4.27 4.27 4.27s4.27-1.91 4.27-4.27zM336.62 164.01v-17.06c0-2.36-1.91-4.27-4.27-4.27s-4.27 1.91-4.27 4.27v17.06c0 2.36 1.91 4.27 4.27 4.27s4.27-1.91 4.27-4.27zM311.82 164.01v-17.06c0-2.36-1.91-4.27-4.27-4.27s-4.27 1.91-4.27 4.27v17.06c0 2.36 1.91 4.27 4.27 4.27s4.27-1.91 4.27-4.27z" fill="currentColor" />
|
|
<path d="M404.61 164.01c0-28.19-11.08-38.24-11.08-38.24-5.54-5.54-12.75-8.31-20-8.31s-14.46 2.77-20 8.31l-7.65 7.65-7.65-7.65c-11.04-11.04-28.96-11.04-40 0l-7.65 7.65-7.65-7.65c-11.04-11.04-28.96-11.04-40 0-11.08 11.08-11.08 28.92 0 40l47.65 47.57v44.62c0 14.15 11.51 25.65 25.65 25.65 14.15 0 25.65-11.51 25.65-25.65v-44.62l47.65-47.57c5.54-5.54 8.31-12.75 8.31-20s-2.77-14.46-8.31-20c-1.67-1.67-1.67-4.38 0-6.04 10.88 4.95 20.73 13.84 20.73 24.27zm-80.82 84.97v19.07c0 9.44-7.68 17.11-17.11 17.11s-17.11-7.67-17.11-17.11v-19.07l17.11 17.11 17.11-17.11zm24.27-48.27l-41.38 41.38L265.3 200.7c-7.37-7.37-7.37-19.32 0-26.69 7.37-7.37 19.32-7.37 26.69 0l14.69 14.69 14.69-14.69c3.56-3.56 8.3-5.52 13.34-5.52s9.78 1.96 13.35 5.52a4.233 4.233 0 006.04 0c3.56-3.56 8.3-5.52 13.34-5.52s9.78 1.96 13.34 5.52c7.37 7.37 7.37 19.32 0 26.69z" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
};
|