# Dyomedea ## License GPL 3.0. ## Branches * master: dev (and only active) branch (started as a React project, now using solidjs) * multi-layers: (deprecated) attempt to create a native React map components. Went pretty far but there was still so many things to implement that I switched to: * openlayers: (deprecated) an attempt to use React with Openlayers. Wasn't that easy because Openlayers is heavily based on the DOM while React uses a "pseudo-dom". That has been one of the reasons why I switched (again) to: * solid: (merged into master and deprecated) a SolidJS / Openlayers implementation that has replaced the master branch on Feb 5th, 2023. ## Hiking app. ## Documentation ```bash vdv@nuc:~/projects/tea/dyomedea/dyomedea$ npx typedoc ./src/serviceWorkerRegistration.ts:21:0 - warning Config is referenced by serviceWorkerRegistration.register.register.config but not included in the documentation. 21 type Config = { Documentation generated at ./doc vdv@nuc:~/projects/tea/dyomedea/dyomedea$ ``` ## Components TBD ## Data formats There is a number of data formats more or less specific to geography and hiking, such as: * [GPX 1.1 Schema Documentation](https://www.topografix.com/GPX/1/1/) * [GeoJSON](https://geojson.org/) * [Keyhole Markup Language - Wikipedia](https://en.m.wikipedia.org/wiki/Keyhole_Markup_Language) * [Elements — OpenStreetMap Wiki](https://wiki.openstreetmap.org/wiki/Elements) * [ - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg) SVG is very generic and is used to draw 2D figures in HTML applications and doesn't care about geography. KML, GeoJSON and OSM elements have been designed to represent generic geographical points and shapes. GPX is more specific, having been designed to represent routes and tracks and its semantics are directly useable in our application. The structure of our components and indexes can therefore follow the GPX format. OSM elements is interesting to extract information from the OSM DB, either by querying their API or by downloading portions of the database. GeoJSON might be of interest as an intermediate format since a number of JS libraries have been developed to perform queries or draw GeoJSON data as SVG. KML might be considered as an import format. And SVG, of course will be used to render tracks and routes on a map since its elements are directly supported by React. ## Notes to self ### Patching node_modules This can be done by updating their sources in the node_modules directory and using the patch-package npm CLI command (thanks [stackoverflow](https://stackoverflow.com/a/13302095/1402881)) : ``` $npx patch-package localized-strings ``` However, it takes ages before `ionic serve` takes these modifications into account. ### Visual Code snippets * [Create Your Own VSCode Snippets - DEV Community 👩‍💻👨‍💻](https://dev.to/brianmmdev/create-your-own-vscode-snippets-33c7) * [vscode settings - How can I create templates for file extensions in Visual Studio Code? - Stack Overflow](https://stackoverflow.com/questions/50571130/how-can-i-create-templates-for-file-extensions-in-visual-studio-code) ### Useful commands ```bash vdv@nuc:~/projects/tea/dyomedea/dyomedea$ adb --version Android Debug Bridge version 1.0.41 Version 33.0.3-8952118 Installed as /homext/Android/Sdk/platform-tools/adb $ ionic capacitor run --target RFCN20NEZ4R android $ ionic serve --no-open $ npm test $ npx typedoc $ npx trapeze run trapeze.config.yaml vdv@nuc:~/projects/tea/dyomedea/dyomedea$ echo $ANDROID_SDK_ROOT /home/vdv/Android/Sdk ``` ### To (re)generate android/ ```bash $ rm capacitor.config.ts $ rm -rf android $ npx cap init dyomedea com.dyomedea.dyomedea # assets in dist/ $ npx cap add android $ cp AndroidManifest.xml ./android/app/src/main/AndroidManifest.xml $ npx cap run --target RFCN20NEZ4R android ``` ### To generate style filters ```bash vdv@nuc:~/projects/tea/dyomedea/dyomedea$ esrun helper.ts { caller: 'overlay-definitions', legacyOverlayDefinitions: { amenity: { bar: [Object], fast_food: [Object], food_court: [Object], pub: [Object], restaurant: [Object], cafe: [Object], atm: [Object], bank: [Object], doctors: [Object], hospital: [Object], pharmacy: [Object], police: [Object], fire_station: [Object], drinking_water: [Object], water_point: [Object], waste_basket: [Object], waste_disposal: [Object], vending_machine: [Object] }, shop: { bakery: [Object], butcher: [Object], cheese: [Object], chocolate: [Object], convenience: [Object], dairy: [Object], farm: [Object], greengrocer: [Object], health_food: [Object], pasta: [Object], pastry: [Object], seafood: [Object], water: [Object], department_store: [Object], general: [Object], mall: [Object], supermarket: [Object], wholesale: [Object], outdoor: [Object], laundry: [Object] }, tourism: { hotel: [Object], alpine_hut: [Object], apartment: [Object], camp_site: [Object], chalet: [Object], guest_house: [Object], hostel: [Object], motel: [Object], wilderness_hut: [Object], viewpoint: [Object] }, waterway: { waterfall: [Object] }, natural: { peak: [Object], cave_entrance: [Object], volcano: [Object], arch: [Object], arete: [Object], fumarole: [Object], rock: [Object], saddle: [Object], sinkhole: [Object], stone: [Object], glacier: [Object], spring: [Object], hot_spring: [Object], geyser: [Object] } }, _flat: [ { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] }, { hiking: [Object] } ], overlayCategories: { hiking: Set(9) { 'drinking', 'eating', 'money', 'dayToDay', 'health', 'security', 'material', 'sleeping', 'naturalSites' } } } { legacyOverlayDefinitions: { amenity: { bar: [Object], fast_food: [Object], food_court: [Object], pub: [Object], restaurant: [Object], cafe: [Object], atm: [Object], bank: [Object], doctors: [Object], hospital: [Object], pharmacy: [Object], police: [Object], fire_station: [Object], drinking_water: [Object], water_point: [Object], waste_basket: [Object], waste_disposal: [Object], vending_machine: [Object] }, shop: { bakery: [Object], butcher: [Object], cheese: [Object], chocolate: [Object], convenience: [Object], dairy: [Object], farm: [Object], greengrocer: [Object], health_food: [Object], pasta: [Object], pastry: [Object], seafood: [Object], water: [Object], department_store: [Object], general: [Object], mall: [Object], supermarket: [Object], wholesale: [Object], outdoor: [Object], laundry: [Object] }, tourism: { hotel: [Object], alpine_hut: [Object], apartment: [Object], camp_site: [Object], chalet: [Object], guest_house: [Object], hostel: [Object], motel: [Object], wilderness_hut: [Object], viewpoint: [Object] }, waterway: { waterfall: [Object] }, natural: { peak: [Object], cave_entrance: [Object], volcano: [Object], arch: [Object], arete: [Object], fumarole: [Object], rock: [Object], saddle: [Object], sinkhole: [Object], stone: [Object], glacier: [Object], spring: [Object], hot_spring: [Object], geyser: [Object] } }, filters: [ 'any', [ 'in', 'amenity', 'bar', 'fast_food', 'food_court', 'pub', 'restaurant', 'cafe', 'atm', 'bank', 'doctors', 'hospital', 'pharmacy', 'police', 'fire_station', 'drinking_water', 'water_point', 'waste_basket', 'waste_disposal', 'vending_machine' ], [ 'in', 'shop', 'bakery', 'butcher', 'cheese', 'chocolate', 'convenience', 'dairy', 'farm', 'greengrocer', 'health_food', 'pasta', 'pastry', 'seafood', 'water', 'department_store', 'general', 'mall', 'supermarket', 'wholesale', 'outdoor', 'laundry' ], [ 'in', 'tourism', 'hotel', 'alpine_hut', 'apartment', 'camp_site', 'chalet', 'guest_house', 'hostel', 'motel', 'wilderness_hut', 'viewpoint' ], [ 'in', 'waterway', 'waterfall' ], [ 'in', 'natural', 'peak', 'cave_entrance', 'volcano', 'arch', 'arete', 'fumarole', 'rock', 'saddle', 'sinkhole', 'stone', 'glacier', 'spring', 'hot_spring', 'geyser' ] ], json: '["any",["in","amenity","bar","fast_food","food_court","pub","restaurant","cafe","atm","bank","doctors","hospital","pharmacy","police","fire_station","drinking_water","water_point","waste_basket","waste_disposal","vending_machine"],["in","shop","bakery","butcher","cheese","chocolate","convenience","dairy","farm","greengrocer","health_food","pasta","pastry","seafood","water","department_store","general","mall","supermarket","wholesale","outdoor","laundry"],["in","tourism","hotel","alpine_hut","apartment","camp_site","chalet","guest_house","hostel","motel","wilderness_hut","viewpoint"],["in","waterway","waterfall"],["in","natural","peak","cave_entrance","volcano","arch","arete","fumarole","rock","saddle","sinkhole","stone","glacier","spring","hot_spring","geyser"]]' } ``` (Just copy the filters as json) Requires esrun (`sudo npm i -g @digitak/esrun`) ### Patches * suid: https://github.com/swordev/suid/issues/89 ### NPM updates: use npm-check-updates ! ``` vdv@nuc:~/projects/tea/dyomedea/dyomedea$ npm outdated Package Current Wanted Latest Location Depended by @capacitor/android 4.6.1 4.6.3 4.6.3 node_modules/@capacitor/android dyomedea @capacitor/browser 4.1.0 4.1.1 4.1.1 node_modules/@capacitor/browser dyomedea @capacitor/cli 4.6.1 4.6.3 4.6.3 node_modules/@capacitor/cli dyomedea @capacitor/core 4.6.1 4.6.3 4.6.3 node_modules/@capacitor/core dyomedea @capacitor/ios 4.6.1 4.6.3 4.6.3 node_modules/@capacitor/ios dyomedea @esbuild-plugins/node-globals-polyfill 0.1.1 0.1.1 0.2.3 node_modules/@esbuild-plugins/node-globals-polyfill dyomedea @esbuild-plugins/node-modules-polyfill 0.1.4 0.1.4 0.2.2 node_modules/@esbuild-plugins/node-modules-polyfill dyomedea @solid-primitives/i18n 1.1.2 1.1.3 1.1.3 node_modules/@solid-primitives/i18n dyomedea @solidjs/router 0.6.0 0.6.0 0.7.0 node_modules/@solidjs/router dyomedea @suid/icons-material 0.5.5 0.5.8 0.5.8 node_modules/@suid/icons-material dyomedea @suid/material 0.9.1 0.9.2 0.10.1 node_modules/@suid/material dyomedea jsdom 21.0.0 21.1.0 21.1.0 node_modules/jsdom dyomedea solid-js 1.6.9 1.6.10 1.6.10 node_modules/solid-js dyomedea solid-testing-library 0.5.0 0.5.1 0.5.1 node_modules/solid-testing-library dyomedea typescript 4.9.4 4.9.5 4.9.5 node_modules/typescript dyomedea vite 4.0.4 4.1.1 4.1.1 node_modules/vite dyomedea vitest 0.27.1 0.28.4 0.28.4 node_modules/vitest dyomedea vdv@nuc:~/projects/tea/dyomedea/dyomedea$ npm-check npm-check npm-check-updates vdv@nuc:~/projects/tea/dyomedea/dyomedea$ npm-check-updates Checking /home/vdv/projects/tea/dyomedea/dyomedea/package.json [====================] 40/40 100% @capacitor/android ^4.6.1 → ^4.6.3 @capacitor/browser ^4.1.0 → ^4.1.1 @capacitor/cli ^4.6.1 → ^4.6.3 @capacitor/core ^4.6.1 → ^4.6.3 @capacitor/ios ^4.6.1 → ^4.6.3 @esbuild-plugins/node-globals-polyfill ^0.1.1 → ^0.2.3 @esbuild-plugins/node-modules-polyfill ^0.1.4 → ^0.2.2 @solid-primitives/i18n ^1.1.2 → ^1.1.3 @solidjs/router ^0.6.0 → ^0.7.0 @suid/icons-material ^0.5.5 → ^0.5.8 @suid/material ^0.9.1 → ^0.10.1 jsdom >=21.0.0 → >=21.1.0 solid-js ^1.6.9 → ^1.6.10 typescript ^4.9.4 → ^4.9.5 vite >=4.0.4 → >=4.1.1 vitest >=0.27.1 → >=0.28.4 Run ncu -u to upgrade package.json vdv@nuc:~/projects/tea/dyomedea/dyomedea$ npm-check-updates -u ╭─────────────────────────────────────────────────────────────────────────────────╮ │ │ │ Update available 16.4.1 → 16.6.3 │ │ Run npm i -g npm-check-updates to update │ │ https://github.com/raineorshine/npm-check-updates/compare/v16.4.1...v16.6.3 │ │ │ ╰─────────────────────────────────────────────────────────────────────────────────╯ Upgrading /home/vdv/projects/tea/dyomedea/dyomedea/package.json [====================] 40/40 100% @capacitor/android ^4.6.1 → ^4.6.3 @capacitor/browser ^4.1.0 → ^4.1.1 @capacitor/cli ^4.6.1 → ^4.6.3 @capacitor/core ^4.6.1 → ^4.6.3 @capacitor/ios ^4.6.1 → ^4.6.3 @esbuild-plugins/node-globals-polyfill ^0.1.1 → ^0.2.3 @esbuild-plugins/node-modules-polyfill ^0.1.4 → ^0.2.2 @solid-primitives/i18n ^1.1.2 → ^1.1.3 @solidjs/router ^0.6.0 → ^0.7.0 @suid/icons-material ^0.5.5 → ^0.5.8 @suid/material ^0.9.1 → ^0.10.1 jsdom >=21.0.0 → >=21.1.0 solid-js ^1.6.9 → ^1.6.10 typescript ^4.9.4 → ^4.9.5 vite >=4.0.4 → >=4.1.1 vitest >=0.27.1 → >=0.28.4 Run pnpm install to install new versions. vdv@nuc:~/projects/tea/dyomedea/dyomedea$ sudo npm i -g npm-check-updates [sudo] Mot de passe de vdv : npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs added 11 packages, and changed 285 packages in 17s 56 packages are looking for funding run `npm fund` for details vdv@nuc:~/projects/tea/dyomedea/dyomedea$ npm install > dyomedea-solid@0.0.0 postinstall > node ./fix-jest-dom.mjs added 20 packages, removed 2 packages, changed 21 packages, and audited 625 packages in 25s 91 packages are looking for funding run `npm fund` for details 2 critical severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. vdv@nuc:~/projects/tea/dyomedea/dyomedea$ npm outdated Package Current Wanted Latest Location Depended by solid-testing-library 0.5.0 0.5.1 0.5.1 node_modules/solid-testing-library dyomedea vdv@nuc:~/projects/tea/dyomedea/dyomedea$ ```