docs: update documents category, add preload script document

docs/src/.vitepress/config.mts

@@ -22,10 +22,9 @@ export default {
       collapsed: false,
       useTitleFromFileHeading: true,
       manualSortFileNameByPriority: [
-        'getting-started.md',
-        'build-configuration.md',
-        'project-structure.md',
-        'npm-scripts.md'
+        'Installation and Build',
+        'Project Structures',
+        'Electron How To'
       ]
     }),
     socialLinks: [{ icon: 'github', link: repository.url.replace('.git', '') }]

docs/src/Electron How To/preload-script.md

@@ -0,0 +1,20 @@
+# Preload Script
+
+The preload script in Electron.js is a secure area designed for communication between the main and renderer processes. It is typically used for **[IPC communication](https://www.electronjs.org/docs/latest/tutorial/ipc)**.
+
+For more information, see the following articles https://www.electronjs.org/docs/latest/tutorial/tutorial-preload
+
+For compatibility and security with the latest version of Electron, we do not recommend using the old `electron/remote` module. If you want to utilize system events or Node scripts, it is recommended to do so in the main process, not the renderer.
+
+Vutron's preload script is located in the `src/preload` folder. To create a new IPC communication channel, add the channel name to the following variable to whitelist it for communication.
+
+* `mainAvailChannels`: Send an event from main to renderer. (`window.mainApi.send('channelName'')`)
+* `rendererAvailChannels`: Send an event from renderer to main. (`mainWindow.webContents.send('channelName')`)
+
+When sending events from renderer to main, you access the `window.mainApi` object instead of `ipcRenderer.send`. The `mainApi` is the name you set in your Vutron template and can be changed.
+
+Here are the supported functions for mainApi: (To change and modify this, you need to modify `exposeInMainWorld` in `src/preload/index.ts`).
+
+* `send`: Send an event to main.
+* `receive`: A listener to receive events sent by main.
+* `invoke`: Functions that can send events to main and receive data asynchronously.

docs/src/Installation and Build/build-configuration.md

@@ -11,26 +11,21 @@ $ npm run build:mac
 
 # For Linux (.rpm, .deb, .snap)
 $ npm run build:linux
+
+# All platform (.exe, .appx, .dmg, .rpm, .deb, .snap) - see below description
+$ npm run build:all
 ```
 
 The built packages can be found in `release/{version}` location.
 
-## Build settings for projects that use Native Node modules
-
-For projects that use the **Native Node Module**, add the following script to your `package.json`: When installing dependencies, `electron-builder` will take care of any modules that require rebuilding.
-
-```json
-{
-  "scripts": {
-    "postinstall": "electron-builder install-app-deps"
-  }
-}
-```
-
 For more information, please refer to the following article: https://webpack.electron.build/dependency-management#installing-native-node-modules
 
 ## What do I need to do for a multi-platform build?
 
+To create a package for each OS, you must build it on the same OS. For example, a package for macOS must be built on a macOS machine.
+
+However, you can build packages for Windows, macOS, and Linux all at once on one OS. However, this might require some preparation.
+
 **macOS** is recommended if you want to build multiple platforms simultaneously on one platform. Because it can be configured with just a few very simple settings.
 
 You can perform multi-platform builds at once with the following command. Alternatively, you can just do it for the OS you want via the individual build commands above.
@@ -41,6 +36,8 @@ $ npm run build:all
 
 `Multipass` configuration may be required for Linux builds. Learn more about `Multipass` through the following link: https://multipass.run
 
+To learn more about multiplatform builds, see the following articles: https://www.electron.build/multi-platform-build
+
 ## Reduce bundle size by excluding development files
 
 You can exclude files you don't need at build time by adding a file pattern to the files property of `buildAssets/builder/config.ts`. This will save bundle capacity.
@@ -69,3 +66,15 @@ Below is an unnecessary `node_modules` file pattern that can further save bundle
   "!**/node_modules/json-schema/!(package.json|lib)"
 ]
 ```
+
+## Build settings for projects that use Native Node modules
+
+For projects that use the **Native Node Module**, add the following script to your `package.json`: When installing dependencies, `electron-builder` will take care of any modules that require rebuilding.
+
+```json
+{
+  "scripts": {
+    "postinstall": "electron-builder install-app-deps"
+  }
+}
+```