forked from extern/the-glorious-startpage
174 lines
5.3 KiB
Markdown
174 lines
5.3 KiB
Markdown
## A bloated and modern-looking startpage
|
|
|
|
[](https://github.com/manilarome/the-glorious-startpage/commits/master) [](https://github.com/manilarome/the-glorious-startpage/pulls) [](http://hits.dwyl.com/manilarome/the-glorious-startpage)
|
|
|
|
## [Live Preview](https://manilarome.github.io/the-glorious-startpage/)
|
|
|
|
## Gallery
|
|
|
|
| Searchbar | Settings |
|
|
| --- | --- |
|
|
|  |  |
|
|
|
|
| Web Menu | Weather Forecast |
|
|
| --- | --- |
|
|
|  |  |
|
|
|
|
#### It looks good on mobile too
|
|
|
|
| Searchbar | Settings |
|
|
| --- | --- |
|
|
|  |  |
|
|
|
|
| Web Menu | Weather Forecast |
|
|
| --- | --- |
|
|
|  |  |
|
|
|
|
## Features
|
|
|
|
+ Responsive UI
|
|
+ Web Search Suggestions
|
|
+ Mobile Support with Swipe Gestures
|
|
+ Theme Settings - Change colors on-the-fly
|
|
+ Weather Forecast - OpenWeatherMap Integration
|
|
+ Search Engine Selection
|
|
+ Dynamic Background
|
|
+ Web Menu with Fuzzy Search
|
|
+ Keyboard Navigation
|
|
+ Vanilla Javascript!
|
|
+ And many bugs!
|
|
|
|
## Keybindings
|
|
|
|
+ <kbd>alt + S</kbd> - toggles dashboard
|
|
+ <kbd>alt + E</kbd> - toggles web menu
|
|
+ <kbd>alt + X</kbd> - toggles weather screen
|
|
+ <kbd>Escape</kbd> - close panels/toggles web menu
|
|
+ <kbd>Backspace</kbd> - toggles search box
|
|
|
|
## Swipe gestures
|
|
|
|
+ <kbd>swipe right</kbd> - opens web menu
|
|
+ <kbd>swipe left</kbd> - opens dashboard
|
|
+ <kbd>swipe up</kbd> - opens weather screen
|
|
+ <kbd>swipe down</kbd> - 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.
|
|
|
|
```js
|
|
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.
|
|
|
|
```js
|
|
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:
|
|
|
|
```js
|
|
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](https://home.openweathermap.org/).
|
|
- Register, log-in, and then go [here](https://home.openweathermap.org/api_keys) to generate your very own API keys.
|
|
|
|
+ After getting you API key, you have to get your City ID.
|
|
+ Put your API key and City ID in the `Weather Settings`.
|
|
+ Apply.
|
|
|
|
#### 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.
|
|
|
|
+ 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
|
|
|
|
- [x] GUI Settings
|
|
- [x] Weather Forecast
|
|
- [x] Dynamic Background
|
|
- [x] Cleaner code<sup>WIP</sup>
|
|
- [x] Keyboard navigation
|
|
- [x] Swipe gestures for mobile
|
|
|
|
|
|
### License
|
|
|
|
[Feel free to use or modify this however you like!](https://github.com/manilarome/the-glorious-startpage/blob/master/LICENSE) |