felixrieseberg/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
  </head>
  <body>
    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

## main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow, Menu, nativeImage} = require('electron')
const fetch = require('node-fetch')

const EMOJI = {
  HALF_STAR: {
    url: 'https://emoji.slack-edge.com/T12KS1G65/half-star/26dd77075663b03c.png'
  },
  SHRUG: {
    url :'https://a.slack-edge.com/production-standard-emoji-assets/10.2/google-large/1f937@2x.png'
  },
  DEPLOY_WIZARD: {
    url: 'https://emoji.slack-edge.com/T12KS1G65/deploy-wizard/171e63844c61b6eb.png'
  }
}

function loadEmoji() {
  Object.keys(EMOJI).forEach(async (key) => {
    const response = await fetch(EMOJI[key].url);
    const data = await response.buffer();
    const image = nativeImage.createFromBuffer(data).resize({
      width: 16,
      height: 16
    });

    EMOJI[key].image = image;
  });
}

function getMenu() {
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Move channel',
      submenu: [
        {
          label: 'Half-starred',
          icon: EMOJI.HALF_STAR.image
        },
        {
          label: 'Just here for the Snacks',
          icon: EMOJI.SHRUG.image
        },
        {
          label: 'Deploy Commander',
          icon: EMOJI.DEPLOY_WIZARD.image
        }, {
          type: 'separator'
        }, {
          label: 'Move to new section',
        }, {
          label: 'Remove from Starred'
        }
      ]
    }, {
      type: 'separator'
    }, {
      label: 'Open in new window'
    }, {
      type: 'separator'
    }, {
      label: 'Change notifications',
      sublabel: 'Just @mentions'
    }, {
      label: 'Mute channel'
    }, {
      label: 'Leave channel'
    }, {
      label: 'Adduitional options...'
    }, {
      type: 'separator'
    }, {
      label: 'Copy name'
    }, {
      label: 'Copy link'
    }
  ])

  return contextMenu;
}

function createWindow () {
  loadEmoji();

  // Create the browser window.
  const mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  mainWindow.webContents.on('context-menu', (event) => {
    event.preventDefault();
    getMenu().popup();
  });

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)


// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

## preload.js
// Empty

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

## styles.css
html {
  background-image: url('https://images.unsplash.com/photo-1592438780047-39f7fdc1a3a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80');
  background-size: cover;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	<link rel="stylesheet" type="text/css" href="./styles.css">
	</head>
	<body>
	<script>
	// You can also require other files to run in this process
	require('./renderer.js')
	</script>
	</body>
	</html>
	// Modules to control application life and create native browser window
	const {app, BrowserWindow, Menu, nativeImage} = require('electron')
	const fetch = require('node-fetch')

	const EMOJI = {
	HALF_STAR: {
	url: 'https://emoji.slack-edge.com/T12KS1G65/half-star/26dd77075663b03c.png'
	},
	SHRUG: {
	url :'https://a.slack-edge.com/production-standard-emoji-assets/10.2/google-large/1f937@2x.png'
	},
	DEPLOY_WIZARD: {
	url: 'https://emoji.slack-edge.com/T12KS1G65/deploy-wizard/171e63844c61b6eb.png'
	}
	}

	function loadEmoji() {
	Object.keys(EMOJI).forEach(async (key) => {
	const response = await fetch(EMOJI[key].url);
	const data = await response.buffer();
	const image = nativeImage.createFromBuffer(data).resize({
	width: 16,
	height: 16
	});

	EMOJI[key].image = image;
	});
	}

	function getMenu() {
	const contextMenu = Menu.buildFromTemplate([
	{
	label: 'Move channel',
	submenu: [
	{
	label: 'Half-starred',
	icon: EMOJI.HALF_STAR.image
	},
	{
	label: 'Just here for the Snacks',
	icon: EMOJI.SHRUG.image
	},
	{
	label: 'Deploy Commander',
	icon: EMOJI.DEPLOY_WIZARD.image
	}, {
	type: 'separator'
	}, {
	label: 'Move to new section',
	}, {
	label: 'Remove from Starred'
	}
	]
	}, {
	type: 'separator'
	}, {
	label: 'Open in new window'
	}, {
	type: 'separator'
	}, {
	label: 'Change notifications',
	sublabel: 'Just @mentions'
	}, {
	label: 'Mute channel'
	}, {
	label: 'Leave channel'
	}, {
	label: 'Adduitional options...'
	}, {
	type: 'separator'
	}, {
	label: 'Copy name'
	}, {
	label: 'Copy link'
	}
	])

	return contextMenu;
	}

	function createWindow () {
	loadEmoji();

	// Create the browser window.
	const mainWindow = new BrowserWindow({
	webPreferences: {
	nodeIntegration: true
	}
	})

	// and load the index.html of the app.
	mainWindow.loadFile('index.html')

	mainWindow.webContents.on('context-menu', (event) => {
	event.preventDefault();
	getMenu().popup();
	});

	// Open the DevTools.
	// mainWindow.webContents.openDevTools()
	}

	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	// Some APIs can only be used after this event occurs.
	app.on('ready', createWindow)



	// Quit when all windows are closed.
	app.on('window-all-closed', function () {
	// On OS X it is common for applications and their menu bar
	// to stay active until the user quits explicitly with Cmd + Q
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})

	app.on('activate', function () {
	// On OS X it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (BrowserWindow.getAllWindows().length === 0) {
	createWindow()
	}
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// All of the Node.js APIs are available in this process.
	html {
	background-image: url('https://images.unsplash.com/photo-1592438780047-39f7fdc1a3a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80');
	background-size: cover;
	}