v1.1.4

astro.config.mjs

@@ -6,6 +6,7 @@ import partytown from '@astrojs/partytown';
 import rehypeToc from 'rehype-toc';
 import rehypeSlug from 'rehype-slug';
 import remarkLinkCard from 'remark-link-card-plus';
+import { remarkMermaidInjector } from './src/plugins/remark/remark-mermaid-injector.mjs';
 
 // https://astro.build/config
 export default defineConfig({
@@ -26,8 +27,10 @@ export default defineConfig({
     }),
   ],
   markdown: {
+    excludeLangs: ['mermaid'],
     rehypePlugins: [rehypeSlug, [rehypeToc, { headings: ['h2', 'h3', 'h4'] }]],
     remarkPlugins: [
+      remarkMermaidInjector,
       [
         remarkLinkCard,
         { cache: false, shortenUrl: true, thumbnailPosition: 'left' },

package.json

@@ -61,7 +61,8 @@
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "sass": "^1.77.4"
+    "sass": "^1.77.4",
+    "unist-util-visit": "^5.0.0"
   },
   "pnpm": {
     "overrides": {

src/layouts/BlogLayout.astro

@@ -37,6 +37,18 @@ const authorX = author?.links?.find(l => l.name === 'X')?.id;
     <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="sitemap" href="/sitemap-index.xml" />
+    <link
+      rel="alternate"
+      type="application/rss+xml"
+      title="Blogs"
+      href="/rss.xml"
+    />
+    <link
+      rel="alternate"
+      type="application/rss+xml"
+      title={`Blogs by ${blog.data.author}`}
+      href={`/${blog.data.author}/rss.xml`}
+    />
     <SEO
       charset="UTF-8"
       title={title}

src/layouts/Layout.astro

@@ -31,6 +31,12 @@ const meta = {
     <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="sitemap" href="/sitemap-index.xml" />
+    <link
+      rel="alternate"
+      type="application/rss+xml"
+      title="Blogs"
+      href="/rss.xml"
+    />
     <SEO
       charset="UTF-8"
       title={meta.title}

src/lib/getFeed.ts

@@ -0,0 +1,115 @@
+import { type RSSOptions } from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+import siteInfo from '@/data/siteInfo';
+
+function extractImageUrl(body: string) {
+  if (!body) return null;
+  const relativeImages = [];
+  const absoluteImages = [];
+  const imgTagRegex = /<img[^>]+src=["']([^"']+)["'][^>]*>/g;
+  const mdImageRegex = /!\[[^\]]*\]\(([^)]+)\)/g;
+
+  const imgMatches = [...body.matchAll(imgTagRegex)];
+  const mdMatches = [...body.matchAll(mdImageRegex)];
+  const allUrls = [
+    ...imgMatches.map(match => match[1]),
+    ...mdMatches.map(match => match[1]),
+  ];
+
+  if (allUrls.length === 0) return null;
+
+  for (const url of allUrls) {
+    const isRelative = url.startsWith('/');
+    let fullUrl = url;
+    const ext = fullUrl.split('?')[0].split('.').pop()?.toLowerCase();
+    let type;
+
+    switch (ext) {
+      case 'jpg':
+      case 'jpeg':
+        type = 'image/jpeg';
+        break;
+      case 'png':
+        type = 'image/png';
+        break;
+      case 'gif':
+        type = 'image/gif';
+        break;
+      case 'webp':
+        type = 'image/webp';
+        break;
+      case 'svg':
+        type = 'image/svg+xml';
+        break;
+      default:
+        continue;
+    }
+
+    const imageObj = {
+      url: fullUrl,
+      type: type,
+      length: 0,
+    };
+
+    if (isRelative) {
+      relativeImages.push(imageObj);
+    } else {
+      absoluteImages.push(imageObj);
+    }
+  }
+
+  const images = [...relativeImages, ...absoluteImages];
+  return images.length > 0 ? images : null;
+}
+
+async function getFeed(
+  siteUrl: string,
+  maxItems?: number,
+  filter?: { tag?: string; author?: string }
+) {
+  let blogs = await getCollection('blog');
+  if (filter) {
+    if (filter.author) {
+      blogs = blogs.filter(blog => blog.data.author === filter.author);
+    }
+    if (filter.tag) {
+      blogs = blogs.filter(blog => blog.data.tags?.includes(filter.tag!));
+    }
+  }
+  blogs = blogs
+    .sort(
+      (a, b) =>
+        new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime()
+    )
+    .slice(0, maxItems || 50);
+  let title = siteInfo.appName;
+  if (filter?.author) {
+    title += ` - Author: ${filter.author}`;
+  }
+  if (filter?.tag) {
+    title += ` - Tag: ${filter.tag}`;
+  }
+  const rssOptions: RSSOptions = {
+    title: title,
+    description: siteInfo.description,
+    site: siteUrl,
+    items: blogs.map(blog => ({
+      title: blog.data.title,
+      pubDate: new Date(blog.data.pubDate),
+      description: blog.data.description,
+      link: blog.data.externalUrl
+        ? blog.data.externalUrl
+        : `/blog/${blog.slug}/`,
+      categories: blog.data.tags,
+      enclosure: extractImageUrl(blog.body)?.[0] || {
+        url: `/og/${blog.slug}.png`,
+        type: 'image/png',
+        length: 0,
+      },
+    })),
+    customData: `<language>ja-jp</language>`,
+  };
+  return rssOptions;
+}
+
+export { getFeed };

src/pages/[author]/rss.xml.js

@@ -1,6 +1,5 @@
 import rss from '@astrojs/rss';
-import { getCollection } from 'astro:content';
-import siteInfo from '@/data/siteInfo';
+import { getFeed } from '@/lib/getFeed';
 import member from '@/data/member';
 
 export async function getStaticPaths() {
@@ -13,21 +12,7 @@ export async function getStaticPaths() {
 
 export async function GET(context) {
   const { author } = context.params;
-  const blogs = await getCollection('blog');
+  const feedOption = await getFeed(context.site, 50, { author });
 
-  const filteredBlogs = blogs.filter(blog => blog.data.author === author);
-
-  return rss({
-    title: `${siteInfo.appName} - ${author}`,
-    description: `${author}の記事一覧`,
-    site: context.site,
-    items: filteredBlogs.map(blog => ({
-      title: blog.data.title,
-      pubDate: blog.data.pubDate,
-      description: blog.data.description,
-      customData: blog.data.customData,
-      link: `/blog/${blog.slug}/`,
-    })),
-    customData: '<language>ja-jp</language>',
-  });
+  return rss(feedOption);
 }

src/pages/rss.xml.js

@@ -1,20 +1,7 @@
 import rss from '@astrojs/rss';
-import { getCollection } from 'astro:content';
-import siteInfo from '@/data/siteInfo';
+import { getFeed } from '@/lib/getFeed';
 
 export async function GET(context) {
-  const blogs = await getCollection('blog');
-  return rss({
-    title: siteInfo.appName,
-    description: siteInfo.description,
-    site: context.site,
-    items: blogs.map(blog => ({
-      title: blog.data.title,
-      pubDate: blog.data.pubDate,
-      description: blog.data.description,
-      customData: blog.data.customData,
-      link: `/blog/${blog.slug}/`,
-    })),
-    customData: `<language>ja-jp</language>`,
-  });
+  const feedOption = await getFeed(context.site);
+  return rss(feedOption);
 }

src/plugins/remark/remark-mermaid-injector.mjs

@@ -0,0 +1,88 @@
+import { visit } from 'unist-util-visit';
+
+/**
+ * remark プラグイン
+ *
+ * markdown ASTにてmermaidコードブロックがある場合、クライアントでの描画スクリプト(mermaid.js処理)を末尾に挿入
+ *
+ */
+export function remarkMermaidInjector() {
+  return function (tree) {
+    let mermaidFound = false;
+
+    // mermaidコードブロックの存在を確認
+    visit(tree, 'code', node => {
+      if (node.lang === 'mermaid') {
+        mermaidFound = true;
+        return false;
+      }
+    });
+
+    // mermaidブロックがある場合、末尾にスクリプトを追加
+    if (mermaidFound) {
+      const scriptNode = {
+        type: 'html',
+        value: `<script>
+  async function initMermaidDiagrams() {
+    const blocks = document.querySelectorAll(
+      'pre[data-language="mermaid"] code'
+    );
+
+    if (blocks.length === 0) return;
+
+    try {
+      if (!window.mermaid) {
+        const script = document.createElement("script");
+        script.src =
+          "https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js";
+        await new Promise((resolve, reject) => {
+          script.onload = resolve;
+          script.onerror = reject;
+          document.head.appendChild(script);
+        });
+      }
+
+      mermaid.initialize({
+        startOnLoad: false,
+      });
+
+      for (let i = 0; i < blocks.length; i++) {
+        const code = blocks[i];
+        const pre = code.parentElement;
+        let chart = code.textContent.trim();
+
+        try {
+          const { svg } = await mermaid.render(
+            \`mermaid-\${i}\`,
+            chart
+          );
+
+          const container = document.createElement("div");
+          container.className = \`mermaid-container my-8\`;
+
+          const wrapper = document.createElement("div");
+          wrapper.className = \`mermaid-diagram rounded-lg min-h-[100px] bg-transparent\`;
+
+          wrapper.innerHTML = svg;
+          container.appendChild(wrapper);
+          pre.parentNode.replaceChild(container, pre);
+        } catch (error) {
+          console.warn(
+            \`Mermaid diagram \${i + 1} failed, keeping as code block\`,
+            error
+          );
+        }
+      }
+    } catch (error) {
+      console.warn("Mermaid library failed to load, keeping code blocks", error);
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", initMermaidDiagrams);
+</script>`,
+      };
+
+      tree.children.push(scriptNode);
+    }
+  };
+}