diff --git a/.drone.yml b/.drone.yml index e4988ea..5a248bc 100644 --- a/.drone.yml +++ b/.drone.yml @@ -6,4 +6,24 @@ steps: image: node commands: - npm install - - npm run buildProd \ No newline at end of file + - 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 diff --git a/.eslintrc.json b/.eslintrc.json index 4be2ddf..d112697 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -11,7 +11,8 @@ "plugin:react/recommended" ], "rules": { - "semi": "error" + "semi": "error", + "@typescript-eslint/explicit-function-return-type": ["off"] }, "parserOptions": { "ecmaFeatures": { diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..24a8e87 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +*.png filter=lfs diff=lfs merge=lfs -text diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..dbd1fc1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "files.exclude": { + "**/node_modules": true + } +} \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..7e092b0 --- /dev/null +++ b/.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": [] + } + ] +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index bc5993d..6aabf03 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 81e6667..c4068d0 100644 --- a/package.json +++ b/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", diff --git a/src/assets/bg.png b/src/assets/bg.png new file mode 100644 index 0000000..385eb0d Binary files /dev/null and b/src/assets/bg.png differ diff --git a/src/components/App.tsx b/src/components/App.tsx index 272bbd6..02d415b 100644 --- a/src/components/App.tsx +++ b/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
- - - +
+ + + + + + + + + + + + + + + + + + +
; } diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx new file mode 100644 index 0000000..c5c9aa9 --- /dev/null +++ b/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
+
+ {this.state.time} +
+
+ {this.state.date} +
+
; + } + +} + + +export default Clock; diff --git a/src/components/Quick.tsx b/src/components/Quick.tsx index f40a4bf..11be145 100644 --- a/src/components/Quick.tsx +++ b/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 { constructor(props){ super(props); @@ -14,7 +14,9 @@ class Quick extends React.Component { render(): JSX.Element { return
- {this.props.children} +
+ {this.props.children} +
; } diff --git a/src/components/QuickCategory.tsx b/src/components/QuickCategory.tsx new file mode 100644 index 0000000..d784a51 --- /dev/null +++ b/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 { + + constructor(props){ + super(props); + } + + render(): JSX.Element { + return
+
+ {this.props.name} +
+
+ {this.props.children} +
+
; + } + +} + +export default QuickCategory; diff --git a/src/components/QuickItem.tsx b/src/components/QuickItem.tsx index 08ec425..08400dd 100644 --- a/src/components/QuickItem.tsx +++ b/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 - }; - - constructor(props){ +interface Props { + name: string; + url: string; +} + +class QuickItem extends React.Component { + + constructor(props) { super(props); } + onClick() { + window.location.href = this.props.url; + } + render(): JSX.Element { - return
+ return
this.onClick()}> + {this.props.name}
; } diff --git a/src/index.html b/src/index.html index d24ff37..5c37933 100644 --- a/src/index.html +++ b/src/index.html @@ -1,10 +1,10 @@ - - - - - -
- + + + New Tab + + +
+ \ No newline at end of file diff --git a/src/style/clock.scss b/src/style/clock.scss new file mode 100644 index 0000000..985db27 --- /dev/null +++ b/src/style/clock.scss @@ -0,0 +1,11 @@ +.clock-component{ + text-align: center; + .time{ + font-size: 10em; + } + + .date { + font-size: 1em; + margin-top: -1em; + } +} \ No newline at end of file diff --git a/src/style/default.scss b/src/style/default.scss index 33a884d..d017e4b 100644 --- a/src/style/default.scss +++ b/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%; } \ No newline at end of file diff --git a/src/style/quick.scss b/src/style/quick.scss index 5872cd0..30d5eae 100644 --- a/src/style/quick.scss +++ b/src/style/quick.scss @@ -1,3 +1,12 @@ .quick-component { - background-color: green; -} \ No newline at end of file + width: 70%; + margin: auto; + + .container { + display: flex; + justify-content: space-evenly; + flex-direction: row; + flex-wrap: wrap; + } + +} diff --git a/src/style/quickCategory.scss b/src/style/quickCategory.scss new file mode 100644 index 0000000..ac57124 --- /dev/null +++ b/src/style/quickCategory.scss @@ -0,0 +1,12 @@ +.quickCategory-component{ + + .title{ + line-height: 3em; + font-weight: bold; + text-decoration: underline; + } + + .children{ + line-height: 2em; + } +} \ No newline at end of file diff --git a/src/style/quickItem.scss b/src/style/quickItem.scss index e69de29..435c64a 100644 --- a/src/style/quickItem.scss +++ b/src/style/quickItem.scss @@ -0,0 +1,9 @@ +.quickItem-component{ + color: rgba(#ffffff, 0.7); + cursor: pointer; + + &:hover { + color: rgba(#ffffff, 1); + } + +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 410cf9f..d217f9b 100644 --- a/webpack.config.js +++ b/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() ]