release v1.2.0

.github/workflows/test.yml

@@ -1,5 +1,9 @@
 name: 'Test'
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 on:
   pull_request:
     branches:
@@ -13,15 +17,13 @@ jobs:
     steps:
       - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
-        with:
-          version: 8
       - name: Use Node.js
         uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
       - name: Check with Prettier
         run: pnpm run format:check
       - name: Check with Astro

.ls-lint.yml

@@ -27,7 +27,9 @@ ignore:
   - .astro
   - .git
   - .vscode
+  - dist
   - node_modules
-  - src/pages/**/*/\[slug\].astro
+  - src/pages/**/*/\[id\].astro
   - src/pages/**/*/\[name\].astro
   - src/pages/**/*/\[tag\].astro
+  - src/content/blog/_template

.nvmrc

@@ -1 +1 @@
-v24.12.0
+v24.19.0

README.md

@@ -47,6 +47,42 @@ pnpm preview
 pnpm format
 ```
 
+## 記事内MD記法
+
+### 基本
+
+標準的な Markdown 記法（見出し、リスト、リンク等）に対応しています。
+
+### コールアウト
+
+`> [!xxx]`でコールアウト記法を使用できます。
+
+### コードブロック
+
+コードブロックの言語指定以降に以下属性を付与することで、多様なマーカーや装飾を追加できます。
+
+| 属性                      | 用途               | 例                         |
+| ----------------------- | ---------------- | ------------------------- |
+| 先頭行のファイル名コメント           | ファイルパス/タイトルを自動推測 | ```ts の1行目に // src/a.ts   |
+| title="..."             | ファイルパス/タイトル表示    | ```ts title="src/a.ts"    |
+| {2-4}                   | マーカーライン（行ハイライト）  | ```ts {2-4}               |
+| ins={n} / del={n}       | 行単位の追加/削除マーカー    | ```ts ins={2} del={3}     |
+| "word" / /regex/        | ワードマーカー          | ```ts "greet" /Hi.*!/     |
+| ins="word" / del="word" | 単語単位の追加/削除マーカー   | ```ts ins="foo" del="bar" |
+| wrap                    | 長い行の折り返し         | ```ts wrap                |
+| frame="terminal"        | ターミナル風フレーム       | ```bash frame="terminal"  |
+| showLineNumbers         | 行番号表示            | ```ts showLineNumbers     |
+| collapse={1-3}          | 指定行の折りたたみ        | ```ts collapse={1-3}      |
+| ```diff                 | diff構文（+/-表示）    | ```diff title="x.ts"      |
+
+さらに詳しく [Text & Line Markers](https://expressive-code.com/key-features/text-markers/)
+
+
+### ダイアグラム（Mermaid）
+
+コードブロックの言語指定に `mermaid` を記述することで、フローチャートやシーケンス図などをレンダリングできます。
+
+
 ## ブログ記事投稿
 
 1. ブログ記事執筆用ブランチを作成する

astro.config.mjs

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
 import tailwind from '@astrojs/tailwind';
@@ -8,15 +10,54 @@ import rehypeSlug from 'rehype-slug';
 import remarkLinkCard from 'remark-link-card-plus';
 import remarkBreaks from 'remark-breaks';
 import { remarkMermaidInjector } from './src/plugins/remark/remark-mermaid-injector.mjs';
+import { remarkCallout } from './src/plugins/remark/remark-callout.mjs';
+import expressiveCode from 'astro-expressive-code';
+import { unified } from '@astrojs/markdown-remark';
+
+const SITE_URL = 'https://www.rowicy.com';
+// data URIはURL.canParse()を通り、かつdev/build/prodのどの環境・ポートでも
+// そのまま表示できるため、ホスト名に依存する絶対URLより確実(svgは537byteと小さい)。
+const LINK_CARD_FALLBACK_IMAGE_URL = `data:image/svg+xml;base64,${readFileSync(
+  fileURLToPath(
+    new URL('./public/images/link-card-fallback.svg', import.meta.url)
+  )
+).toString('base64')}`;
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://www.rowicy.com',
+  site: SITE_URL,
   prefetch: {
     prefetchAll: true,
   },
   integrations: [
     react(),
+    expressiveCode({
+      themes: ['vesper'],
+      frames: {
+        showCopyToClipboardButton: false,
+      },
+      customizeTheme: theme => {
+        theme.bg = '#14151a';
+        theme.colors['editor.background'] = '#14151a';
+        theme.settings
+          .filter(s =>
+            (Array.isArray(s.scope) ? s.scope : [s.scope]).some(scope =>
+              scope?.includes('comment')
+            )
+          )
+          .forEach(s => {
+            s.settings.foreground = '#6b7089';
+          });
+      },
+      styleOverrides: {
+        borderWidth: '0px',
+        codeBackground: '#0C1222',
+        frames: {
+          editorBackground: '#262B30',
+          terminalBackground: '#262B30',
+        },
+      },
+    }),
     tailwind({
       applyBaseStyles: false,
     }),
@@ -28,15 +69,28 @@ export default defineConfig({
     }),
   ],
   markdown: {
-    excludeLangs: ['mermaid'],
-    rehypePlugins: [rehypeSlug, [rehypeToc, { headings: ['h2', 'h3', 'h4'] }]],
-    remarkPlugins: [
-      remarkMermaidInjector,
-      remarkBreaks,
-      [
-        remarkLinkCard,
-        { cache: false, shortenUrl: true, thumbnailPosition: 'left' },
+    processor: unified({
+      rehypePlugins: [
+        rehypeSlug,
+        [rehypeToc, { headings: ['h2', 'h3', 'h4'] }],
+      ],
+      remarkPlugins: [
+        remarkMermaidInjector,
+        remarkBreaks,
+        remarkCallout,
+        [
+          remarkLinkCard,
+          {
+            cache: false,
+            shortenUrl: true,
+            thumbnailPosition: 'left',
+            ogTransformer: og => {
+              if (og.imageUrl && URL.canParse(og.imageUrl)) return og;
+              return { ...og, imageUrl: LINK_CARD_FALLBACK_IMAGE_URL };
+            },
+          },
+        ],
       ],
-    ],
+    }),
   },
 });

package.json

@@ -3,8 +3,9 @@
   "type": "module",
   "version": "0.0.1",
   "private": true,
+  "packageManager": "pnpm@10.19.0",
   "engines": {
-    "node": "24.12.0"
+    "node": "24.19.0"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -21,10 +22,11 @@
     "set-nvm": "nvm use $(cat .nvmrc)"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.6",
-    "@astrojs/react": "^4.4.2",
-    "@astrojs/rss": "^4.0.14",
-    "@astrojs/sitemap": "^3.6.0",
+    "@astrojs/check": "^0.9.10",
+    "@astrojs/markdown-remark": "^7.2.4",
+    "@astrojs/react": "^6.0.4",
+    "@astrojs/rss": "^4.0.19",
+    "@astrojs/sitemap": "^3.7.3",
     "@astrojs/tailwind": "^6.0.2",
     "@fontsource-variable/inter": "^5.0.18",
     "@fontsource-variable/noto-sans-jp": "^5.0.19",
@@ -38,7 +40,8 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
-    "astro": "^5.16.4",
+    "astro": "^7.2.4",
+    "astro-expressive-code": "^0.44.1",
     "astro-seo": "^0.8.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -58,7 +61,7 @@
     "typescript": "^5.4.5"
   },
   "devDependencies": {
-    "@astrojs/partytown": "^2.1.4",
+    "@astrojs/partytown": "^2.1.7",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-tailwindcss": "^0.6.11",