## Usage
You can download the latest version on the [releases](https://github.com/cerebroapp/cerebro/releases) page.
- If there isn't an installer for your OS, check [build instructions](#build-executable-from-source).
- If you are a linux user see [how to install the executable](#install-executable-on-linux)
After the installation, use the default shortcut, `ctrl+space`, to show the app window. You can customize this shortcut by clicking on the icon in the menu bar, and then selecting "Preferences...".
### Plugins
### Core plugins
- Search the web with your favourite search engine
- Search & launch application, i.e. `spotify`
- Navigate the file system with file previews (i.e. `~/Dropbox/passport.pdf`)
- Calculator
- Smart converter. `15$`, `150 рублей в евро`, `100 eur in gbp`;
### Install plugins
You can manage and install more plugins by typing `plugins {autocompleteTerm}
: null
}
Autocomplete.propTypes = {
autocompleteCalculator: PropTypes.func.isRequired,
}
/**
* Main search container
*
* TODO: Remove redux
* TODO: Split to more components
*/
function Cerebro({
results, selected, visibleResults, actions, term, prevTerm, statusBarText
}) {
const mainInput = useRef(null)
const [mainInputFocused, setMainInputFocused] = useState(false)
const [prevResultsLenght, setPrevResultsLenght] = useState(() => results.length)
const focusMainInput = () => {
mainInput.current.focus()
if (config.get('selectOnShow')) {
mainInput.current.select()
}
}
// suscribe to events
useEffect(() => {
focusMainInput()
updateElectronWindow(results, visibleResults)
// Listen for window.resize and change default space for results to user's value
window.addEventListener('resize', onWindowResize)
// Add some global key handlers
window.addEventListener('keydown', onDocumentKeydown)
// Cleanup event listeners on unload
// NOTE: when page refreshed (location.reload) componentWillUnmount is not called
window.addEventListener('beforeunload', cleanup)
electronWindow.on('show', focusMainInput)
electronWindow.on('show', () => updateElectronWindow(results, visibleResults))
// function to be called when unmounted
return () => {
cleanup()
}
}, [])
if (results.length !== prevResultsLenght) {
// Resize electron window when results count changed
updateElectronWindow(results, visibleResults)
setPrevResultsLenght(results.length)
}
/**
* Handle resize window and change count of visible results depends on window size
*/
const onWindowResize = () => {
if (results.length <= MIN_VISIBLE_RESULTS) return false
let maxVisibleResults = Math.floor((window.outerHeight - INPUT_HEIGHT) / RESULT_HEIGHT)
maxVisibleResults = Math.max(MIN_VISIBLE_RESULTS, maxVisibleResults)
if (maxVisibleResults !== visibleResults) {
actions.changeVisibleResults(maxVisibleResults)
}
}
/**
* Handle keyboard shortcuts
*/
const onKeyDown = (event) => {
const highlighted = highlightedResult()
// TODO: go to first result on cmd+up and last result on cmd+down
if (highlighted && highlighted.onKeyDown) highlighted.onKeyDown(event)
if (event.defaultPrevented) { return }
const keyActions = {
select: () => selectCurrent(event),
arrowRight: () => {
if (cursorInEndOfInut(event.target)) {
if (autocompleteValue()) {
// Autocomplete by arrow right only if autocomple value is shown
autocomplete(event)
} else {
focusPreview()
event.preventDefault()
}
}
},
arrowDown: () => {
actions.moveCursor(1)
event.preventDefault()
},
arrowUp: () => {
if (results.length > 0) {
actions.moveCursor(-1)
} else if (prevTerm) {
actions.updateTerm(prevTerm)
}
event.preventDefault()
}
}
// shortcuts for ctrl+...
if ((event.metaKey || event.ctrlKey) && !event.altKey) {
// Copy to clipboard on cmd+c
if (event.keyCode === 67) {
const text = highlightedResult()?.clipboard || term
if (text) {
clipboard.writeText(text)
actions.reset()
if (!event.defaultPrevented) {
electronWindow.hide()
}
event.preventDefault()
}
return
}
// Select text on cmd+a
if (event.keyCode === 65) {
mainInput.current.select()
event.preventDefault()
}
// Select element by number
if (event.keyCode >= 49 && event.keyCode <= 57) {
const number = Math.abs(49 - event.keyCode)
const result = results[number]
if (result) return selectItem(result, event)
}
// Lightweight vim-mode: cmd/ctrl + jklo
switch (event.keyCode) {
case 74:
keyActions.arrowDown()
break
case 75:
keyActions.arrowUp()
break
case 76:
keyActions.arrowRight()
break
case 79:
keyActions.select()
break
}
}
switch (event.keyCode) {
case 9:
autocomplete(event)
break
case 39:
keyActions.arrowRight()
break
case 40:
keyActions.arrowDown()
break
case 38:
keyActions.arrowUp()
break
case 13:
keyActions.select()
break
case 27:
actions.reset()
electronWindow.hide()
break
}
}
const onMainInputFocus = () => setMainInputFocused(true)
const onMainInputBlur = () => setMainInputFocused(false)
const cleanup = () => {
window.removeEventListener('resize', onWindowResize)
window.removeEventListener('keydown', onDocumentKeydown)
window.removeEventListener('beforeunload', cleanup)
electronWindow.removeAllListeners('show')
}
/**
* Get highlighted result
* @return {Object}
*/
const highlightedResult = () => results[selected]
/**
* Select item from results list
* @param {[type]} item [description]
* @return {[type]} [description]
*/
const selectItem = (item, realEvent) => {
actions.reset()
const event = wrapEvent(realEvent)
item.onSelect(event)
if (!event.defaultPrevented) electronWindow.hide()
}
/**
* Autocomple search term from highlighted result
*/
const autocomplete = (event) => {
const { term: highlightedTerm } = highlightedResult()
if (highlightedTerm && highlightedTerm !== term) {
actions.updateTerm(highlightedTerm)
event.preventDefault()
}
}
/**
* Select highlighted element
*/
const selectCurrent = (event) => selectItem(highlightedResult(), event)
const autocompleteValue = () => {
const selectedResult = highlightedResult()
if (selectedResult && selectedResult.term) {
const regexp = new RegExp(`^${escapeStringRegexp(term)}`, 'i')
if (selectedResult.term.match(regexp)) {
return selectedResult.term.replace(regexp, term)
}
}
return ''
}
return (
actions.updateTerm(e.target.value)}
onKeyDown={onKeyDown}
onFocus={onMainInputFocus}
onBlur={onMainInputBlur}
/>
{}}
>
{icon &&
)
}
export default Row
================================================
FILE: app/main/components/ResultsList/Row/styles.module.css
================================================
/**
* TODO: colors should be moved to variables
*/
.row {
position: relative;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: flex-start;
white-space: nowrap;
width: 100%;
cursor: pointer;
box-sizing: border-box;
height: 45px;
padding: 3px 5px;
align-items: center;
color: var(--main-font-color);
background: var(--result-background);
}
.icon {
max-height: 30px;
max-width: 30px;
margin-right: 5px;
}
.title {
font-size: .8em;
max-width: 100%;
/* overflow-x: hidden; */
color: var(--result-title-color);
}
.subtitle {
font-size: 0.8em;
font-weight: 300;
color: var(--result-subtitle-color);
max-width: 100%;
/* overflow-x: hidden; */
}
.selected {
background: var(--selected-result-background);
.title {
color: var(--selected-result-title-color);
}
.subtitle {
color: var(--selected-result-subtitle-color);
}
}
.details {
position: relative;
display: flex;
flex-grow: 2;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
justify-content: center;
height: 90%;
}
================================================
FILE: app/main/components/ResultsList/index.js
================================================
import React from 'react'
import PropTypes from 'prop-types'
import { List } from 'react-virtualized'
import { RESULT_HEIGHT } from 'main/constants/ui'
import Row from './Row'
import styles from './styles.module.css'
function ResultsList({
results, selected, visibleResults, onSelect, mainInputFocused, onItemHover
}) {
const rowRenderer = ({ index, key, style }) => {
const result = results[index]
const attrs = {
...result,
// TODO: think about events
// In some cases action should be executed and window should be closed
// In some cases we should autocomplete value
selected: index === selected,
onSelect: (event) => onSelect(result, event),
// Move selection to item under cursor
onMouseMove: (event) => {
const { movementX, movementY } = event.nativeEvent
if (index === selected || !mainInputFocused) return false
if (movementX || movementY) {
// Hover item only when we had real movement of mouse
// We should prevent changing of selection when user uses keyboard
onItemHover(index)
}
},
}
// Plugins supply additional props (onKeyDown, term, etc.), keep forwarding them.
// eslint-disable-next-line react/jsx-props-no-spreading
return
{title &&
{title}
}
{subtitle && {subtitle}
}
{renderPreview()}
{value}
}
export default StatusBar
================================================
FILE: app/main/components/StatusBar/styles.module.css
================================================
.statusBar {
position: absolute;
bottom: 0;
right: 0;
padding: 5px;
border-radius: 5px 0 0 0;
border: var(--main-border);
color: var(--secondary-font-color);
background: var(--preview-input-background);
border-width: 1px 0 0 1px;
font-size: .75em;
}
================================================
FILE: app/main/constants/actionTypes.ts
================================================
export const UPDATE_TERM = 'UPDATE_TERM'
export const MOVE_CURSOR = 'MOVE_CURSOR'
export const SELECT_ELEMENT = 'SELECT_ELEMENT'
export const SHOW_RESULT = 'SHOW_RESULT'
export const HIDE_RESULT = 'HIDE_RESULT'
export const UPDATE_RESULT = 'UPDATE_RESULT'
export const RESET = 'RESET'
export const CHANGE_VISIBLE_RESULTS = 'CHANGE_VISIBLE_RESULTS'
export const ICON_LOADED = 'ICON_LOADED'
export const SET_STATUS_BAR_TEXT = 'SET_STATUS_BAR_TEXT'
================================================
FILE: app/main/constants/ui.ts
================================================
// Height of main input
export const INPUT_HEIGHT = 45
// Heigth of default result line
export const RESULT_HEIGHT = 45
// Width of main window
export const WINDOW_WIDTH = 650
// Maximum results that would be rendered
export const MAX_RESULTS = 25
// Results view shows this count of resutls without scrollbar
export const MIN_VISIBLE_RESULTS = 10
================================================
FILE: app/main/createWindow/AppTray.js
================================================
import { Menu, Tray, app } from 'electron'
import showWindowWithTerm from './showWindowWithTerm'
import toggleWindow from './toggleWindow'
import checkForUpdates from './checkForUpdates'
/**
* Class that controls state of icon in menu bar
*/
export default class AppTray {
/**
* @param {String} options.src Absolute path for tray icon
* @param {Function} options.isDev Development mode or not
* @param {BrowserWindow} options.mainWindow
* @param {BrowserWindow} options.backgroundWindow
* @return {AppTray}
*/
constructor(options) {
this.tray = null
this.options = options
}
/**
* Show application icon in menu bar
*/
show() {
const tray = new Tray(this.options.src)
tray.setToolTip('Cerebro')
tray.setContextMenu(this.buildMenu())
this.tray = tray
}
setIsDev(isDev) {
this.options.isDev = isDev
if (this.tray) {
this.tray.setContextMenu(this.buildMenu())
}
}
buildMenu() {
const { mainWindow, backgroundWindow, isDev } = this.options
const separator = { type: 'separator' }
const template = [
{
label: 'Toggle Cerebro',
click: () => toggleWindow(mainWindow)
},
separator,
{
label: 'Plugins',
click: () => showWindowWithTerm(mainWindow, 'plugins'),
},
{
label: 'Preferences...',
click: () => showWindowWithTerm(mainWindow, 'Cerebro Settings'),
},
separator,
{
label: 'Check for updates',
click: checkForUpdates,
},
separator,
]
if (isDev) {
template.push(separator)
template.push({
label: 'Development',
submenu: [
{
label: 'DevTools (main)',
accelerator: 'CmdOrCtrl+Shift+I',
click: () => mainWindow.webContents.openDevTools({ mode: 'detach' })
},
{
label: 'DevTools (background)',
accelerator: 'CmdOrCtrl+Shift+B',
click: () => backgroundWindow.webContents.openDevTools({ mode: 'detach' })
},
{
label: 'Reload',
click: () => {
app.relaunch()
app.exit()
}
}]
})
}
template.push(separator)
template.push({
label: 'Quit Cerebro',
click: () => app.quit()
})
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
return menu
}
/**
* Hide icon in menu bar
*/
hide() {
if (this.tray) {
this.tray.destroy()
this.tray = null
}
}
}
================================================
FILE: app/main/createWindow/autoStart.js
================================================
import { app } from 'electron'
import AutoLaunch from 'auto-launch'
const isLinux = !['win32', 'darwin'].includes(process.platform)
const isDevelopment = process.env.NODE_ENV === 'development'
const appLauncher = isLinux
? new AutoLaunch({ name: 'Cerebro' })
: null
const isEnabled = async () => (
isLinux
? appLauncher.isEnabled()
: app.getLoginItemSettings().openAtLogin
)
const set = async (openAtLogin) => {
const openAtStartUp = openAtLogin && !isDevelopment
if (isLinux) {
return openAtStartUp
? appLauncher.enable()
: appLauncher.disable()
}
return app.setLoginItemSettings({ openAtLogin: openAtStartUp })
}
export default { isEnabled, set }
================================================
FILE: app/main/createWindow/buildMenu.js
================================================
import { Menu, shell, app } from 'electron'
export default (mainWindow) => {
const template = [{
label: 'Electron',
submenu: [{
label: 'About ElectronReact',
selector: 'orderFrontStandardAboutPanel:'
},
{ type: 'separator' },
{
label: 'Services',
submenu: []
},
{ type: 'separator' },
{
label: 'Hide ElectronReact',
accelerator: 'Command+H',
selector: 'hide:'
},
{
label: 'Hide Others',
accelerator: 'Command+Shift+H',
selector: 'hideOtherApplications:'
},
{
label: 'Show All',
selector: 'unhideAllApplications:'
},
{ type: 'separator' },
{
label: 'Quit',
accelerator: 'Command+Q',
click() { app.quit() }
}]
},
{
label: 'Edit',
submenu: [{
label: 'Undo',
accelerator: 'Command+Z',
selector: 'undo:'
},
{
label: 'Redo',
accelerator: 'Shift+Command+Z',
selector: 'redo:'
},
{ type: 'separator' },
{
label: 'Cut',
accelerator: 'Command+X',
selector: 'cut:'
},
{
label: 'Copy',
accelerator: 'Command+C',
selector: 'copy:'
},
{
label: 'Paste',
accelerator: 'Command+V',
selector: 'paste:'
},
{
label: 'Select All',
accelerator: 'Command+A',
selector: 'selectAll:'
}]
},
{
label: 'View',
submenu: [{
label: 'Toggle Full Screen',
accelerator: 'Ctrl+Command+F',
click() {
mainWindow.setFullScreen(!mainWindow.isFullScreen())
}
}]
},
{
label: 'Window',
submenu: [{
label: 'Minimize',
accelerator: 'Command+M',
selector: 'performMiniaturize:'
},
{
label: 'Close',
accelerator: 'Command+W',
selector: 'performClose:'
},
{ type: 'separator' },
{
label: 'Bring All to Front',
selector: 'arrangeInFront:'
}]
},
{
label: 'Help',
submenu: [{
label: 'Learn More',
click() { shell.openExternal('http://electron.atom.io') }
},
{
label: 'Documentation',
click() { shell.openExternal('https://github.com/atom/electron/tree/master/docs#readme') }
},
{
label: 'Community Discussions',
click() { shell.openExternal('https://discuss.atom.io/c/electron') }
},
{
label: 'Search Issues',
click() { shell.openExternal('https://github.com/atom/electron/issues') }
}]
}]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
}
================================================
FILE: app/main/createWindow/checkForUpdates.js
================================================
import { dialog, app, shell } from 'electron'
import { autoUpdater } from 'electron-updater'
const currentVersion = app.getVersion()
const DEFAULT_DOWNLOAD_URL = 'https://github.com/cerebroapp/cerebro/releases'
const TITLE = 'Cerebro Updates'
const PLATFORM_EXTENSIONS = {
darwin: 'dmg',
linux: 'AppImage',
win32: 'exe'
}
const { platform } = process
const installerExtension = PLATFORM_EXTENSIONS[platform]
const findInstaller = (assets) => {
if (!installerExtension) return DEFAULT_DOWNLOAD_URL
const regexp = new RegExp(`\.${installerExtension}$`)
const downloadUrl = assets
.find(({ url }) => url.match(regexp))
return downloadUrl || DEFAULT_DOWNLOAD_URL
}
export default async () => {
try {
const release = await autoUpdater.checkForUpdates()
if (release) {
const { updateInfo: { version, files } } = release
dialog.showMessageBox({
buttons: ['Skip', 'Download'],
defaultId: 1,
cancelId: 0,
title: TITLE,
message: `New version available: ${version}`,
detail: 'Click download to get it now',
}, (response) => {
if (response === 1) {
const url = findInstaller(files)
shell.openExternal(url)
}
})
} else {
dialog.showMessageBox({
title: TITLE,
message: `You are using latest version of Cerebro (${currentVersion})`,
buttons: []
})
}
} catch (err) {
console.log('Catch error!', err)
dialog.showErrorBox(TITLE, 'Error fetching latest version')
}
}
================================================
FILE: app/main/createWindow/handleUrl.js
================================================
import { parse } from 'url'
import showWindowWithTerm from './showWindowWithTerm'
export default (mainWindow, url) => {
const { host: action, query } = parse(url, { parseQueryString: true })
// Currently only search action supported.
// We can extend this handler to support more
// like `plugins/install` or do something plugin-related
if (action === 'search') {
showWindowWithTerm(mainWindow, query.term)
} else {
showWindowWithTerm(mainWindow, url)
}
}
================================================
FILE: app/main/createWindow/showWindowWithTerm.ts
================================================
/**
* Show main window with updated search term
*
* @return {BrowserWindow} appWindow
*/
export default (appWindow: any, term: string) => {
appWindow.show()
appWindow.focus()
appWindow.webContents.send('message', {
message: 'showTerm',
payload: term
})
}
================================================
FILE: app/main/createWindow/toggleWindow.ts
================================================
/**
* Show or hide main window
* @return {BrowserWindow} appWindow
*/
export default (appWindow: any) => {
if (appWindow.isVisible()) {
appWindow.blur() // once for blurring the content of the window(?)
appWindow.blur() // twice somehow restores focus to prev foreground window
appWindow.hide()
} else {
appWindow.show()
appWindow.focus()
}
}
================================================
FILE: app/main/createWindow.js
================================================
import {
BrowserWindow, globalShortcut, app, shell
} from 'electron'
import debounce from 'lodash/debounce'
import EventEmitter from 'events'
import config from 'lib/config'
import {
INPUT_HEIGHT,
WINDOW_WIDTH
} from './constants/ui'
import buildMenu from './createWindow/buildMenu'
import toggleWindow from './createWindow/toggleWindow'
import handleUrl from './createWindow/handleUrl'
export default ({ src, isDev }) => {
const [x, y] = config.get('winPosition')
const browserWindowOptions = {
width: WINDOW_WIDTH,
minWidth: WINDOW_WIDTH,
height: INPUT_HEIGHT,
x,
y,
frame: false,
resizable: false,
transparent: true,
show: config.get('firstStart'),
webPreferences: {
nodeIntegration: true,
nodeIntegrationInSubFrames: false,
enableRemoteModule: true,
contextIsolation: false
},
// Show main window on launch only when application started for the first time
}
if (process.platform === 'linux') {
browserWindowOptions.type = 'splash'
}
const mainWindow = new BrowserWindow(browserWindowOptions)
// Workaround to set the position the first time (centers the window)
config.set('winPosition', mainWindow.getPosition())
// Float main window above full-screen apps
mainWindow.setAlwaysOnTop(true, 'modal-panel')
mainWindow.loadURL(src)
mainWindow.settingsChanges = new EventEmitter()
// Get global shortcut from app settings
let shortcut = config.get('hotkey')
// Function to toggle main window
const toggleMainWindow = () => toggleWindow(mainWindow)
// Function to show main window
const showMainWindow = () => {
mainWindow.show()
mainWindow.focus()
}
// Setup event listeners for main window
globalShortcut.register(shortcut, toggleMainWindow)
mainWindow.on('blur', () => {
if (!isDev() && config.get('hideOnBlur')) {
// Hide window on blur in production
// In development we usually use developer tools that can blur a window
mainWindow.hide()
}
})
// Save window position when it is being moved
mainWindow.on('move', debounce(() => {
if (!mainWindow.isVisible()) {
return
}
config.set('winPosition', mainWindow.getPosition())
}, 100))
mainWindow.on('close', app.quit)
mainWindow.webContents.on('new-window', (event, url) => {
shell.openExternal(url)
event.preventDefault()
})
mainWindow.webContents.on('will-navigate', (event, url) => {
if (url !== mainWindow.webContents.getURL()) {
shell.openExternal(url)
event.preventDefault()
}
})
// Change global hotkey if it is changed in app settings
mainWindow.settingsChanges.on('hotkey', (value) => {
globalShortcut.unregister(shortcut)
shortcut = value
globalShortcut.register(shortcut, toggleMainWindow)
})
// Change theme css file
mainWindow.settingsChanges.on('theme', (value) => {
mainWindow.webContents.send('message', {
message: 'updateTheme',
payload: value
})
})
mainWindow.settingsChanges.on('proxy', (value) => {
mainWindow.webContents.session.setProxy({
proxyRules: value
})
})
// Handle window.hide: if cleanOnHide value in preferences is true
// we clear all results and show empty window every time
const resetResults = () => {
mainWindow.webContents.send('message', {
message: 'showTerm',
payload: ''
})
}
// Handle change of cleanOnHide value in settins
const handleCleanOnHideChange = (value) => {
if (value) {
mainWindow.on('hide', resetResults)
} else {
mainWindow.removeListener('hide', resetResults)
}
}
// Set or remove handler when settings changed
mainWindow.settingsChanges.on('cleanOnHide', handleCleanOnHideChange)
// Set initial handler if it is needed
handleCleanOnHideChange(config.get('cleanOnHide'))
// Restore focus in previous application
// MacOS only: https://github.com/electron/electron/blob/master/docs/api/app.md#apphide-macos
if (process.platform === 'darwin') {
mainWindow.on('hide', () => {
app.hide()
})
}
// Show main window when user opens application, but it is already opened
app.on('open-file', (event, path) => handleUrl(mainWindow, path))
app.on('open-url', (event, path) => handleUrl(mainWindow, path))
app.on('activate', showMainWindow)
// Someone tried to run a second instance, we should focus our window.
const shouldQuit = app.requestSingleInstanceLock()
if (!shouldQuit) {
app.quit()
} else {
app.on('second-instance', () => {
if (mainWindow) {
if (mainWindow.isMinimized()) mainWindow.restore()
mainWindow.focus()
}
})
}
// Save in config information, that application has been started
config.set('firstStart', false)
buildMenu(mainWindow)
return mainWindow
}
================================================
FILE: app/main/css/global.css
================================================
@import "system-font.css";
@import url("~normalize.css/normalize.css");
@import url("~react-virtualized/styles.css");
html,
body {
margin: 0;
padding: 0;
background-color: var(--main-background-color);
color: var(--main-font-color);
}
body {
position: relative;
height: 100vh;
font-family: var(--main-font);
overflow-y: hidden;
}
#root {
height: 100%;
}
================================================
FILE: app/main/css/system-font.css
================================================
/*! system-font.css v1.1.0 | CC0-1.0 License | github.com/jonathantneal/system-font-face */
@font-face {
font-family: system;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}
@font-face {
font-family: system;
font-style: italic;
font-weight: 300;
src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Ubuntu Light Italic"), local("Segoe UI Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma");
}
@font-face {
font-family: system;
font-style: normal;
font-weight: 400;
src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Ubuntu"), local("Segoe UI"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma");
}
@font-face {
font-family: system;
font-style: italic;
font-weight: 400;
src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Ubuntu Italic"), local("Segoe UI Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma");
}
@font-face {
font-family: system;
font-style: normal;
font-weight: 500;
src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Ubuntu Medium"), local("Segoe UI Semibold"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold");
}
@font-face {
font-family: system;
font-style: italic;
font-weight: 500;
src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Ubuntu Medium Italic"), local("Segoe UI Semibold Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
}
@font-face {
font-family: system;
font-style: normal;
font-weight: 700;
src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Segoe UI Bold"), local("Tahoma Bold");
}
@font-face {
font-family: system;
font-style: italic;
font-weight: 700;
src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Segoe UI Bold Italic"), local("Tahoma Bold");
}
================================================
FILE: app/main/css/themes/dark.css
================================================
:root {
/* Main fonts and colors */
--main-background-color: rgba(62, 65, 67, 1);
--main-font: system, sans-serif;
--main-font-color: white;
/* border styles */
--main-border: 1px solid #686869;
/* Secondary fonts and colors */
--secondary-font-color: #9B9D9F;
/* results list */
--result-background: transparent;
--result-title-color: var(--main-font-color);
--result-subtitle-color: #cccccc;
/* selected result */
--selected-result-title-color: white;
--selected-result-subtitle-color: var(--result-subtitle-color);
--selected-result-background: #1972D6;
/* scrollbar */
--scroll-background: var(--main-background-color);
--scroll-track: #2E2E2C;
--scroll-track-active: var(--scroll-track);
--scroll-track-hover: var(--scroll-track);
--scroll-thumb: var(--secondary-font-color);
--scroll-thumb-hover: var(--scroll-thumb);
--scroll-thumb-active: var(--main-font-color);
--scroll-width: 5px;
--scroll-height: 5px;
/* inputs */
--preview-input-background: #2E2E2C;
--preview-input-color: var(--main-font-color);
--preview-input-border: 0;
/* filter for previews */
--preview-filter: invert(100%) hue-rotate(180deg) contrast(80%);
}
================================================
FILE: app/main/css/themes/light.css
================================================
:root {
/* Main fonts and colors */
--main-background-color: rgba(255, 255, 255, 1);
--main-font: system, sans-serif;
--main-font-color: #000000;
/* border styles */
--main-border: 1px solid #eee;
/* Secondary fonts and colors */
--secondary-font-color: #999;
/* results list */
--result-background: transparent;
--result-title-color: var(--main-font-color);
--result-subtitle-color: #cccccc;
/* selected result */
--selected-result-title-color: white;
--selected-result-subtitle-color: var(--result-subtitle-color);
--selected-result-background: rgba(18, 110, 219, 1);
/* scrollbar */
--scroll-background: var(--main-background-color);
--scroll-track: #e0e0e0;
--scroll-track-active: var(--scroll-track);
--scroll-track-hover: var(--scroll-track);
--scroll-thumb: var(--secondary-font-color);
--scroll-thumb-hover: var(--scroll-thumb);
--scroll-thumb-active: var(--main-font-color);
--scroll-width: 5px;
--scroll-height: 5px;
/* inputs */
--preview-input-background: white;
--preview-input-color: var(--main-font-color);
--preview-input-border: 1px solid #ccc;
/* filter for previews */
--preview-filter: none;
}
================================================
FILE: app/main/index.html
================================================
{ Object.keys(settings).map(renderSetting) }
)
}
export default Settings
Settings.propTypes = {
name: PropTypes.string.isRequired,
settings: PropTypes.object.isRequired,
}
================================================
FILE: app/plugins/core/plugins/Preview/index.js
================================================
import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { KeyboardNav, KeyboardNavItem } from '@cerebroapp/cerebro-ui'
import { client } from 'lib/plugins'
import ReactMarkdown from 'react-markdown'
import ActionButton from './ActionButton.js'
import Settings from './Settings'
import getReadme from '../getReadme'
import styles from './styles.module.css'
import * as format from '../format'
function Description({ repoName }) {
const isRelative = (src) => !src.match(/^(https?:|data:)/)
const urlTransform = (src) => {
if (isRelative(src)) return `http://raw.githubusercontent.com/${repoName}/master/${src}`
return src
}
const [readme, setReadme] = useState(null)
useEffect(() => { getReadme(repoName).then(setReadme) }, [])
if (!readme) return null
return (
{`${format.name(name)} (${version})`}
{format.description(description)}
{settings && (
setShowSettings((prev) => !prev)}>
Settings
)}
{showSettings && setShowDescription((prev) => !prev)}>
Details
)}
{value}
}
StatusBar.propTypes = {
value: PropTypes.string.isRequired
}
export default StatusBar
================================================
FILE: app/plugins/core/plugins/StatusBar/styles.module.css
================================================
.statusBar {
position: absolute;
right: 0;
bottom: 0;
z-index: 11;
font-size: 11px;
color: var(--secondary-font-color);
background: var(--preview-input-background);
padding: 5px;
border-radius: 5px 0 0 0;
border-top: var(--main-border);
border-left: var(--main-border);
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
}
================================================
FILE: app/plugins/core/plugins/blacklist.js
================================================
/**
* This file contains plugins that have been blacklisted.
* The main purpose of this is to hide plugins that have been republished under our scope.
* The name must match (case sensitive) the name in the `package.json`.
*/
export default [
'cerebro-basic-apps', // @cerebroapp/cerebro-basic-apps
'cerebro-mac-apps', // @cerebroapp/cerebro-mac-apps
'cerebro-brew', // @cerebroapp/cerebro-brew
]
================================================
FILE: app/plugins/core/plugins/format.js
================================================
import {
flow, words, capitalize, trim, map, join
} from 'lodash/fp'
/**
* Remove unnecessary information from plugin description
* like `Cerebro plugin for`
* @param {String} str
* @return {String}
*/
const removeDescriptionNoise = (str) => (
(str || '').replace(/^cerebro\s?(plugin)?\s?(to|for)?/i, '')
)
/**
* Remove unnecessary information from plugin name
* like `cerebro-plugin-` or `cerebro-`
* @param {String} str
* @return {String}
*/
const removeNameNoise = (str) => (
(str || '').replace(/^cerebro-(plugin)?-?/i, '')
)
export const name = (text = '') => flow(
trim,
words,
map(capitalize),
join(' ')
)(removeNameNoise(text.toLowerCase()))
export const description = flow(
removeDescriptionNoise,
trim,
capitalize,
)
export const version = (plugin) => (
plugin.isUpdateAvailable
? `${plugin.installedVersion} → ${plugin.version}`
: plugin.version
)
================================================
FILE: app/plugins/core/plugins/getAvailablePlugins.js
================================================
/**
* API endpoint to search all cerebro plugins
* @type {String}
*/
const URL = 'https://registry.npmjs.com/-/v1/search?from=0&size=500&text=keywords:cerebro-plugin,cerebro-extracted-plugin'
const sortByPopularity = (a, b) => a.score.detail.popularity > b.score.detail.popularity ? -1 : 1
/**
* Get all available plugins for Cerebro
* @return {Promise{CEREBRO_VERSION}
),
onSelect: (event) => {
event.preventDefault()
actions.replaceTerm(NAME)
}
}]
display(results)
}
}
export default { name: NAME, fn: versionPlugin }
================================================
FILE: app/plugins/externalPlugins.js
================================================
import debounce from 'lodash/debounce'
import chokidar from 'chokidar'
import path from 'path'
import initPlugin from 'lib/initPlugin'
import { modulesDirectory, ensureFiles, settings } from 'lib/plugins'
const plugins = {}
const requirePlugin = (pluginPath) => {
try {
let plugin = window.require(pluginPath)
// Fallback for plugins with structure like `{default: {fn: ...}}`
const keys = Object.keys(plugin)
if (keys.length === 1 && keys[0] === 'default') {
plugin = plugin.default
}
return plugin
} catch (error) {
// catch all errors from plugin loading
console.log('Error requiring', pluginPath)
console.log(error)
}
}
/**
* Validate plugin module signature
*
* @param {Object} plugin
* @return {Boolean}
*/
const isPluginValid = (plugin) => (
plugin
// Check existing of main plugin function
&& typeof plugin.fn === 'function'
// Check that plugin function accepts 0 or 1 argument
&& plugin.fn.length <= 1
)
ensureFiles()
/* As we support scoped plugins, using 'base' as plugin name is no longer valid
because it is not unique. '@example/plugin' and '@test/plugin' would both be treated as 'plugin'
So now we must introduce the scope to the plugin name
This function returns the name with the scope if it is present in the path
*/
const getPluginName = (pluginPath) => {
const { base, dir } = path.parse(pluginPath)
const scope = dir.match(/@.+$/)
if (!scope) return base
return `${scope[0]}/${base}`
}
const setupPluginsWatcher = () => {
if (global.isBackground) return
const pluginsWatcher = chokidar.watch(modulesDirectory, { depth: 1 })
pluginsWatcher.on('unlinkDir', (pluginPath) => {
const { base, dir } = path.parse(pluginPath)
if (base.match(/node_modules/) || base.match(/^@/)) return
if (!dir.match(/node_modules$/) && !dir.match(/@.+$/)) return
const pluginName = getPluginName(pluginPath)
const requirePath = window.require.resolve(pluginPath)
delete plugins[pluginName]
delete window.require.cache[requirePath]
console.log(`[${pluginName}] Plugin removed`)
})
pluginsWatcher.on('addDir', (pluginPath) => {
const { base, dir } = path.parse(pluginPath)
if (base.match(/node_modules/) || base.match(/^@/)) return
if (!dir.match(/node_modules$/) && !dir.match(/@.+$/)) return
const pluginName = getPluginName(pluginPath)
setTimeout(() => {
console.group(`Load plugin: ${pluginName}`)
console.log(`Path: ${pluginPath}...`)
const plugin = requirePlugin(pluginPath)
if (!isPluginValid(plugin)) {
console.log('Plugin is not valid, skipped')
console.groupEnd()
return
}
if (!settings.validate(plugin)) {
console.log('Invalid plugins settings')
console.groupEnd()
return
}
console.log('Loaded.')
const requirePath = window.require.resolve(pluginPath)
const watcher = chokidar.watch(pluginPath, { depth: 0 })
watcher.on('change', debounce(() => {
console.log(`[${pluginName}] Update plugin`)
delete window.require.cache[requirePath]
plugins[pluginName] = window.require(pluginPath)
console.log(`[${pluginName}] Plugin updated`)
}, 1000))
plugins[pluginName] = plugin
initPlugin(plugin, pluginName)
console.groupEnd()
}, 1000)
})
}
setupPluginsWatcher()
export default plugins
================================================
FILE: app/plugins/index.ts
================================================
import core from './core'
import externalPlugins from './externalPlugins'
const pluginsService = {
corePlugins: core,
allPlugins: Object.assign(externalPlugins, core),
externalPlugins,
}
export default pluginsService
================================================
FILE: babel.config.js
================================================
module.exports = {
presets: [
'@babel/preset-typescript',
[
'@babel/preset-env', {
/** Targets must match the versions supported by electron.
* See https://www.electronjs.org/
*/
targets: {
node: '16',
chrome: '102'
}
}
],
'@babel/preset-react'
]
}
================================================
FILE: build/installer.nsh
================================================
!macro customInstall
DetailPrint "Register cerebro URI Handler"
DeleteRegKey HKCR "cerebro"
WriteRegStr HKCR "cerebro" "" "URL:cerebro"
WriteRegStr HKCR "cerebro" "URL Protocol" ""
WriteRegStr HKCR "cerebro\DefaultIcon" "" "$INSTDIR\${APP_EXECUTABLE_FILENAME}"
WriteRegStr HKCR "cerebro\shell" "" ""
WriteRegStr HKCR "cerebro\shell\Open" "" ""
WriteRegStr HKCR "cerebro\shell\Open\command" "" "$INSTDIR\${APP_EXECUTABLE_FILENAME} %1"
!macroend
================================================
FILE: electron-builder.json
================================================
{
"productName": "Cerebro",
"appId": "com.cerebroapp.Cerebro",
"protocols": {
"name": "Cerebro URLs",
"role": "Viewer",
"schemes": [
"cerebro"
]
},
"directories": {
"app": "./app",
"output": "release"
},
"linux": {
"target": [
{
"target": "deb",
"arch": [
"x64"
]
},
{
"target": "AppImage",
"arch": [
"x64"
]
}
],
"category": "Utility"
},
"mac": {
"category": "public.app-category.productivity"
},
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"win": {
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
},
{
"target": "portable",
"arch": [
"x64",
"ia32"
]
}
]
},
"nsis": {
"include": "build/installer.nsh",
"perMachine": true
},
"files": [
"dist/",
"main/index.html",
"main/css,",
"background/index.html",
"tray_icon.png",
"tray_icon.ico",
"tray_iconTemplate@2x.png",
"node_modules/",
"app/node_modules/",
"main.js",
"main.js.map",
"package.json",
"!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme,test,__tests__,tests,powered-test,example,examples,*.d.ts}",
"!**/node_modules/.bin",
"!**/*.{o,hprof,orig,pyc,pyo,rbc}",
"!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,__pycache__,thumbs.db,.gitignore,.gitattributes,.editorconfig,.flowconfig,.yarn-metadata.json,.idea,appveyor.yml,.travis.yml,circle.yml,npm-debug.log,.nyc_output,yarn.lock,.yarn-integrity}"
],
"squirrelWindows": {
"iconUrl": "https://raw.githubusercontent.com/cerebroapp/cerebro/master/build/icon.ico"
},
"publish": {
"provider": "github",
"vPrefixedTagName": true,
"releaseType": "release"
}
}
================================================
FILE: jest.config.js
================================================
module.exports = {
collectCoverage: true,
moduleDirectories: ['node_modules', 'app'],
moduleNameMapper: {
'\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '