First container working
This commit is contained in:
parent
9cb37db275
commit
7cffb316d9
4
.gitignore
vendored
4
.gitignore
vendored
@ -1,3 +1,7 @@
|
||||
node_modules/
|
||||
.cache/
|
||||
public
|
||||
secrets.json
|
||||
src/images/weather
|
||||
src/images/bg
|
||||
src/images/sleep.gif
|
||||
1
gatsby-browser.js
Normal file
1
gatsby-browser.js
Normal file
@ -0,0 +1 @@
|
||||
import "./src/styles/global.css"
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
296
package-lock.json
generated
296
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
138
src/components/WeatherAndTime.tsx
Normal file
138
src/components/WeatherAndTime.tsx
Normal file
@ -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 <ImportedIcon />
|
||||
}
|
||||
|
||||
const WeatherAndTimeContainer = ({ apiKey, coords }) => {
|
||||
const [date, setDate] = React.useState(new Date());
|
||||
const [weather, setWeather] = React.useState<WeatherInfo>({
|
||||
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 (<div className={`container ${styles.container}`}>
|
||||
<span id={styles.clock}>{time}</span>
|
||||
<span id={styles.date}>{dateString}</span>
|
||||
</div>);
|
||||
|
||||
return (<div className={`container ${styles.container}`}>
|
||||
<span id={styles.clock}>{time}</span>
|
||||
<span id={styles.date}>{dateString}</span>
|
||||
<div id={styles.weatherIcon}>{getWeatherIcon(weather.currently.icon)}</div>
|
||||
<span id={styles.temperature}>{weather.currently.temperature.toFixed(1)}°C</span>
|
||||
<span id={styles.currentWeatherInfos}>{weather.currently.summary}</span>
|
||||
<table id={styles.futureWeatherInfos}>
|
||||
<thead>
|
||||
<tr>
|
||||
{(() => {
|
||||
const rslt = []
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const day = new Date((weather.daily.data[i].time * 1000));
|
||||
rslt.push(<th colSpan={2} key={i}>{dowToString(day.getDay())}, {day.getDate()}. {day.getMonth() + 1}.</th>);
|
||||
}
|
||||
return rslt
|
||||
})()}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
{(() => {
|
||||
const rslt = []
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const style = i > 0 ? { borderLeft: "1px solid var(--iconColor)" } : {}
|
||||
rslt.push(<td key={`00${i}`} rowSpan={2} style={style}>{getWeatherIcon(weather.daily.data[i].icon)}</td>);
|
||||
rslt.push(<td key={`10${i}`} className={styles.futureWeatherHighTemp}>{weather.daily.data[i].temperatureHigh.toFixed(1)}°C</td>);
|
||||
}
|
||||
return rslt
|
||||
})()}
|
||||
</tr>
|
||||
<tr>
|
||||
{(() => {
|
||||
const rslt = []
|
||||
for (let i = 0; i < 4; i++) {
|
||||
rslt.push(<td key={i} className={styles.futureWeatherLowTemp}>{weather.daily.data[i].temperatureLow.toFixed(1)}°C</td>);
|
||||
}
|
||||
return rslt
|
||||
})()}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default WeatherAndTimeContainer;
|
||||
0
src/images/.gitkeep
Normal file
0
src/images/.gitkeep
Normal file
15
src/lib/interfaces.ts
Normal file
15
src/lib/interfaces.ts
Normal file
@ -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;
|
||||
}[]
|
||||
}
|
||||
}
|
||||
4
src/lib/types.d.ts
vendored
Normal file
4
src/lib/types.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
declare module '*.css' {
|
||||
const content: {[className: string]: string};
|
||||
export = content;
|
||||
}
|
||||
@ -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 (<main style={{ backgroundImage: `url(${images[currentBg].default})` }}>
|
||||
<WeatherAndTimeContainer apiKey={secrets.weather.apiKey} coords={secrets.weather.coords}/>
|
||||
</main>)
|
||||
}
|
||||
|
||||
export default IndexPage
|
||||
|
||||
73
src/styles/containers/WeatherAndTime.module.css
Normal file
73
src/styles/containers/WeatherAndTime.module.css
Normal file
@ -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;
|
||||
}
|
||||
57
src/styles/global.css
Normal file
57
src/styles/global.css
Normal file
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user