README.md

@@ -0,0 +1,33 @@
+[![Build Status](https://drone.srv.kapelle.org/api/badges/niklas/startpage/status.svg?ref=refs/heads/master)](https://drone.srv.kapelle.org/niklas/startpage)
+
+# How to set the new Tab
+## Firefox
+
+[Reddit thread](https://www.reddit.com/r/startpages/comments/g3qndt/psa_how_to_set_a_custom_new_tab_page_in_firefox/)
+
+Create 2 files inside of the firefox install directory. 
+
+`${installDir}/defaults/pref/autoconfig.js`
+```js
+pref("general.config.filename", "autoconfig.cfg");
+pref("general.config.obscure_value", 0);
+pref("general.config.sandbox_enabled", false);
+```
+
+`${installDir}/autoconfig.cfg`
+```
+// first line is a comment
+var {classes:Cc,interfaces:Ci,utils:Cu} = Components;
+var newTabURL = "http://localhost:8080";
+aboutNewTabService = Cc["@mozilla.org/browser/aboutnewtab-service;1"].getService(Ci.nsIAboutNewTabService);
+aboutNewTabService.newTabURL = newTabURL;
+```
+
+Replace the "localhost" line in `autoconfig.cfg` with your URL. 
+Also you can set the homepage via your normal settings.
+
+Alternatively you can use a extentions called [New Tab override](https://addons.mozilla.org/en-US/firefox/addon/new-tab-override/).
+
+## Chrome
+
+Maybe [this](https://chrome.google.com/webstore/detail/custom-new-tab-url/mmjbdbjnoablegbkcklggeknkfcjkjia) extention. Not tested yet.

src/components/App.tsx

@@ -4,6 +4,7 @@ import Quick from "./Quick";
 import QuickItem from "./QuickItem";
 import QuickCategory from "./QuickCategory";
 import Clock from "./Clock";
+import Search from "./Search";
 
 class App extends React.Component {
 	constructor(props) {
@@ -14,10 +15,11 @@ class App extends React.Component {
 		return <div>
 			<div className="center-wrapper">
 				<Clock/>
+				<Search/>
 				<Quick>
 					<QuickCategory name="Productivity">
-						<QuickItem name="Nextcloud" url="#"/>
+						<QuickItem name="Nextcloud" url="https://nc.kapelle.org"/>
-						<QuickItem name="Git" url="#"/>
+						<QuickItem name="Git" url="https://git.kapelle.org"/>
 						<QuickItem name="GitHub" url="https://github.com/"/>
 					</QuickCategory>
 
@@ -28,7 +30,7 @@ class App extends React.Component {
 					</QuickCategory>
 
 					<QuickCategory name="Other">
-						<QuickItem name="Bitwarden" url="#"/>
+						<QuickItem name="Bitwarden" url="https://vault.kapelle.org"/>
 					</QuickCategory>
 				</Quick>
 			</div>

src/components/Search.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import "../style/search.scss";
+
+class Search extends React.Component {
+
+	private searchInput = React.createRef<HTMLInputElement>()
+
+	constructor(props) {
+		super(props);
+	}
+
+	handleQuery(query: string) {
+		this.search(query);
+	}
+
+	search(query: string){
+		const url = new URL("https://duckduckgo.com/");
+		const param = new URLSearchParams();
+		param.append("q",query);
+		url.search = param.toString();
+		window.location.href = url.toString();
+	}
+
+	onKeyDown(event: React.KeyboardEvent) {
+		if (event.key === 'Enter') {
+			this.handleQuery(this.searchInput.current.value);
+		}
+	}
+
+	render(): JSX.Element {
+		return <div className="search-component" >
+			<input type="text" 
+				autoFocus
+				onKeyDown={(e)=>this.onKeyDown(e)}
+				ref={this.searchInput}
+				/>
+		</div>;
+	}
+
+}
+
+export default Search;

src/style/search.scss

@@ -0,0 +1,12 @@
+.search-component{
+
+	text-align: center;
+	margin-top: 2em;
+	margin-bottom: 2em;
+
+	input[type=text]{
+		width: 40%;
+		border: none;
+		padding: 0.5em 1.5em;
+	}
+}