refactor(overall): ✨ tweak

.frontmatter/templates/blog.mdx

@@ -19,11 +19,32 @@ type: blog
 
 ### Outcomes
 
-### Outro
+## Outro
+
+---
+
+## 導入
+
+### 想定読者
+
+- xxx
+
+## 本題
+
+### 準備
+
+### 実験
+
+### 結果
+
+## 結び
 
 {/* <!-- Learning --> */}
 ## Intro
 
+> [!quote] One phrase
+> —
+
 ### Reader personas
 
 - xxx
@@ -38,7 +59,34 @@ As of the day I'm writing this article, my proficiency level in this field is as
 
 ## Outro
 
+---
+
+## 導入
+
+> [!quote] ひと言
+> —
+
+### 想定読者
+
+- xxx
+
+### 現時点での私の習熟度
+
+記事執筆時点での私の習熟度は次の通りです。
+
+- xxx
+
+## 本題
+
+## 結び
+
 {/* <!-- Travel --> */}
 ## Travel memoirs
 
 ## Editor's note
+
+---
+
+## 旅行記
+
+## 編集後記

src/components/Taxonomy/taxonomy.css.ts

@@ -55,7 +55,7 @@ export const colorVariants = styleVariants({
   purple: {
     vars: {
       [fgColor]: 'hsla(0, 0%, 96.7%, 1)',
-      [bgColor]: 'hsla(253, 56%, 70%, 1)',
+      [bgColor]: 'hsla(253, 56%, 60%, 1)',
     },
     '@media': {
       '(prefers-color-scheme: dark)': {
@@ -93,7 +93,7 @@ export const colorVariants = styleVariants({
       '(prefers-color-scheme: dark)': {
         vars: {
           [fgColor]: 'hsla(0, 0%, 96.7%, 1)',
-          [bgColor]: 'hsla(205, 10%, 38%, 1)',
+          [bgColor]: 'hsla(205, 10%, 35%, 1)',
         },
       },
     },

src/components/elements/Callout/callout.css.ts

@@ -98,7 +98,7 @@ export const calloutVariants = styleVariants({
   quote: {
     vars: {
       [calloutKind]: 'quote',
-      [fgColor]: 'hsla(212, 16%, 48%, 1)',
+      [fgColor]: 'hsla(212, 16%, 35%, 1)',
       [bgColor]: 'hsla(212, 16%, 82%, 1)',
     },
     '@media': {
@@ -115,14 +115,14 @@ export const calloutVariants = styleVariants({
   note: {
     vars: {
       [calloutKind]: 'note',
-      [fgColor]: 'hsla(152, 40%, 38%, 1)',
-      [bgColor]: 'hsla(122, 40%, 72%, 1)',
+      [fgColor]: 'hsla(51, 65%, 32%, 1)',
+      [bgColor]: 'hsla(51, 75%, 65%, 1)',
     },
     '@media': {
       '(prefers-color-scheme: dark)': {
         vars: {
-          [fgColor]: 'hsla(142, 30%, 75%, 1)',
-          [bgColor]: 'hsla(152, 30%, 30%, 1)',
+          [fgColor]: 'hsla(51, 65%, 65%, 1)',
+          [bgColor]: 'hsla(51, 52%, 28%, 1)',
         },
       },
     },
@@ -179,6 +179,7 @@ export const calloutTitleIcon = style({
 
 globalStyle('.callout-content', {
   fontSize: '1rem',
+  lineHeight: '1.95',
 });
 
 globalStyle('.callout-content > a', {

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-03T06:24:38.254Z
+modifiedAt: 2024-09-06T04:01:19.163Z
 draft: published
 type: blog
 category:
@@ -20,6 +20,9 @@ level: 4
 
 ## Intro
 
+> [!quote] One phrase
+> — In this modern video era, play it in hardcore mode with your personal blog.
+
 It took me 4 months or so to complete the journey through building my personal website up to a minimum decent level. Here, you'll join a quick tour of the whole development experience.
 
 If you're interested in the code behind my website, see [my Github repo](https://github.com/brklntmhwk/younagi.dev). Code is worth a thousand words.
@@ -41,7 +44,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 [SolidJS](https://www.solidjs.com/), the up-and-coming JS framework. 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/). It goes without saying that 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/)
@@ -68,7 +71,8 @@ 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 secret is that Pagefind creates index files in advance based on those static files that are generated at build time.
+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.
 
 Along the way, I got hung up on some key points:
 

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

@@ -1,11 +1,11 @@
 ---
 draft: published
-level: 3
+level: 2
 type: blog
 title: Create an Obsidian starter kit for knowledge base "NPKB"
 publishedAt: 2024-09-05T04:11:06.403Z
 fmContentType: blog
-modifiedAt: 2024-09-05T04:42:27.065Z
+modifiedAt: 2024-09-06T03:44:52.400Z
 category:
   metadata: en/categories
   slug: learning
@@ -20,7 +20,7 @@ description: Building one's own knowledge base on Obsidian is a daunting task. H
 ## Intro
 
 > [!quote] One Phrase
-> — You shape your tools, and they shape you
+> — Necessities in the 2020's: Smartphone, human relationship, and knowledge base
 
 I love [Obsidian](https://obsidian.md/) and have been using it as my knowledge base where almost all info and data I gather are stored daily.
 
@@ -44,12 +44,30 @@ As of the day I'm writing this article, my proficiency level in this field is as
 
 ![NPKB vault image](../../../assets/images/npkb.png)
 
+First of all, let me clarify what NPKB isn't cut out for.
+
+- **Schedule and task management**
+	- Managing them on your smartphone or tablet is much more handy
+	- A lot of useful calendar and To-do apps available now
+- **Mind map and other visualization**
+	- The same reason as above (e.g., iPad)
+	- Personally, I love using iPad when creating a mind map or visualizing any ideas or thoughts
+- **Quick notes creation and management**
+	- You can leave quick notes here on the spot if you're on the PC but if not, it's quite hard (e.g., When you're walking outside)
+	- Figure out another alternative way possibly with your smartphone or tablet
+
+Then, what's it for after all? Basically, **it's meant to be the final destination for all info and data you gather on a daily basis**. That means, anything from anywhere all over the place like your smartphone, tablet, or a piece of paper ends up here.
+
+I'm not going to mention that here though, I've made the ecosystem where my knowledge base is accessible and editable from anywhere among my smartphone, tablet, and PC. Of course it's synched among them. For more details, see the article below.
+
+(🚧Coming soon...)
+
 Check the repository below if you're interested in NPKB.
 
 https://github.com/brklntmhwk/npkb
 
 > [!note]+
-> The version of NPKB is managed by [Git](https://git-scm.com/). Although you don't have to manually input the commands in most cases except the first setup, preferably you know the basics of Git at least in preparation for unexpected errors that must be fixed manually.
+> The version of NPKB is managed by [Git](https://git-scm.com/). Although you don't have to manually input the Git commands in most cases except the first setup, preferably you know the basics of Git at least in preparation for unexpected errors that must be fixed manually.
 
 ### Demo
 
@@ -205,10 +223,10 @@ The advantages of MOC are:
 
 As an indicator of to what extent a note has been matured, the following emojis are used in the frontmatter of every note. This concept is the Evergreen ethos advocated by [Andy Matuschak](https://andymatuschak.org/).
 
-- `⛵(Stage 1. Boat note):` Just started or floating around isolated from other notes with no content added
-- `🌱(Stage 2. Seedling):` Growing with a few contents and bidirectional links added but still in its infancy
-- `🌿(Stage 3. Budding):` Growing with more than a few  bidirectional links and contents added but still developing
-- `🌲(Stage 4. Evergreen forest):`  Well developed and full-fledged "Evergreen Notes"
+- `⛵ Stage 1. Boat note:` Just started or floating around isolated from other notes with no content added
+- `🌱Stage 2. Seedling:` Growing with a few contents and bidirectional links added but still in its infancy
+- `🌿 Stage 3. Budding:` Growing with more than a few  bidirectional links and contents added but still developing
+- `🌲 Stage 4. Evergreen forest:`  Well developed and full-fledged "Evergreen Notes"
 
 I often create a note anyway just adding the link to the media whenever coming across something interesting and later on, add more contents and Wiki links.
 

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-03T06:24:24.221Z
+modifiedAt: 2024-09-06T04:01:52.458Z
 draft: published
 type: blog
 category:
@@ -20,6 +20,9 @@ level: 4
 
 ## 導入
 
+> [!quote] ひと言
+> — この動画の時代に個人ブログで勝負するという縛りプレイ
+
 個人ウェブサイト開発に 4 ヶ月程費やし、何とか最低限見せられるレベルまで完成しました。その開発体験についてポイントをかいつまんで書きます。
 
 当サイトのソースコードに興味のある方は、[Github レポジトリ](https://github.com/brklntmhwk/younagi.dev)をご覧ください。百文は一見(コード)に如かず。
@@ -41,7 +44,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/)
@@ -68,7 +71,8 @@ level: 4
 
 ![デモ: 検索機能](../../../assets/images/fulltext-search-demo.gif)
 
-Rust 製の静的検索ライブラリである[Pagefind](https://pagefind.app/)の力を借りることにしました。軽量、高速、そして導入が簡単。更にサーバーとのやり取りが不要でブラウザ完結なのも魅力的です。仕組みは至ってシンプルで、ビルド時に生成される指定ディレクトリ下の静的ファイルを読みに行き、検索用のインデックスファイルをあらかじめ生成しておくというものです。
+Rust 製の静的検索ライブラリである[Pagefind](https://pagefind.app/)の力を借りることにしました。軽量、高速、そして導入が簡単。
+更にサーバーとのやり取りが不要でブラウザ完結なのも魅力的です。仕組みは至ってシンプルで、ビルド時に生成される静的ファイルを読みに行き、検索用のインデックスファイルをあらかじめ生成しておくというものです。
 
 開発に際して、次のポイントにこだわりました。
 

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

@@ -1,11 +1,11 @@
 ---
 draft: published
-level: 3
+level: 2
 type: blog
 title: Obsidian でナレッジベース用のスターターキット「NPKB」を作った
 publishedAt: 2024-09-05T04:10:55.070Z
 fmContentType: blog
-modifiedAt: 2024-09-05T04:35:22.880Z
+modifiedAt: 2024-09-06T03:49:25.367Z
 category:
   metadata: ja/categories
   slug: learning
@@ -19,10 +19,10 @@ description: Obsidian でナレッジベースを築き上げるのは骨が折
 
 ## 導入
 
-> [!quote] One Phrase
-> — You shape your tools, and they shape you
+> [!quote] ひと言
+> — 2020年代の必需品: スマートフォン、人との繋がり、ナレッジベース
 
-私はナレッジベースとして[Obsidian](https://obsidian.md/)を愛用していて、日々得られた情報やデータは全てそちらで管理しています。
+私は個人ナレッジベースとして[Obsidian](https://obsidian.md/)を愛用していて、日々得られた情報やデータは全てそちらで管理しています。
 
 今回、その普段使いしているナレッジベースをスターターキットとして公開しました。 その名も、**「Nagi's Personal Knowledge Base(NPKB)」** です。
 
@@ -44,12 +44,30 @@ description: Obsidian でナレッジベースを築き上げるのは骨が折
 
 ![NPKB vault のイメージ](../../../assets/images/npkb.png)
 
+まず初めに、NPKB に適さない使い方を明記します。
+
+- **スケジュール・タスク管理**
+	- スマホやタブレットで管理する方がずっと便利
+	- 昨今では便利なカレンダー・TODO アプリが沢山ある
+- **マインドマップなどの視覚化**
+	- 理由は同上 (例: iPad)
+	- 個人的には、マインドマップなど、思考やアイデアを図式化をする際には iPad を好んで使っている
+- **クイックノートの作成と管理**
+	- PC 使用時であればすぐにメモを書き残すことができるが、そうでなければ面倒(例: 外を歩いているとき)
+	- 恐らくスマホやタブレットを使った代替策を見つけた方がよい
+
+それでは、結局どんな使い方に向いているのでしょう？基本的には、**私たちが日ごろ集める全ての情報やデータの最終目的地になります**。スマホやタブレット、紙のノートなど、バラバラな場所に書き留めたものが、最終的にはここに行き着くということです。
+
+ここでは触れませんが、私はスマホ・タブレット・PC 間の連携でどこからでもナレッジベースにアクセスができ、ノートの編集が可能な環境を構築しました。もちろんデータは同期されます。詳しくは下記の記事をご覧ください。
+
+(🚧記事作成中)
+
 NPKB に興味がある、試してみたいという方は下記リンクをご覧ください。
 
 https://github.com/brklntmhwk/npkb
 
 > [!note]+
-> NPKB のバージョン管理には[Git](https://git-scm.com/)を使用しています。初めのセットアップを除いて、基本的にはコマンドを直接入力する機会はありませんが、Gitの基本は押さえているのが好ましいです。修正にコマンド入力が必要な予期せぬエラーに備えて..。
+> NPKB のバージョン管理には[Git](https://git-scm.com/)を使用しています。初めのセットアップを除いて、基本的にはコマンドを直接入力する機会はありませんが、Gitの基本は押さえているのが好ましいです。予期せぬエラーが起きた場合、修正するのにコマンド入力が必要になりますから...。
 
 ### デモ
 
@@ -62,12 +80,12 @@ https://github.com/brklntmhwk/npkb
 ホームページは、全ノートのハブ(中心地)というよりは始まりの場所のような位置づけになります。そして次のような重要な役割を果たします。
 
 - ホームページの次に大きなノートへのアクセスポイントになる
-  - デイリーノートはカレンダーや「Recent Daily Notes」から、[MOC](#mocmap-of-content)は「Map of Contents」からそれぞれアクセスできる等
+  - デイリーノートはカレンダーや「Recent Daily Notes」から、[MOC](#mocmap-of-content)は「Map of Contents」からそれぞれアクセスできる
 - 育成を待つノートたちの存在に気づかせてくれる
-  - 「Floating Boat Notes」で作成されてから漂流し続けているノートの一覧が見られる
+  - 「Floating Boat Notes」で作成されてから漂流し続けているノートの一覧が確認できる
   - ボートノートの意味については、[the evergreen ethos](#エバーグリーンの精神)を参照のこと
 - 散らばったランダムな思考やアイデアをまとめて洗練させるのに役立つ
-  - 「Recent Daily Notes」で過去 7 日間の「[自由帳](#デイリーノート)」データをまとめて見られる
+  - 「Recent Daily Notes」で過去 7 日間の「[自由帳](#デイリーノート)」データをまとめて確認できる
 
 #### 新しいノートを作る
 

src/content/i18n/ja/translation.yml

@@ -4,7 +4,7 @@ back_to_top: &back_to_top トップに戻る
 scroll_to_top: &scroll_to_top ページ上部へ
 blog: &blog ブログ
 news: &news ニュース
-about: &about 運営者
+about: &about 自己紹介
 contact: &contact お問い合わせ
 
 blog_name: *website

src/content/page/en/about.mdx

@@ -1,7 +1,7 @@
 ---
 title: about
 type: page
-modifiedAt: 2024-08-29T02:25:05.081Z
+modifiedAt: 2024-09-06T03:22:14.632Z
 ---
 
 ## About my website
@@ -42,7 +42,14 @@ When it comes to what I offer, I roughly stick to the following principles:
 
 ### The easy-to-hard level in some articles
 
-Articles categorized as "[Learning](https://younagi.dev/blog/categories/learning/)" have a "Level" field. Bear in mind that this is totally based on my subjective judgment.
+Articles categorized as "[Learning](https://younagi.dev/blog/categories/learning/)" have a "Level" field indicated as five stars. Bear in mind that this is totally based on my subjective judgment considering the criteria below.
+
+- Time required
+  - How long it takes for me to get it done
+- Complexity
+  - How complex it is to understand
+- Level of abstraction
+  - The more abstract, the more difficult
 
 You might want to consider my proficiency level as of the moment I'm writing the article, which is also specified in the article.
 

src/content/page/en/privacy-policy.mdx

@@ -1,7 +1,7 @@
 ---
 title: Privacy Policy
 type: page
-modifiedAt: 2024-05-02T06:17:26.983Z
+modifiedAt: 2024-09-06T01:33:38.916Z
 ---
 
 This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your
@@ -77,4 +77,4 @@ You are advised to review this Privacy Policy periodically for any changes. Chan
 
 If you have any questions about this Privacy Policy, You can contact us:
 
-- By visiting this page on our website: [Contact Form](https://younagi.dev/contact/)
+- By visiting this page on our website: [About](https://younagi.dev/about/)