diff --git a/qwik-app/package-lock.json b/qwik-app/package-lock.json index decf6fd..456e3ad 100644 --- a/qwik-app/package-lock.json +++ b/qwik-app/package-lock.json @@ -5,6 +5,9 @@ "packages": { "": { "name": "my-qwik-basic-starter", + "dependencies": { + "ol": "^7.1.0" + }, "devDependencies": { "@builder.io/qwik": "0.14.1", "@builder.io/qwik-city": "0.0.127", @@ -142,6 +145,45 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "node_modules/@mapbox/jsonlint-lines-primitives": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz", + "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/@mapbox/mapbox-gl-style-spec": { + "version": "13.27.0", + "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.27.0.tgz", + "integrity": "sha512-wQSJCGRyf7pWknQgeGBArHEk8898UcI1BnAam7IRa3AGmHRFzlJ6DzoU24Hld9zJ0tgkNQ7OP5sJT/9hKHzavg==", + "dependencies": { + "@mapbox/jsonlint-lines-primitives": "~2.0.2", + "@mapbox/point-geometry": "^0.1.0", + "@mapbox/unitbezier": "^0.0.0", + "csscolorparser": "~1.0.2", + "json-stringify-pretty-compact": "^2.0.0", + "minimist": "^1.2.6", + "rw": "^1.3.3", + "sort-object": "^0.3.2" + }, + "bin": { + "gl-style-composite": "bin/gl-style-composite.js", + "gl-style-format": "bin/gl-style-format.js", + "gl-style-migrate": "bin/gl-style-migrate.js", + "gl-style-validate": "bin/gl-style-validate.js" + } + }, + "node_modules/@mapbox/point-geometry": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", + "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==" + }, + "node_modules/@mapbox/unitbezier": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz", + "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==" + }, "node_modules/@mdx-js/mdx": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.1.5.tgz", @@ -206,6 +248,11 @@ "node": ">= 8" } }, + "node_modules/@petamoriken/float16": { + "version": "3.6.6", + "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.6.6.tgz", + "integrity": "sha512-3MUulwMtsdCA9lw8a/Kc0XDBJJVCkYTQ5aGd+///TbfkOMXoOGAzzoiYKwPEsLYZv7He7fKJ/mCacqKOO7REyg==" + }, "node_modules/@types/acorn": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz", @@ -751,6 +798,11 @@ "node": ">= 8" } }, + "node_modules/csscolorparser": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz", + "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==" + }, "node_modules/data-uri-to-buffer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz", @@ -838,6 +890,11 @@ "node": ">=6.0.0" } }, + "node_modules/earcut": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz", + "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==" + }, "node_modules/esbuild": { "version": "0.15.15", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.15.tgz", @@ -1677,6 +1734,24 @@ "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", "dev": true }, + "node_modules/geotiff": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz", + "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==", + "dependencies": { + "@petamoriken/float16": "^3.4.7", + "lerc": "^3.0.0", + "lru-cache": "^6.0.0", + "pako": "^2.0.4", + "parse-headers": "^2.0.2", + "web-worker": "^1.2.0", + "xml-utils": "^1.0.2" + }, + "engines": { + "browsers": "defaults", + "node": ">=10.19" + } + }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -1820,6 +1895,25 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, "node_modules/ignore": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz", @@ -2055,6 +2149,11 @@ "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, + "node_modules/json-stringify-pretty-compact": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz", + "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==" + }, "node_modules/json5": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", @@ -2076,6 +2175,11 @@ "node": ">=6" } }, + "node_modules/lerc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz", + "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==" + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -2130,7 +2234,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, "dependencies": { "yallist": "^4.0.0" }, @@ -2138,6 +2241,11 @@ "node": ">=10" } }, + "node_modules/mapbox-to-css-font": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.1.tgz", + "integrity": "sha512-QQ/iKiM43DM9+aujTL45Iz5o7gDeSFmy4LPl3HZmNcwCE++NxGazf+yFpY+wCb+YS23sDa1ghpo3zrNFOcHlow==" + }, "node_modules/markdown-extensions": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-1.1.1.tgz", @@ -2938,7 +3046,6 @@ "version": "1.2.7", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", - "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -3039,6 +3146,31 @@ "node": ">=0.10.0" } }, + "node_modules/ol": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/ol/-/ol-7.1.0.tgz", + "integrity": "sha512-mAeV5Ca4mFhYaJoGWNZnIMN5VNnFTf63FgZjBiYu/DjQDGKNsD5QyvvqVziioVdOOgl6b8rPB/ypj2XNBinPwA==", + "dependencies": { + "earcut": "^2.2.3", + "geotiff": "2.0.4", + "ol-mapbox-style": "9.1.0", + "pbf": "3.2.1", + "rbush": "^3.0.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/openlayers" + } + }, + "node_modules/ol-mapbox-style": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.1.0.tgz", + "integrity": "sha512-R/XE6FdviaXNdnSw6ItHSEreMtQU68cwQCGv4Kl8yG0V1dZhnI5JWr8IOphJwffPVxfWTCnJb5aALGSB89MvhA==", + "dependencies": { + "@mapbox/mapbox-gl-style-spec": "^13.23.1", + "mapbox-to-css-font": "^2.4.1" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -3095,6 +3227,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/pako": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", + "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==" + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -3127,6 +3264,11 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/parse-headers": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz", + "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA==" + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -3169,6 +3311,18 @@ "node": ">=8" } }, + "node_modules/pbf": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz", + "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==", + "dependencies": { + "ieee754": "^1.1.12", + "resolve-protobuf-schema": "^2.1.0" + }, + "bin": { + "pbf": "bin/pbf" + } + }, "node_modules/periscopic": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.0.4.tgz", @@ -3264,6 +3418,11 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/protocol-buffers-schema": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz", + "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==" + }, "node_modules/punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", @@ -3293,6 +3452,19 @@ } ] }, + "node_modules/quickselect": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz", + "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==" + }, + "node_modules/rbush": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz", + "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==", + "dependencies": { + "quickselect": "^2.0.0" + } + }, "node_modules/recrawl-sync": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/recrawl-sync/-/recrawl-sync-2.2.3.tgz", @@ -3389,6 +3561,14 @@ "node": ">=4" } }, + "node_modules/resolve-protobuf-schema": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz", + "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==", + "dependencies": { + "protocol-buffers-schema": "^3.3.1" + } + }, "node_modules/reusify": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", @@ -3452,6 +3632,11 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/rw": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", + "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==" + }, "node_modules/sade": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz", @@ -3509,6 +3694,34 @@ "node": ">=8" } }, + "node_modules/sort-asc": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz", + "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/sort-desc": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz", + "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/sort-object": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz", + "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==", + "dependencies": { + "sort-asc": "^0.1.0", + "sort-desc": "^0.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", @@ -4073,6 +4286,11 @@ "node": ">= 8" } }, + "node_modules/web-worker": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz", + "integrity": "sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==" + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -4103,11 +4321,15 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/xml-utils": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.3.0.tgz", + "integrity": "sha512-i4PIrX33Wd66dvwo4syicwlwmnr6wuvvn4f2ku9hA67C2Uk62Xubczuhct+Evnd12/DV71qKNeDdJwES8HX1RA==" + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, "node_modules/yocto-queue": { "version": "0.1.0", diff --git a/qwik-app/package.json b/qwik-app/package.json index bd17079..0f0b2e4 100644 --- a/qwik-app/package.json +++ b/qwik-app/package.json @@ -34,5 +34,8 @@ "typescript": "4.9.3", "vite": "3.2.4", "vite-tsconfig-paths": "3.5.0" + }, + "dependencies": { + "ol": "^7.1.0" } } diff --git a/qwik-app/src/components/map/Map.css b/qwik-app/src/components/map/Map.css new file mode 100644 index 0000000..00ea398 --- /dev/null +++ b/qwik-app/src/components/map/Map.css @@ -0,0 +1,17 @@ +#map { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.ol-control { + position: absolute; + background-color: rgba(255, 255, 255, 0.4); + border-radius: 4px; + padding: 2px; +} +.ol-full-screen { + top: 0.5em; + right: 0.5em; +} diff --git a/qwik-app/src/components/map/Map.tsx b/qwik-app/src/components/map/Map.tsx new file mode 100644 index 0000000..999dbc2 --- /dev/null +++ b/qwik-app/src/components/map/Map.tsx @@ -0,0 +1,67 @@ +import { + component$, + NoSerialize, + noSerialize, + Ref, + useClientEffect$, + useClientMount$, + useMount$, + useRef, + useSignal, + useStore, + useStyles$, + useStylesScoped$, +} from '@builder.io/qwik'; + +import OlMap from 'ol/Map'; +import View from 'ol/View'; +import TileLayer from 'ol/layer/Tile'; +import VectorLayer from 'ol/layer/Vector'; +import VectorSource from 'ol/source/Vector'; +import Feature from 'ol/Feature'; +import Attribution from 'ol/control/Attribution'; +import Rotate from 'ol/control/Rotate'; +import ScaleLine from 'ol/control/ScaleLine'; +import Control from 'ol/control/Control'; +import OSM from 'ol/source/OSM'; +import { useGeographic as olUseGeographic } from 'ol/proj'; + +import './Map.css'; + +interface MapStore { + map: NoSerialize | null; +} + +// Notice the default export +export default component$(() => { + const store = useStore({ map: null }); + + /** + * export function useRef(current?: T): Ref { + return useStore({ current }); +} + */ + + const target = useSignal(); + + useClientEffect$(() => { + console.log({ caller: 'Map / useMount$' }); + const olMap = new OlMap({ + view: new View({ + center: [0, 0], + zoom: 1, + }), + layers: [ + new TileLayer({ + source: new OSM(), + }), + // new VectorLayer({ source: newSource }), + ], + target: target.value, + // controls, + }); + // olMap.on(['moveend'], changeListener); + store.map = noSerialize(olMap); + }); + return
; +}); diff --git a/qwik-app/src/components/map/index.tsx b/qwik-app/src/components/map/index.tsx new file mode 100644 index 0000000..84bebe9 --- /dev/null +++ b/qwik-app/src/components/map/index.tsx @@ -0,0 +1 @@ +export { default } from './Map'; diff --git a/qwik-app/src/routes/flower/flower.css b/qwik-app/src/routes/flower/flower.css deleted file mode 100644 index 00f01ee..0000000 --- a/qwik-app/src/routes/flower/flower.css +++ /dev/null @@ -1,71 +0,0 @@ -.host { - display: grid; - - align-items: center; - justify-content: center; - justify-items: center; - --rotation: 135deg; - --rotation: 225deg; - --size-step: 10px; - --odd-color-step: 5; - --even-color-step: 5; - --center: 12; - - width: 100%; - height: 500px; - - contain: strict; -} - -input { - width: 100%; -} - -.square { - --size: calc(40px + var(--index) * var(--size-step)); - - display: block; - width: var(--size); - height: var(--size); - transform: rotateZ(calc(var(--rotation) * var(--state) * (var(--center) - var(--index)))); - transition-property: transform, border-color; - transition-duration: 5s; - transition-timing-function: ease-in-out; - grid-area: 1 / 1; - background: white; - border-width: 2px; - border-style: solid; - border-color: black; - box-sizing: border-box; - will-change: transform, border-color; - - contain: strict; -} - -.square.odd { - --luminance: calc(1 - calc(calc(var(--index) * var(--odd-color-step)) / 256)); - background: rgb( - calc(172 * var(--luminance)), - calc(127 * var(--luminance)), - calc(244 * var(--luminance)) - ); -} - -.pride .square:nth-child(12n + 1) { - background: #e70000; -} -.pride .square:nth-child(12n + 3) { - background: #ff8c00; -} -.pride .square:nth-child(12n + 5) { - background: #ffef00; -} -.pride .square:nth-child(12n + 7) { - background: #00811f; -} -.pride .square:nth-child(12n + 9) { - background: #0044ff; -} -.pride .square:nth-child(12n + 11) { - background: #760089; -} diff --git a/qwik-app/src/routes/flower/index.tsx b/qwik-app/src/routes/flower/index.tsx deleted file mode 100644 index 4ac5d49..0000000 --- a/qwik-app/src/routes/flower/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { component$, useClientEffect$, useStore, useStylesScoped$ } from '@builder.io/qwik'; -import { DocumentHead, useLocation } from '@builder.io/qwik-city'; -import styles from './flower.css?inline'; - -export default component$(() => { - useStylesScoped$(styles); - const loc = useLocation(); - - const state = useStore({ - count: 0, - number: 20, - }); - - useClientEffect$(({ cleanup }) => { - const timeout = setTimeout(() => (state.count = 1), 500); - cleanup(() => clearTimeout(timeout)); - - const internal = setInterval(() => state.count++, 7000); - cleanup(() => clearInterval(internal)); - }); - - return ( - <> - { - state.number = (ev.target as HTMLInputElement).valueAsNumber; - }} - /> -
- {Array.from({ length: state.number }, (_, i) => ( -
- )).reverse()} -
- - ); -}); - -export const head: DocumentHead = { - title: 'Qwik Flower', -}; diff --git a/qwik-app/src/routes/index.tsx b/qwik-app/src/routes/index.tsx index a26fb3a..53b9d27 100644 --- a/qwik-app/src/routes/index.tsx +++ b/qwik-app/src/routes/index.tsx @@ -2,136 +2,10 @@ import { component$ } from '@builder.io/qwik'; import type { DocumentHead } from '@builder.io/qwik-city'; import { Link } from '@builder.io/qwik-city'; +import Map from '../components/map'; + export default component$(() => { - return ( -
-

- Welcome to Qwik ⚡️ -

- -
    -
  • - Check out the src/routes directory to get started. -
    • -
  • - Add integrations with npm run qwik add. -
    • -
  • - More info about development in README.md -
    • -
- -

Commands

- - - - - - - - - - - - - - - - - - -
- npm run dev - Start the dev server and watch for changes.
- npm run preview - Production build and start preview server.
- npm run build - Production build.
- npm run qwik add - Select an integration to add.
- -

Add Integrations

- - - - - - - - - - - - - - - - - - -
- npm run qwik add cloudflare-pages - - - Cloudflare Pages Server - -
- npm run qwik add express - - - Nodejs Express Server - -
- npm run qwik add netlify-edge - - - Netlify Edge Functions - -
- npm run qwik add static - - - Static Site Generation (SSG) - -
- -

Community

- - - - Blow my mind 🤯 - -
- ); + return ; }); export const head: DocumentHead = {