Merge pull request #1499 from hey-api/docs/logos

docs: optimize Hey API logo size

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img width="150" height="150" src="https://heyapi.dev/logo.png" alt="Logo">
+  <img alt="Hey API logo" height="150" src="https://heyapi.dev/images/logo-150w.png" width="150">
   <h1 align="center"><b>OpenAPI TypeScript</b></h1>
   <p align="center">🚀 The OpenAPI to TypeScript codegen. Generate clients, SDKs, validators, and more.</p>
 </div>

docs/.vitepress/config/shared.ts

@@ -3,7 +3,33 @@ import { defineConfig, type HeadConfig } from 'vitepress';
 export default defineConfig({
   cleanUrls: true,
   head: [
-    ['link', { href: '/logo.png', rel: 'icon', type: 'image/png' }],
+    [
+      'link',
+      {
+        href: '/images/logo-16w.png',
+        rel: 'icon',
+        sizes: '16x16',
+        type: 'image/png',
+      },
+    ],
+    [
+      'link',
+      {
+        href: '/images/logo-32w.png',
+        rel: 'icon',
+        sizes: '32x32',
+        type: 'image/png',
+      },
+    ],
+    [
+      'link',
+      {
+        href: '/images/logo-48w.png',
+        rel: 'icon',
+        sizes: '48x48',
+        type: 'image/png',
+      },
+    ],
     ['meta', { content: 'website', property: 'og:type' }],
     ['meta', { content: 'en', property: 'og:locale' }],
     [
@@ -15,7 +41,7 @@ export default defineConfig({
       },
     ],
     ['meta', { content: 'OpenAPI TypeScript', property: 'og:site_name' }],
-    ['meta', { content: '/logo.png', property: 'og:image' }],
+    ['meta', { content: '/images/logo-640w.png', property: 'og:image' }],
     ['meta', { content: 'https://heyapi.dev', property: 'og:url' }],
     [
       'script',
@@ -33,7 +59,7 @@ export default defineConfig({
   },
   themeConfig: {
     externalLinkIcon: true,
-    logo: '/logo.png',
+    logo: '/images/logo-48w.png',
     search: {
       provider: 'local',
     },

docs/index.md

@@ -5,18 +5,18 @@ hero:
   name: High-quality tools for interacting with APIs
   tagline: Codegen for your TypeScript projects. Trusted more than 700k times each month to generate reliable API clients and SDKs.
   actions:
-    - theme: brand
+    - link: /openapi-ts/get-started
       text: Get Started
-      link: /openapi-ts/get-started
-    - theme: alt
+      theme: brand
+    - link: https://stackblitz.com/edit/hey-api-example?file=openapi-ts.config.ts,src%2Fclient%2Fschemas.gen.ts,src%2Fclient%2Fsdk.gen.ts,src%2Fclient%2Ftypes.gen.ts
       text: View Demo
-      link: https://stackblitz.com/edit/hey-api-example?file=openapi-ts.config.ts,src%2Fclient%2Fschemas.gen.ts,src%2Fclient%2Fsdk.gen.ts,src%2Fclient%2Ftypes.gen.ts
-    - theme: alt
+      theme: alt
+    - link: https://github.com/orgs/hey-api/discussions/1495
       text: Roadmap
-      link: https://github.com/orgs/hey-api/discussions/1495
+      theme: alt
   image:
-    src: /logo.png
-    alt: logo
+    alt: Hey API logo
+    src: /images/logo-640w.png
 
 features:
   - icon: <svg class="icon-openapi" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 32"><path d="M8.96 18.397H.515l.005.123.014.238.007.102.022.275.006.061.033.304.003.03.043.327c.098.677.243 1.343.437 1.999l.003.008.1.326.006.018.093.276.025.07.087.24.04.107.078.2.06.149.065.154.086.188.05.114.105.225.035.072.126.256.02.039.154.293.033.057 7.235-4.366a5.754 5.754 0 0 1-.528-1.885ZM.914 22.27l.002.007.273-.085-.275.078ZM11.034 22.275l-5.97 5.967.092.085.255.227.203.172.055.045.232.187.03.024.255.196a.066.066 0 0 1 .01.007l1.113.752.04.024.219.13.134.076.128.072.232.126.032.017.658.32 3.213-7.805a5.719 5.719 0 0 1-.934-.623l.003.001ZM10.415 21.683l-.186-.219-.154-.199-.165-.233-.154-.241-7.22 4.349.371.584.03.044.002.003.388.547.009.011.008.011.176.229.21.261.045.055.173.203.076.087.15.171.084.092.039.042.114.12.046.047.2.204 5.956-5.956-.195-.209-.003-.003ZM18.31 22.272l-.2.154.016.025 4.342 7.209.594-.41c.42-.31.827-.645 1.22-1.007l-5.949-5.947-.023-.024ZM21.92 30.003l.01-.006-.01.006Zm-.005.003ZM21.929 29.994l.057-.028-.001-.002-.056.033v-.003Zm-.01.009-.002.001.002-.001ZM21.916 30.006l-.011-.018.01.018Zm.004-.003.01-.005-.01.005Z" fill="#fff"></path><path d="m21.837 29.719-4.2-6.97-.25.139-.256.128a5.756 5.756 0 0 1-4.106.319l-.27-.095-.27-.095-3.207 7.788.024.009.024.009.007.003.615.235a14.262 14.262 0 0 0 3.007.708l.349.038.056.005.28.023.095.006.245.014.15.006.195.007.348.004c.788 0 1.575-.066 2.352-.196l.04-.006.246-.045.143-.027.145-.03.24-.053.044-.01a14.241 14.241 0 0 0 3.398-1.267l.209-.115.424-.238-.007-.02.01.018.014-.008.056-.034-.15-.25Zm-10.8-16.335.2-.155-.015-.024-4.343-7.206-.595.41c-.42.31-.827.645-1.218 1.006l5.948 5.945.024.024ZM4.654 7.808l-.395.413c-.44.476-.841.971-1.203 1.491l-.052.075-.121.178-.123.188-.045.068a14.135 14.135 0 0 0-2.2 7.035l-.007.286-.005.285h8.424l.013-.285.016-.286a5.716 5.716 0 0 1 1.27-3.068c.058-.073.128-.142.192-.212.065-.07.124-.144.192-.212L4.654 7.808Zm17.38-2.09L22 5.695l-.224-.132-.13-.075-.132-.073-.228-.123-.036-.019a14.74 14.74 0 0 0-1.52-.686l-.04-.015-.342-.124a14.216 14.216 0 0 0-2.839-.673l-.118-.016-.119-.013-.228-.025-.064-.006-.273-.023-.342-.02-.124-.006v8.444c.433.045.862.138 1.279.279l6.216-6.211a13.96 13.96 0 0 0-.703-.461h.002ZM7.363 5.692l.147.244-.147-.244Zm0 0L7.36 5.69l.004.002Z" fill="#fff"></path><path d="m14.388 3.664-.285.005a14.24 14.24 0 0 0-1.78.184l-.04.007-.247.044-.143.027-.145.03-.24.053-.043.01a14.252 14.252 0 0 0-3.4 1.268l-.705.398v.001l4.349 7.219.25-.14a5.727 5.727 0 0 1 2.141-.657l.285-.022s.19-.01.286-.01V3.658c-.095 0-.19.003-.285.005h.002ZM28.827 17.131l-.014-.227-.007-.113-.022-.267-.006-.07-.032-.297-.002-.024-.002-.012-.043-.32-.001-.01a14.164 14.164 0 0 0-.436-1.992l-.003-.013-.094-.304-.013-.04-.091-.272-.026-.074-.086-.235-.043-.111-.075-.194-.063-.153-.063-.15-.083-.191-.049-.108-.107-.228-.033-.069-.128-.259-.018-.035-.149-.286c-.002-.003-.003-.007-.006-.01a14.217 14.217 0 0 0-.806-1.308l-6.217 6.218c.14.415.233.844.278 1.279h8.444l-.004-.125ZM20.42 17.828l-.013.285-.016.286a5.709 5.709 0 0 1-1.27 3.068c-.057.073-.128.142-.192.212s-.123.144-.191.212l5.956 5.956c.067-.068.13-.138.197-.206l.197-.207c.44-.477.843-.977 1.206-1.496l.043-.06.13-.193.113-.173.057-.084a14.13 14.13 0 0 0 2.196-7.03l.007-.285.005-.286H20.42Z" fill="#fff"></path></svg>

docs/scripts/optimize-images.js

@@ -3,12 +3,53 @@ import path from 'node:path';
 
 import sharp from 'sharp';
 
-const inputDir = 'public/raw';
-const outputDir = 'public/images';
+const allowedImageExtensions = ['.png', '.jpg', '.jpeg', '.webp'];
+const images = [
+  {
+    sizes: [
+      {
+        formats: ['png'],
+        width: 16,
+      },
+      {
+        formats: ['png'],
+        width: 32,
+      },
+      {
+        formats: ['png'],
+        width: 48,
+      },
+      {
+        formats: ['png'],
+        width: 150,
+      },
+      {
+        formats: ['png'],
+        width: 640,
+      },
+    ],
+    source: 'logo.png',
+  },
+  {
+    sizes: [
+      {
+        formats: ['jpeg', 'webp'],
+        width: 480,
+      },
+      {
+        formats: ['webp'],
+        width: 768,
+      },
+      {
+        formats: ['png', 'webp'],
+        width: 1200,
+      },
+    ],
+    source: 'stainless-logo-wordmark.png',
+  },
+];
 
-const supportedExtensions = ['.png', '.jpg', '.jpeg', '.webp'];
-const sizes = [480, 768, 1200];
-const formats = ['png', 'webp', 'jpeg'];
+const outputDir = 'public/images';
 
 if (fs.existsSync(outputDir)) {
   fs.rmSync(outputDir, { force: true, recursive: true });
@@ -17,22 +58,23 @@ if (fs.existsSync(outputDir)) {
 fs.mkdirSync(outputDir, { recursive: true });
 
 async function processImages() {
-  const files = fs.readdirSync(inputDir);
-
-  for (const file of files) {
-    const inputPath = path.join(inputDir, file);
-    const ext = path.extname(file).toLowerCase();
-    const baseName = path.basename(file, ext);
+  for (const image of images) {
+    const inputPath = path.join('public', image.source);
+    const ext = path.extname(image.source).toLowerCase();
+    const name = path.basename(image.source, ext);
 
-    if (!supportedExtensions.includes(ext)) {
+    if (!allowedImageExtensions.includes(ext)) {
       continue;
     }
 
-    console.log(`Processing ${file}...`);
-
-    for (const size of sizes) {
+    for (const imageSize of image.sizes) {
+      const size = typeof imageSize === 'object' ? imageSize.width : imageSize;
+      const formats =
+        typeof imageSize === 'object'
+          ? imageSize.formats || image.formats
+          : image.formats;
       for (const format of formats) {
-        const outputFileName = `${baseName}-${size}w.${format}`;
+        const outputFileName = `${name}-${size}w.${format}`;
         const outputPath = path.join(outputDir, outputFileName);
 
         let image = sharp(inputPath).resize(size).toFormat(format, {
@@ -44,12 +86,9 @@ async function processImages() {
         }
 
         await image.toFile(outputPath);
-
-        console.log(`Generated: ${outputFileName}`);
       }
     }
   }
-  console.log('✅ Image optimization complete!');
 }
 
 processImages().catch((err) => {

packages/client-axios/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img width="150" height="150" src="https://heyapi.dev/logo.png" alt="Logo">
+  <img alt="Hey API logo" height="150" src="https://heyapi.dev/images/logo-150w.png" width="150">
   <h1 align="center"><b>Axios Client</b></h1>
   <p align="center">🚀 Axios client for `@hey-api/openapi-ts` codegen.</p>
 </div>

packages/client-fetch/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img width="150" height="150" src="https://heyapi.dev/logo.png" alt="Logo">
+  <img alt="Hey API logo" height="150" src="https://heyapi.dev/images/logo-150w.png" width="150">
   <h1 align="center"><b>Fetch API Client</b></h1>
   <p align="center">🚀 Fetch API client for `@hey-api/openapi-ts` codegen.</p>
 </div>

packages/openapi-ts/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img width="150" height="150" src="https://heyapi.dev/logo.png" alt="Logo">
+  <img alt="Hey API logo" height="150" src="https://heyapi.dev/images/logo-150w.png" width="150">
   <h1 align="center"><b>OpenAPI TypeScript</b></h1>
   <p align="center">🚀 The OpenAPI to TypeScript codegen. Generate clients, SDKs, validators, and more.</p>
 </div>