pack: separate documentation build script from root package.json to docs directory root

docs/src/.vitepress/config.mts

@@ -0,0 +1,29 @@
+// @ts-ignore
+import { generateSidebar } from 'vitepress-sidebar'
+import { name, description, repository } from '../../../package.json'
+
+const capitalizeFirst = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1)
+
+export default {
+  title: capitalizeFirst(name),
+  description,
+  outDir: '../dist',
+  head: [
+    ['link', { rel: 'icon', href: '/logo.png' }],
+    ['link', { rel: 'shortcut icon', href: '/favicon.ico' }]
+  ],
+  themeConfig: {
+    sidebar: generateSidebar({
+      root: 'src',
+      collapsed: false,
+      useTitleFromFileHeading: true,
+      sortByFileName: [
+        'getting-started.md',
+        'build-configuration.md',
+        'project-structure.md',
+        'npm-scripts.md'
+      ]
+    }),
+    socialLinks: [{ icon: 'github', link: repository.url.replace('.git', '') }]
+  }
+}

docs/src/build-configuration.md

@@ -0,0 +1,71 @@
+# Build Configurations
+
+Once the module installation is complete, you can simply build the platform package with the command below.
+
+```shell
+# For Windows (.exe, .appx)
+$ npm run build:win
+
+# For macOS (.dmg)
+$ npm run build:mac
+
+# For Linux (.rpm, .deb, .snap)
+$ npm run build:linux
+```
+
+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?
+
+**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.
+
+```shell
+$ npm run build
+```
+
+`Multipass` configuration may be required for Linux builds. Learn more about `Multipass` through the following link: https://multipass.run
+
+## 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 `electron-builder.json5`. This will save bundle capacity.
+
+Below is an unnecessary `node_modules` file pattern that can further save bundles. Depending on the project, using the rules below may cause problems, so please review it before using.
+
+```json
+[
+  "!**/.*",
+  "!**/node_modules/**/{CONTRIBUTORS,CNAME,AUTHOR,TODO,CONTRIBUTING,COPYING,INSTALL,NEWS,PORTING,Makefile,htdocs,CHANGELOG,ChangeLog,changelog,README,Readme,readme,test,sample,example,demo,composer.json,tsconfig.json,jsdoc.json,tslint.json,typings.json,gulpfile,bower.json,package-lock,Gruntfile,CMakeLists,karma.conf,yarn.lock}*",
+  "!**/node_modules/**/{man,benchmark,node_modules,spec,cmake,browser,vagrant,doxy*,bin,obj,obj.target,example,examples,test,tests,doc,docs,msvc,Xcode,CVS,RCS,SCCS}{,/**/*}",
+  "!**/node_modules/**/*.{conf,png,pc,coffee,txt,spec.js,ts,js.flow,html,def,jst,xml,ico,in,ac,sln,dsp,dsw,cmd,vcproj,vcxproj,vcxproj.filters,pdb,exp,obj,lib,map,md,sh,gypi,gyp,h,cpp,yml,log,tlog,Makefile,mk,c,cc,rc,xcodeproj,xcconfig,d.ts,yaml,hpp}",
+  "!**/node_modules/**/node-v*-x64{,/**/*}",
+  "!**/node_modules/bluebird/js/browser{,/**/*}",
+  "!**/node_modules/bluebird/js/browser{,/**/*}",
+  "!**/node_modules/source-map/dist{,/**/*}",
+  "!**/node_modules/lodash/fp{,/**/*}",
+  "!**/node_modules/async/!(dist|package.json)",
+  "!**/node_modules/async/internal{,/**/*}",
+  "!**/node_modules/ajv/dist{,/**/*}",
+  "!**/node_modules/ajv/scripts{,/**/*}",
+  "!**/node_modules/node-pre-gyp/!(lib|package.json)",
+  "!**/node_modules/node-pre-gyp/lib/!(util|pre-binding.js|node-pre-gyp.js)",
+  "!**/node_modules/node-pre-gyp/lib/util/!(versioning.js|abi_crosswalk.json)",
+  "!**/node_modules/source-map-support/browser-source-map-support.js",
+  "!**/node_modules/json-schema/!(package.json|lib)"
+]
+```

docs/src/getting-started.md

@@ -0,0 +1,54 @@
+# Getting Started
+
+## Clone project
+
+### Method 1: `npm init` (Recommend)
+
+You can easily clone a repository with just the npm command.
+
+```shell
+$ npm init vutron
+```
+
+The above method will not create unnecessary documentation and .github related files for your project.
+
+### Method 2: Use this template
+
+Click **[Use this template](https://github.com/jooy2/vutron/generate)** to instantly create your own project.
+
+This method creates a repository on GitHub immediately, but you will need to clone the project locally before you can use it.
+
+### Method 3: Clone this repository
+
+Clone this repo using below command. This method is suitable for direct contributions to the Vutron repository.
+
+```shell
+$ git clone https://github.com/jooy2/vutron <PROJECT_NAME>
+```
+
+## Installation
+
+After cloning the project, run the following command in the terminal:
+
+```shell
+# via npm
+$ npm i
+
+# via yarn (https://yarnpkg.com)
+$ yarn install
+
+# via pnpm (https://pnpm.io)
+$ pnpm i
+```
+
+## Run in development environment
+
+Applications in the development environment run through **[Vite](https://vitejs.dev)**.
+
+```shell
+$ npm run dev
+```
+
+If your application doesn't appear after running command line commands, you may need to review if the default port is being used by another app.
+
+Vite uses port `5173` by default.

docs/src/install-local-documentation.md

@@ -0,0 +1,19 @@
+# Manage Local Documentation
+
+Documents from `Vutron` can be viewed in the local environment through the VitePress viewer.
+
+This function works only when the entire project is cloned. If you created the project with `npm init`, the `docs` folder is not included.
+
+Since VitePress and related plugin packages are configured to be selectively installed, they cannot be installed with `npm i`.
+
+Install the relevant packages using the following preconfigured script commands:
+
+```shell
+$ npm run docs:install
+```
+
+You can run the local server where the documents are hosted via the command below.
+
+```shell
+$ npm run docs:dev
+```

docs/src/main-and-renderer-process.md

@@ -0,0 +1,25 @@
+# Main vs Renderer Process
+
+A **Vutron** application is divided into code into a Main process and a Renderer process.
+
+**"Main"** is the code of `src/main` and is mainly the process code handled by Electron. **"Renderer"** is the code of `src/renderer`, mainly for front-end rendering process like Vue.
+
+In general, **NodeJS** scripts cannot be run in the renderer process. Examples include modules that contain APIs used by NodeJS, or native modules of **NodeJS** such as `path` or `net`, `os` or `crypto`.
+
+Preload scripts are run before the renderer is loaded. It creates a bridge to the main process to keep the execution of NodeJS scripts in the renderer area separate and isolated for security reasons.
+
+For secure script execution, it is recommended that the main process executes the Node scripts, and the renderer receives the execution results via messaging. This can be implemented via **IPC communication**.
+
+For more information on this, see the following articles: https://www.electronjs.org/docs/latest/tutorial/ipc
+
+### How to run NodeJS on a renderer
+
+If you want to skip the security issues and use NodeJS scripts in your renderer, you need to set `nodeIntegration` to `true` in your `vite.config.ts` file.
+
+```javascript
+rendererPlugin({
+  nodeIntegration: true
+})
+```
+
+For more information on this, see the following articles: https://github.com/electron-vite/vite-plugin-electron-renderer

docs/src/npm-scripts.md

@@ -0,0 +1,23 @@
+# Npm Scripts
+
+> npm run {SCRIPT_NAME}
+
+| Script Name | Description |
+| --- | --- |
+| `dev` | Start Electron as a development environment |
+| `dev:debug` | Start Electron as a development environment (with vite debug) |
+| `dev:debug:force` | Start Electron as a development environment (with vite debug + clean vite cache) |
+| `build` | Build a specified package for the entire operating system (Requires cross-platform build configuration) |
+| `build:pre` | Commands commonly run at build time. This script does not need to be run separately. |
+| `build:dir` | `electron-builder` directory build |
+| `build:mac` | Build preconfigured packages for macOS |
+| `build:linux` | Build preconfigured packages for Linux |
+| `build:win` | Build preconfigured packages for Windows |
+| `lint` | ESLint code inspection. It does not modify the code. |
+| `lint:fix` | ESLint code inspection. Use auto-fix to fix your code. |
+| `format` | Prettier code inspection. It does not modify the code. |
+| `format:fix` | Prettier code inspection. Use auto-fix to fix your code. |
+| `docs:install` | Install VitePress and related plugins for your local documentation environment. |
+| `docs:dev` | Start the local document server. (For development) |
+| `docs:build` | Build a local document server. Used only for GitHub page builders. |
+| `docs:serve` | Start the local document server. |

docs/src/other-projects.md

@@ -0,0 +1,15 @@
+# Other Projects
+
+## Looking for Electron templates made with React?
+
+Also check out the `Retron` project, which consists of Vite + React + Material-UI + Electron.
+
+https://github.com/jooy2/retron
+
+## (Deprecated) Looking for Vutron with webpack5 compiler?
+
+By using the Vite compiler, we achieved our goals of reducing project and bundle size, and improving development environment and build speed.
+
+The old Vutron using the Webpack5 compiler has been split into the repositories below and will end support soon.
+
+https://github.com/jooy2/vutron-webpack

docs/src/pre-configured-components.md

@@ -0,0 +1,13 @@
+# Pre-configured Components
+
+- [Vite 4.x.x](https://vitejs.dev)
+- [Electron 23.x.x](https://www.electronjs.org)
+- [Electron Builder 23.x](https://www.electron.build)
+- [TypeScript 4.x](https://www.typescriptlang.org)
+- [Vue 3.2.x](https://vuejs.org)
+- [Vue-i18n 9.x](https://kazupon.github.io/vue-i18n)
+- [Vue-router 4.x](https://router.vuejs.org)
+- [Vuetify 3.x](https://vuetifyjs.com)
+- [Pinia 2.x](https://pinia.vuejs.org)
+- [ESLint 8.x](https://eslint.org)
+- [Prettier 2.x.x](https://prettier.io)

docs/src/project-structure.md

@@ -0,0 +1,61 @@
+# Project Structure
+
+```
+/
+├─ .github - GitHub files (only used for Vutron GitHub project contributions)
+│  └─ ISSUE_TEMPLATE/
+│  └─ resources/ - GitHub resources used for README.md, etc.
+│  └─ workflows/ - GitHub workflows definition
+│  └─ dependabot.yml
+│  └─ FUNDING.yml
+├─ buildAssets - Package resource (icon, logo, etc.) file used for Electron build
+│  └─ icons/
+├─ dist/ - Output directory used to build the package
+├─ docs/ - Project documents (optionally enabled)
+│  └─ .vitepress/
+│  │  │  └─ config.mts - VitePress configuration file used for document hosting
+│  └─ public/ - Root resource directory for VitePress documentation pages
+├─ node_modules/
+├─ src/
+│  ├─ main/ - Main (Electron) process source code
+│  │  ├─ utils/ - Main process utilities
+│  │  │  └─ Constants.ts - Main global definition
+│  │  │  └─ Menus.ts - Main global menu definition
+│  │  └─ index.ts - Main process entry point
+│  │  └─ IPCs.ts - Main process ipc handlers definition
+│  │  └─ MainRunner.ts - Main process main window processing
+│  ├─ preload/ - Preload (Electron-Vue communication bridge) process source code
+│  │  └─ index.ts
+│  ├─ renderer/ - Renderer (Vue) process source code
+│  │  ├─ components/ - Vue components collection
+│  │  │  └─ layout/ - Layout components
+│  │  ├─ locales/ - Vue i18n language resource file
+│  │  ├─ plugins/ - Vue plugin definition
+│  │  ├─ public/ - Vue static resources
+│  │  │  └─ images/
+│  │  ├─ router/ - Vue routing definition
+│  │  ├─ screens/ - Vue screen component
+│  │  │  └─ ErrorScreen.vue - Screen displayed when renderer process and routing errors occur
+│  │  │  └─ MainScreen.vue
+│  │  │  └─ SecondScreen.vue - Sample screen
+│  │  ├─ store/ - Pinia store (Global state management) definition
+│  │  ├─ utils/ - Renderer process utilities
+│  │  ├─ App.vue - Vue app's root component
+│  │  ├─ index.html - Root static index loaded by Electron renderer process
+│  └─ └─ main.ts - Renderer process entry point
+├─ .editorconfig - Editor recommended configuration file for IDE
+├─ .eslintignore - List of files to be ignored by ESLint
+├─ .eslintrc.json - ESLint rule configurations
+├─ .gitignore - List of files to not upload to Git
+├─ .prettierignore - List of files to disable Prettier file formatting
+├─ .prettierrc - Prettier rule configurations
+├─ CODE_OF_CONDUCT.md - Files used only on GitHub
+├─ electron-builder.json5
+├─ LICENSE - Project license file
+├─ package.json - NodeJS package configurations
+├─ package-lock.json
+├─ tsconfig.json - TypeScript configurations
+├─ tsconfig.node.json - TypeScript configurations
+├─ vite.config.ts - Vite compiler build configurations
+└─ README.md - Files used only on GitHub
+```