feat: add developer's keyboard image and note to symbol maps in documentation

Author: otnc

README-ja.md

@@ -17,6 +17,10 @@
 
 ## 記号マップ
 
+> この変換表は NoShift.js 開発者のキーボード（JIS 配列）が基準です。
+
+![開発者のキーボード](https://raw.githubusercontent.com/otoneko1102/NoShift.js/refs/heads/main/my-keyboard.jpg)
+
 | NoShift | JS | | NoShift | JS |
 |:-------:|:--:|---|:-------:|:--:|
 | `^1`    | `!`        | | `^^`    | `~`        |

README.md

@@ -16,6 +16,10 @@ Typing shifted symbols (`!`, `"`, `(`, `)`, `{`, `}` …) is tiring.
 
 ## Symbol Map
 
+> This symbol mapping is based on the NoShift.js developer's keyboard (JIS layout).
+
+![Developer's Keyboard](https://raw.githubusercontent.com/otoneko1102/NoShift.js/refs/heads/main/my-keyboard.jpg)
+
 | NoShift | JS | | NoShift | JS |
 |:-------:|:--:|---|:-------:|:--:|
 | `^1`    | `!`        | | `^^`    | `~`        |

npm/README-ja.md

@@ -68,6 +68,10 @@ nsc --init
 
 ## 記号マップ
 
+> この変換表は NoShift.js 開発者のキーボード（JIS 配列）が基準です。
+
+![開発者のキーボード](https://raw.githubusercontent.com/otoneko1102/NoShift.js/refs/heads/main/my-keyboard.jpg)
+
 | NoShift | JS | | NoShift | JS |
 |:-------:|:--:|---|:-------:|:--:|
 | `^1`    | `!`        | | `^^`    | `~`        |

npm/README.md

@@ -68,6 +68,10 @@ Generated automatically by `nsc --init` or `nsc create`.
 
 ## Symbol Map
 
+> This symbol mapping is based on the NoShift.js developer's keyboard (JIS layout).
+
+![Developer's Keyboard](https://raw.githubusercontent.com/otoneko1102/NoShift.js/refs/heads/main/my-keyboard.jpg)
+
 | NoShift | JS | | NoShift | JS |
 |:-------:|:--:|---|:-------:|:--:|
 | `^1`    | `!`        | | `^^`    | `~`        |

pages/src/i18n/translations.ts

@@ -89,6 +89,8 @@ export const ui = {
     "syntax.introDesc":
       "NoShift.js uses <code>^</code> (caret) as a prefix to represent shifted symbols. The mapping is based on a Japanese JIS keyboard layout.",
     "syntax.tableTitle": "Symbol Map",
+    "syntax.tableNote":
+      "This symbol mapping is based on the NoShift.js developer's keyboard (JIS layout).",
     "syntax.tableShifted": "Shifted Key",
     "syntax.tableNoshift": "NoShift.js",
     "syntax.escapeTitle": "Escaping in Strings",
@@ -220,6 +222,8 @@ export const ui = {
     "syntax.introDesc":
       "NoShift.js は <code>^</code>（キャレット）をプレフィックスとして Shift 記号を表現します。マッピングは日本語 JIS キーボード配列に基づいています。",
     "syntax.tableTitle": "記号マップ",
+    "syntax.tableNote":
+      "この変換表は NoShift.js 開発者のキーボード（JIS 配列）が基準です。",
     "syntax.tableShifted": "Shift 記号",
     "syntax.tableNoshift": "NoShift.js",
     "syntax.escapeTitle": "文字列内のエスケープ",

pages/src/pages/[lang]/syntax.astro

@@ -36,6 +36,14 @@ const templateExprLabel =
   <p set:html={t(lang, "syntax.introDesc")} />
 
   <h2>{t(lang, "syntax.tableTitle")}</h2>
+  <div class="callout">
+    <p>{t(lang, "syntax.tableNote")}</p>
+  </div>
+  <img
+    src="https://raw.githubusercontent.com/otoneko1102/NoShift.js/refs/heads/main/my-keyboard.jpg"
+    alt={lang === "ja" ? "開発者のキーボード" : "Developer's Keyboard"}
+    class="keyboard-img"
+  />
   <div class="symbol-grid">
     <SymbolTable
       headerShifted={t(lang, "syntax.tableShifted")}

pages/src/styles/global.css

@@ -465,6 +465,14 @@ pre code {
   margin: 1.5rem 0;
 }
 
+.keyboard-img {
+  display: block;
+  max-width: 100%;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  margin: 1rem 0 1.5rem;
+}
+
 @media (max-width: 600px) {
   .symbol-grid {
     grid-template-columns: 1fr;

vscode-extension/README-ja.md

@@ -53,6 +53,10 @@
 
 ## 言語サポート
 
+> この変換表は NoShift.js 開発者のキーボード（JIS 配列）が基準です。
+
+![開発者のキーボード](https://raw.githubusercontent.com/otoneko1102/NoShift.js/refs/heads/main/my-keyboard.jpg)
+
 | 機能 | 詳細 |
 |---|---|
 | 拡張子 | `.nsjs` |

vscode-extension/README.md

@@ -53,6 +53,10 @@ Result: ^[|^]   (| = cursor position)
 
 ## Language Support
 
+> This symbol mapping is based on the NoShift.js developer's keyboard (JIS layout).
+
+![Developer's Keyboard](https://raw.githubusercontent.com/otoneko1102/NoShift.js/refs/heads/main/my-keyboard.jpg)
+
 | Feature | Details |
 |---|---|
 | Extension | `.nsjs` |