Create Guide page

frontend/src/app/[locale]/Header.tsx

@@ -46,6 +46,15 @@ export default function Header(params: { locale: string }) {
             </Link>
           </Chip>
         </NavbarItem>
+        <NavbarItem className="hidden sm:block">
+          <Link
+            className="data-[active=true]:text-primary data-[active=true]:font-medium"
+            href="/guide/selfhost"
+            locale={params.locale}
+          >
+            {t("guide")}
+          </Link>
+        </NavbarItem>
         <NavbarItem className="hidden sm:block">
           <Link
             className="data-[active=true]:text-primary data-[active=true]:font-medium"

frontend/src/app/[locale]/PaneMainTitle.tsx

@@ -38,7 +38,7 @@ export default function MainTitle({ locale }: Props) {
 
       <div className="mt-5">
         <Button color="primary" radius="full">
-          <Link href={`/projects/`} locale={locale}>
+          <Link href={`/guide/selfhost`} locale={locale}>
             {t("get_started")}
           </Link>
         </Button>

frontend/src/app/[locale]/PaneSelfHostProcedure.tsx

@@ -1,44 +0,0 @@
-import { Code, Card, CardBody } from "@nextui-org/react";
-import { useTranslations } from "next-intl";
-
-export default function SelfHostProcedure() {
-  const t = useTranslations("Index");
-  const manualProcedures = [
-    {
-      uid: "clone",
-      detail: "",
-      code: "git clone git@github.com:kimatata/TestCaseManager.git",
-    },
-    { uid: "go-to-backend", detail: "", code: "cd backend" },
-    { uid: "backend-install", detail: "", code: "npm install" },
-    { uid: "backend-start", detail: "", code: "node index" },
-    { uid: "go-to-frontend", detail: "", code: "cd frontend" },
-    { uid: "front-install", detail: "", code: "npm install" },
-    { uid: "front-start", detail: "", code: "npm run start" },
-  ];
-
-  return (
-    <>
-      <div>
-        <h3 className="text-2xl font-bold">{t("run_as_docker")}</h3>
-        <Card fullWidth={true} className="bg-red-400">
-          <CardBody>To be implemented</CardBody>
-        </Card>
-      </div>
-
-      <div className="mt-3">
-        <h3 className="text-2xl font-bold">{t("run_by_manually")}</h3>
-        <div className="mt-3">
-          {manualProcedures.map((procedure, index) => (
-            <div key={procedure.uid} className={`${index !== 0 ? "mt-3" : ""}`}>
-              <p>{procedure.detail}</p>
-              <Code radius="sm" className="min-w-96">
-                {procedure.code}
-              </Code>
-            </div>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-}

frontend/src/app/[locale]/about/layout.tsx

@@ -1,13 +0,0 @@
-export default function AboutLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">
-        {children}
-      </div>
-    </section>
-  );
-}

frontend/src/app/[locale]/about/page.tsx

@@ -1,9 +0,0 @@
-import { title } from "@/components/primitives";
-
-export default function AboutPage() {
-  return (
-    <div>
-      <h1 className={title()}>About</h1>
-    </div>
-  );
-}

frontend/src/app/[locale]/guide/GuideBar.tsx

@@ -0,0 +1,39 @@
+import { useTranslations } from "next-intl";
+import { Link, NextUiLinkClasses } from "@/src/navigation";
+
+export type Props = {
+  locale: string;
+};
+
+export default function Guidebar({ locale }: Props) {
+  const t = useTranslations("Guide");
+  const links = [
+    {
+      name: t("self_host"),
+      href: "/guide/selfhost",
+      indent: false,
+    },
+    {
+      name: t("docker"),
+      href: "/guide/selfhost/docker",
+      indent: true,
+    },
+    {
+      name: t("manual"),
+      href: "/guide/selfhost/manual",
+      indent: true,
+    },
+  ];
+
+  return (
+    <div className="w-64 border-r-1 ps-6 pt-6 dark:border-neutral-700">
+      {links.map((link) => (
+        <div key={link.name} className={`py-1 ${link.indent ? "ps-4" : ""}`}>
+          <Link href={link.href} locale={locale} className={NextUiLinkClasses}>
+            {link.name}
+          </Link>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/app/[locale]/guide/layout.tsx

@@ -0,0 +1,18 @@
+import Guidebar from "./GuideBar";
+
+export default function GuideLayout({
+  children,
+  params: { locale },
+}: {
+  children: React.ReactNode;
+  params: { locale: string };
+}) {
+  return (
+    <div className="flex border-t-1 dark:border-neutral-700 min-h-[calc(100vh-64px)]">
+      <Guidebar locale={locale} />
+      <div className="flex w-full">
+        <div className="flex-grow px-12">{children}</div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/[locale]/guide/selfhost/docker/page.tsx

@@ -0,0 +1,13 @@
+import { useTranslations } from "next-intl";
+import { title } from "@/components/primitives";
+import { Snippet, Card, CardBody } from "@nextui-org/react";
+
+export default function Page() {
+  const t = useTranslations("Guide");
+
+  return (
+    <section className="mx-auto max-w-screen-xl my-12">
+      <h1 className={title({ size: "sm" })}>{t("run_as_docker")}</h1>
+    </section>
+  );
+}

frontend/src/app/[locale]/guide/selfhost/manual/page.tsx

@@ -0,0 +1,53 @@
+import { useTranslations } from "next-intl";
+import { title } from "@/components/primitives";
+import { Snippet } from "@nextui-org/react";
+
+export default function Page() {
+  const t = useTranslations("Guide");
+  const manualProcedures = [
+    {
+      uid: "clone",
+      detail: "",
+      code: "git clone git@github.com:kimatata/TestCaseManager.git",
+    },
+    {
+      uid: "move-to-backend",
+      detail: t("move_to_back"),
+      code: "cd backend",
+    },
+    {
+      uid: "backend-install",
+      detail: t("backend_install"),
+      code: "npm install",
+    },
+    { uid: "init-db", detail: t("init_db"), code: "npm run migrate" },
+    { uid: "backend_start", detail: t("front_start"), code: "node index" },
+    {
+      uid: "move-to-frontend",
+      detail: t("move_to_front"),
+      code: "cd frontend",
+    },
+    {
+      uid: "front-install",
+      detail: t("frontend_install"),
+      code: "npm install",
+    },
+    { uid: "front-start", detail: t("front_start"), code: "npm run start" },
+  ];
+
+  return (
+    <section className="mx-auto max-w-screen-xl my-12">
+      <h1 className={title({ size: "sm" })}>{t("run_by_manually")}</h1>
+      <div className="mt-3">
+        {manualProcedures.map((procedure, index) => (
+          <div key={procedure.uid} className={`${index !== 0 ? "mt-3" : ""}`}>
+            <p>{procedure.detail}</p>
+            <Snippet variant="solid" color="primary" style={{ width: "32rem" }}>
+              {procedure.code}
+            </Snippet>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

frontend/src/app/[locale]/guide/selfhost/page.tsx

@@ -0,0 +1,12 @@
+import { useTranslations } from "next-intl";
+import { title } from "@/components/primitives";
+
+export default function Page() {
+  const t = useTranslations("Guide");
+
+  return (
+    <section className="mx-auto max-w-screen-xl my-12">
+      <h1 className={title({ size: "sm" })}>{t("self_host")}</h1>
+    </section>
+  );
+}

frontend/src/app/[locale]/page.tsx

@@ -4,7 +4,6 @@ import { Divider } from "@nextui-org/react";
 import PaneMainTitle from "./PaneMainTitle";
 import PaneMainFeatures from "./PaneMainFeatures";
 import PaneDemoImages from "./PaneDemoImages";
-import PaneSelfHostProcedure from "./PaneSelfHostProcedure";
 
 export default function Home(params: { locale: string }) {
   const t = useTranslations("Index");
@@ -68,17 +67,6 @@ export default function Home(params: { locale: string }) {
       <Divider className="my-12" />
       <PaneDemoImages messages={messages} />
 
-      <Divider className="my-12" />
-      <div className="flex flex-wrap mt-12">
-        <div className="w-full md:w-4/12 order-last md:order-first p-4">
-          <h2 className={title({ size: "sm" })}>{t("self_host")}</h2>
-        </div>
-
-        <div className="w-full md:w-8/12 p-4">
-          <PaneSelfHostProcedure />
-        </div>
-      </div>
-
       <Divider className="my-12" />
       <div className="flex flex-wrap mt-12">
         <div className="w-full md:w-4/12 order-last md:order-first p-4">