Merge branch 'redesign' of https://github.com/liara-cloud/docs into r…

…edesign
liara-cloud · May 28, 2024 · 021f850 · 021f850
2 parents 15bf9d7 + ccbe75c
commit 021f850
Show file tree

Hide file tree

Showing 15 changed files with 562 additions and 117 deletions.
diff --git a/.github/workflows/liara.yaml b/.github/workflows/liara.yaml
@@ -0,0 +1,20 @@
+name: CD-Liara
+on:
+  push:
+    branches:
+      - redesign
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+      - name: update-liara
+        env:
+          LIARA_TOKEN: ${{ secrets.ALI_NAJMABADI_SECRET }}
+        run: |
+          npm i -g @liara/cli@5
+          liara deploy --app="new-docs" --api-token="$LIARA_TOKEN" --no-app-logs
diff --git a/src/components/Common/alert.js b/src/components/Common/alert.js
@@ -24,7 +24,7 @@ const Alert = ({ variant = "info", className, children }) => {
 
   return (
     <div
-      className={`p-3  rounded-lg flex items-center 00 gap-3 ${variants[
+      className={`p-3 mb-2 rounded-lg flex items-center 00 gap-3 ${variants[
         variant
       ].classes} ${className}`}
     >

diff --git a/src/components/Common/step.js b/src/components/Common/step.js
@@ -4,7 +4,7 @@ import Alert from "./alert";
 
 const StepComponent = ({ steps }) => {
   return (
-    <div id="steps" className="relative flex flex-col p-4">
+    <div id="steps" className="relative flex flex-col pt-4">
       {steps.map((item, index) =>
         <div key={index} className="flex items-start mb-4">
           <div className="flex items-center justify-center">
@@ -14,7 +14,7 @@ const StepComponent = ({ steps }) => {
               {item.step}
             </Card>
           </div>
-          <div className="mr-4 pt-1 relative mb-2">
+          <div className="mr-4 pt-1 relative mb-2 w-full">
             <div className="stroke border-r z-[-1] absolute right-[-32px] top-[32px] border-[#0002] h-[100%] w-1" />
             <span>
               {item.content}

diff --git a/src/components/Common/tab.js b/src/components/Common/tab.js
@@ -9,7 +9,8 @@ const TabComponent = ({ tabs, content }) => {
         {tabs.map((tab, index) =>
           <button
             key={index}
-            className={`w-28 py-2 px-4 text-center ${activeTab === index
+            style={{ whiteSpace : "nowrap" }}
+            className={`w-28 py-2  px-4 text-center ${activeTab === index
               ? "active border-b-2 border-[#181818] text-[#181818]"
               : "border-b-2 border-transparent text-gray-500 hover:text-gray-700"}`}
             onClick={() => setActiveTab(index)}

diff --git a/src/components/Layout/index.jsx b/src/components/Layout/index.jsx
@@ -8,7 +8,7 @@ const Layout = ({ children }) => {
       <div>
         <div className="flex">
           <Sidebar />
-          <div className="w-[1350px] pr-[300px] mt-[100px] mx-auto pb-10">
+          <div className="w-[1350px] layout pr-[300px] mt-[100px] mx-auto pb-10">
             {children}
           </div>
         </div>

diff --git a/src/components/Sidebar/data.js b/src/components/Sidebar/data.js
@@ -265,12 +265,12 @@ export default {
       {
         title: "استقرار سریع!",
         icon: <GoZap  />,
-        link: "/paas/nodejs/getting-started"
+        link: "/paas/nodejs/quick-start"
       },
       {
         title: "لینک‌های مرتبط",
         icon: <GoMegaphone   />,
-        link: "/paas/nodejs/getting-started"
+        link: "/paas/nodejs/related-links"
       },
       {
         hr: true
@@ -285,11 +285,11 @@ export default {
       },
       {
         title: "ساخت برنامه",
-        link: "/paas/nodejs/getting-started"
+        link: "/paas/nodejs/how-tos/create-app"
       },
       {
         title: "استقرار برنامه",
-        link: "/paas/nodejs/getting-started"
+        link: "/paas/nodejs/how-tos/deploy-app"
       },
       {
         title: "استفاده از متغیرهای محیطی",

diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
@@ -42,7 +42,7 @@ const Sidebar = () => {
         </div>
         <div id="sidebar-items">
           <ul className="mt-8">
-            {handleSidebarContent().map(item => {
+            {handleSidebarContent()?.map(item => {
               if (item.hr) {
                 return <hr className="my-4" />;
               }

diff --git a/src/pages/components.mdx b/src/pages/components.mdx
@@ -80,6 +80,18 @@ import { GoCheckCircle } from "react-icons/go";
                 </>,
                 "توضیحات ایتم شماره ۳"]} 
         />
+
+        <Tabs 
+    tabs={["Liara CLI", "Liara Console"]} 
+    content={[
+    <>
+    <h2></h2>
+    <p></p>
+    </>,
+    <>
+    </>
+]} 
+/>
         <div className="h-10" />
 
         ## کارت

diff --git a/src/pages/paas/nodejs/how-tos/create-app.mdx b/src/pages/paas/nodejs/how-tos/create-app.mdx
@@ -0,0 +1,109 @@
+import Layout from "@/components/Layout";
+import Button from "@/components/Common/button";
+import Section from "@/components/Common/section";
+import Alert from "@/components/Common/alert";
+import Tabs from "@/components/Common/tab";
+import Step from "@/components/Common/step";
+import Card from "@/components/Common/card";
+import Important from "@/components/Common/important";
+import Highlight from "react-highlight";
+import Link from "next/link";
+
+
+<Layout>
+# ساخت برنامه NodeJS در لیارا
+
+<Tabs 
+    tabs={["Liara CLI", "Liara Console"]} 
+    content={[
+    <>
+    <video
+        src="https://files.liara.ir/liara/nodejs/nodejs-cli.mp4"
+        controls="controls"
+        className="block w-full"
+        width="100%"
+    ></video>
+    <br />
+    <p>
+        برای ساخت برنامه در لیارا باید در ابتدا با اجرای دستور زیر، ابزار Liara CLI را بر روی سیستم‌عامل خود، نصب کنید:
+    </p>
+    <div dir='ltr'>
+      <Highlight className="bash">
+        {`npm install -g @liara/cli`}
+      </Highlight>
+    </div>
+    <div className="h-2" />
+    <p>
+        در نظر داشته باشید برای اینکه بتوانید این ابزار را بر روی سیستم خود نصب و از آن استفاده کنید، باید npm و NodeJS بر روی سیستم‌عامل شما نصب باشد.
+        کافیست تا به <Link href="https://nodejs.org">وب‌سایت رسمی NodeJS</Link> مراجعه کنید و با دانلود و نصب آخرین نسخه NodeJS LTS، ابزار npm و NodeJS برای شما نصب می‌شود.
+    </p>
+    <p>    
+        در ادامه، بایستی با اجرای دستور زیر، وارد حساب کاربری خود در لیارا شوید:
+    </p>
+    <div dir='ltr'>
+      <Highlight className="bash">
+        {`liara login`}
+      </Highlight>
+    </div>
+    <div className="h-4" />
+    <img src="https://files.liara.ir/liara/docs/liaracli-login.gif" alt="liara cli login to account" />
+    <div className="h-4" />
+    <p>
+        بعد از انجام کار فوق، بایستی با اجرای دستور زیر، <Link href="../../details/private-networks">شبکه خصوصی</Link> برنامه‌تان را ایجاد کنید؛ البته اگر که از قبل شبکه خصوصی را ایجاده کرده باشید؛ نیازی به اجرای این دستور، نخواهد بود:
+    </p>
+    <div dir='ltr'>
+      <Highlight className="bash">
+        {`liara network create `}
+      </Highlight>
+    </div>
+    <p>
+        سپس، کافیست تا برنامه خود را در لیارا بسازید؛ می‌توانید این کار را با دستور زیر انجام دهید، البته؛ اگر که از قبل برنامه خود را ساخته‌اید، نیاز به اجرای این دستور، نخواهد بود:
+    </p>
+    <div dir='ltr'>
+      <Highlight className="bash">
+        {`liara app:create`}
+      </Highlight>
+    </div>
+    <p>
+        با اجرای دستور فوق، شما باید شناسه، شبکه خصوصی و <Link href="../../details/plans/about">پلن‌های نرم‌افزاری و سخت‌افزاری</Link> برنامه خود را انتخاب کنید.
+    </p>
+    </>,
+    <>
+        <video
+        src="https://files.liara.ir/liara/nodejs/nodejs-desktop.mp4"
+        controls="controls"
+        className="block w-full"
+        width="100%"
+        ></video>
+        <br />
+        <p>
+            برای ساخت برنامه، کافیست تا پس از ورود به <Link href="https://console.liara.ir">پنل کاربری</Link> وارد منوی <Link href="https://console.liara.ir/apps">پلتفرم</Link> شوید؛ بر روی گزینه <Link href="https://console.liara.ir/apps/create">ایجاد برنامه</Link> کلیک کرده و پلتفرم را بر روی <b>NodeJS</b> تنظیم کنید.
+            در ادامه باید برای برنامه‌تان یک شناسه و یک <a href="../../details/private-networks">شبکه خصوصی</a> انتخاب کنید و در نهایت <a href="../../details/plans/about">پلن‌های نرم‌افزاری و سخت‌افزاری</a> مدنظرتان را انتخاب کنید. 
+            در آخر، کافیست تا بر روی گزینه <b>ایجاد برنامه</b> کلیک کنید تا برنامه‌تان ساخته شود:
+        </p>
+        <img src="https://files.liara.ir/liara/docs/create-app-using-console.gif" alt="create app using console" />
+        <div className="h-4" />
+        <p>شناسه‌ای که برای برنامه خود انتخاب می‌کنید باید یکتا باشد، پس از ساخت برنامه، شما می‌توانید با استفاده از شناسه و پسوند <Important>liara.run.</Important> به برنامه خود، دسترسی داشته باشید؛ به عنوان مثال، اگر شناسه برنامه‌تان را <Important>my-web-app</Important> انتخاب کنید؛ برنامه‌تان در آدرس زیر، قابل مشاهده و بررسی خواهد بود:</p>
+        <div className="h-2" />
+        <div dir='ltr'>
+            <Highlight className="bash">
+                {`https://my-web-app.liara.run`}
+            </Highlight>
+        </div>
+        <p>
+            در واقع، این همان <a href="../../domains/default-subdomain.md">دامنه پیش‌فرضی</a> است که لیارا به صورت رایگان در اختیار شما قرار می‌دهد.
+        </p>
+        <p>
+            در نهایت، می‌توانید وضعیت برنامه خود را در <a href="https://console.liara.ir">پنل کاربری</a> مشاهده بفرمایید که در حالت آماده به کار قرار دارد:
+        </p>
+        <img src="https://files.liara.ir/liara/docs/ready-to-use-app.png" alt="a ready to use nodejs app"/>
+    </>
+]} 
+/>
+
+<Alert variant="success">همچنین بخوانید: <a href="../../details/about">آشنایی با ویژگی‌های یک برنامه</a></Alert>
+<Alert variant="success">همچنین بخوانید: <a href="../../domains/about">اضافه کردن دامنه به برنامه</a></Alert>
+
+
+[گام بعدی - استقرار برنامه](./deploy-app)
+</Layout>