Update: Wiki page

Author: Elaina69

docs/wiki-content.json

@@ -46,6 +46,65 @@
             "An Elaina Theme release zip or a local build output from this repository.",
             "A writable Pengu Loader plugins folder."
         ],
+        "quickGuide": {
+            "warning": "Do exactly the guide if you don't know what you gonna do",
+            "steps": [
+                {
+                    "title": "Active Pengu Loader",
+                    "images": [
+                        {
+                            "alt": "Active Pengu Loader",
+                            "src": "https://user-images.githubusercontent.com/94338907/232275600-d2917ec3-62a8-4f16-8411-6750ccf2c43b.png"
+                        }
+                    ]
+                },
+                {
+                    "title": "Download theme [here](https://github.com/Elaina69/Elaina-theme/releases)",
+                    "images": [
+                        {
+                            "alt": "Download theme release",
+                            "src": "https://github.com/user-attachments/assets/4a642bb8-28e7-49fb-bbdb-c3d848ed2c80"
+                        }
+                    ]
+                },
+                {
+                    "title": "Extract theme (Choose \"Extract to...\")",
+                    "images": [
+                        {
+                            "alt": "Extract theme",
+                            "src": "https://github.com/user-attachments/assets/fffaff79-0a7e-481a-8874-54845ff8fcec"
+                        }
+                    ]
+                },
+                {
+                    "title": "Open Plugin folder",
+                    "images": [
+                        {
+                            "alt": "Open Plugin folder from Pengu Loader",
+                            "src": "https://github.com/Elaina69/Elaina-V4/assets/94338907/b357078e-f868-4c23-a5fa-2c85d25d51a2"
+                        },
+                        {
+                            "alt": "Pengu Loader plugins folder",
+                            "src": "https://github.com/Elaina69/Elaina-V4/assets/94338907/19214594-91de-4f10-a33f-d88fc0175731"
+                        }
+                    ]
+                },
+                {
+                    "title": "Copy extracted folder to Pengu Loader `plugins` folder",
+                    "images": [
+                        {
+                            "alt": "Copy Elaina Theme folder to plugins folder",
+                            "src": "https://github.com/Elaina69/Elaina-V2/assets/94338907/08caceba-e092-4808-a2af-3a05b3b36e71"
+                        }
+                    ]
+                },
+                {
+                    "title": "Done"
+                }
+            ],
+            "treeIntro": "So...It must be like this",
+            "tree": ".\n├── plugins/                                # Pengu plugins folder\n│   └── Elaina-theme/                       # Ur theme here\n│       ├── assets/\n│       ├── config/\n│       ├── locales/\n│       └── index.js\n├── ...\n\n└──"
+        },
         "folderLayout": [
             "The theme folder should be placed inside the Pengu Loader plugins directory.",
             "The folder must contain the built `index.js`, `assets`, `config`, `locales`, and related theme files.",

scripts/generate-wiki.mjs

@@ -112,6 +112,26 @@ function renderNumberedList(items) {
     return items.map((item, index) => `${index + 1}. ${item}`).join('\n');
 }
 
+function renderInstallationQuickGuide(quickGuide) {
+    if (!quickGuide) return '';
+
+    const steps = quickGuide.steps.map((step, index) => {
+        const images = (step.images || [])
+            .map((image) => `<img alt="${image.alt || 'image'}" src="${image.src}" />`)
+            .join('\n\n');
+        const body = step.body ? `\n\n${step.body}` : '';
+        const imageBlock = images ? `\n\n${images}` : '';
+
+        return `${index + 1}. ${step.title}${body}${imageBlock}`;
+    }).join('\n\n');
+
+    const tree = quickGuide.tree
+        ? `\n\n### Expected folder structure\n\n${quickGuide.treeIntro || ''}\n\n\`\`\`text\n${quickGuide.tree}\n\`\`\``
+        : '';
+
+    return `## Main Installation Guide\n\n**${quickGuide.warning}**\n\n***\n\n${steps}${tree}\n`;
+}
+
 function renderLinkList(items) {
     return items.map((item) => `- [${item.title}](${item.file.replace(/\.md$/, '')})`).join('\n');
 }
@@ -121,8 +141,8 @@ function renderPageFooter() {
         '',
         '---',
         '',
-        '> This page is generated from `docs/wiki-content.json`, `docs/settings-meta.json`, and `src/src/config/datastoreDefault.js`.',
-        '> Edit those files to update the wiki content.',
+        // '> This page is generated from `docs/wiki-content.json`, `docs/settings-meta.json`, and `src/src/config/datastoreDefault.js`.',
+        // '> Edit those files to update the wiki content.',
         '',
     ].join('\n');
 }
@@ -163,6 +183,8 @@ ${install.introduction}
 
 ${renderBulletList(install.requirements)}
 
+${renderInstallationQuickGuide(install.quickGuide)}
+
 ## Folder layout
 
 ${renderBulletList(install.folderLayout)}