📝 Add new content

Author: Schneegans

astro.config.mjs

@@ -31,6 +31,7 @@ export default defineConfig({
             'getting-started/installation-macos',
             'getting-started/installation-linux',
             'getting-started/usage',
+            'getting-started/creating-menus',
             {
               label: 'Available Item Types',
               items: [
@@ -65,7 +66,7 @@ export default defineConfig({
         {
           label: 'API References',
           collapsed: true,
-          items: ['reference/cli', 'reference/config-files'],
+          items: ['reference/cli', 'reference/config-files', 'reference/valid-keys'],
         },
         {
           label: 'Discord 🗗',

src/assets/hotkey-settings.jpg

@@ -9,4 +9,25 @@ banner:
 
 Kando comes with a few themes pre-installed. You can find more themes in the [Kando Menu Themes Repository](https://github.com/kando-menu/menu-themes)!
 
-## Icon Themes
+## Icon Themes
+
+To add your own icons to Kando, follow these steps:
+1. Create a new `icon-themes` directory in Kando's configuration directory if it does not yet exist. Depending on your OS, this will be the following locations:
+    * <img height="14" width="26" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Windows_logo_-_2021_%28Black%29.svg" /> Windows: `%appdata%\kando\icon-themes`
+    * <img height="14" width="26" src="https://cdn.simpleicons.org/apple" /> macOS: `~/Library/Application Support/kando/icon-themes`
+    * <img height="14" width="26" src="https://cdn.simpleicons.org/linux/black" /> Linux: `~/.config/kando/icon-themes`
+2. Create a new directory for your icon theme in the `icon-themes` directory. You can give it any name you like.
+3. Add your icons to the new directory. The icons can be in various formats, but we recommend using SVG files.
+4. **Restart Kando.** Icon themes are only loaded when Kando starts.
+5. Select your icon theme in the icon-theme dropdown in the icon picker in Kando's menu editor.
+
+> [!CAUTION]
+> Kando will also load icon themes from `resources/app/.webpack/renderer/assets/icon-themes/` in the installation directory. This can be interesting if you are packaging icon themes using a package manager. However, as an end user, you should not put your icon themes there, as they might be overwritten during an update.
+
+### Some Tips for Creating Icon Themes
+
+* You can organize your icons in subdirectories. Kando will load them recursively. The directory will be part of the icon's name and therefore you can use the search bar to filter by directory.
+* There are many great icon sets available on the internet. Here are some which you could try:
+  * [Numix Circle](https://github.com/numixproject/numix-icon-theme-circle): Just use the files from the `Numix-Circle/48/apps` directory.
+  * [Papirus](https://github.com/PapirusDevelopmentTeam/papirus-icon-theme): Here you could use the content from the `Papirus/64x64` directory.
+  * [Tela](https://github.com/vinceliuice/Tela-icon-theme): Here you find the icons in the `src/scalable` directory.

src/assets/menu-settings.jpg

@@ -4,3 +4,34 @@ description: A reference page in my new Starlight docs site.
 banner:
   content: 🚧 This page is under construction! 🚧
 ---
+
+While Kando does not have a cross-platform way to open menus with a mouse button, there are many platform-dependent third-party tools which can help you with this.
+With some creativity, you can open menus not only with mouse buttons but also with gestures, desktop widgets, or in many other ways.
+
+You can either make the third-party tool open the menu by simulation the shortcut for the menu, or it can directly call the Kando executable with the `--menu "menu name"` argument.
+
+* <img height="14" width="26" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Windows_logo_-_2021_%28Black%29.svg" /> Windows: `%localappdata%\Kando\app-<version number>\Kando.exe --menu "Menu Name"`
+* <img height="14" width="26" src="https://cdn.simpleicons.org/apple" /> macOS: `/Applications/Kando.app/Contents/MacOS/Kando --menu "Menu Name"`
+* <img height="14" width="26" src="https://cdn.simpleicons.org/linux/black" /> Linux: `/usr/bin/kando --menu "Menu Name"`
+
+Below are some applications which can help you to open menus in various ways.
+If you discovered a cool new way to open menus, please let us know! You can either open an issue, open a pull request, or join the [Discord server](https://discord.gg/hZwbVSDkhy) to discuss your idea!
+
+### <img height="14" width="26" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Windows_logo_-_2021_%28Black%29.svg" /> Windows
+
+* [AutoHotkey](https://www.autohotkey.com/) is a powerful scripting language for Windows. You can use it to run the kando command when you press a mouse button or to remap a mouse button to a keyboard shortcut which opens a Kando menu.
+* [GestureSign](https://www.microsoft.com/store/productId/9N45WQVK2QQW?ocid=pdpshare) allows opening a Kando menu with multi-touch taps and gestures on both touchpad and touchscreen.
+
+### <img height="14" width="26" src="https://cdn.simpleicons.org/apple" /> macOS
+
+* [Karabiner-Elements](https://karabiner-elements.pqrs.org/) can be used to remap mouse buttons to keyboard shortcuts.
+* [BetterTouchTool](https://folivora.ai/) allows opening a Kando menu via touchpad gestures.
+* [BetterMouse](https://better-mouse.com/) is a tool which allows you to remap mouse buttons to keyboard shortcuts.
+
+### <img height="14" width="26" src="https://cdn.simpleicons.org/linux/black" /> Linux
+
+* [Input Remapper](https://github.com/sezanzeb/input-remapper) is a tool which allows you to remap mouse buttons to keyboard shortcuts. It works both on **X11 and Wayland**.
+* [Touchegg](https://github.com/JoseExposito/touchegg#readme) is a multitouch gesture recognizer for Linux. You can use it to open a Kando menu with touchpad gestures. It only works on **X11**.
+* **KDE Plasma** comes with built-in support for remapping mouse buttons to keyboard shortcuts. You can find [this feature](https://www.phoronix.com/news/KDE-Rebind-Extra-Mouse-Buttons) in the system settings under "System Settings" / "Mouse & Touchpad" / "Add Binding".
+* There's a [Configurable Button](https://store.kde.org/p/1297839/) widget for **KDE Plasma** which allows running `kando --menu "menu name"` when clicked.
+* On **GNOME Shell**, you can use the [CHC-E (Custom Hot Corners - Extended)](https://extensions.gnome.org/extension/4167/custom-hot-corners-extended/) extension to run arbitrary commands when you move your mouse to a corner of the screen.

src/assets/settings-button.jpg

@@ -19,8 +19,6 @@ If you want to test the latest development version of Kando, or want to contribu
 
 ## <Icon name="solar:link-square-bold-duotone" class="inline-icon" /> Intalling Dependencies
 
-
-
 <Tabs>
   <TabItem label="Windows" icon="seti:windows">
     You will need [Git](https://git-scm.com/), [NodeJS](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), [CMake](https://cmake.org/), and a C++ toolchain. There are several ways to install these on Windows. Here is a common way to get them:

src/content/docs/advanced-usage/customizing.mdx

@@ -1,6 +1,51 @@
 ---
 title: Create Your First Menu
 description: A guide in my new Starlight docs site.
-banner:
-  content: 🚧 This page is under construction! 🚧
+tableOfContents: false
 ---
+
+import { Aside } from '@astrojs/starlight/components';
+import Intro from '../../../components/Intro.astro';
+import { Icon } from 'astro-icon/components';
+
+![banner](../../../assets/banner01.png)
+
+<Intro>
+Kando comes with an example menu which you can use to get started.
+However, you should soon adapt the menu to your needs and create your own menus.
+</Intro>
+
+
+Kando comes with a **graphical menu editor** which allows you to create and edit your own menus.
+There are three ways to open the menu editor:
+
+<img src="/src/assets/settings-button.jpg" align="right" width="150px"></img>
+
+1. **When a menu is shown:** Click the gear icon in the bottom right corner of the screen.
+2. **From the system tray:** Right-click the Kando icon and select "Show Settings".
+3. **From the command line:** Run `kando --settings`.
+
+In the editor, you can create new menus, and edit existing menus.
+Drag new items from the toolbar to the menu preview, reorder them, and change their properties on the right side of the screen.
+
+<Aside type="note">
+There are several advanced options which are not yet exposed in the editor UI. See the [Config-File Documentation](/reference/config-files) for all advanced options.
+</Aside>
+
+## Three Tips for Efficient Menu Layouts
+
+<Aside type="tip" title="Avoid too many items in a single menu!">
+Instead, create submenus. Eight items per menu is a good rule of thumb, and you should never have more than twelve items in a single menu.
+</Aside>
+
+<Aside type="tip" title="Deeply nested menus are not a problem!">
+Kando is designed to handle deeply nested menus. You can use the marking mode to quickly select items which are in subsubsubmenus.
+</Aside>
+
+<Aside type="tip" title="Use the fixed-angle locks to create a clean layout!">
+Even if you have an odd number of items, you can use fixed angles to lock items to the top, bottom, left, or right side of the menu.
+</Aside>
+
+<Intro>
+Read the next sections to learn more about the available menu-item types and how to configure them.
+</Intro>

src/content/docs/advanced-usage/opening-menus.mdx

@@ -1,6 +1,7 @@
 ---
 title: Open URIs
 description: An Kando item which opens a URI.
+tableOfContents: false
 banner:
   content: 🚧 This page is under construction! 🚧
 ---

src/content/docs/getting-involved/compile-from-source.mdx

@@ -1,6 +1,7 @@
 ---
 title: Paste Text
 description: An Kando item which pastes text into the active application.
+tableOfContents: false
 banner:
   content: 🚧 This page is under construction! 🚧
 ---