feat: Introduce a new documentation site with i18n support, core layouts, and an interactive code playground.

otnc · otnc · commit d5ef613e41f3 · 2026-02-21T22:28:18.000+09:00
diff --git a/pages/public/favicon.png b/pages/public/favicon.png
diff --git a/pages/src/components/Sidebar.astro b/pages/src/components/Sidebar.astro
@@ -48,12 +48,12 @@ const navItems = [
     icon: "material-symbols:settings-outline",
   },
   {
-    key: "nav.linter" as const,
+    key: "nav.useLinter" as const,
     path: `/${lang}/linter/`,
     icon: "material-symbols:search-check",
   },
   {
-    key: "nav.prettier" as const,
+    key: "nav.usePrettier" as const,
     path: `/${lang}/prettier/`,
     icon: "material-symbols:format-align-left",
   },
@@ -111,6 +111,18 @@ const navItems = [
             npm
           </a>
         </li>
+        <li>
+          <a href={links.npmLinter} target="_blank" rel="noopener">
+            <Icon name="material-symbols:search-check" class="nav-icon" />
+            Linter
+          </a>
+        </li>
+        <li>
+          <a href={links.npmPrettier} target="_blank" rel="noopener">
+            <Icon name="simple-icons:prettier" class="nav-icon" />
+            Prettier Plugin
+          </a>
+        </li>
         <li>
           <a href={links.vscodeExtension} target="_blank" rel="noopener">
             <Icon name="simple-icons:visualstudiocode" class="nav-icon" />
@@ -124,7 +136,7 @@ const navItems = [
   <div class="sidebar-footer">
     <div class="lang-switcher">
       {
-        currentPath === "/" ? (
+        currentPath === "/" || currentPath === "/playground/" ? (
           <>
             <span class="lang-btn active">EN</span>
             <span class="lang-btn">JA</span>
diff --git a/pages/src/i18n/translations.ts b/pages/src/i18n/translations.ts
@@ -37,6 +37,8 @@ export const ui = {
     "nav.classes": "Classes",
     "nav.cli": "CLI Reference",
     "nav.config": "Configuration",
+    "nav.useLinter": "Use Linter",
+    "nav.usePrettier": "Use Prettier Plugin",
     "nav.linter": "Linter",
     "nav.prettier": "Prettier Plugin",
     "nav.vscode": "VS Code Extension",
@@ -312,7 +314,7 @@ export const ui = {
     "vscode.idTitle": "Extension ID",
 
     // Linter
-    "linter.title": "Linter",
+    "linter.title": "Use Linter",
     "linter.introDesc":
       "<code>@noshift.js/lint</code> is an official linter for NoShift.js that checks <code>.nsjs</code> files for syntax errors and style issues.",
     "linter.installTitle": "Installation",
@@ -383,6 +385,8 @@ export const ui = {
     "nav.classes": "Classes",
     "nav.cli": "CLI Reference",
     "nav.config": "Configuration",
+    "nav.useLinter": "Use Linter",
+    "nav.usePrettier": "Use Prettier Plugin",
     "nav.linter": "Linter",
     "nav.prettier": "Prettier Plugin",
     "nav.vscode": "VS Code Extension",
diff --git a/pages/src/layouts/BaseLayout.astro b/pages/src/layouts/BaseLayout.astro
@@ -15,10 +15,10 @@ const { lang, title, description, ogTitle, ogDescription } = Astro.props;
 
 const pageTitle = title ?? t(lang, "site.title");
 const pageDesc = description ?? t(lang, "site.description");
-const pageOgTitle = ogTitle ?? t(lang, "site.ogTitle");
-const pageOgDesc = ogDescription ?? t(lang, "site.ogDescription");
+const pageOgTitle = ogTitle ?? pageTitle;
+const pageOgDesc = ogDescription ?? pageDesc;
 const siteUrl = links.site;
-const ogImage = `${siteUrl}/img/icon.png`;
+const ogImage = `${siteUrl}/favicon.png`;
 const canonicalUrl = new URL(Astro.url.pathname, siteUrl).href;
 ---
 
diff --git a/pages/src/layouts/DocsLayout.astro b/pages/src/layouts/DocsLayout.astro
@@ -11,15 +11,17 @@ interface Props {
   lang: Lang;
   title?: string;
   description?: string;
+  ogTitle?: string;
+  ogDescription?: string;
   currentPath: string;
   prev?: { href: string; title: string };
   next?: { href: string; title: string };
 }
 
-const { lang, title, description, currentPath, prev, next } = Astro.props;
+const { lang, title, description, ogTitle, ogDescription, currentPath, prev, next } = Astro.props;
 ---
 
-<BaseLayout lang={lang} title={title} description={description}>
+<BaseLayout lang={lang} title={title} description={description} ogTitle={ogTitle} ogDescription={ogDescription}>
   <div class="layout">
     <Sidebar lang={lang} currentPath={currentPath} />
     <div class="sidebar-overlay" id="sidebar-overlay"></div>
diff --git a/pages/src/pages/[lang]/capitalize.astro b/pages/src/pages/[lang]/capitalize.astro
@@ -12,12 +12,12 @@ const { lang } = Astro.params as { lang: Lang };
 
 <DocsLayout
   lang={lang}
-  title={t(lang, "cap.title") + " — NoShift.js"}
+  title={t(lang, "nav.capitalize") + " | NoShift.js"}
   currentPath={`/${lang}/capitalize/`}
   prev={{ href: `/${lang}/syntax/`, title: t(lang, "nav.syntax") }}
   next={{ href: `/${lang}/classes/`, title: t(lang, "nav.classes") }}
 >
-  <h1>{t(lang, "cap.title")}</h1>
+  <h1>{t(lang, "nav.capitalize")}</h1>
   <p set:html={t(lang, "cap.introDesc")} />
 
   <h2>{t(lang, "cap.basicTitle")}</h2>
diff --git a/pages/src/pages/[lang]/classes.astro b/pages/src/pages/[lang]/classes.astro
@@ -12,12 +12,12 @@ const { lang } = Astro.params as { lang: Lang };
 
 <DocsLayout
   lang={lang}
-  title={t(lang, "classes.title") + "  NoShift.js"}
+  title={t(lang, "nav.classes") + " | NoShift.js"}
   currentPath={`/${lang}/classes/`}
   prev={{ href: `/${lang}/capitalize/`, title: t(lang, "nav.capitalize") }}
   next={{ href: `/${lang}/cli/`, title: t(lang, "nav.cli") }}
 >
-  <h1>{t(lang, "classes.title")}</h1>
+  <h1>{t(lang, "nav.classes")}</h1>
   <p set:html={t(lang, "classes.introDesc")} />
 
   <h2>{t(lang, "classes.basicTitle")}</h2>
diff --git a/pages/src/pages/[lang]/cli.astro b/pages/src/pages/[lang]/cli.astro
@@ -12,12 +12,12 @@ const { lang } = Astro.params as { lang: Lang };
 
 <DocsLayout
   lang={lang}
-  title={t(lang, "cli.title") + "  NoShift.js"}
+  title={t(lang, "nav.cli") + " | NoShift.js"}
   currentPath={`/${lang}/cli/`}
   prev={{ href: `/${lang}/classes/`, title: t(lang, "nav.classes") }}
   next={{ href: `/${lang}/config/`, title: t(lang, "nav.config") }}
 >
-  <h1>{t(lang, "cli.title")}</h1>
+  <h1>{t(lang, "nav.cli")}</h1>
   <p set:html={t(lang, "cli.introDesc")} />
 
   <h2>{t(lang, "cli.compileTitle")}</h2>
diff --git a/pages/src/pages/[lang]/config.astro b/pages/src/pages/[lang]/config.astro
@@ -12,12 +12,12 @@ const { lang } = Astro.params as { lang: Lang };
 
 <DocsLayout
   lang={lang}
-  title={t(lang, "config.title") + "  NoShift.js"}
+  title={t(lang, "nav.config") + " | NoShift.js"}
   currentPath={`/${lang}/config/`}
   prev={{ href: `/${lang}/cli/`, title: t(lang, "nav.cli") }}
   next={{ href: `/${lang}/linter/`, title: t(lang, "nav.linter") }}
 >
-  <h1>{t(lang, "config.title")}</h1>
+  <h1>{t(lang, "nav.config")}</h1>
   <p set:html={t(lang, "config.introDesc")} />
 
   <h2>{t(lang, "config.fileTitle")}</h2>
diff --git a/pages/src/pages/[lang]/getting-started.astro b/pages/src/pages/[lang]/getting-started.astro
@@ -12,12 +12,12 @@ const { lang } = Astro.params as { lang: Lang };
 
 <DocsLayout
   lang={lang}
-  title={t(lang, "gs.title") + "  NoShift.js"}
+  title={t(lang, "nav.gettingStarted") + " | NoShift.js"}
   currentPath={`/${lang}/getting-started/`}
   prev={{ href: "/", title: t(lang, "nav.home") }}
   next={{ href: `/${lang}/syntax/`, title: t(lang, "nav.syntax") }}
 >
-  <h1>{t(lang, "gs.title")}</h1>
+  <h1>{t(lang, "nav.gettingStarted")}</h1>
 
   <h2>{t(lang, "gs.installTitle")}</h2>
   <p set:html={t(lang, "gs.installDesc")} />
diff --git a/pages/src/pages/[lang]/linter.astro b/pages/src/pages/[lang]/linter.astro
@@ -13,12 +13,12 @@ const { lang } = Astro.params as { lang: Lang };
 
 <DocsLayout
   lang={lang}
-  title={t(lang, "linter.title") + "  NoShift.js"}
+  title={t(lang, "nav.linter") + " | NoShift.js"}
   currentPath={`/${lang}/linter/`}
   prev={{ href: `/${lang}/config/`, title: t(lang, "nav.config") }}
   next={{ href: `/${lang}/prettier/`, title: t(lang, "nav.prettier") }}
 >
-  <h1>{t(lang, "linter.title")}</h1>
+  <h1>{t(lang, "nav.linter")}</h1>
   <p set:html={t(lang, "linter.introDesc")} />
 
   <h2>{t(lang, "linter.installTitle")}</h2>
diff --git a/pages/src/pages/[lang]/prettier.astro b/pages/src/pages/[lang]/prettier.astro
@@ -13,12 +13,12 @@ const { lang } = Astro.params as { lang: Lang };
 
 <DocsLayout
   lang={lang}
-  title={t(lang, "prettier.title") + "  NoShift.js"}
+  title={t(lang, "nav.prettier") + " | NoShift.js"}
   currentPath={`/${lang}/prettier/`}
   prev={{ href: `/${lang}/linter/`, title: t(lang, "nav.linter") }}
   next={{ href: `/${lang}/vscode/`, title: t(lang, "nav.vscode") }}
 >
-  <h1>{t(lang, "prettier.title")}</h1>
+  <h1>{t(lang, "nav.prettier")}</h1>
   <p set:html={t(lang, "prettier.introDesc")} />
 
   <h2>{t(lang, "prettier.installTitle")}</h2>
diff --git a/pages/src/pages/[lang]/syntax.astro b/pages/src/pages/[lang]/syntax.astro
@@ -20,15 +20,15 @@ const templateExprLabel =
 
 <DocsLayout
   lang={lang}
-  title={t(lang, "syntax.title") + "  NoShift.js"}
+  title={t(lang, "nav.syntax") + " | NoShift.js"}
   currentPath={`/${lang}/syntax/`}
   prev={{
     href: `/${lang}/getting-started/`,
     title: t(lang, "nav.gettingStarted"),
   }}
   next={{ href: `/${lang}/capitalize/`, title: t(lang, "nav.capitalize") }}
 >
-  <h1>{t(lang, "syntax.title")}</h1>
+  <h1>{t(lang, "nav.syntax")}</h1>
 
   <h2>{t(lang, "syntax.introTitle")}</h2>
   <p set:html={t(lang, "syntax.introDesc")} />
diff --git a/pages/src/pages/[lang]/vscode.astro b/pages/src/pages/[lang]/vscode.astro
@@ -13,11 +13,11 @@ const { lang } = Astro.params as { lang: Lang };
 
 <DocsLayout
   lang={lang}
-  title={t(lang, "vscode.title") + "  NoShift.js"}
+  title={t(lang, "nav.vscode") + " | NoShift.js"}
   currentPath={`/${lang}/vscode/`}
   prev={{ href: `/${lang}/prettier/`, title: t(lang, "nav.prettier") }}
 >
-  <h1>{t(lang, "vscode.title")}</h1>
+  <h1>{t(lang, "nav.vscode")}</h1>
   <p set:html={t(lang, "vscode.introDesc")} />
 
   <h2>{t(lang, "vscode.installTitle")}</h2>
diff --git a/pages/src/pages/[slug].astro b/pages/src/pages/[slug].astro
@@ -0,0 +1,85 @@
+---
+export function getStaticPaths() {
+  const slugs = [
+    "getting-started",
+    "syntax",
+    "capitalize",
+    "classes",
+    "cli",
+    "config",
+    "linter",
+    "prettier",
+    "vscode",
+  ];
+  return slugs.map((slug) => ({
+    params: { slug },
+  }));
+}
+
+const { slug } = Astro.params;
+---
+
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Redirecting...</title>
+    <!-- Fallback redirect if JS is disabled -->
+    <meta http-equiv="refresh" content={`0;url=/en/${slug}/`} />
+    <script define:vars={{ slug }}>
+      (function () {
+        const lang = navigator.language.startsWith("ja") ? "ja" : "en";
+        window.location.replace(`/${lang}/${slug}/`);
+      })();
+    </script>
+    <style>
+      body {
+        background-color: #1a1b26; /* Tokyo Night bg */
+        color: #a9b1d6; /* Tokyo Night text */
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          Roboto,
+          "Helvetica Neue",
+          Arial,
+          sans-serif;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        margin: 0;
+      }
+      a {
+        color: #7aa2f7; /* Tokyo Night blue */
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+      .loader {
+        border: 3px solid #24283b;
+        border-top: 3px solid #7aa2f7;
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        animation: spin 1s linear infinite;
+        margin-bottom: 1rem;
+      }
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="loader"></div>
+    <p>Redirecting to localized documentation...</p>
+    <p>
+      <a href={`/en/${slug}/`}>Click here if you are not redirected</a>
+    </p>
+  </body>
+</html>
diff --git a/pages/src/pages/index.astro b/pages/src/pages/index.astro
@@ -120,6 +120,16 @@ const lang: Lang = "en";
 
         {/* Links */}
         <div class="link-cards">
+          <a href="/playground/" class="link-card">
+            <Icon
+              name="material-symbols:play-arrow-outline"
+              class="link-card-icon"
+            />
+            <div class="link-card-body">
+              <span class="link-card-title">{t("en", "nav.playground")}</span>
+              <span class="link-card-url">/playground/</span>
+            </div>
+          </a>
           <a
             href={links.github}
             target="_blank"
@@ -147,7 +157,9 @@ const lang: Lang = "en";
           >
             <Icon name="material-symbols:search-check" class="link-card-icon" />
             <div class="link-card-body">
-              <span class="link-card-title" id="link-linter-title">Linter</span>
+              <span class="link-card-title" id="link-linter-title"
+                >{t("en", "nav.linter")}</span
+              >
               <span class="link-card-url">@noshift.js/lint</span>
             </div>
           </a>
@@ -160,7 +172,7 @@ const lang: Lang = "en";
             <Icon name="simple-icons:prettier" class="link-card-icon" />
             <div class="link-card-body">
               <span class="link-card-title" id="link-prettier-title"
-                >Prettier Plugin</span
+                >{t("en", "nav.prettier")}</span
               >
               <span class="link-card-url">prettier-plugin-noshift.js</span>
             </div>
@@ -174,7 +186,7 @@ const lang: Lang = "en";
             <Icon name="simple-icons:visualstudiocode" class="link-card-icon" />
             <div class="link-card-body">
               <span class="link-card-title" id="link-vscode-title"
-                >VS Code Extension</span
+                >{t("en", "nav.vscode")}</span
               >
               <span class="link-card-url">otoneko1102.noshift-vscode</span>
             </div>
diff --git a/pages/src/pages/playground.astro b/pages/src/pages/playground.astro
