From b7cd91920060054b36cded0b96bf0b4fc9efc9b0 Mon Sep 17 00:00:00 2001 From: Angela Yu <5506675+wangela@users.noreply.github.com> Date: Tue, 28 Nov 2023 17:05:24 -0800 Subject: [PATCH 1/6] docs: add marker clustering example to website --- website/src/examples-sidebar.js | 1 + website/src/examples/marker-clustering.mdx | 5 +++++ 2 files changed, 6 insertions(+) create mode 100644 website/src/examples/marker-clustering.mdx diff --git a/website/src/examples-sidebar.js b/website/src/examples-sidebar.js index a3c643e..3aca3e2 100644 --- a/website/src/examples-sidebar.js +++ b/website/src/examples-sidebar.js @@ -11,6 +11,7 @@ const sidebars = { items: [ 'basic-map', 'markers-and-infowindows', + 'marker-clustering', 'change-map-styles', 'map-control', 'directions' diff --git a/website/src/examples/marker-clustering.mdx b/website/src/examples/marker-clustering.mdx new file mode 100644 index 0000000..21f57c0 --- /dev/null +++ b/website/src/examples/marker-clustering.mdx @@ -0,0 +1,5 @@ +# Marker Clustering + +import App from 'website-examples/marker-clustering/src/app'; + + From d01bc4f89ca36f890fad7eac3b61f6335d6218a5 Mon Sep 17 00:00:00 2001 From: Angela Yu <5506675+wangela@users.noreply.github.com> Date: Wed, 29 Nov 2023 00:18:37 -0800 Subject: [PATCH 2/6] chore: install markerclusterer in website --- website/package-lock.json | 26 ++++++++++++++++++++++++-- website/package.json | 1 + 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/website/package-lock.json b/website/package-lock.json index 08105bd..5f5efd4 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -6,6 +6,7 @@ "": { "name": "react-google-maps-website", "dependencies": { + "@googlemaps/markerclusterer": "^2.5.1", "react": "^18.2.0", "react-dom": "^18.2.0", "styled-components": "^6.1.1" @@ -4131,6 +4132,15 @@ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" }, + "node_modules/@googlemaps/markerclusterer": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.1.tgz", + "integrity": "sha512-TLASLyWPoJiTdbuPtqIzQS8t/+JIvd+whoNkeSxWpP2eIoTscgsWt72Is3Cu5I68GuX3qn+oUSxqagFYc1O+wg==", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "supercluster": "^8.0.1" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -8292,8 +8302,7 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-glob": { "version": "3.3.1", @@ -10172,6 +10181,11 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/kdbush": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz", + "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==" + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -16076,6 +16090,14 @@ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" }, + "node_modules/supercluster": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz", + "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==", + "dependencies": { + "kdbush": "^4.0.2" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/website/package.json b/website/package.json index 10dce78..bce5eb6 100644 --- a/website/package.json +++ b/website/package.json @@ -9,6 +9,7 @@ "serve": "docusaurus serve" }, "dependencies": { + "@googlemaps/markerclusterer": "^2.5.1", "react": "^18.2.0", "react-dom": "^18.2.0", "styled-components": "^6.1.1" From 33fa269b085de737f243f1d59fdf5c2edbf4a770 Mon Sep 17 00:00:00 2001 From: Angela Yu <5506675+wangela@users.noreply.github.com> Date: Thu, 30 Nov 2023 11:40:30 -0800 Subject: [PATCH 3/6] docs: add support for examples with external dependencies in the website --- examples/README.md | 26 +++++++++++++--------- website/package-lock.json | 26 ++-------------------- website/package.json | 1 - website/src/examples-sidebar.js | 18 ++++++++++----- website/src/examples/index.mdx | 2 +- website/src/examples/marker-clustering.mdx | 5 ----- 6 files changed, 30 insertions(+), 48 deletions(-) delete mode 100644 website/src/examples/marker-clustering.mdx diff --git a/examples/README.md b/examples/README.md index a748177..71192a6 100644 --- a/examples/README.md +++ b/examples/README.md @@ -34,25 +34,29 @@ created, functions used to prepare data to show should be hidden away. ### Create the example -- you can start off by copying the `./examples/_template` folder for +- Start off by copying the `./examples/_template` folder for your example. This will contain the config-files needed and some basic setup that is the same for all examples. The new directory-name will be the "example id" and should be in 'kebap-case' (we'll need that id later). -- you can develop the example independently of the library as a standalone +- Develop the example independently of the library as a standalone mini-application (using `npm i` and `npm start` to start the vite dev-server). -- you can install additional dependencies. However, in that case, we can't - currently include the example on the 'Examples' page of the website (something - we could look into, but for now it's not working due to the way the website - is built) -- make sure to also edit the title, description and sourcecode links in the +- If you install additional dependencies, the "Examples" section of [the website](https://visgl.github.io/react-google-maps/examples/) will not be able to host your example, but you can still [link to a CodeSandbox](https://codesandbox.io/docs/learn/devboxes/synced-templates#creating-a-synced-template) for the example. +- Edit the title, description and sourcecode links in the `README.md`, `index.html`, and `./src/control-panel.tsx` files. ### Adding examples to the website -- create the example page in `./website/src/examples/your-example-id.mdx` -- add the example to `./website/src/examples-sidebar.js` -- create a 400x400 px image for the overview page and place it in +If you are adding an example with no additional dependencies: + +1. Create the example page in `./website/src/examples/your-example-id.mdx` +1. Add the example to `./website/src/examples-sidebar.js` +1. Create a 400x400 px image for the overview page and place it in `./website/static/images/examples/your-example-id.jpg` -- the whole website can be started in dev-mode by running `npm i` and `npm start` +1. The whole website can be started in dev-mode by running `npm i` and `npm start` in the `./website` directory. The website build can be tested by running `npm run build`. + +If you are adding an example with additional dependencies: + +1. Create a 400x400 px image for the overview page and place it in ./website/static/images/examples/your-example-id.jpg +1. Add the example to `./website/src/examples-sidebar.js` as an [external link](https://docusaurus.io/docs/sidebar/items#sidebar-item-link) to [a CodeSandbox](https://codesandbox.io/docs/learn/devboxes/synced-templates#creating-a-synced-template) based on the title of your new example folder in the `./examples` folder. diff --git a/website/package-lock.json b/website/package-lock.json index 5f5efd4..08105bd 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -6,7 +6,6 @@ "": { "name": "react-google-maps-website", "dependencies": { - "@googlemaps/markerclusterer": "^2.5.1", "react": "^18.2.0", "react-dom": "^18.2.0", "styled-components": "^6.1.1" @@ -4132,15 +4131,6 @@ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" }, - "node_modules/@googlemaps/markerclusterer": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.1.tgz", - "integrity": "sha512-TLASLyWPoJiTdbuPtqIzQS8t/+JIvd+whoNkeSxWpP2eIoTscgsWt72Is3Cu5I68GuX3qn+oUSxqagFYc1O+wg==", - "dependencies": { - "fast-deep-equal": "^3.1.3", - "supercluster": "^8.0.1" - } - }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -8302,7 +8292,8 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true }, "node_modules/fast-glob": { "version": "3.3.1", @@ -10181,11 +10172,6 @@ "graceful-fs": "^4.1.6" } }, - "node_modules/kdbush": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz", - "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==" - }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -16090,14 +16076,6 @@ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" }, - "node_modules/supercluster": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz", - "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==", - "dependencies": { - "kdbush": "^4.0.2" - } - }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/website/package.json b/website/package.json index bce5eb6..10dce78 100644 --- a/website/package.json +++ b/website/package.json @@ -9,7 +9,6 @@ "serve": "docusaurus serve" }, "dependencies": { - "@googlemaps/markerclusterer": "^2.5.1", "react": "^18.2.0", "react-dom": "^18.2.0", "styled-components": "^6.1.1" diff --git a/website/src/examples-sidebar.js b/website/src/examples-sidebar.js index 3aca3e2..d726a1c 100644 --- a/website/src/examples-sidebar.js +++ b/website/src/examples-sidebar.js @@ -3,21 +3,27 @@ const sidebars = { { type: 'doc', label: 'Overview', - id: 'index' + id: 'index', }, { type: 'category', label: 'Examples', + collapsed: false, items: [ 'basic-map', 'markers-and-infowindows', - 'marker-clustering', + // External link + { + type: 'link', + label: 'Marker Clustering', + href: 'https://codesandbox.io/s/github/visgl/react-google-maps/tree/main/examples/marker-clustering', + }, 'change-map-styles', 'map-control', - 'directions' - ] - } - ] + 'directions', + ], + }, + ], }; module.exports = sidebars; diff --git a/website/src/examples/index.mdx b/website/src/examples/index.mdx index 95700c8..e2c595c 100644 --- a/website/src/examples/index.mdx +++ b/website/src/examples/index.mdx @@ -1,3 +1,3 @@ import {ExamplesIndex} from '../components'; - `/images/examples/${item.docId || item.label.toLowerCase()}.jpg`} /> + `/images/examples/${item.docId || item.label.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g).join('-').toLowerCase()}.jpg`} /> diff --git a/website/src/examples/marker-clustering.mdx b/website/src/examples/marker-clustering.mdx deleted file mode 100644 index 21f57c0..0000000 --- a/website/src/examples/marker-clustering.mdx +++ /dev/null @@ -1,5 +0,0 @@ -# Marker Clustering - -import App from 'website-examples/marker-clustering/src/app'; - - From c296dc0e76fd9e05222d053a6b84a0272eacb7de Mon Sep 17 00:00:00 2001 From: Angela Yu <5506675+wangela@users.noreply.github.com> Date: Thu, 30 Nov 2023 11:43:41 -0800 Subject: [PATCH 4/6] chore: format with prettier --- examples/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/README.md b/examples/README.md index 71192a6..fa8217e 100644 --- a/examples/README.md +++ b/examples/README.md @@ -46,17 +46,17 @@ created, functions used to prepare data to show should be hidden away. ### Adding examples to the website -If you are adding an example with no additional dependencies: +If you are adding an example with **no additional dependencies**: 1. Create the example page in `./website/src/examples/your-example-id.mdx` 1. Add the example to `./website/src/examples-sidebar.js` 1. Create a 400x400 px image for the overview page and place it in - `./website/static/images/examples/your-example-id.jpg` + `./website/static/images/examples/your-example-id.jpg` 1. The whole website can be started in dev-mode by running `npm i` and `npm start` - in the `./website` directory. The website build can be tested by running - `npm run build`. + in the `./website` directory. The website build can be tested by running + `npm run build`. -If you are adding an example with additional dependencies: +If you are adding an example **with additional dependencies**: 1. Create a 400x400 px image for the overview page and place it in ./website/static/images/examples/your-example-id.jpg 1. Add the example to `./website/src/examples-sidebar.js` as an [external link](https://docusaurus.io/docs/sidebar/items#sidebar-item-link) to [a CodeSandbox](https://codesandbox.io/docs/learn/devboxes/synced-templates#creating-a-synced-template) based on the title of your new example folder in the `./examples` folder. From 7f7ffd573fed433e4be1e6f3964ed78bcb611c65 Mon Sep 17 00:00:00 2001 From: Angela Yu <5506675+wangela@users.noreply.github.com> Date: Thu, 30 Nov 2023 11:53:45 -0800 Subject: [PATCH 5/6] chore: format path in README --- examples/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/README.md b/examples/README.md index fa8217e..7589e6a 100644 --- a/examples/README.md +++ b/examples/README.md @@ -58,5 +58,5 @@ If you are adding an example with **no additional dependencies**: If you are adding an example **with additional dependencies**: -1. Create a 400x400 px image for the overview page and place it in ./website/static/images/examples/your-example-id.jpg +1. Create a 400x400 px image for the overview page and place it in `./website/static/images/examples/your-example-id.jpg` 1. Add the example to `./website/src/examples-sidebar.js` as an [external link](https://docusaurus.io/docs/sidebar/items#sidebar-item-link) to [a CodeSandbox](https://codesandbox.io/docs/learn/devboxes/synced-templates#creating-a-synced-template) based on the title of your new example folder in the `./examples` folder. From 51b721b18e5a5e7ffa20f064205558ce80fb990f Mon Sep 17 00:00:00 2001 From: Martin Schuhfuss Date: Thu, 30 Nov 2023 21:43:02 +0100 Subject: [PATCH 6/6] refactor: split out toKebapCase function --- website/src/examples/index.mdx | 7 ++++++- website/src/utils/to-kebap-case.ts | 9 +++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 website/src/utils/to-kebap-case.ts diff --git a/website/src/examples/index.mdx b/website/src/examples/index.mdx index e2c595c..38e7dcb 100644 --- a/website/src/examples/index.mdx +++ b/website/src/examples/index.mdx @@ -1,3 +1,8 @@ import {ExamplesIndex} from '../components'; +import {toKebapCase} from '../utils/to-kebap-case'; - `/images/examples/${item.docId || item.label.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g).join('-').toLowerCase()}.jpg`} /> + + `/images/examples/${item.docId || toKebapCase(item.label)}.jpg` + } +/> diff --git a/website/src/utils/to-kebap-case.ts b/website/src/utils/to-kebap-case.ts new file mode 100644 index 0000000..65e4ab7 --- /dev/null +++ b/website/src/utils/to-kebap-case.ts @@ -0,0 +1,9 @@ +export function toKebapCase(s: string) { + const matches = s.match( + /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g + ); + + if (!matches) return s; + + return matches.join('-').toLowerCase(); +}