.drone.yml

@@ -7,3 +7,23 @@ steps:
   commands:
   - npm install
   - npm run buildProd
+  
+- name: gitea_release
+  image: plugins/gitea-release
+  settings:
+  api_key: GITEA_API_KEY
+  base_url: https://git.kapelle.org
+  files:
+  - dist/*
+  checksum:
+  - md5
+  - sha1
+  - sha256
+  - sha512
+  - adler32
+  - crc32
+when:
+  event: tag
+trigger:
+  branch:
+  - master

.eslintrc.json

@@ -11,7 +11,8 @@
 		"plugin:react/recommended"
 	],
 	"rules": {
-		"semi": "error"
+		"semi": "error",
+		"@typescript-eslint/explicit-function-return-type": ["off"]
 	},
 	"parserOptions": {
         "ecmaFeatures": {

.gitattributes

@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+	"files.exclude": {
+		"**/node_modules": true
+	}
+}

.vscode/tasks.json

@@ -0,0 +1,47 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "Dev server",
+			"command": "npm",
+			"type": "shell",
+			"args": [
+				"run",
+				"devServer"
+			],
+			"presentation": {
+				"reveal": "always"
+			},
+			"group": "none",
+			"problemMatcher": []
+		},
+		{
+			"label": "Build prod",
+			"command": "npm",
+			"type": "shell",
+			"args": [
+				"run",
+				"buildProd"
+			],
+			"presentation": {
+				"reveal": "always"
+			},
+			"group": "none",
+			"problemMatcher": []
+		},
+		{
+			"label": "Build dev",
+			"command": "npm",
+			"type": "shell",
+			"args": [
+				"run",
+				"build"
+			],
+			"presentation": {
+				"reveal": "always"
+			},
+			"group": "none",
+			"problemMatcher": []
+		}
+	]
+}

package-lock.json

@@ -2822,6 +2822,48 @@
         "flat-cache": "^2.0.1"
       }
     },
+    "file-loader": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz",
+      "integrity": "sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^2.6.5"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "2.6.6",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.6.tgz",
+          "integrity": "sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.12.0",
+            "ajv-keywords": "^3.4.1"
+          }
+        }
+      }
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",

package.json

@@ -4,7 +4,7 @@
 	"description": "",
 	"main": "src/index.ts",
 	"scripts": {
-		"devServer": "webpack-dev-server  --mode development --inline --hot --open",
+		"devServer": "webpack-dev-server  --mode development --open",
 		"build": "webpack --mode development",
 		"buildProd": "webpack --mode production"
 	},
@@ -19,6 +19,7 @@
 		"css-loader": "^3.5.2",
 		"eslint": "^6.8.0",
 		"eslint-plugin-react": "^7.19.0",
+		"file-loader": "^6.0.0",
 		"html-webpack-plugin": "^4.2.0",
 		"mini-css-extract-plugin": "^0.9.0",
 		"node-sass": "^4.13.1",

src/components/App.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 
 import Quick from "./Quick";
 import QuickItem from "./QuickItem";
+import QuickCategory from "./QuickCategory";
+import Clock from "./Clock";
 
 class App extends React.Component {
 	constructor(props) {
@@ -10,9 +12,26 @@ class App extends React.Component {
 
 	render(): JSX.Element {
 		return <div>
+			<div className="center-wrapper">
+				<Clock/>
 				<Quick>
-				<QuickItem/>
+					<QuickCategory name="Productivity">
+						<QuickItem name="Nextcloud" url="#"/>
+						<QuickItem name="Git" url="#"/>
+						<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="#"/>
+					</QuickCategory>
 				</Quick>
+			</div>
 		</div>;
 	}
 

src/components/Clock.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+
+import "../style/clock.scss";
+
+interface State {
+	time: string;
+	date: string;
+}
+
+class Clock extends React.Component<{}, State> {
+
+	private interval: NodeJS.Timeout;
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			time: "",
+			date: ""
+		};
+	}
+
+	updateTime() {
+		const now = new Date();
+
+		// Is there a native function for formatting time ??
+		this.setState({
+			time: `${this.zeroPad(now.getHours(), 2)}:${this.zeroPad(now.getMinutes(), 2)}`
+		});
+	}
+
+	updateDate() {
+		const now = new Date();
+		this.setState({
+			date: `${now.toDateString()}`
+		});
+	}
+
+	zeroPad(number: number, pad: number): string {
+		const length = number.toString().length;
+		if (length < pad) {
+			return "0".repeat(pad - length) + number.toString();
+		} else {
+			return number.toString();
+		}
+	}
+
+	startTimer() {
+		this.interval = setInterval(()=>{
+			this.updateTime();
+
+			// This will change only if the tab stays open after midnight. But still, lets cover that
+			this.updateDate();
+		},1000);
+	}
+
+	componentDidMount() {
+		this.updateTime();
+		this.updateDate();
+		this.startTimer();
+	}
+
+	componentWillUnmount(){
+		clearInterval(this.interval);
+	}
+
+	render(): JSX.Element {
+		return <div className="clock-component">
+			<div className="time">
+				{this.state.time}
+			</div>
+			<div className="date">
+				{this.state.date}
+			</div>
+		</div>;
+	}
+
+}
+
+
+export default Clock;

src/components/Quick.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
-import * as PropTypes from "prop-types";
 
 import "../style/quick.scss";
 
-class Quick extends React.Component {
-	static propTypes = {
-		children : PropTypes.element
-	};
+interface Props {
+	children: React.ReactNode;
+}
+
+class Quick extends React.Component<Props> {
 	
 	constructor(props){
 		super(props);
@@ -14,7 +14,9 @@ class Quick extends React.Component {
 
 	render(): JSX.Element {
 		return <div className="quick-component">
+			<div className="container">
 				{this.props.children}
+			</div>
 		</div>;
 	}
 

src/components/QuickCategory.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import "../style/quickCategory.scss";
+
+interface Props {
+	children: React.ReactNode;
+	name: string;
+}
+
+class QuickCategory extends React.Component<Props> {
+	
+	constructor(props){
+		super(props);
+	}
+
+	render(): JSX.Element {
+		return <div className="quickCategory-component">
+			<div className="title">
+				{this.props.name}
+			</div>
+			<div className="children">
+				{this.props.children}
+			</div>
+		</div>;
+	}
+
+}
+
+export default QuickCategory;

src/components/QuickItem.tsx

@@ -1,19 +1,25 @@
 import * as React from "react";
-import * as PropTypes from "prop-types";
 
 import "../style/quickItem.scss";
 
-class QuickItem extends React.Component {
-	static propTypes = {
-		url: PropTypes.string.isRequired
-	};
+interface Props {
+	name: string;
+	url: string;
+}
 
-	constructor(props){
+class QuickItem extends React.Component<Props> {
+
+	constructor(props) {
 		super(props);
 	}
 
+	onClick() {
+		window.location.href = this.props.url;
+	}
+
 	render(): JSX.Element {
-		return <div className="quickItem-component">
+		return <div className="quickItem-component" onClick={() => this.onClick()}>
+			{this.props.name}
 		</div>;
 	}
 

src/index.html

@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<meta charset="utf-8" />
-    <title></title>
+		<title>New Tab</title>
 	</head>
 	<body>
 		<div id="root"></div>

src/style/clock.scss

@@ -0,0 +1,11 @@
+.clock-component{
+	text-align: center;
+	.time{
+		font-size: 10em;
+	}
+
+	.date {
+		font-size: 1em;
+		margin-top: -1em;
+	}
+}

src/style/default.scss

@@ -1,3 +1,14 @@
 body {
-	background-color: darkgray;
+	background-image: url("./../assets/bg.png");
+	/* This still need some work*/
+	background-position: center center;
+
+	user-select: none;
+
+	color: white;
+	font-family: 'Raleway', sans-serif;
+}
+
+.center-wrapper{
+	margin-top: 15%;
 }

src/style/quick.scss

@@ -1,3 +1,12 @@
 .quick-component {
-	background-color: green;
+	width: 70%;
+	margin: auto;
+
+	.container {
+		display: flex;
+		justify-content: space-evenly;
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
 }

src/style/quickCategory.scss

@@ -0,0 +1,12 @@
+.quickCategory-component{
+
+	.title{
+		line-height: 3em;
+		font-weight: bold;
+		text-decoration: underline; 
+	}
+
+	.children{
+		line-height: 2em;
+	}
+}

src/style/quickItem.scss

@@ -0,0 +1,9 @@
+.quickItem-component{
+	color: rgba(#ffffff, 0.7);
+	cursor: pointer;
+
+	&:hover {
+		color: rgba(#ffffff, 1);
+	}
+
+}

webpack.config.js

@@ -1,8 +1,12 @@
+/* eslint-env node */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const webpack = require("webpack");
 const path = require("path");
 
+const DEVELOPMENT = process.env.NODE_ENV === "development";
+
 module.exports = {
 	context: path.join(__dirname, "src"),
 	resolve: {
@@ -13,13 +17,15 @@ module.exports = {
 		path: path.join(__dirname, "dist"),
 		filename: "bundle.js"
 	},
-	devtool: "source-map",
+	devtool: DEVELOPMENT ? "source-map" : false,
 	devServer: {
-		contentBase: "./dist", // Content base
-		inline: true, // Enable watch and live reload
+		contentBase: "./dist",
+		inline: true,
 		host: "localhost",
 		port: 8080,
-		stats: "errors-only"
+		stats: "errors-only",
+		liveReload: true,
+		watchContentBase: true
 	},
 	module: {
 		rules: [
@@ -49,7 +55,8 @@ module.exports = {
 		new HtmlWebpackPlugin({
 			filename: "index.html",
 			template: "index.html",
-			hash: true
+			hash: true,
+			minify: !DEVELOPMENT
 		}),
 		new MiniCssExtractPlugin()
 	]