c0ntroller/infoscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First container working

Browse Source
This commit is contained in:
Daniel Kluge 2022-01-02 22:48:24 +01:00
parent 9cb37db275
commit 7cffb316d9
12 changed files with 614 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -1,3 +1,7 @@
node_modules/ node_modules/
.cache/ .cache/
public public
secrets.json
src/images/weather
src/images/bg
src/images/sleep.gif

1
gatsby-browser.js Normal file
View File

@ -0,0 +1 @@
import "./src/styles/global.css"

12
gatsby-config.js
View File

@ -3,5 +3,15 @@ module.exports = {
siteUrl: "https://www.yourdomain.tld", siteUrl: "https://www.yourdomain.tld",
title: "infoscreen_gatsby", 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
View File

@ -9,8 +9,12 @@
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"gatsby": "^4.4.0", "gatsby": "^4.4.0",
"gatsby-plugin-react-svg": "^3.1.0",
"react": "^17.0.1", "react": "^17.0.1",
"react-dom": "^17.0.1" "react-dom": "^17.0.1"
},
"devDependencies": {
"@types/webpack-env": "^1.16.3"
} }
}, },
"node_modules/@ardatan/aggregate-error": { "node_modules/@ardatan/aggregate-error": {
@ -2815,6 +2819,12 @@
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==" "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": { "node_modules/@types/websocket": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.2.tgz",
@ -5054,6 +5064,17 @@
"node": ">=8" "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": { "node_modules/css-declaration-sorter": {
"version": "6.1.3", "version": "6.1.3",
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz", "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", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=" "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": { "node_modules/cssesc": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -8207,6 +8236,17 @@
"gatsby": "^4.0.0-next" "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": { "node_modules/gatsby-plugin-typescript": {
"version": "4.4.0", "version": "4.4.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-4.4.0.tgz", "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" "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": { "node_modules/randombytes": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@ -13799,6 +13844,11 @@
"queue-microtask": "^1.2.2" "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": { "node_modules/rxjs": {
"version": "6.6.7", "version": "6.6.7",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", "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", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" "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": { "node_modules/scheduler": {
"version": "0.20.2", "version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@ -14890,6 +14945,56 @@
"node": ">=4" "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": { "node_modules/svgo": {
"version": "2.8.0", "version": "2.8.0",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", "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", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" "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": { "node_modules/trim": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
@ -16272,6 +16382,26 @@
"node": ">=8" "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": { "node_modules/xmlhttprequest-ssl": {
"version": "1.6.3", "version": "1.6.3",
"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.6.3.tgz", "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", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==" "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": { "@types/websocket": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.2.tgz",
@ -18812,12 +18948,14 @@
"acorn-import-assertions": { "acorn-import-assertions": {
"version": "1.8.0", "version": "1.8.0",
"resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", "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": { "acorn-jsx": {
"version": "5.3.2", "version": "5.3.2",
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==" "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
"requires": {}
}, },
"address": { "address": {
"version": "1.1.2", "version": "1.1.2",
@ -18847,7 +18985,8 @@
"ajv-keywords": { "ajv-keywords": {
"version": "3.5.2", "version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "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": { "alphanum-sort": {
"version": "1.0.2", "version": "1.0.2",
@ -20208,6 +20347,24 @@
"resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
"integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==" "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": { "css-declaration-sorter": {
"version": "6.1.3", "version": "6.1.3",
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz",
@ -20392,7 +20549,8 @@
"cssnano-utils": { "cssnano-utils": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz",
"integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==" "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==",
"requires": {}
}, },
"csso": { "csso": {
"version": "4.2.0", "version": "4.2.0",
@ -21407,7 +21565,8 @@
"eslint-plugin-react-hooks": { "eslint-plugin-react-hooks": {
"version": "4.3.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz", "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": { "eslint-scope": {
"version": "5.1.1", "version": "5.1.1",
@ -22661,6 +22820,14 @@
"lodash": "^4.17.21" "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": { "gatsby-plugin-typescript": {
"version": "4.4.0", "version": "4.4.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-4.4.0.tgz", "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-4.4.0.tgz",
@ -23114,12 +23281,14 @@
"graphql-type-json": { "graphql-type-json": {
"version": "0.3.2", "version": "0.3.2",
"resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz", "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": { "graphql-ws": {
"version": "4.9.0", "version": "4.9.0",
"resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz", "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": { "gzip-size": {
"version": "5.1.1", "version": "5.1.1",
@ -23336,7 +23505,8 @@
"icss-utils": { "icss-utils": {
"version": "5.1.0", "version": "5.1.0",
"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
"requires": {}
}, },
"ieee754": { "ieee754": {
"version": "1.2.1", "version": "1.2.1",
@ -23908,7 +24078,8 @@
"isomorphic-ws": { "isomorphic-ws": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", "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": { "iterall": {
"version": "1.3.0", "version": "1.3.0",
@ -24508,7 +24679,8 @@
"meros": { "meros": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz", "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz",
"integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==" "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==",
"requires": {}
}, },
"methods": { "methods": {
"version": "1.1.2", "version": "1.1.2",
@ -25483,27 +25655,32 @@
"postcss-discard-comments": { "postcss-discard-comments": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", "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": { "postcss-discard-duplicates": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", "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": { "postcss-discard-empty": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", "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": { "postcss-discard-overridden": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz", "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": { "postcss-flexbugs-fixes": {
"version": "5.0.2", "version": "5.0.2",
"resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", "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": { "postcss-loader": {
"version": "5.3.0", "version": "5.3.0",
@ -25590,7 +25767,8 @@
"postcss-modules-extract-imports": { "postcss-modules-extract-imports": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", "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": { "postcss-modules-local-by-default": {
"version": "4.0.0", "version": "4.0.0",
@ -25621,7 +25799,8 @@
"postcss-normalize-charset": { "postcss-normalize-charset": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", "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": { "postcss-normalize-display-values": {
"version": "5.0.1", "version": "5.0.1",
@ -25921,6 +26100,11 @@
"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==" "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": { "randombytes": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@ -26268,7 +26452,8 @@
"redux-thunk": { "redux-thunk": {
"version": "2.4.1", "version": "2.4.1",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", "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": { "regenerate": {
"version": "1.4.2", "version": "1.4.2",
@ -26668,6 +26853,11 @@
"queue-microtask": "^1.2.2" "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": { "rxjs": {
"version": "6.6.7", "version": "6.6.7",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", "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", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" "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": { "scheduler": {
"version": "0.20.2", "version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@ -27510,6 +27705,46 @@
"has-flag": "^3.0.0" "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": { "svgo": {
"version": "2.8.0", "version": "2.8.0",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", "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", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=" "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
}, },
"traverse": {
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
"integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
},
"trim": { "trim": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
@ -28502,13 +28742,31 @@
"ws": { "ws": {
"version": "7.4.5", "version": "7.4.5",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
"integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==" "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
"requires": {}
}, },
"xdg-basedir": { "xdg-basedir": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz", "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
"integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==" "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": { "xmlhttprequest-ssl": {
"version": "1.6.3", "version": "1.6.3",
"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.6.3.tgz", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.6.3.tgz",

4
package.json
View File

@ -16,7 +16,11 @@
}, },
"dependencies": { "dependencies": {
"gatsby": "^4.4.0", "gatsby": "^4.4.0",
"gatsby-plugin-react-svg": "^3.1.0",
"react": "^17.0.1", "react": "^17.0.1",
"react-dom": "^17.0.1" "react-dom": "^17.0.1"
},
"devDependencies": {
"@types/webpack-env": "^1.16.3"
} }
} }

138
src/components/WeatherAndTime.tsx Normal file
View 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
View File

15
src/lib/interfaces.ts Normal file
View 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
View File

@ -0,0 +1,4 @@
declare module '*.css' {
const content: {[className: string]: string};
export = content;
}

31
src/pages/index.tsx
View File

@ -1,7 +1,36 @@
import * as React from "react" 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 = () => { 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 export default IndexPage

73
src/styles/containers/WeatherAndTime.module.css Normal file
View 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
View 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;
}