.drone.yml

@@ -7,12 +7,8 @@ steps:
   commands:
   - npm install
   - npm run buildProd
-  - npm run ext:sign
-  environment:
-    WEB_EXT_API_KEY:
-      from_secret: WEB_EXT_API_KEY
-    WEB_EXT_API_SECRET:
-      from_secret: WEB_EXT_API_SECRET
+  - mkdir build
+  - tar -czvf build/bundle.tar.gz dist
   
 - name: gitea_release
   image: plugins/gitea-release
@@ -21,7 +17,7 @@ steps:
       from_secret: GITEA_API_KEY
     base_url: https://git.kapelle.org
     files:
-    - web-ext-artifacts/*
+    - build/*
     checksum:
     - md5
     - sha1

.eslintrc.json

@@ -18,8 +18,5 @@
         "ecmaFeatures": {
             "jsx": true
         }
-	},
-	"globals": {
-		"VERSION": true 
-	}
+    }
 }

.vscode/tasks.json

@@ -15,20 +15,6 @@
 			"group": "none",
 			"problemMatcher": []
 		},
-		{
-			"label": "watch",
-			"command": "npm",
-			"type": "shell",
-			"args": [
-				"run",
-				"watch"
-			],
-			"presentation": {
-				"reveal": "always"
-			},
-			"group": "none",
-			"problemMatcher": []
-		},
 		{
 			"label": "Build prod",
 			"command": "npm",
@@ -40,7 +26,7 @@
 			"presentation": {
 				"reveal": "always"
 			},
-			"group": "build",
+			"group": "none",
 			"problemMatcher": []
 		},
 		{
@@ -54,21 +40,7 @@
 			"presentation": {
 				"reveal": "always"
 			},
-			"group": "build",
-			"problemMatcher": []
-		},
-		{
-			"label": "ext:run",
-			"command": "npm",
-			"type": "shell",
-			"args": [
-				"run",
-				"ext:run"
-			],
-			"presentation": {
-				"reveal": "always"
-			},
-			"group": "build",
+			"group": "none",
 			"problemMatcher": []
 		}
 	]

README.md

@@ -1,19 +1,33 @@
-# How to install
+[![Build Status](https://drone.srv.kapelle.org/api/badges/niklas/startpage/status.svg?ref=refs/heads/master)](https://drone.srv.kapelle.org/niklas/startpage)
 
-1. Download the extension
-2. Goto `about:addons`
-3. Click on the top right button
-4. Click `Install Add-on From File`
-5. Select the Add-on
+# How to set the new Tab
+## Firefox
 
-# How to build
+[Reddit thread](https://www.reddit.com/r/startpages/comments/g3qndt/psa_how_to_set_a_custom_new_tab_page_in_firefox/)
 
-1. Build the bundle with `npm run buildProd`
-2. Provide the secrets required for signing the addon
-3. Sign the Add-on by Mozilla with `npm run ext:sign`
+Create 2 files inside of the firefox install directory. 
 
-# Usefull links
+`${installDir}/defaults/pref/autoconfig.js`
+```js
+pref("general.config.filename", "autoconfig.cfg");
+pref("general.config.obscure_value", 0);
+pref("general.config.sandbox_enabled", false);
+```
 
-- [Mozilla Developer hub](https://addons.mozilla.org/en-US/developers/)
-- [Mozilla Extension documentation](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
-- [Web ext documentation](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/)
+`${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.

package.json

@@ -6,11 +6,7 @@
 	"scripts": {
 		"devServer": "webpack-dev-server  --mode development --open",
 		"build": "webpack --mode development",
-		"buildProd": "webpack --mode production",
-		"watch": "webpack --watch --mode development",
-		"ext:build": "web-ext build --source-dir dist --overwrite-dest",
-		"ext:sign": "web-ext sign --source-dir dist --channel unlisted",
-		"ext:run": "web-ext run --source-dir dist --no-reload"
+		"buildProd": "webpack --mode production"
 	},
 	"author": "",
 	"license": "ISC",
@@ -20,8 +16,6 @@
 		"@types/react-dom": "^16.9.6",
 		"@typescript-eslint/eslint-plugin": "^2.28.0",
 		"@typescript-eslint/parser": "^2.28.0",
-		"case-sensitive-paths-webpack-plugin": "^2.3.0",
-		"copy-webpack-plugin": "^5.1.1",
 		"css-loader": "^3.5.2",
 		"eslint": "^6.8.0",
 		"eslint-plugin-react": "^7.19.0",
@@ -32,8 +26,6 @@
 		"sass-loader": "^8.0.2",
 		"ts-loader": "^7.0.0",
 		"typescript": "^3.8.3",
-		"web-ext": "^4.2.0",
-		"web-ext-types": "^3.2.1",
 		"webpack": "^4.42.1",
 		"webpack-cli": "^3.3.11",
 		"webpack-dev-server": "^3.10.3"

src/components/App.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 
 import Quick from "./Quick";
+import QuickItem from "./QuickItem";
+import QuickCategory from "./QuickCategory";
 import Clock from "./Clock";
 import Search from "./Search";
 
@@ -12,9 +14,25 @@ class App extends React.Component {
 	render(): JSX.Element {
 		return <div>
 			<div className="center-wrapper">
-				<Clock />
-				<Search />
-				<Quick />
+				<Clock/>
+				<Search/>
+				<Quick>
+					<QuickCategory name="Productivity">
+						<QuickItem name="Nextcloud" url="https://nc.kapelle.org"/>
+						<QuickItem name="Git" url="https://git.kapelle.org"/>
+						<QuickItem name="GitHub" url="https://github.com/"/>
+					</QuickCategory>
+
+					<QuickCategory name="Personal">
+						<QuickItem name="Youtube" url="https://youtube.com/"/>
+						<QuickItem name="Reddit" url="https://reddit.com/"/>
+						<QuickItem name="Netflix" url="https://netflix.com/"/>
+					</QuickCategory>
+
+					<QuickCategory name="Other">
+						<QuickItem name="Bitwarden" url="https://vault.kapelle.org"/>
+					</QuickCategory>
+				</Quick>
 			</div>
 		</div>;
 	}

src/components/Clock.tsx

@@ -45,12 +45,12 @@ class Clock extends React.Component<{}, State> {
 	}
 
 	startTimer() {
-		this.interval = setInterval(() => {
+		this.interval = setInterval(()=>{
 			this.updateTime();
 
 			// This will change only if the tab stays open after midnight. But still, lets cover that
 			this.updateDate();
-		}, 1000);
+		},1000);
 	}
 
 	componentDidMount() {
@@ -59,7 +59,7 @@ class Clock extends React.Component<{}, State> {
 		this.startTimer();
 	}
 
-	componentWillUnmount() {
+	componentWillUnmount(){
 		clearInterval(this.interval);
 	}
 

src/components/Quick.tsx

@@ -1,43 +1,21 @@
 import * as React from "react";
 
 import "../style/quick.scss";
-import { Bookmarks } from "../types/Bookmarks";
-import QuickCategory from "./QuickCategory";
-import getBookmarks from "../functions/getBookmarks";
 
-interface State {
-	bookmarks: Bookmarks;
+interface Props {
+	children: React.ReactNode;
 }
 
-class Quick extends React.Component<{}, State> {
-
-	constructor(props) {
+class Quick extends React.Component<Props> {
+	
+	constructor(props){
 		super(props);
-		this.state = {
-			bookmarks: {
-				folder: [],
-				orphans: []
-			}
-		};
-	}
-
-	async getBookmarks(): Promise<void> {
-		const bookmarks = await getBookmarks();
-		this.setState({
-			bookmarks: bookmarks
-		});
-	}
-
-	componentDidMount() {
-		this.getBookmarks();
 	}
 
 	render(): JSX.Element {
 		return <div className="quick-component">
 			<div className="container">
-				{this.state.bookmarks.folder.map((e, i) => {
-					return <QuickCategory folder={e} key={i} />;
-				})}
+				{this.props.children}
 			</div>
 		</div>;
 	}

src/components/QuickCategory.tsx

@@ -1,28 +1,25 @@
 import * as React from "react";
 
 import "../style/quickCategory.scss";
-import { BookmarkFolder } from "../types/Bookmarks";
-import QuickItem from "./QuickItem";
 
 interface Props {
-	folder: BookmarkFolder;
+	children: React.ReactNode;
+	name: string;
 }
 
 class QuickCategory extends React.Component<Props> {
-
-	constructor(props) {
+	
+	constructor(props){
 		super(props);
 	}
 
 	render(): JSX.Element {
 		return <div className="quickCategory-component">
 			<div className="title">
-				{this.props.folder.name}
+				{this.props.name}
 			</div>
 			<div className="children">
-				{this.props.folder.bookmarks.map((e, i) => {
-					return <QuickItem bookmark={e} key={i} />;
-				})}
+				{this.props.children}
 			</div>
 		</div>;
 	}

src/components/QuickItem.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 
 import "../style/quickItem.scss";
-import { Bookmark } from "../types/Bookmarks";
 
 interface Props {
-	bookmark: Bookmark;
+	name: string;
+	url: string;
 }
 
 class QuickItem extends React.Component<Props> {
@@ -14,12 +14,12 @@ class QuickItem extends React.Component<Props> {
 	}
 
 	onClick() {
-		window.location.href = this.props.bookmark.url;
+		window.location.href = this.props.url;
 	}
 
 	render(): JSX.Element {
 		return <div className="quickItem-component" onClick={() => this.onClick()}>
-			{this.props.bookmark.name}
+			{this.props.name}
 		</div>;
 	}
 

src/components/Search.tsx

@@ -1,102 +1,40 @@
 import * as React from "react";
 
 import "../style/search.scss";
-import Sugestion from "./Sugestion";
-import { Suggestion, SuggestionType } from "../types/Suggestion";
-import getGoogleSuggestions from "../functions/getGoogleSuggestions";
 
-interface State {
-	sugestions: Suggestion[];
-}
-
-class Search extends React.Component<{}, State> {
+class Search extends React.Component {
 
 	private searchInput = React.createRef<HTMLInputElement>()
 
 	constructor(props) {
 		super(props);
-
-		this.state = {
-			sugestions: []
-		};
 	}
 
 	handleQuery(query: string) {
 		this.search(query);
 	}
 
-	search(query: string) {
+	search(query: string){
 		const url = new URL("https://duckduckgo.com/");
 		const param = new URLSearchParams();
-		param.append("q", query);
+		param.append("q",query);
 		url.search = param.toString();
 		window.location.href = url.toString();
 	}
 
-	async sugest(input: string) {
-		if (input === "") {
-			this.setState({
-				sugestions: []
-			});
-		} else {
-			const results = await getGoogleSuggestions(input);
-
-			const newSuggestionState: Suggestion[] = results.suggestions.map((e) => {
-				return {
-					display: e,
-					type: SuggestionType.QUERY
-				};
-			});
-
-			this.setState({
-				sugestions: newSuggestionState
-			});
-		}
-
-
-	}
-
-	onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+	onKeyDown(event: React.KeyboardEvent) {
 		if (event.key === 'Enter') {
 			this.handleQuery(this.searchInput.current.value);
-		} else if (event.key === "ArrowDown") {
-			console.log("down");
-		} else if (event.key === "ArrowUp") {
-			console.log("up");
-		}
-	}
-
-	onChange() {
-		this.sugest(this.searchInput.current.value);
-	}
-
-	onSugestionClick(e: Suggestion) {
-		if (e.type === SuggestionType.QUERY) {
-			this.search(e.display);
-		} else {
-			window.location.href = e.url;
 		}
 	}
 
 	render(): JSX.Element {
 		return <div className="search-component" >
-			<input type="text"
+			<input type="text" 
 				autoFocus
-				onKeyDown={(e) => this.onKeyDown(e)}
-				onChange={() => this.onChange()}
+				onKeyDown={(e)=>this.onKeyDown(e)}
 				ref={this.searchInput}
-				autoComplete="off"
-			/>
-
-			<div className="suggestion-area">
-				{this.state.sugestions.map((e) => {
-					return <Sugestion
-						key={e.display}
-						suggestion={e}
-						onClick={() => { this.onSugestionClick(e); }}
-					/>;
-				})}
-			</div>
+				/>
 		</div>;
 	}
 

src/components/Sugestion.tsx

@@ -1,17 +0,0 @@
-import * as React from "react";
-
-import "../style/suggestion.scss";
-import { Suggestion } from "../types/Suggestion";
-
-interface Props {
-	suggestion: Suggestion;
-	onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-}
-
-const Sugestion = (props: Props) => {
-	return <div className="suggestion-component" onClick={props.onClick}>
-		{props.suggestion.display}
-	</div>;
-};
-
-export default Sugestion;

src/functions/getBookmarks.ts

@@ -1,43 +0,0 @@
-import { Bookmarks, Bookmark } from "../types/Bookmarks";
-
-function createBookmark(from: browser.bookmarks.BookmarkTreeNode): Bookmark {
-	return {
-		name: from.title,
-		url: from.url
-	};
-}
-
-export default async (): Promise<Bookmarks> => {
-	const treeNode = await browser.bookmarks.getTree();
-
-	const root: Bookmarks = {
-		folder: [],
-		orphans: []
-	};
-
-	const rootNode = treeNode[0].children.find((e)=>e.id === "menu________");
-
-	// Set all top level bookmarks (without folder)
-	root.orphans = rootNode.children
-		.filter((e)=> e.type === "bookmark" )
-		.sort((a,b)=> a.index - b.index )
-		.map(createBookmark);
-
-	// Get all top level folders 
-	root.folder = rootNode.children
-		.filter((e)=> e.type === "folder")
-		.filter((e)=> e.children.length > 0)
-		.sort((a,b)=> a.index - b.index )
-		.map((e)=>{
-			const children: Bookmark[] = e.children
-				.filter((e)=> e.type === "bookmark")
-				.sort((a,b)=> a.index - b.index )
-				.map(createBookmark);
-			return {
-				name: e.title,
-				bookmarks: children
-			};
-		});
-
-	return root;
-};

src/functions/getGoogleSuggestions.ts

@@ -1,17 +0,0 @@
-import GoogleSuggestions from "../types/GoogleSuggestions";
-
-export default async (query: string): Promise<GoogleSuggestions> => {
-	const url = new URL(" http://suggestqueries.google.com/complete/search");
-	const param = new URLSearchParams();
-	param.append("q", query);
-	param.append("client", "firefox"); // TODO check if the result are different on different clients
-	url.search = param.toString();
-
-	const response = await fetch(url.toString());
-	const results = await response.json();
-
-	return {
-		query: results[0],
-		suggestions: results[1]
-	};
-};

src/manifest.json

@@ -1,25 +0,0 @@
-{
-	"manifest_version": 2,
-	"name": "Startpage",
-	"version": "$VERSION",
-	"description": "Startpage",
-	"developer": {
-		"name": "Djeeberjr"
-	},
-	"chrome_url_overrides": {
-		"newtab": "startpage/index.html"
-	},
-	"chrome_settings_overrides": {
-		"homepage": "startpage/index.html"
-	},
-	"permissions": [
-		"<all_urls>",
-		"bookmarks"
-	],
-	"applications": {
-		"gecko": {
-			"update_url": "https://cocainum.srv.kapelle.org/api/service/staticRedirect/staticRedirect/startpageExtUpdate",
-			"id": "{9c6ffd7a-0e0b-4276-8208-aa72030477ce}"
-		}
-	}
-}

src/style/search.scss

@@ -1,19 +1,12 @@
 .search-component{
 
-	margin: 2em auto 2em auto;
-	width: 50%;
-	position: relative;
-	
-	input[type=text]{
-		width: 100%;
-		border: none;
-		padding: 0.5em 1em;
-		box-sizing: border-box;
-	}
+	text-align: center;
+	margin-top: 2em;
+	margin-bottom: 2em;
 
-	.suggestion-area{
-		position: absolute;
-		right: 0;
-		left: 0;
+	input[type=text]{
+		width: 40%;
+		border: none;
+		padding: 0.5em 1.5em;
 	}
-}
+}

src/style/suggestion.scss

@@ -1,12 +0,0 @@
-.suggestion-component{
-	padding: 0.2em 1em;
-	background-color: white;
-	color: black;
-	border: 1px solid #d4d4d4;
-	border-top: none;
-	cursor: pointer;
-
-	&:hover {
-		background-color: #d4d4d4;
-	}
-}

src/types/Bookmarks.ts

@@ -1,16 +0,0 @@
-interface Bookmarks {
-	folder: BookmarkFolder[];
-	orphans: Bookmark[];
-}
-
-interface BookmarkFolder {
-	name: string;
-	bookmarks: Bookmark[];
-}
-
-interface Bookmark {
-	name: string;
-	url: string;
-}
-
-export { Bookmarks, Bookmark, BookmarkFolder };

src/types/GoogleSuggestions.ts

@@ -1,31 +0,0 @@
-/*
-	Example if client == chrome:
-	[
-		"hello w",
-		["hello world","hello world anime","hello world java","hello world c","hello world python","hello world html","hello world mhw","hello welcome home"],
-		["","","","","","","",""],
-		[],
-		{
-			"google:clientdata":{"bpc":false,"tlw":false},
-			"google:suggestrelevance":[1250,1050,850,700,601,600,551,550],
-			"google:suggesttype":["QUERY","QUERY","QUERY","QUERY","QUERY","QUERY","QUERY","QUERY"],
-			"google:verbatimrelevance":851
-		}
-	]
-
-	Example if client == firefox:
-	[
-		"hello wo",
-		[
-			"hello world","hello world anime","hello world java","hello world c","hello world python","hello world html",
-			"hello world mhw","hello world anime stream","hello world programm","hello world anime ger sub"
-		]
-	]
-*/
-
-interface GoogleSuggestions {
-	query: string;
-	suggestions: string[];
-}
-
-export default GoogleSuggestions;

src/types/Suggestion.ts

@@ -1,12 +0,0 @@
-enum SuggestionType {
-	QUICK,
-	QUERY
-}
-
-interface Suggestion {
-	display: string;
-	type: SuggestionType;
-	url?: string;
-}
-
-export { SuggestionType, Suggestion };

tsconfig.json

@@ -6,7 +6,6 @@
 		"sourceMap": true,
 		"noLib": false,
 		"jsx": "react",
-		"typeRoots": ["node_modules/@types", "node_modules/web-ext-types"],
 	},
 	"exclude": [
 		"node_modules"

webpack.config.js

@@ -3,24 +3,10 @@
 
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
-const Webpack = require("webpack");
-
 const path = require("path");
 
 const DEVELOPMENT = process.env.NODE_ENV === "development";
 
-let version = process.env.DRONE_TAG;
-
-if(!version){
-	version = require('child_process')
-		.execSync("git describe --abbrev=0")
-		.toString();
-}
-
-version = version.replace("v", "").trim();
-
 module.exports = {
 	context: path.join(__dirname, "src"),
 	resolve: {
@@ -28,7 +14,7 @@ module.exports = {
 	},
 	entry: ["./index.tsx"],
 	output: {
-		path: path.join(__dirname, "dist/startpage"),
+		path: path.join(__dirname, "dist"),
 		filename: "bundle.js"
 	},
 	devtool: DEVELOPMENT ? "source-map" : false,
@@ -41,9 +27,6 @@ module.exports = {
 		liveReload: true,
 		watchContentBase: true
 	},
-	watchOptions: {
-		ignored: ['dist/**', 'node_modules/**']
-	},
 	module: {
 		rules: [
 			{
@@ -75,19 +58,6 @@ module.exports = {
 			hash: true,
 			minify: !DEVELOPMENT
 		}),
-		new MiniCssExtractPlugin(),
-		new CopyWebpackPlugin([
-			{
-				from: "manifest.json",
-				to: "..",
-				transform(content) {
-					return content.toString().replace("$VERSION", version);
-				}
-			}
-		]),
-		new Webpack.DefinePlugin({
-			VERSION: JSON.stringify(version),
-		}),
-		new CaseSensitivePathsPlugin()
+		new MiniCssExtractPlugin()
 	]
 };