feat: generate english blog og images

Author: Yusaku01

public/images/ogp/en/astro-island-prefetch.png

@@ -13,7 +13,7 @@ import matter from 'gray-matter';
  * @typedef {{ title: string; isBasicPage: boolean }} OgpCardTarget
  * @typedef {{ slug: string; filename: string; title: string; isBasicPage: boolean }} OgpTarget
  * @typedef {{ name: string; data: Buffer | Uint8Array; weight: number; style: string }} FontDefinition
- * @typedef {{ name: string; isFile(): boolean }} BlogDirEntry
+ * @typedef {{ name: string; isFile(): boolean; isDirectory?(): boolean }} BlogDirEntry
  * @typedef {{ data: Record<string, unknown> }} FrontmatterResult
  * @typedef {{ log?: (...args: unknown[]) => void; error?: (...args: unknown[]) => void }} Logger
  * @typedef {(directory: string) => Promise<string[]>} FontDirReader
@@ -297,26 +297,36 @@ export async function getBlogEntries({
   logger = console,
 } = {}) {
   try {
-    const entries = await readdirImpl(contentDir, { withFileTypes: true });
+    const localeDirs = await readdirImpl(contentDir, { withFileTypes: true });
     const posts = [];
 
-    for (const entry of entries) {
-      if (!entry.isFile()) continue;
-      if (!entry.name.endsWith('.md') && !entry.name.endsWith('.mdx')) continue;
-      if (entry.name.startsWith('_')) continue;
-
-      const slug = entry.name.replace(/\.mdx?$/, '');
-      const filePath = path.join(contentDir, entry.name);
-      const fileContents = await readFileImpl(filePath, 'utf-8');
-      const { data } = matterImpl(fileContents);
-      const title = typeof data.title === 'string' && data.title.length > 0 ? data.title : slug;
-
-      posts.push({
-        slug,
-        filename: slug,
-        title,
-        isBasicPage: false,
-      });
+    for (const localeDir of localeDirs) {
+      const locale = localeDir.name;
+      const isLocaleDirectory =
+        (locale === 'ja' || locale === 'en') && localeDir.isDirectory?.() === true;
+
+      if (!isLocaleDirectory) continue;
+
+      const entries = await readdirImpl(path.join(contentDir, locale), { withFileTypes: true });
+
+      for (const entry of entries) {
+        if (!entry.isFile()) continue;
+        if (!entry.name.endsWith('.md') && !entry.name.endsWith('.mdx')) continue;
+        if (entry.name.startsWith('_')) continue;
+
+        const slug = entry.name.replace(/\.mdx?$/, '');
+        const filePath = path.join(contentDir, locale, entry.name);
+        const fileContents = await readFileImpl(filePath, 'utf-8');
+        const { data } = matterImpl(fileContents);
+        const title = typeof data.title === 'string' && data.title.length > 0 ? data.title : slug;
+
+        posts.push({
+          slug,
+          filename: locale === 'en' ? `en/${slug}` : slug,
+          title,
+          isBasicPage: false,
+        });
+      }
     }
 
     return posts;
@@ -371,7 +381,9 @@ export async function runBuildOgp({
     }
 
     const png = await createOgpImageImpl(target, fonts);
-    await writeFileImpl(path.join(outputDir, `${target.filename}.png`), png);
+    const outputPath = path.join(outputDir, `${target.filename}.png`);
+    await mkdirImpl(path.dirname(outputPath), { recursive: true });
+    await writeFileImpl(outputPath, png);
     logger.log(`  ✓ ${target.filename}.png を保存しました`);
   }
 

public/images/ogp/en/astro-nextjs-prefetch-comparison.png

@@ -16,6 +16,7 @@ interface Props {
   title: string;
   description?: string;
   blogTitle?: string; // ブログ記事のタイトルを渡すためのプロパティを追加
+  blogContentLocale?: Locale;
   robots?: string;
   locale?: Locale;
 }
@@ -24,6 +25,7 @@ const {
   title,
   description,
   blogTitle, // ブログタイトルを受け取る
+  blogContentLocale,
   robots = 'index, follow',
   locale: localeProp,
 } = Astro.props;
@@ -48,7 +50,8 @@ const ogpPathname =
 if (blogTitle) {
   // ブログ記事の場合、スラッグに基づいたOGP画像を使用
   const slug = Astro.url.pathname.split('/').filter(Boolean).pop() || 'index';
-  ogImageUrl = `/images/ogp/${slug}.png`;
+  ogImageUrl =
+    blogContentLocale === 'en' ? `/images/ogp/en/${slug}.png` : `/images/ogp/${slug}.png`;
 } else if (ogpPathname === '/' || ogpPathname === '') {
   // トップページ
   ogImageUrl = '/images/ogp/default.png';

scripts/lib/build-ogp-core.js

@@ -29,6 +29,7 @@ const locale = 'ja';
   title={`${post.data.title} | SAKUSPACE`}
   description={post.data.description}
   blogTitle={post.data.title}
+  blogContentLocale={locale}
   locale={locale}
 >
   <div

src/layouts/Layout.astro

@@ -25,7 +25,8 @@ export async function getStaticPaths() {
 
 const { post } = Astro.props;
 const locale = 'en';
-const isFallbackJapanesePost = getBlogEntryLocale(post) !== locale;
+const blogContentLocale = getBlogEntryLocale(post) ?? 'ja';
+const isFallbackJapanesePost = blogContentLocale !== locale;
 
 const { Content, headings } = await render(post);
 const estimatedReadingTimeMinutes = getEstimatedReadingTimeMinutes(post.body ?? '');
@@ -35,6 +36,7 @@ const estimatedReadingTimeMinutes = getEstimatedReadingTimeMinutes(post.body ??
   title={`${post.data.title} | SAKUSPACE`}
   description={post.data.description}
   blogTitle={post.data.title}
+  blogContentLocale={blogContentLocale}
   locale={locale}
 >
   <div

src/pages/blog/[...slug].astro

@@ -140,22 +140,35 @@ describe('createOgpElement', () => {
 });
 
 describe('getBlogEntries', () => {
-  it('collects md and mdx files, skips underscored entries, and falls back to the slug', async () => {
-    const readdirImpl = vi.fn(async () => [
-      { name: 'first-post.mdx', isFile: () => true },
-      { name: 'second-post.md', isFile: () => true },
-      { name: '_draft-post.mdx', isFile: () => true },
-      { name: 'images', isFile: () => false },
-      { name: 'notes.txt', isFile: () => true },
-    ]);
+  it('collects localized md and mdx files, skips underscored entries, and falls back to the slug', async () => {
+    const readdirImpl = vi
+      .fn()
+      .mockResolvedValueOnce([
+        { name: 'ja', isFile: () => false, isDirectory: () => true },
+        { name: 'en', isFile: () => false, isDirectory: () => true },
+        { name: 'notes.txt', isFile: () => true, isDirectory: () => false },
+      ])
+      .mockResolvedValueOnce([
+        { name: 'first-post.mdx', isFile: () => true },
+        { name: 'second-post.md', isFile: () => true },
+        { name: '_draft-post.mdx', isFile: () => true },
+        { name: 'images', isFile: () => false },
+        { name: 'notes.txt', isFile: () => true },
+      ])
+      .mockResolvedValueOnce([
+        { name: 'first-post.mdx', isFile: () => true },
+        { name: '_english-draft.mdx', isFile: () => true },
+      ]);
     const readFileImpl = vi
       .fn()
       .mockResolvedValueOnce('---\ntitle: First Post\n---')
-      .mockResolvedValueOnce('---\ndescription: No title\n---');
+      .mockResolvedValueOnce('---\ndescription: No title\n---')
+      .mockResolvedValueOnce('---\ntitle: First Post in English\n---');
     const matterImpl = vi
       .fn()
       .mockReturnValueOnce({ data: { title: 'First Post' } })
-      .mockReturnValueOnce({ data: {} });
+      .mockReturnValueOnce({ data: {} })
+      .mockReturnValueOnce({ data: { title: 'First Post in English' } });
 
     await expect(
       getBlogEntries({
@@ -177,7 +190,16 @@ describe('getBlogEntries', () => {
         title: 'second-post',
         isBasicPage: false,
       },
+      {
+        slug: 'first-post',
+        filename: 'en/first-post',
+        title: 'First Post in English',
+        isBasicPage: false,
+      },
     ]);
+
+    expect(readFileImpl).toHaveBeenCalledWith('/virtual/blog/ja/first-post.mdx', 'utf-8');
+    expect(readFileImpl).toHaveBeenCalledWith('/virtual/blog/en/first-post.mdx', 'utf-8');
   });
 
   it('returns an empty list when reading blog entries fails', async () => {
@@ -375,18 +397,25 @@ describe('runBuildOgp', () => {
     );
   });
 
-  it('generates default pages and blog entries in normal mode', async () => {
+  it('generates default pages and blog entries in normal mode, including nested output paths', async () => {
     const writeFileImpl = vi.fn();
+    const mkdirImpl = vi.fn();
     const createOgpImage = vi.fn(async (target) => Buffer.from(target.filename));
     const logger = createLogger();
     const getBlogEntriesMock = vi.fn(async () => [
       { slug: 'first-post', filename: 'first-post', title: 'First Post', isBasicPage: false },
+      {
+        slug: 'first-post',
+        filename: 'en/first-post',
+        title: 'First Post in English',
+        isBasicPage: false,
+      },
     ]);
 
     const result = await runBuildOgp({
       argv: ['node', 'scripts/build-ogp.js'],
       outputDir: '/virtual/output',
-      mkdirImpl: vi.fn(),
+      mkdirImpl,
       writeFileImpl,
       loadFonts: vi.fn(async () => [createFont()]),
       createOgpImage,
@@ -395,13 +424,15 @@ describe('runBuildOgp', () => {
     });
 
     expect(getBlogEntriesMock).toHaveBeenCalledOnce();
-    expect(result.generatedCount).toBe(basicPages.length + 1);
+    expect(result.generatedCount).toBe(basicPages.length + 2);
     expect(result.targets.at(-1)).toEqual({
       slug: 'first-post',
-      filename: 'first-post',
-      title: 'First Post',
+      filename: 'en/first-post',
+      title: 'First Post in English',
       isBasicPage: false,
     });
+    expect(mkdirImpl).toHaveBeenCalledWith('/virtual/output', { recursive: true });
+    expect(mkdirImpl).toHaveBeenCalledWith('/virtual/output/en', { recursive: true });
     expect(writeFileImpl).toHaveBeenCalledWith(
       '/virtual/output/default.png',
       Buffer.from('default')
@@ -410,5 +441,9 @@ describe('runBuildOgp', () => {
       '/virtual/output/first-post.png',
       Buffer.from('first-post')
     );
+    expect(writeFileImpl).toHaveBeenCalledWith(
+      '/virtual/output/en/first-post.png',
+      Buffer.from('en/first-post')
+    );
   });
 });