Merge branch 'main' into manage-forms

CHANGELOG.md

@@ -1,45 +1,45 @@
-## [1.143.4](https://github.com/EddieHubCommunity/LinkFree/compare/v1.143.3...v1.143.4) (2023-06-18)
+## [1.144.1](https://github.com/EddieHubCommunity/LinkFree/compare/v1.144.0...v1.144.1) (2023-06-21)
 
 
 ### Bug Fixes
 
-* remove alert animation ([#7662](https://github.com/EddieHubCommunity/LinkFree/issues/7662)) ([e39065b](https://github.com/EddieHubCommunity/LinkFree/commit/e39065b940edccd08f13bad54bfc5614954d6289))
+* help button over social links ([#7702](https://github.com/EddieHubCommunity/LinkFree/issues/7702)) ([d889cbd](https://github.com/EddieHubCommunity/LinkFree/commit/d889cbd9df97ffaf825ae92a38024da24aa4a8b4))
 
 
 
-## [1.143.3](https://github.com/EddieHubCommunity/LinkFree/compare/v1.143.2...v1.143.3) (2023-06-18)
+# [1.144.0](https://github.com/EddieHubCommunity/LinkFree/compare/v1.143.4...v1.144.0) (2023-06-20)
 
 
-### Bug Fixes
+### Features
 
-* remove animate pulse from alert ([#7639](https://github.com/EddieHubCommunity/LinkFree/issues/7639)) ([abdf3ea](https://github.com/EddieHubCommunity/LinkFree/commit/abdf3ea3f8fd2767021f2e82f6c641a69f498c9f))
+* map clustering ([#7653](https://github.com/EddieHubCommunity/LinkFree/issues/7653)) ([6c0d957](https://github.com/EddieHubCommunity/LinkFree/commit/6c0d957adbb6e5b2b145e2e1d90af8180db9981e))
 
 
 
-## [1.143.2](https://github.com/EddieHubCommunity/LinkFree/compare/v1.143.1...v1.143.2) (2023-06-18)
+## [1.143.4](https://github.com/EddieHubCommunity/LinkFree/compare/v1.143.3...v1.143.4) (2023-06-18)
 
 
 ### Bug Fixes
 
-*  statistics and playground base url ([#7640](https://github.com/EddieHubCommunity/LinkFree/issues/7640)) ([8854b4e](https://github.com/EddieHubCommunity/LinkFree/commit/8854b4e491ec70010b2a4517af857abb4cc10b28))
+* remove alert animation ([#7662](https://github.com/EddieHubCommunity/LinkFree/issues/7662)) ([e39065b](https://github.com/EddieHubCommunity/LinkFree/commit/e39065b940edccd08f13bad54bfc5614954d6289))
 
 
 
-## [1.143.1](https://github.com/EddieHubCommunity/LinkFree/compare/v1.143.0...v1.143.1) (2023-06-18)
+## [1.143.3](https://github.com/EddieHubCommunity/LinkFree/compare/v1.143.2...v1.143.3) (2023-06-18)
 
 
 ### Bug Fixes
 
-* update the LinkFree CLI version ([#7638](https://github.com/EddieHubCommunity/LinkFree/issues/7638)) ([bef374c](https://github.com/EddieHubCommunity/LinkFree/commit/bef374c6dbe8c7ae24b46546aead73ee1faa3ae1))
+* remove animate pulse from alert ([#7639](https://github.com/EddieHubCommunity/LinkFree/issues/7639)) ([abdf3ea](https://github.com/EddieHubCommunity/LinkFree/commit/abdf3ea3f8fd2767021f2e82f6c641a69f498c9f))
 
 
 
-# [1.143.0](https://github.com/EddieHubCommunity/LinkFree/compare/v1.142.6...v1.143.0) (2023-06-16)
+## [1.143.2](https://github.com/EddieHubCommunity/LinkFree/compare/v1.143.1...v1.143.2) (2023-06-18)
 
 
-### Features
+### Bug Fixes
 
-* search by location ([#7535](https://github.com/EddieHubCommunity/LinkFree/issues/7535)) ([4949dc3](https://github.com/EddieHubCommunity/LinkFree/commit/4949dc395d9c15ce18e67c0310012fee4a17304c))
+*  statistics and playground base url ([#7640](https://github.com/EddieHubCommunity/LinkFree/issues/7640)) ([8854b4e](https://github.com/EddieHubCommunity/LinkFree/commit/8854b4e491ec70010b2a4517af857abb4cc10b28))
 
 
 

components/Footer.js

@@ -88,7 +88,7 @@ export default function Footer() {
       <h2 id="footer-heading" className="sr-only">
         Footer
       </h2>
-      <div className="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
+      <div className="mx-auto max-w-7xl px-6 pb-16 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
         <div className="xl:grid xl:grid-cols-3 xl:gap-8">
           <Image
             width={100}

components/map/Clusters.js

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { Marker, useMap } from "react-leaflet";
+import useSupercluster from "use-supercluster";
+import UserMarker from "./UserMarker";
+import styles from "./Clusters.module.css";
+
+export default function Clusters({users}) {
+  const map = useMap();
+  const mapB = map.getBounds();
+  const [bounds, setBounds] = useState([
+    mapB.getSouthWest().lng,
+    mapB.getSouthWest().lat,
+    mapB.getNorthEast().lng,
+    mapB.getNorthEast().lat
+  ]);
+  const [zoom, setZoom] = useState(map.getZoom());
+
+  function updateMap() {
+    const b = map.getBounds();
+    setBounds([
+      b.getSouthWest().lng,
+      b.getSouthWest().lat,
+      b.getNorthEast().lng,
+      b.getNorthEast().lat
+    ]);
+    setZoom(map.getZoom());
+  }
+
+  map.on('moveend', function() {
+    updateMap();
+  })
+
+  const { clusters, supercluster } = useSupercluster({
+    points: users,
+    bounds,
+    zoom,
+    options: {
+      radius: zoom < 17 ? 75 : 50,
+      maxZoom: 18
+    }
+  });
+
+  const icons = {};
+  const fetchIcon = (count) => {
+    const size =
+      count < 25 ? 'small' :
+      count < 100 ? 'medium' : 'large';
+    if (!icons[count]) {
+      icons[count] = L.divIcon({
+        html: `<div><span>${count}</span></div>`,
+        className: `${styles['marker-cluster']} ${styles[size]}`,
+        iconSize: L.point(40, 40)
+      });
+    }
+    return icons[count];
+  };
+
+  return (
+    <>
+      {clusters.map(cluster => {
+          // every cluster point has coordinates
+          const [longitude, latitude] = cluster.geometry.coordinates;
+          // the point may be either a cluster or user
+          const {
+            cluster: isCluster,
+            point_count: pointCount,
+            username
+          } = cluster.properties;
+
+          // we have a cluster to render
+          if (isCluster) {
+            return (
+              <Marker
+                key={`cluster-${cluster.id}`}
+                position={[latitude, longitude]}
+                icon={fetchIcon(pointCount)}
+                eventHandlers={{
+                  click: () => {
+                    const expansionZoom = Math.min(
+                      supercluster.getClusterExpansionZoom(cluster.id),
+                      18
+                    );
+                    map.setView([latitude, longitude], expansionZoom, {
+                      animate: true
+                    });
+                  }
+                }}
+              />
+            );
+          }
+
+          // we have a single point to render
+          return (
+            <UserMarker user={cluster} key={username} />
+          );
+        })}
+    </>
+  )
+}

components/map/Clusters.module.css

@@ -0,0 +1,39 @@
+.small {
+	background-color: rgba(181, 226, 140, 0.6);
+}
+.small div {
+	background-color: rgba(110, 204, 57, 0.6);
+}
+
+.medium {
+	background-color: rgba(241, 211, 87, 0.6);
+}
+.medium div {
+	background-color: rgba(240, 194, 12, 0.6);
+}
+
+.large {
+	background-color: rgba(253, 156, 115, 0.6);
+}
+.large div {
+	background-color: rgba(241, 128, 23, 0.6);
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	z-index: 100;
+}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+.marker-cluster span {
+	line-height: 30px;
+}

components/map/Map.js

@@ -1,9 +1,7 @@
-import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
-import { ReactMarkdown } from "react-markdown/lib/react-markdown";
-import "leaflet/dist/leaflet.css";
-
+import { MapContainer, TileLayer } from "react-leaflet";
 import Link from "@components/Link";
-import MarkerCluster from "@components/map/MarkerCluster";
+import Clusters from "./Clusters";
+import "leaflet/dist/leaflet.css";
 
 export default function Map({ users }) {
   const boundsMap = [
@@ -12,55 +10,21 @@ export default function Map({ users }) {
   ];
 
   return (
-    <>
-      <MapContainer
-        center={[0, 0]}
-        zoom={2}
-        minZoom={2}
-        zoomControl={true}
-        scrollWheelZoom={true}
-        maxBounds={boundsMap}
-        maxBoundsViscosity={0.7}
-        style={{ height: "100vh" }}
-      >
-        <TileLayer
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-          url="https://b.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        />
-        <MarkerCluster>
-          {users.map((user) => (
-            <div key={user.username}>
-              <Marker
-                icon={L.icon({
-                  className: "rounded-full",
-                  iconUrl: `https://github.com/${user.username}.png`,
-                  popupAnchor: [0, -10],
-                  iconSize: [40, 40],
-                  iconAnchor: [20, 20],
-                })}
-                position={[user.location.lat, user.location.lon]}
-              >
-                <Popup>
-                  <div className="flex flex-col gap-[5px]">
-                    <h1 className="font-[600]">
-                      <Link
-                        href={`https://linkfree.eddiehub.io/${user.username}`}
-                      >
-                        {user.name}
-                      </Link>
-                    </h1>
-                    <span>{user.location.provided}</span>
-
-                    <span>
-                      <ReactMarkdown>{user.bio}</ReactMarkdown>
-                    </span>
-                  </div>
-                </Popup>
-              </Marker>
-            </div>
-          ))}
-        </MarkerCluster>
-      </MapContainer>
-    </>
+    <MapContainer
+      center={[0, 0]}
+      zoom={2}
+      minZoom={2}
+      zoomControl={true}
+      scrollWheelZoom={true}
+      maxBounds={boundsMap}
+      maxBoundsViscosity={0.7}
+      style={{ height: "100vh" }}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://b.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      <Clusters users={users} />
+    </MapContainer>
   );
 }

components/map/UserMarker.js

@@ -0,0 +1,41 @@
+import { Marker, Popup } from "react-leaflet";
+import { ReactMarkdown } from "react-markdown/lib/react-markdown";
+import Link from "@components/Link";
+
+export default function UserMarker({user}) {
+  // Custom component for rendering links within ReactMarkdown
+  const LinkRenderer = ({ href, children }) => (
+    <Link href={href}>
+      {children}
+    </Link>
+  );
+
+  return (
+    <Marker
+      icon={L.icon({
+        className: "rounded-full",
+        iconUrl: `https://github.com/${user.properties.username}.png`,
+        popupAnchor: [0, -10],
+        iconSize: [40, 40],
+        iconAnchor: [20, 20],
+      })}
+      position={[user.geometry.coordinates[1], user.geometry.coordinates[0]]}
+    >
+      <Popup>
+        <div className="flex flex-col gap-[5px]">
+          <h1 className="font-[600]">
+            <Link
+              href={`https://linkfree.eddiehub.io/${user.properties.username}`}
+            >
+              {user.properties.name}
+            </Link>
+          </h1>
+          <span>{user.properties.location}</span>
+          <span>
+            <ReactMarkdown  components={{ a: LinkRenderer }}>{user.properties.bio}</ReactMarkdown>
+          </span>
+        </div>
+      </Popup>
+    </Marker>
+  )
+}

config/app.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.143.4",
+  "version": "1.144.1",
   "alerts": [],
   "isr": {
     "homepage": {

data/Ashish-simpleCoder.json

@@ -0,0 +1,17 @@
+{
+  "name": "Ashish Prajapati",
+  "bio": "Web Developer in JavaScript | ReactJS | Typescript-React",
+  "tags": ["Typescript", "Javascript", "ReactJS", "Open Source"],
+  "links": [
+    {
+      "name": "Connect on LinkedIn",
+      "url": "https://www.linkedin.com/in/ashish-prajapati-002154193/",
+      "icon": "FaLinkedin"
+    },
+    {
+      "name": "Follow me on Github",
+      "url": "https://github.com/Ashish-simpleCoder",
+      "icon": "FaGit"
+    }
+  ]
+}