diff --git a/.github/workflows/generate-ogp.yaml b/.github/workflows/generate-ogp.yaml index 4d316f53..9535476c 100644 --- a/.github/workflows/generate-ogp.yaml +++ b/.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 diff --git a/content/about/cover.png b/content/about/cover.png new file mode 100644 index 00000000..f0c378de Binary files /dev/null and b/content/about/cover.png differ diff --git a/content/about/index.md b/content/about/index.md index ffab578c..88d36459 100644 --- a/content/about/index.md +++ b/content/about/index.md @@ -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: "" diff --git a/scripts/generate-ogp.mjs b/scripts/generate-ogp.mjs index 313ba5cb..1af56319 100644 --- a/scripts/generate-ogp.mjs +++ b/scripts/generate-ogp.mjs @@ -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!'); } diff --git a/scripts/ogp-template.mjs b/scripts/ogp-template.mjs index f0d536e0..bf81191e 100644 --- a/scripts/ogp-template.mjs +++ b/scripts/ogp-template.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}`, }, - })), + })) : []), ], }, }, diff --git a/static/cover.png b/static/cover.png index a6bb9d1c..f0c378de 100644 Binary files a/static/cover.png and b/static/cover.png differ