feat: add CodeBlock component for improved code display across documentation pages

Author: otnc

pages/src/components/CodeBlock.astro

@@ -0,0 +1,23 @@
+---
+import { Code } from "astro:components";
+import noshiftGrammar from "../../../vscode-extension/syntaxes/noshift.tmLanguage.json";
+
+interface Props {
+  code: string;
+  lang?: string;
+}
+
+const { code, lang = "text" } = Astro.props;
+
+const resolvedLang = lang === "nsjs" ? noshiftGrammar : lang;
+---
+
+<div class="code-block">
+  <Code code={code.trim()} lang={resolvedLang as any} theme="tokyo-night" />
+</div>
+
+<style>
+  .code-block :global(pre) {
+    background-color: var(--bg-code) !important;
+  }
+</style>

pages/src/i18n/translations.ts

@@ -138,26 +138,26 @@ export const ui = {
     "cli.compileTitle": "nsc",
     "cli.compileDesc":
       "Compile all <code>.nsjs</code> files from <code>rootdir</code> to <code>outdir</code> as defined in <code>nsjsconfig.json</code>.",
-    "cli.watchTitle": "nsc watch",
+    "cli.watchTitle": "nsc watch | w | -w | --watch",
     "cli.watchDesc": "Watch for file changes and recompile automatically.",
-    "cli.runTitle": "nsc run &lt;file&gt;",
+    "cli.runTitle":
+      "nsc run &lt;file&gt; | -r &lt;file&gt; | --run &lt;file&gt;",
     "cli.runDesc":
       "Compile and execute a <code>.nsjs</code> file directly without writing output files.",
-    "cli.createCmdTitle": "nsc create [name]",
+    "cli.createCmdTitle": "nsc create [name] | --create [name]",
     "cli.createCmdDesc":
       "Scaffold a new NoShift.js project. Use <code>--no-prettier</code> to skip Prettier setup.",
-    "cli.initTitle": "nsc init",
+    "cli.initTitle": "nsc init | --init",
     "cli.initDesc":
       "Create a <code>nsjsconfig.json</code> in the current directory with default settings.",
-    "cli.cleanTitle": "nsc clean",
+    "cli.cleanTitle": "nsc clean | --clean",
     "cli.cleanDesc":
       "Delete the output directory (<code>outdir</code>) defined in <code>nsjsconfig.json</code>.",
-    "cli.versionTitle": "nsc version",
-    "cli.versionDesc":
-      "Display the current version of noshift.js. Also available as <code>nsc -v</code> or <code>nsc --version</code>.",
-    "cli.helpTitle": "nsc help",
+    "cli.versionTitle": "nsc version | -v | --version",
+    "cli.versionDesc": "Display the current version of noshift.js.",
+    "cli.helpTitle": "nsc help | -h | --help",
     "cli.helpDesc":
-      "Show help information. Also available as <code>nsc -h</code> or <code>nsc --help</code>. Includes a link to the documentation site.",
+      "Show help information. Includes a link to the documentation site.",
 
     // Config
     "config.title": "Configuration",
@@ -220,13 +220,13 @@ export const ui = {
       "Shift が必要な記号を ^ プレフィックスの配列に置換する Joke 言語。コンパイルすると JavaScript になります。",
 
     // Nav
-    "nav.home": "ホーム",
-    "nav.gettingStarted": "はじめに",
-    "nav.syntax": "構文と記号",
-    "nav.classes": "クラス",
-    "nav.cli": "CLI リファレンス",
-    "nav.config": "設定",
-    "nav.vscode": "VS Code 拡張機能",
+    "nav.home": "Home",
+    "nav.gettingStarted": "Getting Started",
+    "nav.syntax": "Syntax & Symbols",
+    "nav.classes": "Classes",
+    "nav.cli": "CLI Reference",
+    "nav.config": "Configuration",
+    "nav.vscode": "VS Code Extension",
     "nav.github": "GitHub",
     "nav.npm": "npm",
 
@@ -327,26 +327,26 @@ export const ui = {
     "cli.compileTitle": "nsc",
     "cli.compileDesc":
       "<code>nsjsconfig.json</code> で定義された <code>rootdir</code> から <code>outdir</code> へすべての <code>.nsjs</code> ファイルをコンパイルします。",
-    "cli.watchTitle": "nsc watch",
+    "cli.watchTitle": "nsc watch | w | -w | --watch",
     "cli.watchDesc": "ファイルの変更を監視し、自動的にリコンパイルします。",
-    "cli.runTitle": "nsc run &lt;file&gt;",
+    "cli.runTitle":
+      "nsc run &lt;file&gt; | -r &lt;file&gt; | --run &lt;file&gt;",
     "cli.runDesc":
       "出力ファイルを書き出さずに、<code>.nsjs</code> ファイルを直接コンパイル・実行します。",
-    "cli.createCmdTitle": "nsc create [name]",
+    "cli.createCmdTitle": "nsc create [name] | --create [name]",
     "cli.createCmdDesc":
       "新しい NoShift.js プロジェクトをスキャフォールドします。<code>--no-prettier</code> で Prettier 設定をスキップできます。",
-    "cli.initTitle": "nsc init",
+    "cli.initTitle": "nsc init | --init",
     "cli.initDesc":
       "現在のディレクトリにデフォルト設定の <code>nsjsconfig.json</code> を作成します。",
-    "cli.cleanTitle": "nsc clean",
+    "cli.cleanTitle": "nsc clean | --clean",
     "cli.cleanDesc":
       "<code>nsjsconfig.json</code> で定義された出力ディレクトリ（<code>outdir</code>）を削除します。",
-    "cli.versionTitle": "nsc version",
-    "cli.versionDesc":
-      "noshift.js の現在のバージョンを表示します。<code>nsc -v</code> または <code>nsc --version</code> でも利用可能。",
-    "cli.helpTitle": "nsc help",
+    "cli.versionTitle": "nsc version | -v | --version",
+    "cli.versionDesc": "noshift.js の現在のバージョンを表示します。",
+    "cli.helpTitle": "nsc help | -h | --help",
     "cli.helpDesc":
-      "ヘルプ情報を表示します。<code>nsc -h</code> または <code>nsc --help</code> でも利用可能。ドキュメントサイトへのリンクも含まれます。",
+      "ヘルプ情報を表示します。ドキュメントサイトへのリンクも含まれます。",
 
     // Config
     "config.title": "設定",

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

@@ -1,5 +1,6 @@
 ---
 import DocsLayout from "../../layouts/DocsLayout.astro";
+import CodeBlock from "../../components/CodeBlock.astro";
 import { t, type Lang } from "../../i18n/translations";
 
 export function getStaticPaths() {
@@ -21,7 +22,9 @@ const { lang } = Astro.params as { lang: Lang };
 
   <h2>{t(lang, "classes.basicTitle")}</h2>
   <p set:html={t(lang, "classes.basicDesc")} />
-  <pre><code>{`class ^3animal ^[
+  <CodeBlock
+    lang="nsjs"
+    code={`class ^3animal ^[
   constructor^8name^9 ^[
     this.name ^- name;
   ^]
@@ -32,9 +35,12 @@ const { lang } = Astro.params as { lang: Lang };
 ^]
 
 const dog ^- new ^3animal^8^2Dog^2^9;
-dog.speak^8^9;`}</code></pre>
+dog.speak^8^9;`}
+  />
   <p>{lang === "ja" ? "コンパイル後:" : "Compiles to:"}</p>
-  <pre><code>{`class Animal {
+  <CodeBlock
+    lang="javascript"
+    code={`class Animal {
   constructor(name) {
     this.name = name;
   }
@@ -45,11 +51,14 @@ dog.speak^8^9;`}</code></pre>
 }
 
 const dog = new Animal("Dog");
-dog.speak();`}</code></pre>
+dog.speak();`}
+  />
 
   <h2>{t(lang, "classes.inheritTitle")}</h2>
   <p set:html={t(lang, "classes.inheritDesc")} />
-  <pre><code>{`class ^3dog extends ^3animal ^[
+  <CodeBlock
+    lang="nsjs"
+    code={`class ^3dog extends ^3animal ^[
   constructor^8name^9 ^[
     super^8name^9;
   ^]
@@ -60,9 +69,12 @@ dog.speak();`}</code></pre>
 ^]
 
 const d ^- new ^3dog^8^2Rex^2^9;
-d.bark^8^9;`}</code></pre>
+d.bark^8^9;`}
+  />
   <p>{lang === "ja" ? "コンパイル後:" : "Compiles to:"}</p>
-  <pre><code>{`class Dog extends Animal {
+  <CodeBlock
+    lang="javascript"
+    code={`class Dog extends Animal {
   constructor(name) {
     super(name);
   }
@@ -73,11 +85,14 @@ d.bark^8^9;`}</code></pre>
 }
 
 const d = new Dog("Rex");
-d.bark();`}</code></pre>
+d.bark();`}
+  />
 
   <h2>{t(lang, "classes.methodTitle")}</h2>
   <p set:html={t(lang, "classes.methodDesc")} />
-  <pre><code>{`class ^3counter ^[
+  <CodeBlock
+    lang="nsjs"
+    code={`class ^3counter ^[
   ^;count ^- 0;
 
   get^3count^8^9 ^[
@@ -87,9 +102,12 @@ d.bark();`}</code></pre>
   set^3count^8value^9 ^[
     this.^;count ^- value;
   ^]
-^]`}</code></pre>
+^]`}
+  />
   <p>{lang === "ja" ? "コンパイル後:" : "Compiles to:"}</p>
-  <pre><code>{`class Counter {
+  <CodeBlock
+    lang="javascript"
+    code={`class Counter {
   #count = 0;
 
   getCount() {
@@ -99,27 +117,34 @@ d.bark();`}</code></pre>
   setCount(value) {
     this.#count = value;
   }
-}`}</code></pre>
+}`}
+  />
 
   <h2>{t(lang, "classes.staticTitle")}</h2>
   <p set:html={t(lang, "classes.staticDesc")} />
-  <pre><code>{`class ^3math^3helper ^[
+  <CodeBlock
+    lang="nsjs"
+    code={`class ^3math^3helper ^[
   static ^3p^3i ^- 3.14159;
 
   static circle^3area^8r^9 ^[
     return ^3math^3helper.^3p^3i ^: r ^: r;
   ^]
 ^]
 
-console.log^8^3math^3helper.circle^3area^85^9^9;`}</code></pre>
+console.log^8^3math^3helper.circle^3area^85^9^9;`}
+  />
   <p>{lang === "ja" ? "コンパイル後:" : "Compiles to:"}</p>
-  <pre><code>{`class MathHelper {
+  <CodeBlock
+    lang="javascript"
+    code={`class MathHelper {
   static PI = 3.14159;
 
   static circleArea(r) {
     return MathHelper.PI * r * r;
   }
 }
 
-console.log(MathHelper.circleArea(5));`}</code></pre>
+console.log(MathHelper.circleArea(5));`}
+  />
 </DocsLayout>

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

@@ -1,5 +1,6 @@
 ---
 import DocsLayout from "../../layouts/DocsLayout.astro";
+import CodeBlock from "../../components/CodeBlock.astro";
 import { t, type Lang } from "../../i18n/translations";
 
 export function getStaticPaths() {
@@ -21,33 +22,33 @@ const { lang } = Astro.params as { lang: Lang };
 
   <h2>{t(lang, "cli.compileTitle")}</h2>
   <p set:html={t(lang, "cli.compileDesc")} />
-  <pre><code>nsc</code></pre>
+  <CodeBlock lang="bash" code="nsc" />
 
-  <h2>{t(lang, "cli.watchTitle")}</h2>
+  <h2 set:html={t(lang, "cli.watchTitle")} />
   <p set:html={t(lang, "cli.watchDesc")} />
-  <pre><code>nsc watch</code></pre>
+  <CodeBlock lang="bash" code="nsc watch" />
 
   <h2 set:html={t(lang, "cli.runTitle")} />
   <p set:html={t(lang, "cli.runDesc")} />
-  <pre><code>nsc run src/index.nsjs</code></pre>
+  <CodeBlock lang="bash" code="nsc run src/index.nsjs" />
 
-  <h2>{t(lang, "cli.createCmdTitle")}</h2>
+  <h2 set:html={t(lang, "cli.createCmdTitle")} />
   <p set:html={t(lang, "cli.createCmdDesc")} />
-  <pre><code>nsc create my-project</code></pre>
+  <CodeBlock lang="bash" code="nsc create my-project" />
 
-  <h2>{t(lang, "cli.initTitle")}</h2>
+  <h2 set:html={t(lang, "cli.initTitle")} />
   <p set:html={t(lang, "cli.initDesc")} />
-  <pre><code>nsc init</code></pre>
+  <CodeBlock lang="bash" code="nsc init" />
 
-  <h2>{t(lang, "cli.cleanTitle")}</h2>
+  <h2 set:html={t(lang, "cli.cleanTitle")} />
   <p set:html={t(lang, "cli.cleanDesc")} />
-  <pre><code>nsc clean</code></pre>
+  <CodeBlock lang="bash" code="nsc clean" />
 
-  <h2>{t(lang, "cli.versionTitle")}</h2>
+  <h2 set:html={t(lang, "cli.versionTitle")} />
   <p set:html={t(lang, "cli.versionDesc")} />
-  <pre><code>nsc version</code></pre>
+  <CodeBlock lang="bash" code="nsc version" />
 
-  <h2>{t(lang, "cli.helpTitle")}</h2>
+  <h2 set:html={t(lang, "cli.helpTitle")} />
   <p set:html={t(lang, "cli.helpDesc")} />
-  <pre><code>nsc help</code></pre>
+  <CodeBlock lang="bash" code="nsc help" />
 </DocsLayout>

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

@@ -1,5 +1,6 @@
 ---
 import DocsLayout from "../../layouts/DocsLayout.astro";
+import CodeBlock from "../../components/CodeBlock.astro";
 import { t, type Lang } from "../../i18n/translations";
 
 export function getStaticPaths() {
@@ -21,18 +22,21 @@ const { lang } = Astro.params as { lang: Lang };
 
   <h2>{t(lang, "config.fileTitle")}</h2>
   <p set:html={t(lang, "config.fileDesc")} />
-  <pre><code>nsc init</code></pre>
+  <CodeBlock lang="bash" code="nsc init" />
 
   <h2>{t(lang, "config.defaultTitle")}</h2>
   <p set:html={t(lang, "config.defaultDesc")} />
-  <pre><code>{`{
+  <CodeBlock
+    lang="json"
+    code={`{
   "compileroptions": {
     "rootdir": "src",
     "outdir": "dist",
     "warnuppercase": true,
     "capitalizeinstrings": true
   }
-}`}</code></pre>
+}`}
+  />
 
   <h2>{t(lang, "config.optionsTitle")}</h2>
   <table>
@@ -69,9 +73,12 @@ const { lang } = Astro.params as { lang: Lang };
 
   <h2>{t(lang, "config.disableCapitalizeTitle")}</h2>
   <p set:html={t(lang, "config.disableCapitalizeDesc")} />
-  <pre><code>{`{
+  <CodeBlock
+    lang="json"
+    code={`{
   "compileroptions": {
     "capitalizeinstrings": false
   }
-}`}</code></pre>
+}`}
+  />
 </DocsLayout>