Merge pull request #121 from brklntmhwk/119-add-markdown-ruby-feature

brklntmhwk · web-flow · commit c4098f7efa95 · 2025-01-08T17:09:54.000+09:00
feat(deps): 🆕 add remark ruby plugin and replace ruby syntax
diff --git a/astro.config.ts b/astro.config.ts
@@ -18,6 +18,7 @@ import remarkCard, { type Config as RemarkCardConfig } from 'remark-card';
 import remarkDirective from 'remark-directive';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
+import remarkRubyDirective from 'remark-ruby-directive';
 import remarkVideo, { type Config as RemarkVideoConfig } from 'remark-video';
 import { iconNameTypes } from './src/lib/astro-integrations/icon-name-type';
 import { pagefind } from './src/lib/astro-integrations/pagefind';
@@ -137,6 +138,7 @@ export default defineConfig({
         } satisfies RemarkEmbedOptions,
       ],
       remarkLinkCard,
+      remarkRubyDirective,
       remarkLineBreaks,
     ],
     rehypePlugins: [
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -97,6 +97,7 @@
     "remark-directive": "^3.0.0",
     "remark-gfm": "4.0.0",
     "remark-math": "6.0.0",
+    "remark-ruby-directive": "^0.2.0",
     "remark-video": "^0.10.0",
     "satori": "^0.12.0",
     "sharp": "^0.33.5",
diff --git a/src/content/blog/en/build-a-simple-diy-soundproof-vocal-booth-on-a-shelf.mdx b/src/content/blog/en/build-a-simple-diy-soundproof-vocal-booth-on-a-shelf.mdx
@@ -5,7 +5,7 @@ type: blog
 title: Build a DIY soundproof vocal booth on a shelf
 publishedAt: 2024-11-14T05:27:54.903Z
 fmContentType: blog
-modifiedAt: 2025-01-07T08:19:43.786Z
+modifiedAt: 2025-01-08T07:55:44.336Z
 category:
   metadata: en/categories
   slug: attempt
@@ -192,7 +192,7 @@ So I covered the floor with the sheet and put some cork boards on it. It incredi
 
 Now, it was supposed to be almost all done at this point but it still sounded noisy when I made a fuss in the booth. Hmm...
 
-Speaking of which, I remember someone leaving a famous quote, "Sound leaks from gaps".
+Speaking of which, I remember someone leaving a famous quote, "Sound leaks from gaps."
 After all, I embarked on installing a curtain in front of the booth. [^3]
 
 [^3]: In addition, I stacked up a wooden board leftover for my work desk whose depth is longer than the top board onto it.
@@ -201,7 +201,7 @@ Having bought a cafe curtain and a tension rod, I dragged book stands that was a
 
 ![Book stands and a tension rod feat. hooks](../../../assets/images/diy-booth-curtain-rail.jpg)
 
-After installing the cafe curtain, the first impression I got was, "Isn't it like the photo booth of Purikura?".
+After installing the cafe curtain, the first impression I got was, "Isn't it like the photo booth of Purikura?"
 
 ![The cafe curtain installed](../../../assets/images/diy-booth-curtain-closed.jpg)
 
diff --git a/src/content/blog/en/pomodoro-shortcut.mdx b/src/content/blog/en/pomodoro-shortcut.mdx
@@ -3,7 +3,7 @@ title: Free pomodoro timer shortcut built only with the genuine Apple Clock app
 draft: published
 publishedAt: 2024-08-08T03:05:43.193Z
 type: blog
-modifiedAt: 2025-01-07T08:01:40.661Z
+modifiedAt: 2025-01-08T07:56:33.966Z
 category:
   slug: attempt
   metadata: en/categories
@@ -24,7 +24,7 @@ In modern society where productivity and time management are of top priority, th
 [The Pomodoro® Technique](https://www.pomodorotechnique.com/) plays a pivotal role as the accelerator and there've been a street full of pomodoro timer apps available in the app stores.
 
 I, a prisoner of time like most people, went to the market and stuck around for a while.
-Having tried those tomatoes from A to Z that looked delicious, I couldn't still find anything that made me say "This is it!".
+Having tried those tomatoes from A to Z that looked delicious, I couldn't still find anything that made me say "This is it!"
 Some have very limited features for free tier users, whereas some have a lot of bells and whistles that I mightn't use.
 
 So I embarked on creating it on my own with the Apple shortcut. As it's a rush job, I can't guarantee you its quality.
diff --git a/src/content/blog/en/split-keyboard-the-endpoint-build.mdx b/src/content/blog/en/split-keyboard-the-endpoint-build.mdx
@@ -5,7 +5,7 @@ type: blog
 title: Total newbie builds ergonomic split keyboard kit "The Endpoint"
 publishedAt: 2024-11-22T02:27:47.379Z
 fmContentType: blog
-modifiedAt: 2025-01-08T01:58:10.710Z
+modifiedAt: 2025-01-08T07:55:00.188Z
 category:
   metadata: en/categories
   slug: attempt
@@ -50,7 +50,7 @@ As of the day I'm writing this article, my proficiency level in this field is as
 
 - A total newbie in building a keyboard from a build kit
 - Have tried more than 10 off-the-shelf keyboards
-- Haven't done soldering ever since elementary school
+- Haven't done soldering ever since more than 10 years ago
 
 ## Main
 
@@ -198,7 +198,7 @@ The capability to adjust it to my shoulder width.
 On the other hand, it doesn't include anything like trackball cover, which means your trackball is merely there like a strawberry on top of a strawberry shortcake.
 Once you tilt your keyboard outside, it will jump out vigorously and then walk out on you very soon.
 
-I used to be one of them who thought it'd be no problem if using it home only, but reconsidered quickly, "Definitely need something to cover it".
+I used to be one of them who thought there'd be no problem as long as using it at home, but reconsidered quickly, "Definitely need something to cover it..."
 That's because it's often gone like a pinball game whenever I accidentally hit my keyboard. [^5]
 
 [^5]: I played it 3 times in shorter than 2 weeks. They were all gone too far unbelievably.
diff --git a/src/content/blog/en/total-newbie-builds-mini-itx-linux-pc.mdx b/src/content/blog/en/total-newbie-builds-mini-itx-linux-pc.mdx
@@ -5,7 +5,7 @@ type: blog
 title: Total newbie builds Mini-ITX Linux PC (Error after Error)
 publishedAt: 2024-09-19T01:48:09.453Z
 fmContentType: blog
-modifiedAt: 2025-01-07T07:51:14.938Z
+modifiedAt: 2025-01-08T06:59:27.229Z
 category:
   metadata: en/categories
   slug: attempt
@@ -17,7 +17,7 @@ tags:
     - nixos
     - linux
 description: A newbie recklessly builds Mini-ITX PC. From the beginner's view, some tricky points are explained through parts selection to OS installation.
-thumbnail: 🙃🖥️(；´Д｀)
+thumbnail: 🙃🖥️🛠️(；´Д｀)
 ---
 
 ## Intro
diff --git a/src/content/blog/ja/astro-website.mdx b/src/content/blog/ja/astro-website.mdx
@@ -1,10 +1,9 @@
 ---
-title: Astro + Cloudflare Pages + D1 + Front Matter CMS で個人ウェブサイトを作った
-description: 動画の時代に個人ブログという茨の道を歩みたいオタクなあなたに贈る開発体験記。Astro + Cloudflare Pages + D1 + Front Matter CMS とその他諸々の構成で作った個人ウェブサイトの諸機能を紹介
-publishedAt: 2024-07-13T00:35:10.000Z
-modifiedAt: 2025-01-07T08:30:14.111Z
 draft: published
+level: 4
 type: blog
+title: Astro + Cloudflare Pages + D1 + Front Matter CMS で個人ウェブサイトを作った
+publishedAt: 2024-07-13T00:35:10.000Z
 category:
   metadata: ja/categories
   slug: attempt
@@ -16,7 +15,8 @@ tags:
     - front-matter-cms
     - cloudflare
     - markdown
-level: 4
+modifiedAt: 2025-01-08T06:40:17.347Z
+description: 動画の時代に個人ブログという茨の道を歩みたいオタクなあなたに贈る開発体験記。Astro + Cloudflare Pages + D1 + Front Matter CMS とその他諸々の構成で作った個人ウェブサイトの諸機能を紹介
 thumbnail: 🚀🌐🔧 ( •̀ᴗ•́ )و
 ---
 
@@ -81,7 +81,7 @@ https://github.com/brklntmhwk/younagi.dev
 
 {/* textlint-disable ja-technical-writing/no-doubled-joshi */}
 ユーザの快適なブラウジングライフを支えるのに欠かせないのが検索機能である。
-インターネットの古き良き日々(グッドオールドデイズ)に想いを馳せるあまり、検索機能の実装を先延ばしにしてアクセスカウンターを実装することに躍起になっている個人ウェブサイトは後を絶たない。その生き様はとても格好イイと思う。だがしかし、それとこれとは別である。[^1]
+インターネットの:ruby[古き良き日々(グッド・オールド・デイズ)]に想いを馳せるあまり、検索機能の実装を先延ばしにしてアクセスカウンターを実装することに躍起になっている個人ウェブサイトは後を絶たない。その生き様はとても格好イイと思う。だがしかし、それとこれとは別である。[^1]
 
 [^1]: ネットの海を回遊しているとしばしば散見されるので、是非マグロにでもなった気分で気持ちよく遊泳してみて欲しい。
 
@@ -189,7 +189,7 @@ $$
 
 ##### コードブロック
 
-開☆発☆者(デベロッパ)として、コードを交えた説明は避けられない宿命である。
+:ruby[開☆発☆者(デベロッパ)]として、コードを交えた説明は避けられない宿命である。
 そこで、[rehype-pretty-code](https://rehype-pretty.pages.dev/)を使用し、シンタックスハイライトを実装した。シンタックスハイライターは[Shiki](https://shiki.style/)を採用。
 
 ```astro title="example.astro" "Astro.props" {6,9}
@@ -442,7 +442,7 @@ D1 データベースと[Drizzle ORM(Object-relational Mapping)](https://orm.dri
 - ローカルで記事の執筆や保存ができる
 - マークダウン/MDX 形式
 
-VS Code の拡張機能であり、ローカルで動くという点で、他のヘッドレス CMS とは一線を画している。これはつまり、コードの修正や記事の執筆、サイトのデプロイなどの作業が VS Code エディタで一元化できるということだ。特に開☆発☆者(デベロッパ)においては大きなメリットとなるのではないだろうか。
+VS Code の拡張機能であり、ローカルで動くという点で、他のヘッドレス CMS とは一線を画している。これはつまり、コードの修正や記事の執筆、サイトのデプロイなどの作業が VS Code エディタで一元化できるということだ。特に:ruby[開☆発☆者(デベロッパ)]においては大きなメリットとなるのではないだろうか。
 
 詳細は下記の記事を参照されたし。
 
diff --git a/src/content/blog/ja/one-month-with-the-ohnishi-keyboard-layout-a-status-update.mdx b/src/content/blog/ja/one-month-with-the-ohnishi-keyboard-layout-a-status-update.mdx
@@ -12,7 +12,7 @@ tags:
   metadata: ja/tags
   slugList:
     - keyboard
-modifiedAt: 2025-01-08T02:22:40.660Z
+modifiedAt: 2025-01-08T06:45:10.847Z
 description: QWERTY配列からの解脱に成功し、晴れて大西配列への入門を果たすまでの記録。プログラミング用途にも耐えうるよう、周辺キーにカスタマイズを施した。
 thumbnail: ⌨️🖐️🔄( •̀ω•́ )
 ---
@@ -23,13 +23,13 @@ thumbnail: ⌨️🖐️🔄( •̀ω•́ )
 
 https://younagi.dev/ja/blog/split-keyboard-the-endpoint-build/
 
-しかし人間(わたし)は欲深い生き物で、キーボードの自作が済んだら今度はキー配列までこねくり回したくなってしまった。
+しかし:ruby[人間(わたし)]は欲深い生き物で、キーボードの自作が済んだら今度はキー配列までこねくり回したくなってしまった。
 
 早速キー配列の沼に両足を突っ込んでみたところ、日本では「[大西配列](https://o24.works/layout/)」というキー配列が近年お熱らしく、開発者はあの大西琢磨氏だと言うではないか。[^1]
 
 [^1]: TV で「ギフテッド」というレッテルを貼られて紹介されているのを観たことがあり、予め名前は知っていた。
 
-更に分かったことがある。それは「QWERTY(こ)の支配からの卒業」をモチベーションにしたキー配列が数多く存在しているということだ。そしてそのうえで、私は大西配列をパートナーに選んだ。
+更に分かったことがある。それは「:ruby[QWERTY(こ)]の支配からの卒業」をモチベーションにしたキー配列が数多く存在しているということだ。そしてそのうえで、私は大西配列をパートナーに選んだ。
 
 理由は後ほど、推しポイントとして漏れなく紹介するつもりだ。
 
@@ -107,7 +107,7 @@ https://younagi.dev/ja/blog/split-keyboard-the-endpoint-build/
 
 私にとって「キー配列が覚えやすい」点が最大の決め手となった。ベンチマークの観点からのみ言えば、大西配列よりも魅力的なキー配列は他に幾つかあったのだが、そのどれもが・・覚えづらかった。
 
-対して、大西配列はベンチマーク上の数値、学習曲線、実際の使用感── これらの絶妙なバランスの上に成り立っている。
+対して、大西配列はベンチマーク上の数値、:ruby[学習曲線(ラーニング・カーブ)]、実際の使用感── これらの絶妙なバランスの上に成り立っている。
 現に、既に手元を見ることなくボチボチ快適にタイピングができるようになった。付き合い始めてまだ一ヶ月だと言うのに。
 
 #### ここが惜しいよ大西配列
@@ -124,7 +124,7 @@ https://younagi.dev/ja/blog/split-keyboard-the-endpoint-build/
 
 #### 大西配列 de プログラミング！
 
-開☆発☆者(デベロッパ)として、大西配列がコーディング用途に耐えうるのか否かは是非とも確認しておきたいところだ。
+:ruby[開☆発☆者(デベロッパ)]として、大西配列がコーディング用途に耐えうるのか否かは是非とも確認しておきたいところだ。
 
 ・・とはいえ、大西配列ではカンマやピリオド、ダッシュなどの一部を除き、他の記号に関しては「どうぞよしなに」というスタンスをとっている。つまり、大西配列がコーディング用途に耐えうるかどうかは、ほとんどユーザの手にかかっているのだ。[^4]
 
@@ -133,7 +133,9 @@ QWERTY 配列で Vim(Neovim)のキーバインドに慣れ切ってしまった
 
 ここでもう一度、キー配列の全体像を確認しておこう。
 
-![Remap で The Endpoint に大西配列をキーマップした](../../../assets/images/ohnishi-layout-0.jpg)
+![大西配列のキーマップ左手側](../../../assets/images/ohnishi-layout-left-0.jpg)
+
+![大西配列のキーマップ右手側](../../../assets/images/ohnishi-layout-right-0.jpg)
 
 コーディングで頻出する記号について、それぞれの配置は次のようになっている。
 
diff --git a/src/content/blog/ja/split-keyboard-the-endpoint-build.mdx b/src/content/blog/ja/split-keyboard-the-endpoint-build.mdx
@@ -5,7 +5,7 @@ type: blog
 title: キーボード自作初心者が左右分割型キーボード「The Endpoint」をビルドする
 publishedAt: 2024-11-22T02:27:47.379Z
 fmContentType: blog
-modifiedAt: 2025-01-07T08:29:48.639Z
+modifiedAt: 2025-01-08T06:56:26.636Z
 category:
   metadata: ja/categories
   slug: attempt
@@ -20,10 +20,10 @@ thumbnail: ⌨️✨🔧(∩´∀｀)∩
 
 ## 導入
 
-2020 年に突入し、自作キーボード (略して「自キ」とも) 界隈に或る一大旋風が巻き起こっている。
-その台風の目たる彼らは「左右分割型キーボード」を自称し、生産性・効率厨や、YouTube で突如としてデスクツアーを押っ始めてしまうようなデスクオタクらを中心にファンを獲得し続けているようだ。[^1]
+2020 年に突入し、:ruby[自作キーボード(自キ)]界隈に或る一大旋風が巻き起こっている。
+その台風の目たる彼らは「左右分割型キーボード」を自称し、効率厨や YouTube で徐にデスクツアーを押っ始めてしまうデスクオタクらを中心にファンを獲得し続けているようだ。[^1]
 
-[^1]: 私は 1 つのことをとことん突き詰められる彼らのような人たちを尊敬している。
+[^1]: ちなみに私は 1 つのことをとことん突き詰められる彼らのような人たちを尊敬している。
 
 彼らが他と明らかに異なるのは、文字通り左右が完全に分離している点である。これにより、ユーザは各々に合った肩幅でタイピングができるようになるのだ。「これぞ、エルゴノミクス・・！」
 
@@ -49,7 +49,7 @@ https://note.com/underthrow_/n/n65385d90a76e
 
 - ビルドキットからのキーボード自作において完全な初心者
 - これまでに 10 種類を超える既製品キーボードを使ってきた
-- はんだ付けは小学校以来
+- はんだ付けは 10 年以上ぶり
 
 ## 本題
 
@@ -102,7 +102,8 @@ The Endpoint の素敵なところは、トラックボールの取り付け位
 - 電子工作作業マット
 - 小物ケース
 
-キーキャップやキースイッチと併せると、優に 30,000 円を超えるシロモノであり、市販のキーボードと比べると決して安くはない。しかし、私は躊躇しなかった。そうして、理想郷への片道切符を手に、行き先の分からない電車へとせっせと乗り込んだ。
+キーキャップやキースイッチと併せると、優に 30,000 円を超えるシロモノであり、市販のキーボードと比べると決して安くはない。
+しかし、私は躊躇しなかった。そうして、:ruby[理想郷(ユートピア)]への片道切符を手に、行き先も分からぬままホームで待つ電車へと飛び乗った。
 
 ### ビルド開始
 
@@ -150,13 +151,13 @@ The Endpoint の素敵なところは、トラックボールの取り付け位
 #### プレートの取り付けが地味に大変
 
 これが終われば、いよいよキースイッチやキャップの取り付けという一番ワクワクするフェーズに突入する──　のだが、人生そう甘くはなかった。
-ゴールテープはもう目と鼻の先だったのだが、プレートの取り付けには想像以上に手こずった。
+ゴールテープを目前に、プレートの取り付けには想像以上に手こずった。
 
 ビルドガイドにも書いてあるが、トッププレートを取り付ける際は、先に四隅だけでもキースイッチを差し込んでおくことが重要であった。[^3]
 これは、何も考えずにそのままねじ締めを進めると、プレートが傾いてしまうからだ。
 つまり、先にキャップで仮留めを行い、平衡感覚を保ったうえで、ねじをバランスよく締めていくという算段だ。
 
-[^3]: 2024 年 11 月現在。今後、アップデートに伴い記載内容が変更される可能性は大いにある
+[^3]: 2024 年 11 月現在。今後、アップデートに伴い記載内容が変更される可能性は大いにある。
 
 ![プレート仮留めの様子](../../../assets/images/the-endpoint-plates.jpg)
 
@@ -185,8 +186,7 @@ https://younagi.dev/ja/blog/one-month-with-the-ohnishi-keyboard-layout-a-status-
 The Endpoint をビルドして 1 ~ 2 週間程使っているが、キーボードからマウスへの手の移動が無く、非常に快適だ。肩幅に合わせ自由にセッティングできるという、左右分割型キーボードの特権も存分に享受している。
 
 一方で、トラックボールユニットにはカバーのようなものが付属しておらず、言わばお供え物状態である。キーボードを少し傾けるとトラックボールが勢いよく転がり落ちてしまう為、外出先で使用すればたちどころに迷子となること必至だ。
-かく言う私も、はじめは自宅に据え置いて使うので問題ないと思っていたのだが、すぐに考えを改めた。
-というのも、何かの拍子でキーボードを引っぱたいてしまった時、ボールがピンボールの如く空の彼方へ弾き出されてしまうのだ。[^5]
+かく言う私も、はじめは自宅に据え置いて使うので問題ないと思っていたのだが、すぐに考えを改めた。割と高頻度でキーボードにぶつかってしまい、ボールが元気よく空の彼方へ:ruby[往って(ゴーンヌして)]しまうのだ。[^5]
 
 [^5]: 2 週間足らずで既に 3 回ピンボールをプレイし、いずれも思いがけない場所まで飛翔していた。
 
diff --git a/src/content/blog/ja/total-newbie-builds-mini-itx-linux-pc.mdx b/src/content/blog/ja/total-newbie-builds-mini-itx-linux-pc.mdx
@@ -5,7 +5,7 @@ type: blog
 title: 【エラーだらけ】PC 自作初心者が Mini-ITX の Linux PC を組み立てる
 publishedAt: 2024-09-19T01:48:03.469Z
 fmContentType: blog
-modifiedAt: 2025-01-07T07:51:32.701Z
+modifiedAt: 2025-01-08T06:59:13.806Z
 category:
   metadata: ja/categories
   slug: attempt
@@ -17,7 +17,7 @@ tags:
     - nixos
     - linux
 description: PC 自作初心者が無謀にも Mini-ITX PC の自作に挑戦した記録。パーツ選定からOSインストールまで、初心者目線でつまずいたポイントを解説する
-thumbnail: 🙃🖥️(；´Д｀)
+thumbnail: 🙃🖥️🛠️(；´Д｀)
 ---
 
 ## 導入
