Update styles and dependencies

wvanderp · Nov 20, 2023 · 08bb276 · 08bb276
1 parent bc128b5
commit 08bb276
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 53 deletions.
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 github-actions[bot]
+Copyright (c) 2020 wvanderp
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,18 +12,19 @@
     "node": ">=18.0.0"
   },
   "devDependencies": {
+    "@parcel/transformer-inline-string": "^2.10.3",
     "@parcel/transformer-sass": "^2.10.3",
     "@types/leaflet": "^1.9.8",
     "@types/lodash.chunk": "^4.2.9",
     "@types/lodash.set": "^4.3.9",
-    "@types/node": "^20.9.0",
+    "@types/node": "^20.9.2",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
-    "@types/react-leaflet": "^2.8.2",
+    "@types/react-leaflet": "^3.0.0",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
-    "eslint": "^8.53.0",
+    "eslint": "^8.54.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-nibble": "^8.1.0",
@@ -52,15 +53,15 @@
     "react-dom": "^18.2.0",
     "react-hooks-global-state": "2.1.0",
     "react-leaflet": "^4.2.1",
-    "react-router": "^6.18.0",
-    "react-router-dom": "^6.18.0",
+    "react-router": "^6.19.0",
+    "react-router-dom": "^6.19.0",
     "reactstrap": "^9.2.1",
     "youtube-dl-exec": "^2.4.17"
   },
   "scripts": {
     "app": "parcel serve src/index.html",
     "build": "parcel build --no-source-maps --dist-dir ./build src/index.html",
-    "lint": "npm-run-all -c -s tsc eslint" ,
+    "lint": "npm-run-all -c -s tsc eslint",
     "eslint": "eslint --ext ts,tsx,js src/ utils/",
     "tsc": "tsc --noEmit",
     "collect": "ts-node -P tsconfig.update.json --files utils/collect.ts",

diff --git a/src/components/parts/Menu.tsx b/src/components/parts/Menu.tsx
@@ -5,6 +5,8 @@ import {Link} from 'react-router-dom';
 import webcamIcon from 'url:../../static/icon.svg';
 // @ts-expect-error svg files are not compatible with typescript
 import attribution from 'url:../../static/attribution.svg';
+// @ts-expect-error overpassql files are not compatible with typescript
+import query from 'bundle-text:../../../overpassQuery.overpassql';
 
 import useGlobalState from '../../state';
 
@@ -25,8 +27,8 @@ function Menu() {
                     <div className="container-fluid">
                         <div className="row">
                             <div className="col-sm-8 col-md-7 py-4">
-                                <h4 className="text-white">About</h4>
-                                <p className="text-muted">
+                                <h4 className="white-text">About</h4>
+                                <p className="muted-text">
                                     This page displays all the webcams known to OpenStreetMap.
                                     {' '}
                                     Zoom in to see if your local town or city has a webcam.
@@ -58,17 +60,14 @@ function Menu() {
                             </div>
                             <div className="col-sm-4 offset-md-1 py-4">
                                 <h4 className="text-white">Links</h4>
-                                <ul className="list-unstyled">
+                                <ul className="list-unstyled muted-text">
                                     <li>
-                                        <a href="https://overpass-turbo.eu/s/15aA" className="text-white">
+                                        <a href={`https://overpass-turbo.eu/?Q=${encodeURI(query)}`}>
                                             The Overpass query used to create the data
                                         </a>
                                     </li>
-                                    <li className="text-muted">
-                                        <a
-                                            href="https://github.com/github-actions[bot]/WebcamMap"
-                                            className="text-white"
-                                        >
+                                    <li>
+                                        <a href="https://github.com/wvanderp/WebcamMap" >
                                             The source code is available on GitHub
                                         </a>
                                     </li>
@@ -80,7 +79,7 @@ function Menu() {
                                                     location.coordinates[0]}/${
                                                     location.coordinates[1]}`
                                             }
-                                            className="text-white"
+                                            className="muted-text"
                                         >
                                             <img
                                                 id={'osmAttribution'}
@@ -95,12 +94,12 @@ function Menu() {
                                 <h4 className="text-white">Sitemap</h4>
                                 <ul className="list-unstyled">
                                     <li>
-                                        <Link to="/webcams" className="text-white">
+                                        <Link to="/webcams" className="muted-text">
                                             All webcams
                                         </Link>
                                     </li>
                                     <li>
-                                        <Link to="/places" className="text-white">
+                                        <Link to="/places" className="muted-text">
                                             All places
                                         </Link>
                                     </li>

diff --git a/src/style/main.sass b/src/style/main.sass
@@ -13,3 +13,15 @@ html, body
 
 #app
   width: 100%
+
+.white-text
+  color: white
+
+.muted-text
+  color: #999
+
+  a
+    color: #7a7a7a
+
+  a:hover
+    color: #525151
diff --git a/utils/collect.ts b/utils/collect.ts
@@ -41,7 +41,7 @@ const nominatimCache = getNominatimCache();
 
 const getNominatimUrl = (
     lat: number, lon: number
-) => `https://nominatim.openstreetmap.org/reverse?lon=${lon}&lat=${lat}&format=json&extratags=1`;
+) => `https://nominatim.openstreetmap.org/reverse?lon=${lon}&lat=${lat}&format=json&extratags=1&accept-language=en`;
 
 // overpass url
 const overpassBase = 'https://overpass-api.de/api/interpreter?data=';