Merge pull request #171 from sushichan044/feat/cloudinary-image-sdk

astro-cloudinary の導入
sushichan044 · Dec 21, 2024 · 6d60180 · 6d60180
2 parents b35f2ff + dc8fc63
commit 6d60180
Show file tree

Hide file tree

Showing 8 changed files with 355 additions and 49 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -59,6 +59,10 @@ jobs:
       - name: Run ESLint on Astro
         if: ${{ needs.paths-filter.outputs.astro == 'true' }}
         run: pnpm run --filter=sushichan.live lint:check
+        env:
+          PUBLIC_CLOUDINARY_API_KEY: ${{ secrets.PUBLIC_CLOUDINARY_API_KEY }}
+          CLOUDINARY_API_SECRET: ${{ secrets.CLOUDINARY_API_SECRET }}
+          PUBLIC_CLOUDINARY_CLOUD_NAME: ${{ secrets.PUBLIC_CLOUDINARY_CLOUD_NAME }}
 
   tsc:
     name: tsc
@@ -77,6 +81,10 @@ jobs:
       - name: Run tsc on Astro
         if: ${{ needs.paths-filter.outputs.astro == 'true' }}
         run: pnpm run --filter=sushichan.live typecheck
+        env:
+          PUBLIC_CLOUDINARY_API_KEY: ${{ secrets.PUBLIC_CLOUDINARY_API_KEY }}
+          CLOUDINARY_API_SECRET: ${{ secrets.CLOUDINARY_API_SECRET }}
+          PUBLIC_CLOUDINARY_CLOUD_NAME: ${{ secrets.PUBLIC_CLOUDINARY_CLOUD_NAME }}
 
   prettier:
     name: Prettier
@@ -117,6 +125,10 @@ jobs:
       - name: Run Vitest on Astro
         if: ${{ needs.paths-filter.outputs.astro == 'true' }}
         run: pnpm run test --project sushichan.live
+        env:
+          PUBLIC_CLOUDINARY_API_KEY: ${{ secrets.PUBLIC_CLOUDINARY_API_KEY }}
+          CLOUDINARY_API_SECRET: ${{ secrets.CLOUDINARY_API_SECRET }}
+          PUBLIC_CLOUDINARY_CLOUD_NAME: ${{ secrets.PUBLIC_CLOUDINARY_CLOUD_NAME }}
 
   astro-check:
     name: Astro Check
@@ -135,3 +147,7 @@ jobs:
       - name: Run Astro Check
         if: ${{ needs.paths-filter.outputs.astro == 'true' }}
         run: pnpm --filter sushichan.live run check:astro
+        env:
+          PUBLIC_CLOUDINARY_API_KEY: ${{ secrets.PUBLIC_CLOUDINARY_API_KEY }}
+          CLOUDINARY_API_SECRET: ${{ secrets.CLOUDINARY_API_SECRET }}
+          PUBLIC_CLOUDINARY_CLOUD_NAME: ${{ secrets.PUBLIC_CLOUDINARY_CLOUD_NAME }}
diff --git a/packages/sushichan.live/.env.example b/packages/sushichan.live/.env.example
@@ -0,0 +1,3 @@
+CLOUDINARY_API_SECRET=""
+PUBLIC_CLOUDINARY_API_KEY=""
+PUBLIC_CLOUDINARY_CLOUD_NAME=""
diff --git a/packages/sushichan.live/astro.config.ts b/packages/sushichan.live/astro.config.ts
@@ -40,15 +40,15 @@ export default defineConfig({
   adapter: cloudflare({ imageService: "passthrough" }),
   env: {
     schema: {
-      CLOUDINARY_API_KEY: envField.string({
+      CLOUDINARY_API_SECRET: envField.string({
         access: "secret",
         context: "server",
       }),
-      CLOUDINARY_API_SECRET: envField.string({
+      PUBLIC_CLOUDINARY_API_KEY: envField.string({
         access: "secret",
         context: "server",
       }),
-      CLOUDINARY_CLOUD_NAME: envField.string({
+      PUBLIC_CLOUDINARY_CLOUD_NAME: envField.string({
         access: "public",
         context: "server",
       }),

diff --git a/packages/sushichan.live/package.json b/packages/sushichan.live/package.json
@@ -5,22 +5,21 @@
   "private": true,
   "scripts": {
     "dev": "pnpm run /^dev:.*/",
-    "dev:astro": "astro dev",
+    "dev:astro": "pnpm run typegen:astro && pnpm run typegen:cf && astro dev",
     "dev:hcm": "pnpm run typegen:css --watch",
-    "start": "astro dev",
-    "check:astro": "astro check",
-    "lint": "eslint",
-    "lint:check": "eslint --max-warnings 0",
-    "build": "astro build",
+    "start": "pnpm run typegen && astro dev",
+    "check:astro": "pnpm run typegen && astro check",
+    "lint": "pnpm run typegen && eslint",
+    "lint:check": "pnpm run lint --max-warnings 0",
+    "build": "pnpm run typegen && astro build",
     "preview": "wrangler pages dev ./dist",
     "astro": "astro",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "pnpm run typegen && tsc --noEmit",
     "typegen": "pnpm run /^typegen:.*/",
     "typegen:astro": "astro sync",
     "typegen:cf": "wrangler types",
     "typegen:css": "hcm 'src/**/*.module.{css,scss,less}' --logLevel=silent",
-    "postinstall": "pnpm run typegen",
-    "test": "vitest",
+    "test": "pnpm run typegen && vitest",
     "format": "prettier --write .",
     "format:check": "prettier --check ."
   },
@@ -31,6 +30,7 @@
     "@astrojs/rss": "4.0.10",
     "@astrojs/sitemap": "3.2.1",
     "@astrojs/tailwind": "5.1.4",
+    "@cloudinary-util/util": "4.1.0",
     "@expressive-code/plugin-collapsible-sections": "0.38.3",
     "@formkit/tempo": "0.1.2",
     "@iconify/iconify": "3.1.1",
@@ -40,6 +40,7 @@
     "@unocss/reset": "0.65.2",
     "astro": "5.1.1",
     "astro-auto-import": "0.4.4",
+    "astro-cloudinary": "1.3.0",
     "astro-embed": "0.9.0",
     "astro-expressive-code": "0.38.3",
     "astro-seo": "0.8.4",
@@ -51,6 +52,7 @@
     "mdast-util-to-string": "4.0.0",
     "nprogress": "0.2.0",
     "open-graph-scraper-lite": "2.1.0",
+    "pkg-dir": "8.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-player": "2.16.0",

diff --git a/packages/sushichan.live/src/components/ui/CloudinaryImage.astro b/packages/sushichan.live/src/components/ui/CloudinaryImage.astro
@@ -1,13 +1,11 @@
 ---
-import type { HTMLAttributes } from "astro/types";
+import type { CldImageProps } from "astro-cloudinary";
 
-import { cloudinaryLoader, getCloudinaryImageSize } from "../../lib/cloudinary";
-import Image from "../element/Image.astro";
+import { getPublicId } from "@cloudinary-util/util";
+import { CldImage } from "astro-cloudinary";
+import { getEntry } from "astro:content";
 
-type ImgProps = Omit<
-  HTMLAttributes<"img">,
-  "alt" | "height" | "priority" | "quality" | "src" | "width"
->;
+type ImgProps = CldImageProps;
 
 export interface Props extends ImgProps {
   alt?: string;
@@ -18,31 +16,22 @@ export interface Props extends ImgProps {
 
 const { alt, quality = 75, src, ...props } = Astro.props;
 
-const rawSize = await getCloudinaryImageSize(src);
-const altIsEmpty = alt === "" || alt === undefined;
+const pubId = getPublicId(src) ?? "";
+
+const asset = await getEntry("cldImages", pubId);
 
-const size = (() => {
-  const MAX_WIDTH = 840;
-  let w = rawSize.width;
-  let h = rawSize.height;
-  if (w > MAX_WIDTH) {
-    h *= MAX_WIDTH / w;
-    w = MAX_WIDTH;
-  }
-  return { height: h, width: w };
-})();
-
-const optimizedSrc = cloudinaryLoader({
-  quality: quality,
-  src,
-  width: size.width,
-});
+const altIsEmpty = alt === "" || alt === undefined;
 ---
 
-<Image
-  alt={altIsEmpty ? "" : alt}
-  height={size.height}
-  src={optimizedSrc}
-  width={size.width}
-  {...props}
-/>
+{
+  asset && (
+    <CldImage
+      alt={altIsEmpty ? "" : alt}
+      height={asset.data.height}
+      quality={quality}
+      src={asset.data.public_id}
+      width={asset.data.width}
+      {...props}
+    />
+  )
+}
diff --git a/packages/sushichan.live/src/content/config.ts b/packages/sushichan.live/src/content/config.ts
@@ -1,3 +1,4 @@
+import { cldAssetsLoader } from "astro-cloudinary/loaders";
 import { glob } from "astro/loaders";
 import { defineCollection, reference, z } from "astro:content";
 
@@ -23,4 +24,8 @@ const posts = defineCollection({
   schema: blogSchema,
 });
 
-export const collections = { posts: posts };
+const cldImages = defineCollection({
+  loader: cldAssetsLoader({ limit: 2000 }),
+});
+
+export const collections = { cldImages: cldImages, posts: posts };
diff --git a/packages/sushichan.live/src/lib/cloudinary/client.ts b/packages/sushichan.live/src/lib/cloudinary/client.ts
@@ -1,7 +1,7 @@
 import {
-  CLOUDINARY_API_KEY,
   CLOUDINARY_API_SECRET,
-  CLOUDINARY_CLOUD_NAME,
+  PUBLIC_CLOUDINARY_API_KEY,
+  PUBLIC_CLOUDINARY_CLOUD_NAME,
 } from "astro:env/server";
 import { v2 as cloudinaryV2 } from "cloudinary";
 
@@ -70,9 +70,9 @@ class CloudinarySingleton {
 
 const getCloudinary = () => {
   return CloudinarySingleton.getInstance({
-    api_key: CLOUDINARY_API_KEY,
+    api_key: PUBLIC_CLOUDINARY_API_KEY,
     api_secret: CLOUDINARY_API_SECRET,
-    cloud_name: CLOUDINARY_CLOUD_NAME,
+    cloud_name: PUBLIC_CLOUDINARY_CLOUD_NAME,
   });
 };