a glorified startpage
Go to file
2020-06-13 16:00:07 +08:00
assets add mdn web docs in web menu 2020-06-05 12:39:28 +08:00
css rename bodybackground css 2020-06-13 16:00:07 +08:00
fonts add magnifying glass unicode on placeholders 2020-06-05 10:39:40 +08:00
js rename bodybackground to dummy, fix swipe event bug, improve transition of lazy loading 2020-06-13 13:01:39 +08:00
scrots screenshot and readme 2020-06-11 12:22:20 +08:00
index.html rename bodybackground to dummy, fix swipe event bug, improve transition of lazy loading 2020-06-13 13:01:39 +08:00
LICENSE CLEANUP 2020-06-13 08:27:30 +08:00
README.md CLEANUP 2020-06-13 08:27:30 +08:00

A bloated and modern-looking startpage

maintained contributions HitCount

Live Preview

Search Autosuggestion Settings
screenshot screenshot
Web Menu Weather Forecast
screenshot screenshot

Features

  • Responsive UI
  • Web Search Suggestions
  • Mobile Support with Swipe Gestures
  • Theme Settings - Change colors on-the-fly
  • Weather Forecast - OpenWeatherMap and Geolocation Integration
  • Search Engine Selection
  • Dynamic Background
  • Web Menu with Fuzzy Search
  • Keyboard Navigation
  • Vanilla Javascript!
  • And many bugs!

Keybindings

  • alt + S - toggles dashboard
  • alt + E - toggles web menu
  • alt + X - toggles weather screen
  • Escape - close panels/toggles web menu
  • Backspace - toggles search box

Swipe gestures

  • swipe right - opens web menu
  • swipe left - opens dashboard
  • swipe up - opens weather screen
  • swipe down - opens search box

Customization and Settings

Changing the colors, blur strength, and animation speed on-the-fly

  • Open the dashboard by clicking the settings button on the dock.
  • Change the color and blur strength by setting it on the Theme Engine section.
  • Color settings supports #RGB, #RRGGBB, and #RRGGBBAA.
  • Blur strength settings only allows integer with px suffix.
  • Animation speed supports s and ms.

Adding more buttons on the web menu

Add more buttons or web shortcuts in web menu by editing the webSites array in js/config.js. Make sure to put an icon with svg format for the shortcut in assets/webcons/ folder.

const webSites = [
	{
		site: 'Reddit',
		icon: 'reddit',
		url: 'https://reddit.com/',
		category: 'social'
	},
	...
]

Adding more buttons on the dock

To add more web shortcuts/buttons in the dock, you have to edit the dockSites array in js/config.js. Make sure to put an icon with svg format for the shortcut in assets/webcons/ folder.

const dockSites = [
	{
		site: 'Reddit',
		icon: 'reddit',
		url: 'https://reddit.com/'
	},
	...
]

Adding more search engine in selection

Add more search engine in selection by editing the searchEngines object in js/config.js. Make sure to follow the format below:

const searchEngines = {
	'duckduckgo': {
		name: 'Duckduckgo',
		prefix: 'https://duckduckgo.com/?q='
	},
	...
}

Set your OpenWeatherMap API key

Setting up your OpenWeatherMap credential is a breeze.

  • If you don't have an API key, follow this guide:

    How to get a credentials for the weather forecast?

    • OpenWeatherMap is the weather provider, so go to OpenWeatherMap's website.
    • Register, log-in, and then go here to generate your very own API keys.
  • After this you can choose two locator modes - Geolocation and City.

  • In City Mode, you have to get your City ID in OpenWeatherMap website.

  • While Geolocation mode offers GPS tracking. You don't need to get an ID. Note that you must allow the location permission request.

  • Put your API key in the Weather Settings.

  • It's recommended to still put your City ID if you plan to use the geolocation mode.

  • Apply.

Note:

  • If you're using firefox and you're planning to use the geolocation, make sure to set the value of geo.provider.network.url to https://location.services.mozilla.com/v1/geolocate?key=test in about:config. Google changed its policies, so now it requires a valid API key when accessing their geolocation service. This tells us that you need a valid API key in place of %GOOGLE_LOCATION_SERVICE_API_KEY%. Citation.

  • If you're on mobile, make sure to enable your GPS and allow the location permission if you want to use geolocation.

  • If you just set the startpage locally, the location permission will always pop-up even if you already accept/denied it. It's better to run it on a web server.

Changing the default search engine

Google is the default search engine of the search bar, if you want to change it to DuckDuckGo or something:

  • Open the dashboard by clicking the settings button on the dock.
  • Find the Search Engine section and select your preferred search engine.
  • Set it as default.

Changing the profile picture

  • Replace the user.png image file in assets/.

Changing the background image

The background image changes based on time.

  • Change the background images in assets/backgrounds/.
  • Make sure that it is in a webp format.
  • A lower resolution of each images are also required.

Keybindings

  • You can add, replace, or remove a keybinding by editing js/keybindings.js.

Important Note

  • Make sure that javascript is enabled!

  • If you're using firefox and blur effect is not enabled, open about:config, accept the risks, find layout.css.backdrop-filter.enabled, and set it to true to enable it. Refresh the startpage.

  • If you're using firefox and planning to use the geolocation, set the value of geo.provider.network.url to https://location.services.mozilla.com/v1/geolocate?key=test in about:config.

  • The code could be better, this is my first time writing a startpage from the ground up. I will improve this from time to time.

  • Found a bug, error or do you have a suggestion? Feel free to open an issue or pull request.

  • Tested only on Firefox and Google Chrome.

TODO

  • GUI Settings
  • Weather Forecast
  • Dynamic Background
  • Cleaner codeWIP
  • Keyboard navigation
  • Swipe gestures for mobile