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();
+}