squareupA sleek and modern startpage-技术圈

squareup

A sleek and modern startpage

Live Demo

squareup startpage

Features

Responsive UI
Web Search Suggestions
Mobile Support
Theme Switcher
Keyboard navigation
Search Engine Selection
Animated Background
Web Menu with Fuzzy Search
Vanilla Javascript!
And many bugs!

Usage

Clone this repo.
Set it as your default homepage.

Keybindings

Escape - toggles web menu
Control + Space - switches search engine
Alt + Space - switches color scheme

Quick search

r/ + subreddit name will open the subreddit if valid or existing.
- r/unixporn
- r/startpages
w/ + search query to search on wikipedia.
- w/linux
- w/Javascript
u/ + search query to search for an image/photo on unsplash.
- u/nature
- u/technology
a/ + search query to search a product on amazon.
- a/intel celeron
- a/windows 10 source code
e/ + search query to search a product on ebay.
- e/pentium 4
- e/uranium core
y/ + search query to search a video on youtube.
- y/how to build a nuclear reactor
- y/strange alien sightings in oregon
n/ + comic id to search a "comic" on a certain "comic" website.
- n/177013
g/ + search query to search a for a repo/user on github.
- g/manilarome
- g/squareup
- g/manilarome/squareup

URL Redirects

Searching a valid URL will redirect you to the said URL. Note that a protocol, https:// for example, is required.

https://haveibeenpwned.com/ query is valid, so you will be redirected to https://haveibeenpwned.com/.
google.com is not a valid URL, so it will search it on your default search engine.
www.duckduckgo.com is also invalid because it doesn't have a protocol.

URL Query Parameters

You can also pass a query by using the q parameter. The default search engine will be used.

manilarome.github.io/squareup?q=how to build a nuclear reactor at home
127.0.0.1?q=how to download more RAM in google play store
file:///PATH/TO/squareup/index.html?q=how to restore system32

Settings and Customization

Customizing color scheme

Change the color scheme by just clicking a button!

Dark - Dark colorscheme. Good for the night.
Light - Bright colorscheme. Good for killing the eyes.
Auto - Load a colorscheme based on time. Edit light/dark mode hours on js/config.js

Customizing panel buttons

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

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

Customizing web menu

Add more items or web shortcuts in the 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.

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

Customizing quick search

Add more quick search shortcuts by editing the quickSearchData object in js/config.js. Make sure to follow the format below:

// Example
const quickSearchData = {
	'r/': {
		urlPrefix: 'https://reddit.com/r/'
	},
	...
}

Switch default search engine

Startpage is the default search engine, if you want to change it, just click the switcher button on the panel.

Available search engines:

Startpage
Qwant
Ecosia
Duckduckgo
Yahoo
Google
Bing

Customizing available search engines

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

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

Changing clock mode

There are two clock modes available - 24-hour and 12-hour. Switch between clock modes by just clicking on the clock. Simple.

Important Note

Make sure that javascript is enabled in your browser!
Make sure to whitelist or disable NoScript and Dark Mode Reader extensions on this homepage.
If you are experiencing slowdowns, you can disable the animations in css/animated-background.css.
Tested only on Firefox and Google Chrome.

TODOs

Squareup will sit between minimal and bloated. The items in this TODO list are the only one I'm planning to implement in this homepage.

Search engine switching
Autosuggestion
Categorized Web Menu

Issues?

Feel free to open one!

PR?

That would be great!

Other works

Check my other works related to this startpage.

blurredfox - a gorgeous and modern firefox CSS theme.
the-glorious-startpage - my very first startpage. Kinda bloaty and code is quite messy but still kinda works and looks gorgeous.
the-glorious-dotfiles - a stash of my configurations.