Add: local sistent package usage to Sistent About Page

src/sections/Projects/Sistent/about.js

@@ -8,8 +8,8 @@ import SistentPagination from "../../../components/SistentNavigation/pagination"
 import { Link } from "gatsby";
 import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 import { CodeBlock } from "./components/button/code-block";
-import { SistentThemeProvider } from "@sistent/sistent";
-import { Button } from "@sistent/sistent";
+import Code from "../../../components/CodeBlock";
+import { SistentThemeProvider, Button } from "@sistent/sistent";
 
 const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }];
 
@@ -106,22 +106,122 @@ const SistentAbout = () => {
               <CodeBlock name="checkbox" code={codes[1]} />
             </div>
 
+            <a id="Using local Sistent">
+              <h2>Using your Local Sistent Fork in a Project</h2>
+            </a>
+            <br />
+            <ul>
+              <li>
+                <h3>Method 1: File Installation</h3>
+              </li>
+              <ol>
+                <li>
+                  <b>Install your local Sistent package in the project</b>
+                  <Code codeString="npm install &lt;path-to-sistent-on-local-machine&gt;" />
+                  <p>Example:</p>
+                  <Code
+                    codeString={"# relative path\nnpm install ../../sistent\n\n# absolute path\nnpm install /home/five/code/sistent"}
+                  />
+                  <p>This will update your Sistent dependency to:</p>
+                  <Code codeString={"\"@layer5/sistent\" : \"file:../../sistent\""} />
+                </li>
+                <li>
+                  <b>Build your local Sistent fork</b>
+                  <p>
+                    After making changes to your fork, run this command in your local Sistent package.
+                  </p>
+                  <Code codeString="make build" />
+                </li>
+                <li>
+                  <b>
+                    Run the build command in the project where your local Sistent fork is installed
+                  </b>
+                  <p>Example for Meshery UI:</p>
+                  <Code codeString="make ui-build" />
+                </li>
+              </ol>
+              <p>
+                Now, your project should reflect changes from your local Sistent fork.
+              </p>
+              <p>
+                If you want to remove the local Sistent fork from your project, run:
+              </p>
+              <Code codeString="npm uninstall @layer5/sistent" />
+              <p>
+                This will remove the local Sistent package from your project. You will have to install the standard package again after running this command:
+              </p>
+              <Code codeString="npm install @layer5/sistent" />
+
+
+              <li>
+                <h3>Method 2: Using npm link</h3>
+                <p>
+                  This method allows you to link your local Sistent fork globally for easier development. Follow these steps:
+                </p>
+                <ol>
+                  <li>
+                    <b>Link your local Sistent package globally</b>
+                    <p>In your local Sistent repo, run the following command:</p>
+                    <Code codeString={"cd <path-to-sistent-on-local-machine>\nnpm link"} />
+                  </li>
+                  <li>
+                    <b>Link Sistent in your project</b>
+                    <p>In the project where you want to use your local Sistent fork, run:</p>
+                    <Code codeString="npm link @layer5/sistent" />
+                    <p>This will create a symlink in your project's node_modules, pointing to your local Sistent package.</p>
+                  </li>
+                  <li>
+                    <b>Build your local Sistent fork</b>
+                    <p>After making changes to your fork, run this command in your local Sistent package.</p>
+                    <Code codeString="make build" />
+                  </li>
+                  <li>
+                    <b>Run the build command in the project where your local Sistent fork is installed</b>
+                    <p>Example for Meshery-UI:</p>
+                    <Code codeString="make ui-build" />
+                  </li>
+                  <li>
+                    <p>
+                      Verify that your local fork is correctly linked by running:
+                    </p>
+                    <Code codeString={"npm ls -g\n\n# expected output:\n├── @layer5/sistent@0.14.11 -> ./../../../../<path-to-local-sistent-fork>"}/>
+                    <p>
+                      You can also try this command to verify that your fork is correctly linked:
+                    </p>
+                    <Code codeString={"ls -l node_modules/@layer5/sistent\n\n# expected output:\nnode_modules/@layer5/sistent -> ../../../../../sistent"} />
+                  </li>
+                  <li>
+                    <p>
+                      To revert back to the official version of Sistent, run:
+                    </p>
+                    <Code codeString="npm unlink @layer5/sistent" />
+                    <p>
+                      Then reinstall the official version, using this command:
+                    </p>
+                    <Code codeString="npm install @layer5/sistent" />
+                  </li>
+                </ol>
+              </li>
+            </ul>
+
             <p>
-              To contribute to Layer5 projects' UI using Sistent e.g. <a href="https://github.com/meshery/meshery/issues?q=is%3Aissue%20state%3Aopen%20label%3Acomponent%2Fui">meshery-ui</a> and others, You can
-              refer to {" "}
+              To contribute to projects using Sistent e.g.{" "}
+              <a href="https://github.com/meshery/meshery/issues?q=is%3Aissue%20state%3Aopen%20label%3Acomponent%2Fui">
+                meshery-ui
+              </a>{" "}
+              and others, you can refer to the {" "}
               <a href="https://github.com/layer5io/sistent?tab=readme-ov-file#installation">
-                sistent set-up guide
+                Sistent set-up guide
               </a>, {" "}
               <a href="https://discuss.layer5.io/t/hands-on-training-session-migrating-components-to-mui-v5-and-sistent/6589">Hands-on Training Session: Migrating Components to MUI v5 and Sistent</a>, {" "}
               <a href="https://www.youtube.com/live/lsw9KA__iu4?si=o8gpZdSHcqO2OKxE">
-                Training: contributing to Sistent
+                Training: contributing to Sistent,
               </a>{" "}
               and{" "}
               <a href="https://www.youtube.com/live/yiXkxbibLUU?si=Dybj5qr0VLhLWEpl">
                 Websites call
               </a>{" "}
-              where experienced contributors have taught how to use sistent in
-              various Layer5 projects.
+              , where experienced contributors demonstrate how to use Sistent in various projects.
             </p>
           </div>
           <SistentPagination />