静的ページにもOGPを設定 (#245)

* _

* update

* chore: update OGP images

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: kyu08

.github/workflows/generate-ogp.yaml

@@ -33,7 +33,7 @@ jobs:
         id: generation-check
         run: |
           # 生成後の差分をチェック
-          if ! git diff --exit-code content/posts/**/cover.png; then
+          if ! git diff --exit-code content/**/cover.png static/cover.png; then
             echo "has_changes=true" >> $GITHUB_OUTPUT
           else
             echo "has_changes=false" >> $GITHUB_OUTPUT
@@ -44,7 +44,7 @@ jobs:
         run: |
           git config --local user.email "github-actions[bot]@users.noreply.github.com"
           git config --local user.name "github-actions[bot]"
-          git add content/posts/**/cover.png
+          git add content/**/cover.png static/cover.png
           git commit -m "chore: update OGP images"
           git push origin HEAD:${{ github.head_ref }}
 
@@ -85,7 +85,13 @@ jobs:
             IFS=',' read -ra FILES <<< "${{ steps.pr-check.outputs.files }}"
             for file in "${FILES[@]}"; do
               # ファイルパスから記事名を抽出
-              POST_NAME=$(echo "$file" | sed 's|content/posts/||' | sed 's|/cover.png||')
+              if [[ "$file" == "static/cover.png" ]]; then
+                POST_NAME="トップページ (Top Page)"
+              elif [[ "$file" == "content/about/cover.png" ]]; then
+                POST_NAME="aboutページ (About Page)"
+              else
+                POST_NAME=$(echo "$file" | sed 's|content/posts/||' | sed 's|/cover.png||')
+              fi
               IMAGE_URL="https://github.com/${{ github.repository }}/raw/${{ github.head_ref }}/${file}"
               COMMENT="${COMMENT}### ${POST_NAME}\n![${POST_NAME}](${IMAGE_URL})\n\n"
             done

content/about/cover.png

@@ -3,7 +3,7 @@ title: "About Me"
 date: "2023-06-06T01:15:48+09:00"
 author: "kyu08"
 authorTwitter: "kyu08_" #do not include @
-cover: "https://blog.kyu08.com/cover.png"
+cover: "cover.png"
 tags: []
 keywords: ["", ""]
 description: ""

content/about/index.md

@@ -157,6 +157,40 @@ async function generateOgpImage(metadata, fonts) {
   }
 }
 
+/**
+ * 静的ページ用のOGP画像を生成
+ */
+async function generateStaticOgpImage({ title, outputPath, author = 'kyu08', showDate = false, showTags = false }, fonts) {
+  try {
+    // Satoriでレンダリング
+    const svg = await satori(
+      generateOgpTemplate({
+        title,
+        date: '',
+        tags: [],
+        author,
+        showDate,
+        showTags,
+      }),
+      {
+        width: 1200,
+        height: 630,
+        fonts,
+      }
+    );
+
+    // SVGをPNGに変換
+    const png = svgToPng(svg);
+
+    // 指定されたパスに保存
+    await fs.writeFile(outputPath, png);
+
+    console.log(`✅ Generated: ${path.relative(__dirname, outputPath)}`);
+  } catch (error) {
+    console.error(`❌ Failed to generate OGP for ${outputPath}:`, error);
+  }
+}
+
 /**
  * メイン処理
  */
@@ -179,6 +213,27 @@ async function main() {
     await generateOgpImage(metadata, fonts);
   }
 
+  // 静的ページのOGP画像を生成
+  console.log('\n📄 Generating static page OGP images...\n');
+
+  // aboutページ用
+  await generateStaticOgpImage({
+    title: 'blog.kyu08.com',
+    outputPath: path.join(__dirname, '../content/about/cover.png'),
+    author: 'kyu08',
+    showDate: false,
+    showTags: false,
+  }, fonts);
+
+  // トップページ用
+  await generateStaticOgpImage({
+    title: 'blog.kyu08.com',
+    outputPath: path.join(__dirname, '../static/cover.png'),
+    author: 'kyu08',
+    showDate: false,
+    showTags: false,
+  }, fonts);
+
   console.log('\n✨ OGP image generation completed!');
 }
 

scripts/generate-ogp.mjs

@@ -3,7 +3,7 @@
  * Satoriを使ってReact風のJSXでデザインを記述
  */
 
-export function generateOgpTemplate({ title, date, tags, author = 'kyu08' }) {
+export function generateOgpTemplate({ title, date, tags, author = 'kyu08', showDate = true, showTags = true }) {
   // タイトルの長さに応じてフォントサイズを調整
   const getTitleFontSize = (titleLength) => {
     if (titleLength > 50) return '48px';
@@ -110,8 +110,8 @@ export function generateOgpTemplate({ title, date, tags, author = 'kyu08' }) {
                         children: `@${author}`,
                       },
                     },
-                    // Date
-                    {
+                    // Date (conditional)
+                    ...(showDate && date ? [{
                       type: 'div',
                       props: {
                         style: {
@@ -120,9 +120,9 @@ export function generateOgpTemplate({ title, date, tags, author = 'kyu08' }) {
                         },
                         children: date,
                       },
-                    },
-                    // Tags
-                    ...tags.map((tag) => ({
+                    }] : []),
+                    // Tags (conditional)
+                    ...(showTags ? tags.map((tag) => ({
                       type: 'div',
                       props: {
                         style: {
@@ -136,7 +136,7 @@ export function generateOgpTemplate({ title, date, tags, author = 'kyu08' }) {
                         },
                         children: `#${tag}`,
                       },
-                    })),
+                    })) : []),
                   ],
                 },
               },