docs(wiki): 📝 Add wiki on repo to auto update using pipeline

.github/workflows/publish-wiki.yaml

@@ -0,0 +1,21 @@
+name: Publish wiki
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - docs/**
+
+concurrency:
+  group: publish-wiki
+  cancel-in-progress: true
+
+permissions:
+  contents: write
+
+jobs:
+  publish-wiki:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: Andrew-Chen-Wang/github-wiki-action@v4

.npmignore

@@ -26,6 +26,7 @@ example/
 screenshots/
 src/
 static/
+docs/
 .gitignore
 .editorconfig
 circle.yml

docs/CSS-Customization.md

@@ -0,0 +1,16 @@
+The title bar can be customized using CSS. For this purpose, there is a prefix that allows access to the title bar elements.
+
+All classes possessed by the initial title bar are prefixed with `cet`.
+
+## Classes
+
+### Titlebar Classes
+
+| Class | Description |
+| --- | --- |
+| `cet-titlebar` | Main class of the title bar |
+| `cet-windows` | Applied class if running on Windows |
+| `cet-mac` | Applied class if running on Mac |
+| `cet-linux` | Applied class if running on Linux |
+| `cet-icon` | Applied to the title bar icon |
+| `cet-title` | Applied to the title of the title bar |

docs/Colors.md

@@ -0,0 +1,22 @@
+There is a class called `TitlebarColor` that allows you to configure the colors of the title bar.
+
+## Predefined Colors
+
+The `TitlebarColor` class has several predefined colors that can be used to configure the colors of the title bar.
+
+- <code style="color:#000000">TitlebarColor.BLACK</code>
+- <code style="color:#0000FF">TitlebarColor.BLUE</code>
+- <code style="color:#00FFFF">TitlebarColor.CYAN</code>
+- <code style="color:#00FF00">TitlebarColor.GREEN</code>
+- <code style="color:#D3D3D3">TitlebarColor.LIGHTGREY</code>
+- <code style="color:#FF0000">TitlebarColor.RED</code>
+- <code style="color:#FFFFFF">TitlebarColor.WHITE</code>
+- <code style="color:#FFFFFF50">TitlebarColor.TRANSPARENT</code>
+
+## Creating a Custom Color
+
+To create a custom color, use the static method `TitlebarColor.fromHex(color)`. This method takes a hexadecimal color as an argument and returns a `TitlebarColor` object.
+
+```js
+const customColor = TitlebarColor.fromHex('#FF0000')
+```

docs/Get-Started.md

@@ -0,0 +1,42 @@
+## Installation
+
+How to install this library in your Electron project?
+
+```sh 
+npm i custom-electron-titlebar
+```
+
+## How to use?
+
+In the main file of the project `main.js` or `index.js` import the library and call the `setupTitlebar` and `attachTitlebarToWindow` functions:
+
+```js
+const { setupTitlebar, attachTitlebarToWindow } = require('custom-electron-titlebar/main');
+
+// setup the titlebar main process
+setupTitlebar();
+
+function createWindow() {
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    //frame: false, // needed if process.versions.electron < 14
+    titleBarStyle: 'hidden',
+    /* You can use *titleBarOverlay: true* to use the original Windows controls */
+    titleBarOverlay: true,
+    webPreferences: {
+      sandbox: false,
+      preload: path.join(__dirname, 'preload.js')
+    }
+  });
+
+  ...
+
+  // attach fullscreen(f11 and not 'maximized') && focus listeners
+  attachTitlebarToWindow(mainWindow);
+}
+```
+
+It is important that the `titleBarStyle` property is `hidden` so that the default Electron title bar is not displayed.
+Likewise, the sandbox property must be added to false so that the library can function correctly.

docs/Home.md

@@ -0,0 +1,17 @@
+## Welcome to Custom Electron Titlebar wiki!
+
+### What is Custom Electron Titlebar?
+
+Custom Electron Titlebar is a library that allows you to create a fully customized title bar for your Electron application.
+
+### Why use Custom Electron Titlebar?
+
+Using the Custom Electron Titlebar in your Electron project offers a powerful solution for achieving a distinct and cohesive user interface. By seamlessly integrating a tailor-made title bar, you can enhance the overall aesthetics and branding of your application. This library allows developers to exercise creative control over every aspect of the title bar's appearance and behavior, ensuring a seamless user experience that aligns perfectly with your application's unique design and functionality.
+
+### Features
+
+- Fast integration
+- Customizable
+- Updated to the latest version of Electron
+- Support for Windows, Linux and MacOS
+- Customizable application menu

docs/Menu-Icons.md

@@ -0,0 +1,50 @@
+## File structure
+
+To customize the menu icons, you need to create a `JSON` file and add the following structure within it:
+
+```json
+{
+	"submenuIndicator": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none' /><polyline points='9 6 15 12 9 18' /></svg>",
+	"checkbox": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M5 12l5 5l10 -10' /></svg>",
+	"radioChecked": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M10,5 C7.2,5 5,7.2 5,10 C5,12.8 7.2,15 10,15 C12.8,15 15,12.8 15,10 C15,7.2 12.8,5 10,5 L10,5 Z M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z' /></svg>",
+	"radioUnchecked": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z' /></svg>",
+	"linux": {
+		"minimize": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M11,4.9v1.1H0V4.399h11z'/></svg>",
+		"maximize": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M0,1.7v7.6C0,10.2,0.8,11,1.7,11h7.6c0.9,0,1.7-0.8,1.7-1.7V1.7C11,0.8,10.2,0,9.3,0H1.7C0.8,0,0,0.8,0,1.7z M8.8,9.9H2.2c-0.6,0-1.1-0.5-1.1-1.1V2.2c0-0.6,0.5-1.1,1.1-1.1h6.7c0.6,0,1.1,0.5,1.1,1.1v6.7C9.9,9.4,9.4,9.9,8.8,9.9z'/></svg>",
+		"restore": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M7.9,2.2h-7C0.4,2.2,0,2.6,0,3.1v7C0,10.6,0.4,11,0.9,11h7c0.5,0,0.9-0.4,0.9-0.9v-7C8.8,2.6,8.4,2.2,7.9,2.2z M7.7,9.6 c0,0.2-0.1,0.3-0.3,0.3h-6c-0.2,0-0.3-0.1-0.3-0.3v-6c0-0.2,0.1-0.3,0.3-0.3h6c0.2,0,0.3,0.1,0.3,0.3V9.6z M10,0.9 c0,0.5-0.4,0.9-0.9,0.9h-2.1 c-0.5,0-0.9-0.4-0.9-0.9V0.9c0-0.5,0.4-0.9,0.9-0.9h2.1C9.6,0,10,0.4,10,0.9z'/></svg>",
+		"close": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z'/></svg>"
+	},
+	"windows": {
+		"minimize": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M11,4.9v1.1H0V4.399h11z'/></svg>",
+		"maximize": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M0,1.7v7.6C0,10.2,0.8,11,1.7,11h7.6c0.9,0,1.7-0.8,1.7-1.7V1.7C11,0.8,10.2,0,9.3,0H1.7C0.8,0,0,0.8,0,1.7z M8.8,9.9H2.2c-0.6,0-1.1-0.5-1.1-1.1V2.2c0-0.6,0.5-1.1,1.1-1.1h6.7c0.6,0,1.1,0.5,1.1,1.1v6.7C9.9,9.4,9.4,9.9,8.8,9.9z'/></svg>",
+		"restore": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M7.9,2.2h-7C0.4,2.2,0,2.6,0,3.1v7C0,10.6,0.4,11,0.9,11h7c0.5,0,0.9-0.4,0.9-0.9v-7C8.8,2.6,8.4,2.2,7.9,2.2z M7.7,9.6 c0,0.2-0.1,0.3-0.3,0.3h-6c-0.2,0-0.3-0.1-0.3-0.3v-6c0-0.2,0.1-0.3,0.3-0.3h6c0.2,0,0.3,0.1,0.3,0.3V9.6z'/><path d='M10,0H3.5v1.1h6.1c0.2,0,0.3,0.1,0.3,0.3v6.1H11V1C11,0.4,10.6,0,10,0z'/></svg>",
+		"close": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z'/></svg>"
+	}
+}
+```
+
+> These SVGs should have the `fill="currentColor"` attribute so that the color can be adapted correctly to the title bar colors.
+
+## Menu items
+
+- `submenuIndicator` This is the icon for submenus.
+
+- `checkbox` This is the icon for checkboxes.
+
+- `radioChecked` This is the icon for radio items when they are selected.
+
+- `radioUnchecked` This is the icon for radio items when they are not selected.
+
+## Titlebar items
+
+- `minimize` This is the icon for minimizing the window.
+
+- `maximize` This is the icon for maximizing the window.
+
+- `restore` This is the icon for restoring the window.
+
+- `close` This is the icon for closing the window.
+
+> **Note:**<br><br>
+Title bar icons are not compatible with macOS.<br>
+Title bar icons are not displayed when `titlebarOverlay` is set to true.

docs/Menubar-Options.md

@@ -0,0 +1,132 @@
+> If what you want is to know the options for the title bar, see [Titlebar Options](./Titlebar-Options).
+
+Just like with title bar options, menu options are passed as an object to the `Titlebar` or `CustomTitlebar` component:
+
+```js
+const options = {
+  // title bar options
+  // rest of the menu options
+};
+
+new Titlebar(options);
+```
+
+## Menu Color
+
+This is the background color of the menu. It can be a hexadecimal color using `TitlebarColor.fromHex(color)` or a `TitlebarColor`.
+
+For more color details, see [Colors](./Colors).
+
+```js
+const options = {
+  // title bar options
+  backgroundColor: TitlebarColor.fromHex('#FF0000')
+};
+```
+
+## Enable Mnemonics
+
+Mnemonics are a way to navigate the user interface using the keyboard. To enable them, you should pass the `enableMnemonics` option as `true`:
+
+```js
+const options = {
+  // title bar options
+  enableMnemonics: true
+};
+```
+
+## Menu Icons
+
+These are the icons displayed on special menu items, such as **radio**, **checkbox**, and **submenu** items. These are defined in a `JSON` file, and the file path is passed in the options.
+
+```js
+const options = {
+  // title bar options
+  icons: path.join(__dirname, 'menu-icons.json')
+};
+```
+
+For more icon details, see [Menu Icons](./Menu-Icons).
+
+## Menu
+
+This is the menu displayed in the menu bar. This option is deprecated, and it's recommended to use `setupTitlebar` in the main application file.
+
+```js
+const options = {
+  // title bar options
+  menu: Menu.buildFromTemplate(template)
+};
+```
+
+## Menu Position
+
+This is the position of the menu in the title bar. It can be `left` or `bottom`.
+
+```js
+const options = {
+  // title bar options
+  menuPosition: 'left'
+};
+```
+
+## Only Show Menu in Title Bar
+
+This option allows showing the menu only in the title bar. This removes all elements from the bar except for the buttons.
+
+```js
+const options = {
+  // title bar options
+  onlyShowMenubar: true
+};
+```
+
+## Menu Item Color
+
+This is the background color of the menu items when the cursor is hovering over each one. It can be a hexadecimal color using `TitlebarColor.fromHex(color)` or a `TitlebarColor`.
+
+For more color details, see  [Colors](./Colors).
+
+```js
+const options = {
+  // title bar options
+  itemBackgroundColor: TitlebarColor.fromHex('#FF0000')
+};
+```
+
+## Menu Item Separator Color
+
+This is the background color of the menu item separators. It can be a hexadecimal color using `TitlebarColor.fromHex(color)` or a `TitlebarColor`.
+
+For more color details, see [Colors](./Colors).
+
+```js
+const options = {
+  // title bar options
+  menuSeparatorColor: TitlebarColor.fromHex('#FF0000')
+};
+```
+
+## Menu Icon Color
+
+This is the color of the menu icons. It can be a hexadecimal color using   or a `TitlebarColor`.
+
+For more color details, see [Colors](./Colors).
+
+```js
+const options = {
+  // title bar options
+  svgColor: TitlebarColor.fromHex('#FF0000')
+};
+```
+
+## Menu Transparency
+
+This is the transparency of the menu background. It can be a decimal value between `0` and `1`.
+
+```js
+const options = {
+  // title bar options
+  transparent: 0.5
+};
+```