DOCSEARCHbyAlgolia
Submit Docs

kando

repository·main·Indexed 26 days ago

https://github.com/kando-menu/kando

A cross-platform pie menu application for Windows, macOS, and Linux that provides a radial interface for launching applications, simulating keyboard shortcuts, and opening files. Supports mouse, stylus, touch, controller, and keyboard input. Version 3.0.0-alpha.1.

Tokens
9.3K
Snippets
19
Records
58
Agent score
91%

What's inside kando

  1. Overview of Kando

    main
    Kando is a cross-platform pie menu for desktop environments (Windows, macOS, and Linux). It provides a fast, efficient way to interact with your computer by launching applications, simulating keyboard shortcuts, opening files, and more. It is designed for use with mouse, stylus, touch, or controller input, but can also be controlled via keyboard.

  4. Install Kando on Windows, macOS, or Linux

    main

    Kando can be installed on various operating systems using official installers. For specific instructions tailored to your platform, refer to the following guides:

    If you need the latest features or wish to contribute, you can also build Kando from source.

  6. Import a menu from a JSON file

    main
    Kando supports importing menu configurations from JSON files. The file must follow the EXPORTED_MENU_SCHEMA_V1 format, containing a version and a root menu item. Upon import, the root menu is converted into a full MENU object, applying default values for properties like centered, anchored, hoverMode, and shortcut fields.

  7. Configure macOS signing and notarization via environment variables

    main

    Kando's build process supports macOS code signing and notarization through specific environment variables. When building for macOS, you can trigger these processes by setting the following variables:

    • KANDO_OSX_SIGN=true: Enables macOS app signing. Requires certificates to be installed on the build machine.
    • KANDO_OSX_NOTARIZE=true: Enables macOS app notarization. This requires additional credentials provided via:
      • OSX_APP_SPECIFIC_ID: Your Apple Developer Account ID.
      • OSX_APP_SPECIFIC_PASSWORD: An app-specific password for your Apple account.
      • OSX_TEAM_ID: Your Apple Developer Team ID.

  8. Configure Webpack plugin and entry points

    main

    The WebpackPlugin manages the build process for the main and renderer processes.

    Renderer Entry Points

    Kando defines two distinct renderer windows:

    1. menu_window: Uses ./src/menu-renderer/index.html and ./src/menu-renderer/index.ts with a preload script at ./src/menu-renderer/preload.ts.
    2. settings_window: Uses ./src/settings-renderer/index.html and ./src/settings-renderer/index.tsx with a preload script at ./src/settings-renderer/preload.ts.

    Content Security Policy (CSP)

    For development builds, a permissive devContentSecurityPolicy is used to allow loading images from the file system and data URLs.

    new WebpackPlugin({
  devContentSecurityPolicy: "default-src 'self' 'unsafe-inline' data:; script-src 'self' 'unsafe-eval' 'unsafe-inline' data:; img-src 'self' file: data: https:; font-src 'self' file: data:; style-src-elem 'self' 'unsafe-inline' file: data:; media-src 'self' file: data:; connect-src 'self' ws:; ",
  mainConfig,
  renderer: {
    config: rendererConfig,
    entryPoints: [
      {
        html: './src/menu-renderer/index.html',
        js: './src/menu-renderer/index.ts',
        name: 'menu_window',
        preload: { js: './src/menu-renderer/preload.ts' },
      },
      {
        html: './src/settings-renderer/index.html',
        js: './src/settings-renderer/index.tsx',
        name: 'settings_window',
        preload: { js: './src/settings-renderer/preload.ts' },
      },
    ],
  },
  // ...
})

  9. Configure portable mode via portableMode.json

    main

    To enable portable mode and specify a custom location for Kando settings, place a portableMode.json file in the same directory as the Kando executable. The JSON file must contain a configDirectory key specifying the desired path.

    Note: The path provided in configDirectory will be resolved relative to the executable's directory if it is not an absolute path.

  10. Configure Electron Forge packager options for Kando

    main

    The packagerConfig object defines how the Electron application is packaged. Key settings used in Kando include:

    • icon: Path to the application icon.
    • name: The name of the application.
    • executableName: Set to kando on Windows and Linux to ensure the binary name is consistent.
    • extendInfo: Used on macOS to set LSUIElement: true, which prevents the app from appearing in the Dock.
    • protocols: Defines custom URI schemes. Kando uses the kando:// scheme.
    const config: ForgeConfig = {
  packagerConfig: {
    icon: 'assets/icons/icon',
    name: 'Kando',
    extendInfo: {
      LSUIElement: true,
    },
    protocols: [
      {
        name: 'Kando',
        schemes: ['kando'],
      },
    ],
  },
  // ...
};

  11. Configure the Kando renderer with Webpack

    main
    The rendererConfig object defines the Webpack configuration used for the Kando renderer. It integrates standard rules, plugins, and ignores (externals) defined in the project. Notably, it includes specific support for Sass/SCSS files using CSS Modules with automatic detection and a specific naming convention ([local]-[hash:base64:8]).

  12. ESLint configuration for Kando

    main

    Kando uses a flat ESLint configuration (eslint.config.mjs) that integrates several plugins and rules to enforce code quality, TypeScript standards, React patterns, and Prettier formatting.

    Key features of the configuration include:

    • Global Environments: Supports browser, node, chai, and mocha globals.
    • TypeScript Standards: Enforces camelCase for default selectors, PascalCase or camelCase for functions, and PascalCase for type-like entities. It also mandates the use of type instead of interface via @typescript-eslint/consistent-type-definitions.
    • React Rules: Enforces specific naming conventions for boolean props using the pattern ^(is|has|do|use|hide|initial|show)[A-Z]([A-Za-z0-9]?)+.
    • Test Overrides: Specifically for files matching test/**/*.spec.ts, the rule @typescript-eslint/no-unused-expressions is disabled to accommodate assertion libraries.
    // Summary of active rules and configurations
{
  languageOptions: {
    globals: {
      ...globals.browser,
      ...globals.node,
      ...globals.chai,
      ...globals.mocha,
    },
  },
  rules: {
    'react/boolean-prop-naming': ['error', { rule: '^(is|has|do|use|hide|initial|show)[A-Z]([A-Za-z0-9]?)+' }],
    '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
    // ... other rules
  }
}