create-nizam-app 1.0.1 → 1.1.1

package/README.md

@@ -32,7 +32,7 @@ In addition to creating an organized file structure, nizam allows developers to
 - 💡 Automatically create essential project files
 - ⚡️ Speed up project initialization and focus on core development
 - 🛠️ Generate a scalable and well organized Frontend project structure
-- 📄 After completing the build, you will find a `NIZAM_DOC.md` file containing instructions and docs link for libraries you selected.
+- 📄 After completing the build, you will find a `nizam_doc.html` file containing instructions and docs link for libraries you selected.
 
 ## All of this in one place
 

package/dist/__main__.js

@@ -12,6 +12,7 @@ import fs from 'fs-extra';
 import path from 'path';
 import checkboxPlus from 'inquirer-checkbox-plus-plus';
 import { fileURLToPath } from 'url';
+import { marked } from 'marked';
 import stripJsonComments from 'strip-json-comments';
 
 let runtimeContext = null;
@@ -126,7 +127,8 @@ async function getPkgInfo(pkg_name) {
 }
 
 var app_info = {
-	version: "1.0.1"
+	name: "nizam",
+	version: "1.1.1"
 };
 var core_documentation = {
 	aliases: {
@@ -392,6 +394,7 @@ const emptyDir = fs.emptyDir;
 const readJson = fs.readJson;
 const writeJson = fs.writeJson;
 const outputJson = fs.outputJson;
+const copy = fs.copy;
 
 function pathBox() {
     const { full_project_path, nizam_templates_path, user_options } = useContext();
@@ -436,6 +439,7 @@ function pathBox() {
         api_http_file_path: path.resolve(full_project_path, "src", `api`, `http.${js_or_ts}`),
         api_fetcher_file_path: path.resolve(full_project_path, "src", `api`, `fetcher.${js_or_ts}`),
         api_axios_fle_path: path.resolve(full_project_path, "src", `api`, `axios.${js_or_ts}`),
+        nizam_doc_html: path.resolve(full_project_path, "public", "nizam_doc.html"),
         // nizam-main
         jsconfig_app_template: path.resolve(nizam_templates_path, "react", js_or_ts, "jsconfig.template"),
         vsc_settings_templates: path.resolve(nizam_templates_path, "vscode", "settings.template"),
@@ -504,8 +508,7 @@ async function installDependencies({ user_option_library, lib_list, }) {
 }
 
 async function askAboutInstall() {
-    const { user_options, operation_state } = useContext();
-    const path_box = pathBox();
+    const { user_options } = useContext();
     const question_theme = {
         prefix: {
             idle: `${chalk.yellowBright("[")}${chalk.blueBright("?")}${chalk.yellowBright("]")}`,
@@ -516,17 +519,6 @@ async function askAboutInstall() {
             answer: (text) => chalk.greenBright(text),
         },
     };
-    const install_instructions = `
-### install all package
-
-#### Here’s the way, to install all packages
-
-Run (Development mode)
-\`\`\`bash
-${user_options.pkg_manager} install
-\`\`\`
-  ---
-`;
     if (user_options.pkg_manager.length !== 0) {
         const is_ok = await confirm({
             message: `Do you want install all packages now?`,
@@ -537,18 +529,18 @@ ${user_options.pkg_manager} install
             process.stdout.write("\x1b[1A\x1b[2K");
             await operations(install, "install_all_packages", "Install all packages");
         }
-        else {
-            const content = await readFile(path_box.nizam_Instructions_path, "utf8");
-            const lines = content.split("\n");
-            lines.splice(11, 0, install_instructions);
-            await writeFile(path_box.nizam_Instructions_path, lines.join("\n"), "utf8");
-        }
     }
-    if (operation_state.install_all_packages.status === "fatal")
-        return;
-    await new Promise((r) => setTimeout(r, 1500));
-    await say(`Don't forget to take a look at the attached file ${chalk.bold("NIZAM_DOC.md")} within the new project to learn how to work with the downloaded packages.`);
-    await new Promise((r) => setTimeout(r, 4000));
+}
+
+async function finalInstructure() {
+    const { nizam_doc_html } = pathBox();
+    const { operation_state, user_options } = useContext();
+    await new Promise((r) => setTimeout(r, 500));
+    if (operation_state.install_all_packages.status === "" ||
+        operation_state.install_all_packages.status === "fatal") {
+        console.log(`${chalk.yellowBright("[!] Download all packages using:")} ${chalk.greenBright(`${user_options.pkg_manager} install`)}`);
+    }
+    console.log(`${chalk.yellowBright("[!] Get your doc (Open this path in your browser):")} ${chalk.greenBright(`file:///${nizam_doc_html}`)}\n`);
 }
 
 const question_theme = {
@@ -1410,6 +1402,8 @@ function CorePaths() {
     const __dirname = path.dirname(__filename);
     const TEMPLATES_DIR = path.resolve(__dirname, "templates");
     ctx.nizam_templates_path = TEMPLATES_DIR;
+    const media_DIR = path.resolve(__dirname, "media");
+    ctx.nizam_media_path = media_DIR;
 }
 
 async function CreatFolder() {
@@ -1458,16 +1452,653 @@ async function CreatVSCFolder() {
     }
 }
 
+async function cleanFolder() {
+    const { full_project_path, operation_state } = useContext();
+    const MARK = "##-nizam@mark-##:";
+    const remove_mark = async (dir) => {
+        const items = await readdir(dir);
+        const IGNORE_FILES = new Set([
+            "NIZAM_DOC.md",
+            "nizam_doc.html",
+            "package.json",
+            ".gitignore",
+            "README.md",
+            "tsconfig.app.json",
+            "tsconfig.json",
+            "tsconfig.node.json",
+            "index.html",
+            "eslint.config.js",
+            "public",
+        ]);
+        for (const item of items) {
+            if (IGNORE_FILES.has(item))
+                continue;
+            const fullPath = path.join(dir, item);
+            const stat = await lstat(fullPath);
+            if (stat.isDirectory()) {
+                await remove_mark(fullPath);
+            }
+            else if (stat.isFile()) {
+                let content = await readFile(fullPath, "utf8");
+                const lines = content.split(/\r?\n/);
+                const cleanedLines = lines
+                    .map((line) => {
+                    if (line.includes(MARK)) {
+                        const newLine = line.replace(new RegExp(`${MARK}\\S+`, "g"), "");
+                        return newLine.trim() === "" ? null : newLine;
+                    }
+                    return line;
+                })
+                    .filter(Boolean);
+                const cleanedContent = cleanedLines.join("\n");
+                await writeFile(fullPath, cleanedContent, "utf8");
+            }
+        }
+    };
+    try {
+        await remove_mark(full_project_path);
+        operation_state.clean_folder_mark.status = "success";
+    }
+    catch (err) {
+        operation_state.clean_folder_mark.status = "fatal";
+        operation_state.clean_folder_mark.error_message = extractMainMessage(err);
+    }
+}
+
+async function BuildDocPage() {
+    const { operation_state } = useContext();
+    const { nizam_Instructions_path, nizam_doc_html } = pathBox();
+    const list_of_ids = [];
+    const list_of_names = [];
+    const mdContent = await readFile(nizam_Instructions_path, "utf-8");
+    try {
+        const html = mdContent
+            .split("\n")
+            .map((line) => {
+            if (/^##\s+[^#]/.test(line)) {
+                const section_name = line.replace(/^##\s+/, " ");
+                const section_id = line
+                    .replace(/^##\s+/, "")
+                    .replaceAll(" ", "_")
+                    .replace(/[^a-zA-Z0-9_]+/g, "")
+                    .toLowerCase();
+                list_of_names.push(section_name);
+                list_of_ids.push(section_id);
+                return `<h2 id="${section_id}">${section_name}</h2>`;
+            }
+            return line;
+        })
+            .join("\n");
+        const tokens = marked.lexer(html);
+        tokens.forEach((token) => {
+            if (token.type === "blockquote") {
+                const text = token.text.trim();
+                let innerHtml = marked.parser(marked.lexer(text
+                    .replace(/\[!(TIP|NOTE|IMPORTANT|WARNING|CAUTION)\]/i, "")
+                    .trim()));
+                if (/^\[!TIP\]/i.test(text)) {
+                    token.type = "html";
+                    token.text = `<div class="alert alert-tip"> <span class="icon"><svg class="octicon octicon-light-bulb " viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg> Tip</span> ${innerHtml}</div>`;
+                }
+                else if (/^\[!NOTE\]/i.test(text)) {
+                    token.type = "html";
+                    token.text = `<div class="alert alert-note"> <span class="icon"> <svg class="octicon octicon-info " viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg> Note</span> ${innerHtml}</div>`;
+                }
+                else if (/^\[!IMPORTANT\]/i.test(text)) {
+                    token.type = "html";
+                    token.text = `<div class="alert alert-important"> <span class="icon"><svg class="octicon octicon-report " viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg> Important</span> ${innerHtml}</div>`;
+                }
+                else if (/^\[!WARNING\]/i.test(text)) {
+                    token.type = "html";
+                    token.text = `<div class="alert alert-warning"> <span class="icon"><svg class="octicon octicon-alert " viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg> Warning</span> ${innerHtml}</div>`;
+                }
+                else if (/^\[!CAUTION\]/i.test(text)) {
+                    token.type = "html";
+                    token.text = `<div class="alert alert-caution"> <span class="icon"><svg class="octicon octicon-stop " viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg> Caution</span> ${innerHtml}</div>`;
+                }
+            }
+        });
+        const htmlBody = marked.parser(tokens);
+        const fullHTML = `
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>nizam - documentation</title>
+  <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.8.1/github-markdown-dark.css" />
+  <style>
+    /* -----------------
+==> main
+--------------------*/
+    :root {
+      --color-bg: #0e0e0e;
+      --color-main: #2b3e4c;
+      --color-main-light: rgba(43, 62, 76, 0.738);
+      --color-white-f: #ffffff20;
+      --color-white-s: #ffffffb3;
+      --color-white-t: #ffffff15;
+    }
+
+    body {
+      background-color: var(--color-bg);
+      padding: 0;
+      margin: 0;
+      height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      overflow: hidden;
+      font-family: sans-serif;
+    }
+
+    ::-webkit-scrollbar {
+      width: 12px;
+    }
+
+    ::-webkit-scrollbar-track {
+      border-left: 2px dashed var(--color-white-f);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      cursor: pointer;
+      background-color: var(--color-white-f);
+      border: 1px dotted var(--color-white-f);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      opacity: 80%;
+    }
+
+    .shadow-one {
+      width: 20rem;
+      height: 20rem;
+      background-color: var(--color-main);
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      z-index: 1;
+      border-radius: 50%;
+      filter: blur(100px);
+      opacity: 60%;
+    }
+
+    .shadow-two {
+      width: 20rem;
+      height: 20rem;
+      background-color: var(--color-main);
+      position: absolute;
+      top: 0;
+      left: 10%;
+      z-index: 1;
+      border-radius: 50%;
+      filter: blur(100px);
+      opacity: 60%;
+    }
+
+    .bg-noise {
+      position: absolute;
+      inset: -200%;
+      z-index: 2;
+      width: 400%;
+      height: 400%;
+      background-image: url(./assets/images/layer.png);
+      animation: diagonal-move 0.9s linear infinite;
+      opacity: 6%;
+      will-change: transform;
+      overflow: hidden;
+    }
+
+    .owner-box {
+      width: 3rem;
+      height: 3rem;
+      border: 1px solid var(--color-white-f);
+      background-color: var(--color-bg);
+      border-radius: 4px;
+      position: absolute;
+      z-index: 100;
+      bottom: 15px;
+      right: 15px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      padding: 8px;
+      box-sizing: border-box;
+      transition: 0.1s all;
+    }
+
+    .owner-box:hover {
+      opacity: 80%;
+    }
+
+    main {
+      width: 97.5vw;
+      height: 97.5vh;
+      overflow: hidden;
+      display: flex;
+      color: wheat;
+      border: 2px dashed var(--color-white-f);
+      position: relative;
+      z-index: 3;
+    }
+
+    .main-left,
+    .main-right {
+      height: 100%;
+    }
+
+    /* -----------------
+==> main-left
+--------------------*/
+    .main-left {
+      width: 25%;
+      border-right: 2px dashed var(--color-white-f);
+    }
+
+    .main-left .main-left-logo {
+      border-bottom: 2px dashed var(--color-white-f);
+      padding: 15px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .main-left-logo img {
+      width: 5rem;
+      opacity: 90%;
+    }
+
+    .main-left-logo span {
+      margin-top: 0.1rem;
+      color: var(--color-white-s);
+      font-size: 0.85rem;
+      opacity: 80%;
+    }
+
+    .main-left .ids-list {
+      height: 100%;
+      position: relative;
+    }
+
+    .ids-list-shadow-top,
+    .ids-list-shadow-bottom {
+      width: 100%;
+      height: 10rem;
+      position: absolute;
+      left: 0;
+      opacity: 50%;
+      pointer-events: none;
+    }
+
+    .ids-list-shadow-top {
+      top: 0;
+      background: linear-gradient(to bottom,
+          var(--color-white-f),
+          rgba(255, 255, 255, 0));
+    }
+
+    .ids-list-shadow-bottom {
+      bottom: 5%;
+      background: linear-gradient(to top,
+          var(--color-white-f),
+          rgba(255, 255, 255, 0));
+    }
+
+    .main-left .ids-list .list-contant {
+      height: 100%;
+      padding: 0px 0px 10px 0;
+      overflow: auto;
+    }
+
+    .main-left .ids-list span:before {
+      content: "= >";
+      font-size: 0.8rem;
+      color: var(--color-white-f);
+      margin-right: 8px;
+      font-weight: 700;
+    }
+
+    .main-left .ids-list span {
+      display: block;
+      margin-top: 0.3rem;
+      margin-bottom: 0.6rem;
+      padding: 0.8rem 0;
+      font-size: 1rem;
+      font-family: sans-serif;
+      color: var(--color-white-s);
+      cursor: pointer;
+      text-transform: capitalize;
+      transition: 0.2s all;
+      border-top: 2px dashed var(--color-white-t);
+      border-bottom: 2px dashed var(--color-white-t);
+    }
+
+    .main-left .ids-list span:last-child {
+      margin-bottom: 4rem;
+    }
+
+    .main-left .ids-list span:hover,
+    .main-left .ids-list span.active {
+      background-color: var(--color-white-f);
+    }
+
+    /* -----------------
+==> main-right
+--------------------*/
+    .main-right {
+      width: 75%;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .main-right-shadow-top,
+    .main-right-shadow-bottom {
+      width: 100%;
+      height: 8rem;
+      position: absolute;
+      opacity: 60%;
+      pointer-events: none;
+    }
+
+    .main-right-shadow-top {
+      top: 0;
+      background: linear-gradient(to bottom,
+          var(--color-white-f),
+          rgba(255, 255, 255, 0));
+    }
+
+    .main-right-shadow-bottom {
+      bottom: 0;
+      background: linear-gradient(to top,
+          var(--color-white-f),
+          rgba(255, 255, 255, 0));
+    }
+
+    .main-right .main-right-box {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      padding: 4px;
+      background-color: var(--color-white-f);
+    }
+
+    .markdown-body {
+      box-sizing: border-box;
+      padding: 30px;
+    }
+
+    /* Make images scale */
+    .markdown-body img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    /* Make tables scrollable on small devices */
+    .markdown-body table {
+      display: block;
+      width: 100%;
+      overflow-x: auto;
+    }
+
+    /* Responsive font size */
+    .markdown-body {
+      font-size: clamp(14px, 2vw, 18px);
+    }
+
+    /* Copy button */
+    .copy-btn {
+      color: #9198a1;
+      padding: 6px 10px;
+      border-radius: 4px;
+      background-color: #212830;
+      border: 1px solid #3d444d;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    .copy-btn:hover {
+      background: #444c567f;
+    }
+
+    /* Alerts */
+    .alert {
+      padding: 0px 15px;
+      border-left: 3.2px solid;
+      font-family: sans-serif;
+      font-size: 1rem;
+    }
+
+    .alert .icon {
+      font-size: 0.85em;
+      flex-shrink: 0;
+    }
+
+    .alert-note {
+      border-color: #4493f8;
+      color: #f0f6fc;
+    }
+
+    .alert-tip {
+      border-color: #3fb950;
+      color: #f0f6fc;
+    }
+
+    .alert-important {
+      border-color: #ab7df8;
+      color: #f0f6fc;
+    }
+
+    .alert-warning {
+      border-color: #d29922;
+      color: #f0f6fc;
+    }
+
+    .alert-caution {
+      border-color: #f85149;
+      color: #f0f6fc;
+    }
+
+    .alert-note .icon {
+      color: #4493f8;
+    }
+
+    .alert-tip .icon {
+      color: #3fb950;
+    }
+
+    .alert-important .icon {
+      color: #ab7df8;
+    }
+
+    .alert-warning .icon {
+      color: #d29922;
+    }
+
+    .alert-caution .icon {
+      color: #f85149;
+    }
+
+    /* -----------------
+==> key frames
+--------------------*/
+    @keyframes diagonal-move {
+      0% {
+        transform: translate(20%, -20%);
+      }
+
+      50% {
+        transform: translate(-20%, 20%);
+      }
+
+      100% {
+        transform: translate(20%, -20%);
+      }
+    }
+
+    /* -----------------
+==> Media Queries
+--------------------*/
+    /* sm */
+    @media (max-width: 576px) {
+      .main-left {
+        display: none;
+      }
+
+      .main-right {
+        width: 100%;
+      }
+
+      .markdown-body {
+        padding: 15px;
+      }
+    }
+
+    /* md */
+    @media (min-width: 577px) and (max-width: 768px) {
+      ::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      .main-left-logo img {
+        width: 3.5rem;
+      }
+
+      .markdown-body {
+        padding: 15px;
+      }
+    }
+
+    /* lg */
+    @media (min-width: 769px) and (max-width: 992px) {
+      ::-webkit-scrollbar {
+        width: 10px;
+      }
+
+      .main-left-logo img {
+        width: 4rem;
+      }
+    }
+
+    /* xl */
+    @media (min-width: 993px) {}
+  </style>
+</head>
+
+<body>
+  <main>
+    <div class="main-left">
+      <div class="main-left-logo">
+        <img src="./assets/images/logo.png" alt="nizam logo" />
+        <span>v${appData.app_info.version}</span>
+      </div>
+      <div class="ids-list">
+        <div class="ids-list-shadow-top"></div>
+        <div class="ids-list-shadow-bottom"></div>
+        <div class="list-contant">
+          ${list_of_ids
+            .map((name, i) => `<span class="id_clicker" onclick="goToId('${name}')">${list_of_names[i]}</span>`)
+            .join("")}
+        </div>
+      </div>
+    </div>
+    <div class="main-right">
+      <div class="main-right-shadow-top"></div>
+      <div class="main-right-shadow-bottom"></div>
+      <div class="main-right-box">
+        <article class="markdown-body">${htmlBody}</article>
+      </div>
+    </div>
+  </main>
+  <div>
+    <div class="bg-noise"></div>
+    <div class="shadow-one"></div>
+    <div class="shadow-two"></div>
+  </div>
+   <a href="https://ahmedabdalalim.pages.dev/" target="_blank" class="owner-box">
+    <img src="https://raw.githubusercontent.com/ahmed-abd-alalim/ahmed-abd-alalim/main/assets/3A.png" alt="3A"
+      width="100%" />
+  </a>
+  
+  <!-- Clipboard.js library -->
+  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      document.querySelectorAll("pre > code").forEach((codeBlock) => {
+        const button = document.createElement("button");
+        button.innerText = "Copy";
+        button.className = "copy-btn";
+        codeBlock.parentNode.style.position = "relative";
+        button.style.position = "absolute";
+        button.style.top = "10px";
+        button.style.right = "10px";
+        button.style.fontSize = "12px";
+        button.style.cursor = "pointer";
+        codeBlock.parentNode.appendChild(button);
+
+        new ClipboardJS(button, {
+          target: () => codeBlock,
+        });
+
+        button.addEventListener("click", () => {
+          button.innerText = "Copied!";
+          setTimeout(() => (button.innerText = "Copy"), 1000);
+        });
+      });
+    });
+    function goToId(id) {
+      const container = document.querySelector(".main-right-box");
+      const el = document.getElementById(id);
+      el.classList.toggle("active");
+
+      if (!el) return;
+
+      container.scrollTo({
+        top: el.offsetTop - container.offsetTop - 25,
+        behavior: "smooth",
+      });
+    }
+
+    document.querySelector(".list-contant").addEventListener("click", function (e) {
+      const item = e.target.closest(".id_clicker");
+      if (!item) return;
+      this.querySelectorAll(".active").forEach(el => el.classList.remove("active"));
+      item.classList.add("active");
+    });
+  </script>
+</body>
+
+</html>
+`;
+        await ensureFile(nizam_doc_html);
+        await writeFile(nizam_doc_html, fullHTML, "utf-8");
+        await remove(nizam_Instructions_path);
+        operation_state.build_nizam_doc_html.status = "success";
+    }
+    catch (err) {
+        operation_state.build_nizam_doc_html.status = "fatal";
+        operation_state.build_nizam_doc_html.error_message =
+            extractMainMessage(err);
+    }
+}
+
 async function nizamDocEditor(nizam_doc_contant) {
     const path_box = pathBox();
     const new_instructions = `
+  
 ${!nizam_doc_contant.title_params ? "" : `## ${nizam_doc_contant.title_params}`}
-
 ${!nizam_doc_contant.dec_params ? "" : `### ${nizam_doc_contant.dec_params}`}
-
 ${!nizam_doc_contant.expla_params ? "" : nizam_doc_contant.expla_params}
-
   ---
+
+  <br>
+
+
   `;
     await appendFile(path_box.nizam_Instructions_path, new_instructions);
 }
@@ -1674,7 +2305,7 @@ async function Structure() {
 }
 
 async function ReactFiles() {
-    const { user_options } = useContext();
+    const { user_options, nizam_media_path } = useContext();
     const { js_framework } = resources_json;
     const path_box = pathBox();
     const index_title = `<title>nizam - add your website name (${user_options.project_name}) here</title>`;
@@ -1700,6 +2331,7 @@ async function ReactFiles() {
     // clean public folder
     await ensureDir(path_box.public_path);
     await emptyDir(path_box.public_path);
+    await copy(nizam_media_path, path_box.public_path, { overwrite: true });
     // edit title in index.html
     const html = await readFile(path_box.index_html_path, "utf8");
     const updatedHtml = html.replace(/<title>(.*?)<\/title>/i, index_title);
@@ -2893,58 +3525,6 @@ async function DataFetching() {
     }
 }
 
-async function cleanFolder() {
-    const { full_project_path, operation_state } = useContext();
-    const MARK = "##-nizam@mark-##:";
-    const remove_mark = async (dir) => {
-        const items = await readdir(dir);
-        const IGNORE_FILES = new Set([
-            "NIZAM_DOC.md",
-            "package.json",
-            ".gitignore",
-            "README.md",
-            "tsconfig.app.json",
-            "tsconfig.json",
-            "tsconfig.node.json",
-            "index.html",
-            "eslint.config.js",
-            "public",
-        ]);
-        for (const item of items) {
-            if (IGNORE_FILES.has(item))
-                continue;
-            const fullPath = path.join(dir, item);
-            const stat = await lstat(fullPath);
-            if (stat.isDirectory()) {
-                await remove_mark(fullPath);
-            }
-            else if (stat.isFile()) {
-                let content = await readFile(fullPath, "utf8");
-                const lines = content.split(/\r?\n/);
-                const cleanedLines = lines
-                    .map((line) => {
-                    if (line.includes(MARK)) {
-                        const newLine = line.replace(new RegExp(`${MARK}\\S+`, "g"), "");
-                        return newLine.trim() === "" ? null : newLine;
-                    }
-                    return line;
-                })
-                    .filter(Boolean);
-                const cleanedContent = cleanedLines.join("\n");
-                await writeFile(fullPath, cleanedContent, "utf8");
-            }
-        }
-    };
-    try {
-        await remove_mark(full_project_path);
-        operation_state.clean_folder_mark.status = "success";
-    }
-    catch (err) {
-        operation_state.clean_folder_mark.status = "fatal";
-        operation_state.clean_folder_mark.error_message = extractMainMessage(err);
-    }
-}
-
 async function Setup() {
     const { operation_state, user_options } = useContext();
     const operation_data = [
@@ -3039,6 +3619,13 @@ async function Setup() {
             operation_is_need: true,
             operation_targit: true,
         },
+        {
+            operation_name: "build_nizam_doc_html",
+            operation_fun: BuildDocPage,
+            operation_des: `build nizam_doc.html page`,
+            operation_is_need: true,
+            operation_targit: true,
+        },
     ];
     // get all path that's i will use
     CorePaths();
@@ -3063,6 +3650,7 @@ function createContext() {
         start_menu_options: "",
         full_project_path: "",
         nizam_templates_path: "",
+        nizam_media_path: "",
         pkg_is_installed: [],
         reset_menu: false,
         user_options: {
@@ -3084,20 +3672,21 @@ function createContext() {
             data_fetching: "",
         },
         operation_state: {
-            creat_project_folder: one_operation_state,
-            js_framework: one_operation_state,
-            creat_vsc_folder: one_operation_state,
-            add_aliase: one_operation_state,
-            css_framework: one_operation_state,
-            app_structure: one_operation_state,
-            ui_library: one_operation_state,
-            routing_library: one_operation_state,
-            icon_library: one_operation_state,
-            state_management: one_operation_state,
-            head_management: one_operation_state,
-            data_fetching: one_operation_state,
-            install_all_packages: one_operation_state,
-            clean_folder_mark: one_operation_state,
+            creat_project_folder: structuredClone(one_operation_state),
+            js_framework: structuredClone(one_operation_state),
+            creat_vsc_folder: structuredClone(one_operation_state),
+            add_aliase: structuredClone(one_operation_state),
+            css_framework: structuredClone(one_operation_state),
+            app_structure: structuredClone(one_operation_state),
+            ui_library: structuredClone(one_operation_state),
+            routing_library: structuredClone(one_operation_state),
+            icon_library: structuredClone(one_operation_state),
+            state_management: structuredClone(one_operation_state),
+            head_management: structuredClone(one_operation_state),
+            data_fetching: structuredClone(one_operation_state),
+            install_all_packages: structuredClone(one_operation_state),
+            clean_folder_mark: structuredClone(one_operation_state),
+            build_nizam_doc_html: structuredClone(one_operation_state),
         },
     };
 }
@@ -3105,7 +3694,7 @@ function createContext() {
 async function main() {
     const ctx = createContext();
     startProject(ctx);
-    const clearConsole = () => {
+    const clearConsole = async () => {
         if (process.platform === "win32") {
             execSync("cls", { stdio: "inherit" });
         }
@@ -3114,41 +3703,45 @@ async function main() {
         }
     };
     const search_mode_colle = async () => {
-        clearConsole();
+        await clearConsole();
         sectionBox("Browse Mode".toUpperCase());
         await Search();
         await Core();
-        clearConsole();
+        await clearConsole();
         await printMenu();
         if (ctx.reset_menu) {
             await resetContext();
             ctx.reset_menu = false;
             return;
         }
-        clearConsole();
+        await clearConsole();
         sectionBox("Installation".toUpperCase());
         await Setup();
         await askAboutInstall();
-        clearConsole();
+        await clearConsole();
+        sectionBox("nizam success".toUpperCase());
+        await finalInstructure();
         process.exit(0);
     };
     const custom_mode_colle = async () => {
-        clearConsole();
+        await clearConsole();
         sectionBox("OneShot Mode".toUpperCase());
         await Core();
         await Custom();
-        clearConsole();
+        await clearConsole();
         await printMenu();
         if (ctx.reset_menu) {
             await resetContext();
             ctx.reset_menu = false;
             return;
         }
-        clearConsole();
+        await clearConsole();
         sectionBox("Installation".toUpperCase());
         await Setup();
         await askAboutInstall();
-        clearConsole();
+        await clearConsole();
+        sectionBox("nizam success".toUpperCase());
+        await finalInstructure();
         process.exit(0);
     };
     const help_colle = async () => {

package/dist/media/favicon.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: visioncortex VTracer 0.6.4 -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+<path d="M0 0 C22.04 18.81 36.47 41.06 44.35 68.91 C44.69 70.09 45.03 71.27 45.39 72.48 C52.92 104.37 46.54 140.39 29.71 168.21 C11.42 197.3 -15.82 216.61 -48.65 225.91 C-49.83 226.25 -51 226.59 -52.22 226.95 C-84.11 234.48 -120.12 228.1 -147.95 211.27 C-177.04 192.98 -196.35 165.73 -205.65 132.91 C-205.99 131.73 -206.33 130.55 -206.68 129.34 C-214.22 97.45 -207.84 61.43 -191.01 33.61 C-172.72 4.52 -145.47 -14.79 -112.65 -24.09 C-111.47 -24.43 -110.29 -24.77 -109.08 -25.12 C-71.91 -33.91 -29.44 -24.15 0 0 Z " fill="#010101" transform="translate(208.6484375,27.08984375)"/>
+<path d="M0 0 C25.08 0 50.16 0 76 0 C78.25 14.62 78.25 14.62 78.81 20.43 C78.93 21.74 79.06 23.05 79.19 24.4 C79.32 25.79 79.45 27.19 79.59 28.58 C79.73 30.06 79.87 31.55 80.02 33.03 C80.4 36.96 80.77 40.89 81.14 44.82 C81.53 48.89 81.92 52.96 82.31 57.03 C82.78 61.88 83.25 66.73 83.71 71.58 C84.56 80.5 85.43 89.42 86.31 98.33 C86.45 99.76 86.45 99.76 86.6 101.22 C87.1 106.34 87.1 106.34 87.61 111.46 C87.84 113.67 88.06 115.88 88.27 118.1 C88.39 119.28 88.51 120.46 88.63 121.68 C89.18 128.11 89.57 134.56 90 141 C90.33 94.47 90.66 47.94 91 0 C104.2 0 117.4 0 131 0 C131 52.8 131 105.6 131 160 C105.59 160 80.18 160 54 160 C53.67 155.38 53.34 150.76 53 146 C52.53 141.87 52.03 137.75 51.5 133.62 C50.64 126.75 49.85 119.92 49.5 113 C48.81 101.96 47.32 90.98 46 80 C44.35 62.84 42.7 45.68 41 28 C40.67 71.56 40.34 115.12 40 160 C26.8 160 13.6 160 0 160 C0 107.2 0 54.4 0 0 Z " fill="#F4F0F0" transform="translate(64,49)"/>
+</svg>

package/dist/templates/NIZAM_DOC.template

@@ -1,10 +1,4 @@
-# 🚨 nizam documentation
-
-### nizam documentation for how to use some library with some assets. and some Instructions for use.
-
+<h1 align="center">🚨 nizam documentation</h1>
+<h3 align="center">nizam documentation for how to use some library with some assets. and some Instructions for use.</h3>
+<br>
 <br>
-
-> [!TIP]  
-> If you are using `VSCode`, press `Ctrl + Shift + V` for the best preview of these documents.
-
----

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nizam-app",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "preferGlobal": true,
   "description": "A Smart command-line interface with no presets for creating a modern architecture",
   "type": "module",
@@ -49,13 +49,15 @@
   ],
   "scripts": {
     "watch:templates": "npx cpx \"src/templates/**/*.template\" dist/templates --watch",
+    "watch:media": "npx cpx \"src/media/**\" dist/media --watch",
     "watch:rollup": "rollup -c -w --silent",
     "dev": "npm-run-all --parallel watch:*",
     "lint": "eslint ./src",
     "format": "prettier --write ./src",
     "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",
     "copy:templates": "npx cpx \"src/templates/**/*.template\" dist/templates",
-    "build": "npm run clean &&  npm run copy:templates && rollup -c --silent",
+    "copy:media": "npx cpx \"src/media/**\" dist/media",
+    "build": "npm run clean &&  npm-run-all --parallel copy:* && rollup -c --silent",
     "matchV": "node -e \"const fs=require('fs'); const pkg=JSON.parse(fs.readFileSync('package.json')); const config=JSON.parse(fs.readFileSync('src/assets/config.json')); config.app_info.version=pkg.version; fs.writeFileSync('src/assets/config.json', JSON.stringify(config,null,2));\"",
     "prepublishOnly": "npm run matchV && npm run format && npm run lint && npm run build"
   },
@@ -87,6 +89,7 @@
     "fuse.js": "^7.1.0",
     "inquirer": "^13.2.0",
     "inquirer-checkbox-plus-plus": "^1.1.1",
+    "marked": "^17.0.1",
     "ora": "^9.0.0",
     "strip-json-comments": "^5.0.3"
   }