apps > guide, 'Installed' 마크다운 파일 추가 및 렌더링 테스트

Author: lunaticscode

apps/guide/scripts/syncRegistry.ts

@@ -12,6 +12,22 @@ const Router = () => {
         <Routes>
           <Route path={"/"} element={<h2>Main</h2>} />
           <Route path={"/foundations"} element={<h2>Foundations</h2>} />
+
+          {routes?.["get-started"]?.map(({ path, importer }, index) => {
+            let componentName = path.split("get-started/")[1];
+            componentName =
+              componentName[0].toUpperCase() + componentName.slice(1);
+            const LazyElement = lazy(
+              importer as () => Promise<{ default: ComponentType }>
+            );
+            return (
+              <Route
+                key={`route-get_started-key-${index}`}
+                path={path}
+                element={<LazyElement />}
+              />
+            );
+          })}
           {routes?.foundations?.map(({ path, importer }, index) => {
             let componentName = path.split("foundations/")[1];
             componentName =

apps/guide/src/Router.tsx

@@ -7,7 +7,11 @@ export type SidebarMenu = {
 };
 
 interface SidebarProps {
-  menus?: { foundations: SidebarMenu[]; components: SidebarMenu[] };
+  menus?: {
+    "get-started": SidebarMenu[];
+    foundations: SidebarMenu[];
+    components: SidebarMenu[];
+  };
 }
 
 const sidebarCls = "app-sidebar";
@@ -42,6 +46,24 @@ const Sidebar: FC<SidebarProps> = (props) => {
           🇺🇸
         </button>
       </div>
+      <Link
+        className={sidebarGroupMenuCls}
+        to={"/get-started"}
+        data-active={pathname === "/get-started"}
+      >
+        Get Started
+      </Link>
+      {menus?.["get-started"]?.map((menu, index) => (
+        <Link
+          key={`sidebar-menu-get_started-key-${index}`}
+          className={sidebarMenuCls}
+          data-active={pathname === menu.href}
+          to={menu.href}
+        >
+          {menu.label}
+        </Link>
+      ))}
+      <div className={sidebarGroupDividerCls} />
       <Link
         className={sidebarGroupMenuCls}
         to={"/foundations"}

apps/guide/src/layouts/Sidebar.tsx

@@ -6,8 +6,10 @@ import { FC } from "react";
 
 interface CodeBlockProps {
   code?: string;
+  noCopy?: boolean;
 }
-const CodeBlock: FC<CodeBlockProps> = ({ code }) => {
+const CodeBlock: FC<CodeBlockProps> = (props) => {
+  const { code, noCopy } = props;
   const handleClickCopy = () => {
     if (!code) return;
     const filteredCode = code.replace(/```[a-zA-Z]+\n|```/g, "");
@@ -16,9 +18,11 @@ const CodeBlock: FC<CodeBlockProps> = ({ code }) => {
   if (!code?.trim()) return null;
   return (
     <div className={"app-guide-codeblock"}>
-      <div className={"app-guide-codeblock-copy-button"}>
-        <button onClick={handleClickCopy}>copy</button>
-      </div>
+      {noCopy ? null : (
+        <div className={"app-guide-codeblock-copy-button"}>
+          <button onClick={handleClickCopy}>copy</button>
+        </div>
+      )}
       <ReactMarkdown
         components={{
           code: (props: any) => {

apps/guide/src/layouts/components/CodeBlock.tsx

@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren, useId, useMemo } from "react";
 
-type GuideTitleTags = "h2" | "h3";
+type GuideTitleTags = "h2" | "h3" | "h4";
 interface GuideTitleProps extends PropsWithChildren {
   type?: GuideTitleTags;
 }
@@ -9,6 +9,7 @@ const getTitleCls = (type: GuideTitleTags) => {
   const mapTypeToCls: { [key in GuideTitleTags]: string } = {
     h2: "app-guide-h2-title",
     h3: "app-guide-h3-title",
+    h4: "app-guide-h4-title",
   };
   return mapTypeToCls[type];
 };

apps/guide/src/layouts/components/GuideTitle.tsx

@@ -13,3 +13,14 @@
   margin-bottom: 10px;
   font-weight: 400;
 }
+
+.app-guide-h4-title {
+  color: var(--app-main-color);
+  border-radius: 5px;
+  width: fit-content;
+
+  margin: 0px;
+  margin-top: 15px;
+  margin-bottom: 5px;
+  font-weight: bold;
+}

apps/guide/src/layouts/styles/components/guide_title.css

@@ -69,6 +69,7 @@ class GuideFiles {
     components: CustomRoutes[];
   };
   readonly routeMenus: {
+    "get-started": SidebarMenu[];
     foundations: SidebarMenu[];
     components: SidebarMenu[];
   };

apps/guide/src/layouts/utils/getGuideFiles.ts

@@ -0,0 +1,29 @@
+import CodeBlock from "@layouts/components/CodeBlock";
+import GuideDivider from "@layouts/components/GuideDivider";
+import GuideTitle from "@layouts/components/GuideTitle";
+import { GET_STARTED_MARKDOWNS } from "@utils/markdown";
+
+const Installed = () => {
+  return (
+    <>
+      <GuideTitle>Install CLI</GuideTitle>
+      <CodeBlock
+        code={GET_STARTED_MARKDOWNS["Installation"]?.Install_Cli ?? ""}
+      />
+      <GuideDivider />
+      <GuideTitle>Initialize</GuideTitle>
+      <CodeBlock code={GET_STARTED_MARKDOWNS["Installation"]?.Init ?? ""} />
+      <GuideTitle type={"h4"}>{`> Select BaseColor`}</GuideTitle>
+      <CodeBlock
+        noCopy
+        code={GET_STARTED_MARKDOWNS["Installation"]?.BaseColor_Prompt ?? ""}
+      />
+      <GuideTitle type={"h4"}>{`> Check created manifest file.`}</GuideTitle>
+      <CodeBlock
+        noCopy
+        code={GET_STARTED_MARKDOWNS["Installation"]?.Created_Manifest ?? ""}
+      />
+    </>
+  );
+};
+export default Installed;

apps/guide/src/pages/get-started/Installation/index.tsx

@@ -0,0 +1,12 @@
+```text
+🚀 Start initialize hw-rui-cli...
+⠋ Get foundation-manifest from hw-rui-hub...
+
+✔ Succes to fetch foundation-manifest.
+
+? Select from the usable base color.
+  ASH
+❯ FOG
+  PEBBLE
+  GRAPHITE
+```

apps/guide/src/pages/get-started/Installation/markdowns/BaseColor_Prompt.md

@@ -0,0 +1,9 @@
+```json
+// hw-rui-manifest.json
+{
+  "tsx": true,
+  "packageManager": "npm",
+  "baseColor": "ash",
+  "timestamp": 1756899539754
+}
+```