🧪 이미지 최적화 테스트

.github/workflows/process-images.yaml

@@ -24,11 +24,26 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-primes-
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
+      - name: Create tsconfig.build.json
+        run: |
+          echo '{
+            "extends": "./tsconfig.json",
+            "compilerOptions": {
+              "target": "ES2021",
+              "module": "ES2020",
+              "outDir": "./dist",
+              "noEmit": false
+            },
+            "include": ["scripts/**/*"],
+            "exclude": ["src/**/*", "dist"]
+          }' > tsconfig.build.json
+      - name: Build TypeScript
+        run: |
+          npx tsc ./scripts/action-process-images.ts ./scripts/github-api.ts ./scripts/sharp-api.ts --outDir ./dist --esModuleInterop --target ES2021 --module ES2020 --moduleResolution bundler --allowJs --isolatedModules --skipLibCheck --jsx react
       - name: ✧ Process images and Report results
+        run: node ./dist/action-process-images.js
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           GITHUB_REPOSITORY: ${{ github.repository }}
           GITHUB_PULL_REQUEST: ${{ toJSON(github.event.pull_request) }}
-        run: npm run process-images

scripts/action-process-images.ts

@@ -1,5 +1,5 @@
-import { createComment, createCommit, imageToTreeBlob } from './github-api'
-import { sharpImages } from './sharp-api'
+import { createComment, createCommit, createTreeBlobs } from './github-api.js'
+import { sharpImages } from './sharp-api.js'
 
 const formatByte = (byte: number) => {
   let num = +byte
@@ -25,12 +25,13 @@ const formatImages = (num: number) => {
   }
 
   console.log('\n::✧:: Generating Blobs…')
-  const imageBlobs = await Promise.all(sharpedImageList.map(imageToTreeBlob))
+  const imageBlobs = await Promise.all(sharpedImageList.map(createTreeBlobs))
+  const flattenedBlobs = imageBlobs.flat()
 
   console.log('\n::✧:: Committing files…')
   const commit = await createCommit({
-    message: '::✧:: process images',
-    treeBlobs: imageBlobs,
+    message: '🖼️ 이미지 최적화',
+    treeBlobs: flattenedBlobs,
   })
 
   console.log('\n::✧:: Writing comment on PR…')

scripts/github-api.ts

@@ -1,8 +1,9 @@
 import * as fs from 'node:fs/promises'
 
 import { Octokit, type RestEndpointMethodTypes } from '@octokit/rest'
+import fg from 'fast-glob'
 
-import type { ProcessedResult } from './sharp-api'
+import type { ProcessedResult } from './sharp-api.js'
 
 export type GitTreeBlob = RestEndpointMethodTypes['git']['createTree']['parameters']['tree'][number]
 
@@ -36,23 +37,56 @@ const imageToBase64 = async (path: string) => {
   return base64
 }
 
-export const imageToTreeBlob = async (image: ProcessedResult) => {
-  const encodedImage = await imageToBase64(image.path)
+export const createTreeBlobs = async (image: ProcessedResult) => {
+  const blobs: GitTreeBlob[] = []
 
-  const blob = await api.rest.git.createBlob({
+  if (image.convertedToAvif) {
+    blobs.push({
+      path: image.path,
+      mode: '040000',
+      type: 'blob',
+      sha: null,
+    })
+  }
+
+  const filePath = image.convertedToAvif ? image.avifPath! : image.path
+  const encodedImage = await imageToBase64(filePath)
+
+  const imageBlob = await api.rest.git.createBlob({
     owner,
     repo,
     content: encodedImage,
     encoding: 'base64',
   })
-  console.log('✧', image.name, blob.data.url)
 
-  return {
-    path: image.path,
+  blobs.push({
+    path: filePath,
     mode: '100644',
     type: 'blob',
-    sha: blob.data.sha,
-  } satisfies GitTreeBlob
+    sha: imageBlob.data.sha,
+  })
+
+  const mdxFiles = await fg('src/content/post/**/*.mdx')
+
+  for (const mdxPath of mdxFiles) {
+    console.log('::✧:: Processing MDX:', mdxPath)
+    const content = await fs.readFile(mdxPath, 'utf-8')
+    const mdxBlob = await api.rest.git.createBlob({
+      owner,
+      repo,
+      content: content,
+      encoding: 'utf-8',
+    })
+
+    blobs.push({
+      path: mdxPath,
+      mode: '100644',
+      type: 'blob',
+      sha: mdxBlob.data.sha,
+    })
+  }
+
+  return blobs
 }
 
 export const createCommit = async ({

scripts/sharp-api.ts

@@ -80,7 +80,6 @@ export const sharpImages = async () => {
     try {
       const filename = path.basename(filePath)
 
-      // Skip ignored files
       if (CONFIG.ignoreList.includes(filename)) {
         console.log(`::✧:: Skipping ignored file ${filename}`)
         continue
@@ -110,7 +109,6 @@ export const sharpImages = async () => {
 
         const avifPath = filePath.replace(`.${fileType}`, '.avif')
         await sharp(filePath).avif(SHARP_OPTIONS.avif).toFile(avifPath)
-
         const avifStats = await fs.stat(avifPath)
 
         if (avifStats.size < afterStats.size) {

src/content/post/blog/image-test.mdx

@@ -0,0 +1,8 @@
+---
+title: '이미지 테스트용 포스트'
+date: '2025-01-19'
+---
+
+이미지 테스트용 포스트입니다!
+
+![테스트이미지](/images/test.avif)