feat: add apple icons

Merge pull request #12 from dually8/add-apple-icons

package.json

@@ -13,23 +13,26 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "test:report": "playwright show-report",
-    "precommit": "npm run clean && npm run astro:check && npm run test:e2e && npm run build"
+    "precommit": "npm run clean && npm run astro:check && npm run test:e2e && npm run build",
+    "generate-images": "tsx ./scripts/generate-apple-icons.ts ./public/img/avatar.png ./public/img/"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^4.0.2",
+    "@astrojs/mdx": "^4.0.3",
     "@astrojs/rss": "^4.0.10",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/svelte": "^7.0.1",
+    "@astrojs/svelte": "^7.0.2",
     "@picocss/pico": "^2.0.6",
-    "astro": "^5.0.5",
+    "astro": "^5.1.1",
     "dayjs": "^1.11.13",
     "svelte": "^5.14.0",
     "typescript": "^5.7.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.49.1",
     "@types/node": "^22.10.2",
-    "rimraf": "^6.0.1"
+    "rimraf": "^6.0.1",
+    "sharp": "^0.33.5",
+    "tsx": "^4.19.2"
   }
 }

scripts/generate-apple-icons.ts

@@ -0,0 +1,60 @@
+import sharp from "sharp";
+import fs from "node:fs/promises";
+import path from "node:path";
+
+const ICON_SIZES = [
+  { size: 180, name: "apple-touch-icon.png" }, // iPhone Retina
+  { size: 167, name: "apple-touch-icon-167x167.png" }, // iPad Retina
+  { size: 152, name: "apple-touch-icon-152x152.png" }, // iPad
+  { size: 120, name: "apple-touch-icon-120x120.png" }, // iPhone
+];
+
+async function generateImages(imagePath: string, outputDir: string) {
+  try {
+    await fs.mkdir(outputDir, { recursive: true });
+    const image = sharp(imagePath);
+    const metadata = await image.metadata();
+    const maxSize = Math.max(...ICON_SIZES.map((size) => size.size));
+    if (metadata.width! < maxSize || metadata.height! < maxSize) {
+      throw new Error("Image is too small");
+    }
+    const generatePromises = ICON_SIZES.map(async ({ size, name }) => {
+      const outputPath = path.join(outputDir, name);
+      await image
+        .clone()
+        .resize(size, size, {
+          fit: "cover",
+          position: "center",
+        })
+        .toFormat("png")
+        .toFile(outputPath);
+      console.log(`Generated: ${name} (${size}x${size})`);
+    });
+    await Promise.all(generatePromises);
+    console.log("All images generated successfully");
+    const metaTags = ICON_SIZES.map(({ size, name }) => {
+      return `<link rel="apple-touch-icon" sizes="${size}x${size}" href={new URL('path/to/${name}', Astro.url)} />`;
+    }).join("\n");
+    console.log("-- COPY AND PASTE THESE META TAGS INTO BaseHead.astro! --");
+    console.log(metaTags);
+    console.log("-- BE SURE TO REPLACE \"path/to/\" WITH THE REAL PATH --");
+    console.log("-- END --");
+  } catch (e: Error | unknown) {
+    console.error(
+      "Failed to generate images",
+      (e as Error)?.message ?? "Unknown error",
+    );
+  }
+}
+// Check if correct arguments are provided
+if (process.argv.length !== 4) {
+  console.log(
+    "Usage: tsx generate-apple-icons.ts path/to/image.png path/to/outputDir",
+  );
+  process.exit(1);
+}
+
+const inputPath = process.argv[2];
+const outputDir = process.argv[3];
+
+generateImages(inputPath, outputDir);

src/components/BaseHead.astro

@@ -6,9 +6,9 @@ import '../styles/global.css';
 import '@picocss/pico/css/pico.indigo.min.css';
 
 interface Props {
-	title: string;
-	description: string;
-	image?: string;
+  title: string;
+  description: string;
+  image?: string;
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
@@ -18,33 +18,111 @@ const { title, description, image = '/img/avatar.png' } = Astro.props;
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="icon" type="image/x-icon" href="/favicon.ico" />
-<meta name="generator" content={Astro.generator} />
+<meta
+  name="viewport"
+  content="width=device-width,initial-scale=1"
+/>
+<link
+  rel="icon"
+  type="image/svg+xml"
+  href="/favicon.svg"
+/>
+<meta
+  name="generator"
+  content={Astro.generator}
+/>
 
 <!-- Canonical URL -->
-<link rel="canonical" href={canonicalURL} />
+<link
+  rel="canonical"
+  href={canonicalURL}
+/>
 
 <!-- Sitemap -->
-<link rel="sitemap" href="/sitemap-index.xml" />
+<link
+  rel="sitemap"
+  href="/sitemap-index.xml"
+/>
 
 <!-- Primary Meta Tags -->
 <title>{title}</title>
-<meta name="title" content={title} />
-<meta name="description" content={description} />
+<meta
+  name="title"
+  content={title}
+/>
+<meta
+  name="description"
+  content={description}
+/>
 
 <!-- Open Graph / Facebook -->
-<meta property="og:type" content="website" />
-<meta property="og:url" content={Astro.url} />
-<meta property="og:title" content={title} />
-<meta property="og:description" content={description} />
-<meta property="og:image" content={new URL(image, Astro.url)} />
+<meta
+  property="og:type"
+  content="website"
+/>
+<meta
+  property="og:url"
+  content={Astro.url}
+/>
+<meta
+  property="og:title"
+  content={title}
+/>
+<meta
+  property="og:description"
+  content={description}
+/>
+<meta
+  property="og:image"
+  content={new URL(image, Astro.url)}
+/>
 
 <!-- Twitter -->
-<meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:url" content={Astro.url} />
-<meta property="twitter:title" content={title} />
-<meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image, Astro.url)} />
+<meta
+  property="twitter:card"
+  content="summary_large_image"
+/>
+<meta
+  property="twitter:url"
+  content={Astro.url}
+/>
+<meta
+  property="twitter:title"
+  content={title}
+/>
+<meta
+  property="twitter:description"
+  content={description}
+/>
+<meta
+  property="twitter:image"
+  content={new URL(image, Astro.url)}
+/>
+
+<!-- Apple -->
+<link
+  rel="apple-touch-icon"
+  href={new URL('/img/avatar.png', Astro.url)}
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="180x180"
+  href={new URL('/img/apple-touch-icon.png', Astro.url)}
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="167x167"
+  href={new URL('/img/apple-touch-icon-167x167.png', Astro.url)}
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="152x152"
+  href={new URL('/img/apple-touch-icon-152x152.png', Astro.url)}
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="120x120"
+  href={new URL('/img/apple-touch-icon-120x120.png', Astro.url)}
+/>
 
 <ClientRouter />

src/pages/index.astro

@@ -14,31 +14,33 @@ const lastThreePosts = (await getCollection('blog'))
   .slice(0, 3);
 ---
 
-<style>
-  img[alt='Avatar'] {
-    border-radius: 50%;
-    width: 100px;
-    height: 100px;
-  }
-  .hero {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-    margin-top: 2rem;
-  }
-
-  .lastest-posts a {
-    text-decoration: none;
-  }
-</style>
-
 <html lang="en">
   <head>
     <BaseHead
       title={SITE_TITLE}
       description={SITE_DESCRIPTION}
     />
+    <style>
+      .grid > a {
+        text-decoration: none;
+      }
+      img[alt='Avatar'] {
+        border-radius: 50%;
+        width: 100px;
+        height: 100px;
+      }
+      .hero {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+        margin-top: 2rem;
+      }
+
+      .lastest-posts a {
+        text-decoration: none;
+      }
+    </style>
   </head>
   <body>
     <Header />
@@ -70,9 +72,3 @@ const lastThreePosts = (await getCollection('blog'))
     <Footer />
   </body>
 </html>
-
-<style>
-  .grid > a {
-    text-decoration: none;
-  }
-</style>