From 7cffb316d9e407608de9cac03b5f4b0a2968b741 Mon Sep 17 00:00:00 2001 From: Daniel Kluge Date: Sun, 2 Jan 2022 22:48:24 +0100 Subject: [PATCH] First container working --- .gitignore | 4 + gatsby-browser.js | 1 + gatsby-config.js | 12 +- package-lock.json | 296 ++++++++++++++++-- package.json | 4 + src/components/WeatherAndTime.tsx | 138 ++++++++ src/images/.gitkeep | 0 src/lib/interfaces.ts | 15 + src/lib/types.d.ts | 4 + src/pages/index.tsx | 31 +- .../containers/WeatherAndTime.module.css | 73 +++++ src/styles/global.css | 57 ++++ 12 files changed, 614 insertions(+), 21 deletions(-) create mode 100644 gatsby-browser.js create mode 100644 src/components/WeatherAndTime.tsx create mode 100644 src/images/.gitkeep create mode 100644 src/lib/interfaces.ts create mode 100644 src/lib/types.d.ts create mode 100644 src/styles/containers/WeatherAndTime.module.css create mode 100644 src/styles/global.css diff --git a/.gitignore b/.gitignore index 557f97c..e38f8cd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,7 @@ node_modules/ .cache/ public +secrets.json +src/images/weather +src/images/bg +src/images/sleep.gif \ No newline at end of file diff --git a/gatsby-browser.js b/gatsby-browser.js new file mode 100644 index 0000000..6701837 --- /dev/null +++ b/gatsby-browser.js @@ -0,0 +1 @@ +import "./src/styles/global.css" \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js index e3eea33..4f2a67f 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -3,5 +3,15 @@ module.exports = { siteUrl: "https://www.yourdomain.tld", title: "infoscreen_gatsby", }, - plugins: ["gatsby-plugin-typescript"], + plugins: [ + "gatsby-plugin-typescript", + { + resolve: "gatsby-plugin-react-svg", + options: { + rule: { + include: /weather/ // See below to configure properly + } + } + } + ], }; diff --git a/package-lock.json b/package-lock.json index 6b74512..08a0ea7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,12 @@ "version": "1.0.0", "dependencies": { "gatsby": "^4.4.0", + "gatsby-plugin-react-svg": "^3.1.0", "react": "^17.0.1", "react-dom": "^17.0.1" + }, + "devDependencies": { + "@types/webpack-env": "^1.16.3" } }, "node_modules/@ardatan/aggregate-error": { @@ -2815,6 +2819,12 @@ "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==" }, + "node_modules/@types/webpack-env": { + "version": "1.16.3", + "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.16.3.tgz", + "integrity": "sha512-9gtOPPkfyNoEqCQgx4qJKkuNm/x0R2hKR7fdl7zvTJyHnIisuE/LfvXOsYWL0o3qq6uiBnKZNNNzi3l0y/X+xw==", + "dev": true + }, "node_modules/@types/websocket": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.2.tgz", @@ -5054,6 +5064,17 @@ "node": ">=8" } }, + "node_modules/css": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", + "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "dependencies": { + "inherits": "^2.0.3", + "source-map": "^0.6.1", + "source-map-resolve": "^0.5.2", + "urix": "^0.1.0" + } + }, "node_modules/css-declaration-sorter": { "version": "6.1.3", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz", @@ -5247,6 +5268,14 @@ "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=" }, + "node_modules/css/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -8207,6 +8236,17 @@ "gatsby": "^4.0.0-next" } }, + "node_modules/gatsby-plugin-react-svg": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/gatsby-plugin-react-svg/-/gatsby-plugin-react-svg-3.1.0.tgz", + "integrity": "sha512-OiEeTRQ+tzf7YrOnj87uMD6AGRl7BKxogAp1CUDtfiP+WGWZ99S5PeDLHJW5ExxGH1NVzWlNgtJjNmJhDksPhg==", + "dependencies": { + "svg-react-loader": "^0.4.6" + }, + "peerDependencies": { + "gatsby": "^4.0.0 || ^3.0.0 || ^2.0.0" + } + }, "node_modules/gatsby-plugin-typescript": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-4.4.0.tgz", @@ -12807,6 +12847,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/ramda": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.21.0.tgz", + "integrity": "sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=" + }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -13799,6 +13844,11 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/rx": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz", + "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=" + }, "node_modules/rxjs": { "version": "6.6.7", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", @@ -13828,6 +13878,11 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "node_modules/sax": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", + "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==" + }, "node_modules/scheduler": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", @@ -14890,6 +14945,56 @@ "node": ">=4" } }, + "node_modules/svg-react-loader": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/svg-react-loader/-/svg-react-loader-0.4.6.tgz", + "integrity": "sha512-HVEypjWQsQuJdBIPzXGxpmQsQts7QwfQuYgK1rah6BVCMoLNSCh/ESKVNd7/tHq8DkWYHHTyaUMDA1FjqZYrgA==", + "dependencies": { + "css": "2.2.4", + "loader-utils": "1.1.0", + "ramda": "0.21.0", + "rx": "4.1.0", + "traverse": "0.6.6", + "xml2js": "0.4.17" + } + }, + "node_modules/svg-react-loader/node_modules/big.js": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz", + "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==", + "engines": { + "node": "*" + } + }, + "node_modules/svg-react-loader/node_modules/emojis-list": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", + "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/svg-react-loader/node_modules/json5": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz", + "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=", + "bin": { + "json5": "lib/cli.js" + } + }, + "node_modules/svg-react-loader/node_modules/loader-utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz", + "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=", + "dependencies": { + "big.js": "^3.1.3", + "emojis-list": "^2.0.0", + "json5": "^0.5.0" + }, + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/svgo": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", @@ -15257,6 +15362,11 @@ "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" }, + "node_modules/traverse": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz", + "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=" + }, "node_modules/trim": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", @@ -16272,6 +16382,26 @@ "node": ">=8" } }, + "node_modules/xml2js": { + "version": "0.4.17", + "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.17.tgz", + "integrity": "sha1-F76T6q4/O3eTWceVtBlwWogX6Gg=", + "dependencies": { + "sax": ">=0.6.0", + "xmlbuilder": "^4.1.0" + } + }, + "node_modules/xmlbuilder": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-4.2.1.tgz", + "integrity": "sha1-qlijBBoGb5DqoWwvU4n/GfP0YaU=", + "dependencies": { + "lodash": "^4.0.0" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/xmlhttprequest-ssl": { "version": "1.6.3", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.6.3.tgz", @@ -18509,6 +18639,12 @@ "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==" }, + "@types/webpack-env": { + "version": "1.16.3", + "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.16.3.tgz", + "integrity": "sha512-9gtOPPkfyNoEqCQgx4qJKkuNm/x0R2hKR7fdl7zvTJyHnIisuE/LfvXOsYWL0o3qq6uiBnKZNNNzi3l0y/X+xw==", + "dev": true + }, "@types/websocket": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.2.tgz", @@ -18812,12 +18948,14 @@ "acorn-import-assertions": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", - "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==" + "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", + "requires": {} }, "acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", - "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==" + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "requires": {} }, "address": { "version": "1.1.2", @@ -18847,7 +18985,8 @@ "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "requires": {} }, "alphanum-sort": { "version": "1.0.2", @@ -20208,6 +20347,24 @@ "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==" }, + "css": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", + "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "requires": { + "inherits": "^2.0.3", + "source-map": "^0.6.1", + "source-map-resolve": "^0.5.2", + "urix": "^0.1.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + } + } + }, "css-declaration-sorter": { "version": "6.1.3", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz", @@ -20392,7 +20549,8 @@ "cssnano-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz", - "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==" + "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==", + "requires": {} }, "csso": { "version": "4.2.0", @@ -21407,7 +21565,8 @@ "eslint-plugin-react-hooks": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz", - "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==" + "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==", + "requires": {} }, "eslint-scope": { "version": "5.1.1", @@ -22661,6 +22820,14 @@ "lodash": "^4.17.21" } }, + "gatsby-plugin-react-svg": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/gatsby-plugin-react-svg/-/gatsby-plugin-react-svg-3.1.0.tgz", + "integrity": "sha512-OiEeTRQ+tzf7YrOnj87uMD6AGRl7BKxogAp1CUDtfiP+WGWZ99S5PeDLHJW5ExxGH1NVzWlNgtJjNmJhDksPhg==", + "requires": { + "svg-react-loader": "^0.4.6" + } + }, "gatsby-plugin-typescript": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-4.4.0.tgz", @@ -23114,12 +23281,14 @@ "graphql-type-json": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz", - "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==" + "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==", + "requires": {} }, "graphql-ws": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz", - "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==" + "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==", + "requires": {} }, "gzip-size": { "version": "5.1.1", @@ -23336,7 +23505,8 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "requires": {} }, "ieee754": { "version": "1.2.1", @@ -23908,7 +24078,8 @@ "isomorphic-ws": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", - "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==" + "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==", + "requires": {} }, "iterall": { "version": "1.3.0", @@ -24508,7 +24679,8 @@ "meros": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz", - "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==" + "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==", + "requires": {} }, "methods": { "version": "1.1.2", @@ -25483,27 +25655,32 @@ "postcss-discard-comments": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==" + "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", + "requires": {} }, "postcss-discard-duplicates": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==" + "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", + "requires": {} }, "postcss-discard-empty": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==" + "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", + "requires": {} }, "postcss-discard-overridden": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz", - "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==" + "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==", + "requires": {} }, "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", + "requires": {} }, "postcss-loader": { "version": "5.3.0", @@ -25590,7 +25767,8 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -25621,7 +25799,8 @@ "postcss-normalize-charset": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==" + "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", + "requires": {} }, "postcss-normalize-display-values": { "version": "5.0.1", @@ -25921,6 +26100,11 @@ "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==" }, + "ramda": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.21.0.tgz", + "integrity": "sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=" + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -26268,7 +26452,8 @@ "redux-thunk": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", - "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==" + "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==", + "requires": {} }, "regenerate": { "version": "1.4.2", @@ -26668,6 +26853,11 @@ "queue-microtask": "^1.2.2" } }, + "rx": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz", + "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=" + }, "rxjs": { "version": "6.6.7", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", @@ -26694,6 +26884,11 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "sax": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", + "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==" + }, "scheduler": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", @@ -27510,6 +27705,46 @@ "has-flag": "^3.0.0" } }, + "svg-react-loader": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/svg-react-loader/-/svg-react-loader-0.4.6.tgz", + "integrity": "sha512-HVEypjWQsQuJdBIPzXGxpmQsQts7QwfQuYgK1rah6BVCMoLNSCh/ESKVNd7/tHq8DkWYHHTyaUMDA1FjqZYrgA==", + "requires": { + "css": "2.2.4", + "loader-utils": "1.1.0", + "ramda": "0.21.0", + "rx": "4.1.0", + "traverse": "0.6.6", + "xml2js": "0.4.17" + }, + "dependencies": { + "big.js": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz", + "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==" + }, + "emojis-list": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", + "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" + }, + "json5": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz", + "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=" + }, + "loader-utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz", + "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=", + "requires": { + "big.js": "^3.1.3", + "emojis-list": "^2.0.0", + "json5": "^0.5.0" + } + } + } + }, "svgo": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", @@ -27766,6 +28001,11 @@ "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" }, + "traverse": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz", + "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=" + }, "trim": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", @@ -28502,13 +28742,31 @@ "ws": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz", - "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==" + "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==", + "requires": {} }, "xdg-basedir": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz", "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==" }, + "xml2js": { + "version": "0.4.17", + "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.17.tgz", + "integrity": "sha1-F76T6q4/O3eTWceVtBlwWogX6Gg=", + "requires": { + "sax": ">=0.6.0", + "xmlbuilder": "^4.1.0" + } + }, + "xmlbuilder": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-4.2.1.tgz", + "integrity": "sha1-qlijBBoGb5DqoWwvU4n/GfP0YaU=", + "requires": { + "lodash": "^4.0.0" + } + }, "xmlhttprequest-ssl": { "version": "1.6.3", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.6.3.tgz", diff --git a/package.json b/package.json index ff51914..4e02f4c 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,11 @@ }, "dependencies": { "gatsby": "^4.4.0", + "gatsby-plugin-react-svg": "^3.1.0", "react": "^17.0.1", "react-dom": "^17.0.1" + }, + "devDependencies": { + "@types/webpack-env": "^1.16.3" } } diff --git a/src/components/WeatherAndTime.tsx b/src/components/WeatherAndTime.tsx new file mode 100644 index 0000000..35f8f2b --- /dev/null +++ b/src/components/WeatherAndTime.tsx @@ -0,0 +1,138 @@ +import * as React from "react" +import type { WeatherInfo } from "../lib/interfaces"; +import * as styles from "../styles/containers/WeatherAndTime.module.css"; + +const WEATHER_REFRESH_INTERVAL = 15 * 60 * 1000; + +function dowToString(dow: number) { + switch (dow) { + case 0: return "Sonntag"; + case 1: return "Montag"; + case 2: return "Dienstag"; + case 3: return "Mittwoch"; + case 4: return "Donnerstag"; + case 5: return "Freitag"; + case 6: return "Samstag"; + default: return; + } +} + +function monthToString(month: number) { + switch (month) { + case 0: return "Januar"; + case 1: return "Februar"; + case 2: return "März"; + case 3: return "April"; + case 4: return "Mail"; + case 5: return "Juni"; + case 6: return "Juli"; + case 7: return "August"; + case 8: return "September"; + case 9: return "Oktober"; + case 10: return "November"; + case 11: return "Dezember"; + default: return; + } +} + +function getWeatherIcon(icon: string) { + const ImportedIcon = require(`../images/weather/${icon}.svg`); + return +} + +const WeatherAndTimeContainer = ({ apiKey, coords }) => { + const [date, setDate] = React.useState(new Date()); + const [weather, setWeather] = React.useState({ + currently: { + icon: "clear-day", + temperature: 0, + summary: "No data loaded" + }, + daily: { + data: [ + { icon: "clear-day", time: 0, temperatureHigh: 0, temperatureLow: 0 }, + { icon: "clear-day", time: 0, temperatureHigh: 0, temperatureLow: 0 }, + { icon: "clear-day", time: 0, temperatureHigh: 0, temperatureLow: 0 }, + { icon: "clear-day", time: 0, temperatureHigh: 0, temperatureLow: 0 }, + ] + } + }); + + React.useEffect(() => { + const dateInterval = setInterval(() => { + const date = new Date() + if (date.getHours() < 7) document.documentElement.setAttribute("data-theme", "night"); + else document.documentElement.setAttribute("data-theme", "day"); + setDate(date); + }, 1000); + + pullWeather() + //TODO + //const weatherInterval = setInterval(pullWeather, WEATHER_REFRESH_INTERVAL); + + return () => { + clearInterval(dateInterval); + //clearInterval(weatherInterval); + } + }, []) + + const pullWeather = () => { + fetch(`https://api.pirateweather.net/forecast/${apiKey}/${coords}?exclude=minutely,hourly&lang=de&units=ca`) + .then(resp => resp.json()) + .then(setWeather); + } + + const time = `${date.getHours()}:${date.getMinutes().toString().padStart(2, "0")}`; + const dateString = `${dowToString(date.getDay())}, der ${date.getDate()}. ${monthToString(date.getMonth())} ${date.getFullYear()}`; + + if (weather.currently.summary === "No data loaded") return (
+ {time} + {dateString} +
); + + return (
+ {time} + {dateString} +
{getWeatherIcon(weather.currently.icon)}
+ {weather.currently.temperature.toFixed(1)}°C + {weather.currently.summary} + + + + {(() => { + const rslt = [] + for (let i = 0; i < 4; i++) { + const day = new Date((weather.daily.data[i].time * 1000)); + rslt.push(); + } + return rslt + })()} + + + + + {(() => { + const rslt = [] + for (let i = 0; i < 4; i++) { + const style = i > 0 ? { borderLeft: "1px solid var(--iconColor)" } : {} + rslt.push(); + rslt.push(); + } + return rslt + })()} + + + {(() => { + const rslt = [] + for (let i = 0; i < 4; i++) { + rslt.push(); + } + return rslt + })()} + + +
{dowToString(day.getDay())}, {day.getDate()}. {day.getMonth() + 1}.
{getWeatherIcon(weather.daily.data[i].icon)}{weather.daily.data[i].temperatureHigh.toFixed(1)}°C
{weather.daily.data[i].temperatureLow.toFixed(1)}°C
+
) +} + +export default WeatherAndTimeContainer; \ No newline at end of file diff --git a/src/images/.gitkeep b/src/images/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts new file mode 100644 index 0000000..3bdf8db --- /dev/null +++ b/src/lib/interfaces.ts @@ -0,0 +1,15 @@ +export interface WeatherInfo { + currently: { + icon: string; + temperature: number; + summary: string; + }, + daily: { + data: { + time: number; // Epoch without ms + icon: string; + temperatureHigh: number; + temperatureLow: number; + }[] + } +} \ No newline at end of file diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts new file mode 100644 index 0000000..a3f3afb --- /dev/null +++ b/src/lib/types.d.ts @@ -0,0 +1,4 @@ +declare module '*.css' { + const content: {[className: string]: string}; + export = content; + } \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d016c0d..d48bcce 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,7 +1,36 @@ import * as React from "react" +import secrets from "../../secrets.json" +import WeatherAndTimeContainer from "../components/WeatherAndTime" + +function importAll(r) { + return r.keys().map(r); +} + +const images = importAll(require.context('../images/bg/', false, /\.(png|jpe?g|svg)$/)); const IndexPage = () => { - return (<>Hello World) + const [currentBg, setCurrentBg] = React.useState(0); + + React.useEffect(() => { + // This effect is executed onload + updateBackground() + const interval = setInterval(() => { + updateBackground(); + }, 30 * 60 * 1000); + + // Return will be executed onunload + return () => clearInterval(interval); + }, []) + + const updateBackground = () => { + let nextBg = Math.floor(Math.random() * images.length) + while (nextBg == currentBg) nextBg = Math.floor(Math.random() * images.length) + setCurrentBg(nextBg) + } + + return (
+ +
) } export default IndexPage diff --git a/src/styles/containers/WeatherAndTime.module.css b/src/styles/containers/WeatherAndTime.module.css new file mode 100644 index 0000000..b14b645 --- /dev/null +++ b/src/styles/containers/WeatherAndTime.module.css @@ -0,0 +1,73 @@ +.container { + grid-area: date-weather; + display: grid; + grid-template-areas: + "time currentIcon currentTemp" + "date currentCondition currentCondition" + "forecast forecast forecast"; + grid-template-columns: auto min-content min-content; + grid-template-rows: min-content min-content auto; + column-gap: 1vw; + row-gap: 0; + align-items: stretch; + justify-content: stretch; + padding: 10px; + text-align: center; +} + +#clock { + grid-area: time; + font-size: 14vh; +} + +#weatherIcon { + grid-area: currentIcon; + height: 15vh; +} + +.container svg { + height: 100%; + fill: var(--iconColor); +} + +#temperature { + grid-area: currentTemp; + font-size: 12vh; +} + +#date { + grid-area: date; + font-size: 2.5vh; + padding-bottom: 10px; +} + +#currentWeatherInfos { + grid-area: currentCondition; + font-size: 2.5vh; + padding-bottom: 10px; +} + +#futureWeatherInfos { + border-top: 1px solid var(--iconColor); + grid-area: forecast; + height: 100%; + width: 100%; +} + +#futureWeatherInfos th { + text-align: center; + font-size: 3vh; + font-weight: bold; +} + +#futureWeatherInfos .futureWeatherHighTemp, +#futureWeatherInfos .futureWeatherLowTemp { + text-align: right; + padding-right: 10px; + vertical-align: middle; + font-size: 3.5vh; +} + +#futureWeatherInfos td { + padding-right: 5px; +} diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..1776dd4 --- /dev/null +++ b/src/styles/global.css @@ -0,0 +1,57 @@ +* { + box-sizing: border-box; +} + +:root, :root[data-theme="day"] { + --containerBg: rgba(255,255,255,0.5); + --textColor: #000000; + color: #000000; + --iconColor: #000000; +} +:root[data-theme="night"] { + --containerBg: rgba(20,20,20,0.8); + --textColor: #b0b0b0; + color: #b0b0b0; + --iconColor: #b0b0b0; +} + +body, main { + background: #000; + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} +main { + display: grid; + grid-template-areas: + "date-weather date-weather calendar" + "date-weather date-weather calendar" + "map dvb news" + "map spotify news"; + grid-template-columns: 28vw auto 28vw; + grid-template-rows: 18vh 19vh 19vh 19vh; + column-gap: 3vw; + row-gap: 5vh; + padding: 5vh 3vw; + align-items: stretch; + justify-content: stretch; + max-width: 100%; + font-family: Arial; + transition: background-image 1s linear; + background-repeat: no-repeat; + background-size: cover; + background-position: center center; +} +:root[data-theme="night"] main { + background-image: url("../images/bg/3.jpg") !important; +} + +.container { + box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); + border-radius: 10px; + background: var(--containerBg); + backdrop-filter: blur(5px); + padding:10px; + overflow:hidden; +} \ No newline at end of file