{"id":24186372,"url":"https://github.com/kanocomputing/kano-desktop-shell","last_synced_at":"2025-06-15T13:33:41.613Z","repository":{"id":29336352,"uuid":"121389727","full_name":"KanoComputing/kano-desktop-shell","owner":"KanoComputing","description":"Abstraction layer on top of electron to provide common features in a shell ready to use","archived":false,"fork":false,"pushed_at":"2022-12-09T08:22:55.000Z","size":535,"stargazers_count":4,"open_issues_count":8,"forks_count":3,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-04-11T15:53:38.177Z","etag":null,"topics":["kits-platform"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KanoComputing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-13T14:05:55.000Z","updated_at":"2023-09-21T00:53:40.000Z","dependencies_parsed_at":"2023-01-14T14:42:01.843Z","dependency_job_id":null,"html_url":"https://github.com/KanoComputing/kano-desktop-shell","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KanoComputing%2Fkano-desktop-shell","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KanoComputing%2Fkano-desktop-shell/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KanoComputing%2Fkano-desktop-shell/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KanoComputing%2Fkano-desktop-shell/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KanoComputing","download_url":"https://codeload.github.com/KanoComputing/kano-desktop-shell/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233742192,"owners_count":18723026,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["kits-platform"],"created_at":"2025-01-13T12:35:17.257Z","updated_at":"2025-01-13T12:35:18.039Z","avatar_url":"https://github.com/KanoComputing.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kano Desktop Shell\n\nAbstraction layer on top of electron to provide common features in a shell ready to use.\n\n## Features\n\n - Static SPA content delivery (Through registered custom protocol)\n - Window state managment (electron-window-state)\n - UWP style titlebar for windows with dropdown menu\n - Default menu items (clipboard, selection, help)\n - About page (Help/About or AppName/About on macOS)\n - Developer mode option (5 clicks on icon in the about page)\n\n### Future Features\n\n - Update checking and menu options\n\n## Style\n\n### Windows\n\nUWP style Titlebar\n\n![Classic](res/uwp.png?raw=true)\n![Classic](res/uwp-menu.png?raw=true)\n\nClassic style titlebar (Windows 10)\n\n![Classic](res/classic.png?raw=true)\n![Classic](res/classic-menu.png?raw=true)\n\n## API\n\n`Shell`: Use this class to create a new app with a browser window serving content from a local directory\n\noptions:\n - `root`, _(required)_ Root of the local directory you want to serve in the browser window.\n - `scheme`, Scheme that will be used in the server protocol (Default: `shell`)\n - `width`, Width of the main window (Default: `800`).\n - `height`, Height of the main window (Default: `600`).\n - `preload`, path to a preload script (Default: none).\n - `titlebar`, Enables the titlebar (Default: `true`).\n - `uwpTitlebar`, Enables the UWP style titlebar for windows (Default: `true`).\n - `devMode`, Enables developer mode (DevTool options) (Default: `false`).\n - `menuTransform`, Function that will receive the shell menu and should return a modified version of it to add custom menu and menu items.\n - `windowOptions`, Any option that will be passed down to electron's `BrowserWindow` constructor.\n - `userDataDirName`, _(optional)_ Change the name of the directory where user data will be stored. The location is platform-specific. Defaults to the app `name` as specified in `package.json`.\n\nMethods:\n\n - `updateMenu()`: Triggers an update of the menu bar.\n - `isDevMode()`: Return a boolean. `true` if in developer mode `false` if not.\n\n## Example\n\nThe following examnple can be run with `npm run demo` and the sources are in the `app` directory\n\n```js\nconst { app } = require('electron');\nconst { Shell, Shellmenu } = require('kano-desktop-shell');\nconst path = require('path');\n\nconst CONTENT_SCHEME = 'my-custom-app';\n// Location of the static content to serve. This will be served through a custom protocol\nconst CONTENT_ROOT = path.join(__dirname, './src');\n\n// Custom menu Item added\nShellMenu.addItem('my-item', { label: 'My Menu Item', click() { console.log('My Menu Item') } });\n\n// Create new Shell with custom options\n// Includes automatic window state managment and UWP style titlebar for windows\n// Custom preload as module supported\nconst shell = new Shell({\n    name: 'My App',\n    root: CONTENT_ROOT,\n    scheme: CONTENT_SCHEME,\n    // Can provide custom width and height\n    width: 1440,\n    height: 900,\n    // Supports preload script\n    preload: path.join(__dirname, 'preload.js'),\n    titlebar: true,\n    // Enable UWP style titlebar\n    uwpTitlebar: true,\n    devMode: false,\n    menu: {\n        transform(menu) {\n            const submenu = [ShellMenu.createMenuItem('my-item')];\n            // Can update when dev mode changes\n            if (shell.isDevMode()) {\n                submenu.push(ShellMenu.createMenuItem('separator'));\n                // Can add custom runtime generated menu items\n                submenu.push({ label: 'Dev option' });\n            }\n            // Inject in list of menus\n            menu.splice(1, 0, {\n                label: 'Custom Menu',\n                submenu,\n            });\n            return menu;\n        },\n    },\n    windowOptions: {\n        icon: path.join(__dirname, 'res/icon_180.png'),\n    },\n    // Log options allows to customize logging\n    log: {\n        // Default output lod level\n        level: 'debug',\n        // File options. Log files are located in the app.getPath('userData') directory\n        file: {\n            // Options passed down to bunyan 'rotating-file'\n            period: '12h',\n            count: 14,\n        },\n        // options applied once devMode is enabled\n        devMode: {\n            level: 'debug',\n            file: {\n                level: 'debug',\n            },\n        }\n    },\n});\n\napp.on('ready', () =\u003e {\n    shell.createWindow();\n    // Logger can be found here\n    const { log } = shell;\n    // The main window is accessible through properties\n    console.log(shell.window);\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanocomputing%2Fkano-desktop-shell","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkanocomputing%2Fkano-desktop-shell","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanocomputing%2Fkano-desktop-shell/lists"}