Merge pull request #73 from brklntmhwk/72-tweak

refactor(overall): ✨ tweak pages and articles

src/content/blog/en/astro-and-front-matter-cms-combi.mdx

@@ -14,7 +14,7 @@ tags:
     - vscode
 level: 1
 description: Detailed explanations of how Front Matter CMS could be the best partner for Astro among all headless CMS, and the configurations I made with some demos.
-modifiedAt: 2024-09-11T05:07:00.580Z
+modifiedAt: 2024-10-17T04:36:37.548Z
 ---
 
 ## Intro
@@ -30,6 +30,8 @@ https://younagi.dev/blog/astro-website/
 
 ### Reader personas
 
+読者の方は趣味や仕事でフロントエンド開発の経験があるという想定です。
+
 - Want to build and run one's own website or blog but overwhelmed by countless options for headless CMS
 - Struggling to find a headless CMS for a website built with Astro
 - Want to see examples of Front Matter CMS in collaboration with Astro

src/content/blog/en/astro-website.mdx

@@ -2,7 +2,7 @@
 title: Build a Personal Website with Astro, Cloudflare Pages, D1, and Front Matter CMS
 description: A quick tour of my personal blog built with Astro, Cloudflare Pages, D1, and Front Matter CMS.
 publishedAt: 2024-07-13T00:34:54.000Z
-modifiedAt: 2024-09-12T02:58:57.715Z
+modifiedAt: 2024-10-17T03:25:25.106Z
 draft: published
 type: blog
 category:
@@ -29,8 +29,11 @@ If you're interested in the code behind my website, see [my Github repo](https:/
 
 ### Reader personas
 
+This article is written assuming readers are a front-end developer whether hobby or work.
+
 - Want to build a website with Astro but have no idea how the whole project structure could be or what kind of features to be added
 - Want to see some examples of the whole project built with Astro
+- Have no idea what sort of features to add to a personal website
 
 ### My proficiency level
 
@@ -44,7 +47,7 @@ As of the day when I'm writing this article, my proficiency level in this field
 
 ### Astro
 
-Basically, I managed to develop it within the scope of what Astro offers. Other than that, I used a JS framework, [SolidJS](https://www.solidjs.com/). It goes without saying that all written in TypeScript (and TSX).
+Basically, I managed to develop it within the scope of what Astro offers. Other than that, I used a JS framework, [SolidJS](https://www.solidjs.com/). All written in TypeScript (and TSX).
 
 > [!info]- The tech stack
 > **Languages:** [TypeScript](https://www.typescriptlang.org/), [TSX](https://www.typescriptlang.org/docs/handbook/jsx.html), [YAML](https://yaml.org/)
@@ -72,9 +75,9 @@ Basically, I managed to develop it within the scope of what Astro offers. Other
 ![Demo: How the search functionality works](../../../assets/images/fulltext-search-demo.gif)
 
 I used [Pagefind](https://pagefind.app/), a Rust based static search library. It's lightweight, lightning fast, and easy to use.
-It's also self-contained on the browser without needing to interact with server. The mechanism is simple; Pagefind creates index files in advance referring to static files that are generated at build time.
+It's also self-contained on the browser without needing to interact with server. The mechanism is simple; Pagefind creates index files in advance based on those generated-at-build-time static files.
 
-Along the way, I got hung up on some key points:
+Along the way, I managed to add these key features:
 
 - Callable via a shortcut key
   - Press `Ctrl + K` if you're on PC
@@ -336,7 +339,9 @@ Here are some points:
   - This feature can easily be topped thanks to the form control of the Modular Forms
 - After the form successfully submitted, it redirects to a thanks page
 
-For bot management, I got hung up on [Cloudflare Turnstile](https://developers.cloudflare.com/turnstile/) compared to notorious Google reCAPTCHA. (I never forget the wasted time solving the car puzzles...) It's free and fully compatible with other Cloudflare services, so I had no other choice.
+For bot management, I got hung up on [Cloudflare Turnstile](https://developers.cloudflare.com/turnstile/) compared to notorious Google reCAPTCHA. [^3] It's free and fully compatible with other Cloudflare services, so I had no other choice.
+
+[^3]: The car or traffic signal puzzles I guess anybody who's gone through the 2010s ever came across. The total time I spent solving them might be over an hour...
 
 ### Cloudflare
 

src/content/blog/en/obsidian-knowledge-base.mdx

@@ -5,7 +5,7 @@ type: blog
 title: Create an Obsidian starter kit for knowledge base "NPKB"
 publishedAt: 2024-09-05T04:11:06.403Z
 fmContentType: blog
-modifiedAt: 2024-09-11T06:08:39.696Z
+modifiedAt: 2024-10-17T03:40:24.484Z
 category:
   metadata: en/categories
   slug: learning
@@ -28,6 +28,8 @@ Here, let me introduce a showcase project for my personal knowledge base built o
 
 ### Reader personas
 
+This article is written assuming readers understand the basics of [Git](https://git-scm.com/) but they don't necessarily have to have experience in front-end development.
+
 - Want to create a personal knowledge base using Obsidian but have no idea how
 - Want to migrate from Notion, Evernote, or other note-taking app to Obsidian but it's overwhelming with a bunch of settings
 - Don't want to get bothered by tinkering with the numerous settings (Just want to have a comfortable knowledge base and quick start!)

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: 2024-09-19T07:25:19.977Z
+modifiedAt: 2024-10-17T03:34:50.184Z
 category:
   slug: learning
   metadata: en/categories
@@ -109,10 +109,12 @@ Hereafter, it runs on the same process
 - 𝕏 Set the concatenated string to a variable
 - 🔛Pass it to this shortcut and call it in itself
 
-This shortcut can take a parameter in text and then retrieves the work & break interval times separately from it if it exists, which enables the recursive structure.
+This shortcut can take a parameter in text and then retrieves the interval times separately from it if it exists, which makes it recursive.
 If not, it asks you how long, which is supposed to be the case only the first time.
 
-Another important point is, to the best of my knowledge, the Apple shortcut doesn't have a feature like the [async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) from JavaScript. That's why I had to use the "Wait xxx" block instead of the await operator to make it align with the timer in terms of the timing, which is a bit of a workaround.
+Another important point is that the Apple shortcut doesn't have a feature like the [async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) from JavaScript. [^1] That's why I had to use the "Wait xxx" block instead of the await operator to make it align with the timer in terms of the timing, which is a bit of a workaround.
+
+[^1]: To the best of my knowledge, there's no such feature as asynchronous as of Oct 2024.
 
 > [!question]+Why do you need to get interval times in seconds?
 > Because the shortcut block "Wait xxx" only takes a time in seconds

src/content/blog/en/total-newbie-builds-mini-itx-linux-pc.mdx

@@ -1,11 +1,11 @@
 ---
 draft: published
-level: 4
+level: 3
 type: blog
 title: Total newbie builds Mini-ITX Linux PC (Error after Error)
 publishedAt: 2024-09-19T01:48:09.453Z
 fmContentType: blog
-modifiedAt: 2024-09-19T07:33:51.925Z
+modifiedAt: 2024-10-17T06:04:02.128Z
 category:
   metadata: en/categories
   slug: learning
@@ -29,6 +29,8 @@ As a total newbie, here are my struggles along the way of building my Linux PC f
 
 ### Reader personas
 
+No special experience required as long as you're keen to build your own PC.
+
 - Want to build a PC from scratch but have no idea what to do or how to start either
 - Struggling with some errors along the way right now
 - Want to know what it's like to build a Mini-ITX PC
@@ -53,6 +55,7 @@ From parts selection to OS installation, it took me almost a month. Here's the s
 ### Select PC parts
 
 The overview of my parts selection is as follows:
+Newbies like me might find it helpful as a list of necessary PC parts:
 
 ---
 - @= Lian Li A4-H2O
@@ -95,6 +98,16 @@ Just in case, "Mini-ITX" is one of the motherboard types. It's the smallest one
 
 Basically, you're supposed to choose it at the early stage of parts selection and then later other parts such as the PC case, power supply, and so forth. This is because they have a specific compatible type of motherboard one another.
 
+I chose them following the order below. It might not be common to fix your PC case first though. [^1]
+
+[^1]: In my case, what led me to embark on building my PC was the PC case, "Lian Li A4-H2O". When I watched a YouTube video that showed me how to build a PC with it, I sort of fell in love with its sophisticated design. It was far from what I imagined as a self-built PC: A huge gaming PC with a dragon's eye(s).
+
+1. PC case
+2. CPU, Motherboard
+3. CPU cooler、Power supply
+4. GPU
+5. Memory, Storage
+
 > [!warning]+
 > Personally, I don't recommend going with a Mini-ITX PC case if you're a newbie like me because one of the most hardest parts was cable menagement. On top of that, I felt like it's a bit more expensive than other types, guessing it has a fewer lineups or is a niche option. (As of Sep 2024)
 
@@ -115,6 +128,9 @@ This PC is supposed to be my development workstation, which means I don't use it
 
 Building the PC in and of itself took me only a few days but I faced a lot of trouble during and after that.
 
+> [!note]
+> When building a PC, peruse user's manuals of each part!
+
 #### Trouble 1: Cable management
 
 What plagued me most was hands down cable management. I ended up having to unbuild and dismantle the PC over and over to finalize the cable positions. This might especially be true for Mini-ITX PCs though.

src/content/blog/ja/astro-and-front-matter-cms-combi.mdx

@@ -14,7 +14,7 @@ tags:
     - vscode
 level: 1
 description: Astro製ウェブサイトのヘッドレスCMSにどうしてFront Matter CMSなのか？という疑問から、チュートリアルでは学べない詳細な設定まで実際のデモも交えて説明する
-modifiedAt: 2024-09-11T05:05:43.432Z
+modifiedAt: 2024-10-17T04:36:23.938Z
 ---
 
 ## 導入
@@ -30,6 +30,8 @@ https://younagi.dev/ja/blog/astro-website/
 
 ### 想定読者
 
+読者の方は趣味や仕事でフロントエンド開発の経験があるという想定です。
+
 - 自分のウェブサイトやブログを開発・運営したいがヘッドレス CMS が多すぎて圧倒されている
 - ちょうど Astro 製ウェブサイトのヘッドレス CMS 探しに苦戦している
 - Front Matter CMS と Astro を組み合わせたプロジェクトの具体例が見たい

src/content/blog/ja/astro-website.mdx

@@ -2,7 +2,7 @@
 title: Astro + Cloudflare Pages + D1 + Front Matter CMS で個人ウェブサイトを作った
 description: Astro + Cloudflare Pages + D1 + Front Matter CMSの構成で作った個人ウェブサイトの開発体験を簡単に紹介する
 publishedAt: 2024-07-13T00:35:10.000Z
-modifiedAt: 2024-09-06T04:01:52.458Z
+modifiedAt: 2024-10-17T03:16:06.824Z
 draft: published
 type: blog
 category:
@@ -29,8 +29,11 @@ level: 4
 
 ### 想定読者
 
+読者の方は趣味や仕事でフロントエンド開発をしているという想定です。
+
 - Astro でウェブサイトを作りたいが、プロジェクト全体の構成をどうすればいいのか、どんな機能を実装すればいいのかわからない
 - Astro で作ったプロジェクトの全体像を参考にしたい
+- 個人開発のウェブサイトにどんな機能を盛り込めばよいか分からない
 
 ### 現時点での私の習熟度
 
@@ -44,7 +47,7 @@ level: 4
 
 ### Astro
 
-基本は Astro の機能範囲で実装し、一部 JS フレームワーク「[SolidJS](https://www.solidjs.com/)」を使って実装しています。もちろん全て TypeScript(と TSX) です。
+基本は Astro の機能範囲で実装し、一部 JS フレームワーク「[SolidJS](https://www.solidjs.com/)」を使って実装しています。全て TypeScript(と TSX) です。
 
 > [!info]- 技術構成
 > **言語:** [TypeScript](https://www.typescriptlang.org/), [TSX](https://www.typescriptlang.org/docs/handbook/jsx.html), [YAML](https://yaml.org/)
@@ -71,8 +74,8 @@ level: 4
 
 ![デモ: 検索機能](../../../assets/images/fulltext-search-demo.gif)
 
-Rust 製の静的検索ライブラリである[Pagefind](https://pagefind.app/)の力を借りることにしました。軽量、高速、そして導入が簡単。
-更にサーバーとのやり取りが不要でブラウザ完結なのも魅力的です。仕組みは至ってシンプルで、ビルド時に生成される静的ファイルを読みに行き、検索用のインデックスファイルをあらかじめ生成しておくというものです。
+Rust 製の静的検索ライブラリである[Pagefind](https://pagefind.app/)を選びました。とにかく軽量、高速、そして導入が簡単。
+更にサーバーとのやり取りが不要でブラウザ完結なのも魅力的です。仕組みは至ってシンプルで、ビルド時生成ファイルを基に予めインデックスファイルを作成しておき、静的にキーワード検索できるようにしています。
 
 開発に際して、次のポイントにこだわりました。
 
@@ -334,10 +337,12 @@ https://younagi.dev
   - Valibot x Cloudflare Turnstile
 - 送信ボタンのラベルが送信中に変わる
   - ユーザがわかり易いように
-  - Modular Forms のフォーム制御機能のおかげで簡単に実装できました
+  - Modular Forms のフォーム制御機能のおかげで簡単に実装できた
 - 送信完了後、サンクスページにリダイレクトされる
 
-ボット対策にはどうしても Google reCAPTCHA ではなく[Cloudflare Turnstile](https://developers.cloudflare.com/turnstile/)を導入したく、この点はかなりこだわりました。(あの車のパズルに費やした合計時間を考えると...しんどい) 無料ですし、他の Cloudflare サービスとの連携も考えると、私にとっては一択でした。
+ボット対策にはどうしても Google reCAPTCHA ではなく[Cloudflare Turnstile](https://developers.cloudflare.com/turnstile/)を導入したく、この点はかなりこだわりました。[^3] 無料ですし、他の Cloudflare サービスとの連携も考えると、私にとっては一択でした。
+
+[^3]: 2010 年代を生き抜いた皆さんであれば恐らく誰もが遭遇しているであろう、例の車や信号をひたすら選ばせるパズルです。私の総プレイ時間は恐らく 1 時間を超えていると思われます・・。
 
 ### Cloudflare
 

src/content/blog/ja/obsidian-knowledge-base.mdx

@@ -5,7 +5,7 @@ type: blog
 title: Obsidian でナレッジベース用のスターターキット「NPKB」を作った
 publishedAt: 2024-09-05T04:10:55.070Z
 fmContentType: blog
-modifiedAt: 2024-09-11T06:09:30.765Z
+modifiedAt: 2024-10-17T04:34:47.012Z
 category:
   metadata: ja/categories
   slug: learning
@@ -28,6 +28,8 @@ description: Obsidian でナレッジベースを築き上げるのは骨が折
 
 ### 想定読者
 
+フロントエンド開発の経験は無くても問題ないですが、[Git](https://git-scm.com/)の基本的な操作は心得ているという想定です。
+
 - Obsidian を使ってナレッジベースを作りたいが、どこから始めたらいいかわからない
 - Notion や Evernote 等のノートアプリから Obsidian に移行したいが、設定が多すぎて圧倒されている
 - Obsidian の膨大な数の設定に頭を悩ませたくない(ただ快適なナレッジベースが早く欲しいだけなんだ！)
@@ -81,8 +83,8 @@ https://github.com/brklntmhwk/npkb
 
 - ホームページの次に大きなノートへのアクセスポイントになる
   - 具体的には、デイリーノートや[MOC](#mocmap-of-content)のこと。それぞれカレンダーや「Recent Daily Notes」、そして「Map of Contents」からアクセスできる
-- 世話を待つノートたちの存在に気づかせてくれる
-  - 「Floating Boat Notes」で作成されてから漂流し続けているノートの一覧が確認できる
+- 放置されているノートの存在に気づかせてくれる
+  - 「Floating Boat Notes」の表から放置され続けているノートの一覧が確認できる
   - ボートノートの意味については、[the evergreen ethos](#エバーグリーンの精神)を参照のこと
 - 散らばったランダムな思考やアイデアをまとめて洗練させるのに役立つ
   - 「Recent Daily Notes」で過去 7 日間の「[自由帳](#デイリーノート)」データをまとめて確認できる
@@ -166,7 +168,7 @@ Obsidian では[相互リンク機能(Wikiリンクとも)](https://help.obsidia
 
 #### Templates
 
-テンプレートはこちらです。
+テンプレートはこちらのディレクトリで管理します。
 
 #### Notes
 
@@ -190,15 +192,15 @@ Obsidian では[相互リンク機能(Wikiリンクとも)](https://help.obsidia
 より大きい抽象的な物事はこちらです。乗っけからそういったトピックについてノートを作りたい場合は、こちらを選びます。
 
 > [!info]
-> NPKB では、基本的に上記の「[Notes](#notes)」のような具体的かつ小さいノートを出発地点とします。その方が、素早くノートを取ることができるような気がします。
+> NPKB では、基本的に上記の「[Notes](#notes)」のような具体的かつ小さいノートを出発地点とします。その方が、素早くノートを書き始められると個人的に感じています。
 
 ##### Efforts
 
-[長期的な目標](#長期的な目標の管理)に関するノートはこちらです。
+[長期的な目標](#長期的な目標の管理)に関するノートはこちらに入ります。
 
 ##### Gleanings
 
-SNS など、外部の情報源からの情報に関するノートはこちらです。
+SNS など、外部の情報源からの情報に関するノートはこちらに入ります。
 
 ##### MOC(Map Of Content)
 
@@ -242,6 +244,10 @@ MOC のメリットは次の通りです。
 
 ## 結び
 
+数年使い続けた所感として、Obsidian はどちらかと言うと開発者向けのノートアプリなのかなと思います。
+非常にカスタマイズ性に富んでいて、プラグインの組み合わせや使い手の腕次第で理想の環境を構築できますが、一方で開発経験のない初心者にとっては、学習コストが高くてとっつきにくい感は否めません。
+NPKB がその取っ掛かりになれば嬉しいですが、使っていてしっくりこなければ、より一般的な[Notion](https://www.notion.so/ja)に乗り換えるというのも 1 つの手でしょう。
+
 NPKB は沢山の素晴らしいコミュニティプラグインに支えられて成り立っています。その中でも、本記事で触れた機能を実装するのに必要不可欠なプラグインたちをいくつか紹介します。
 
 - [Dataview](https://blacksmithgu.github.io/obsidian-dataview/): データテーブルはすべてこのプラグインのおかげ