Feature/vchi 2023 (#996)

* Add location to user type

* install leaflet packages

* fix types

* Add member map page and component

* Add hacktoberfest 2023 badge

* fix badge

* style badges

app/components/MemberMap.tsx

@@ -0,0 +1,66 @@
+import type { FixedUpUser, Location, MemberList } from 'members/types';
+import { useEffect } from 'react';
+import { MapContainer, Marker, TileLayer, Popup, useMap } from 'react-leaflet';
+
+function Markers({ members }: { members: MemberList }) {
+	const map = useMap();
+
+	useEffect(() => {
+		const filtered = members.filter(
+			(member): member is FixedUpUser & { location: Location } => {
+				return !!(member && member.location);
+			},
+		);
+
+		map.fitBounds(
+			filtered.map((member) => [
+				member.location.latitute,
+				member.location.longitude,
+			]),
+		);
+	}, [members, map]);
+
+	return (
+		<>
+			{members.map((member) =>
+				!member ||
+				!member.location?.latitute ||
+				!member.location?.longitude ? null : (
+					<Marker
+						key={member.github}
+						position={[member.location?.latitute, member.location?.longitude]}
+					>
+						<Popup>
+							{member.name}
+							{member.location?.title && (
+								<>
+									{' - '}
+									{member.location?.title}
+								</>
+							)}
+						</Popup>
+					</Marker>
+				),
+			)}
+		</>
+	);
+}
+
+export default function MemberMap({ members }: { members: MemberList }) {
+	return (
+		<div style={{ height: '50vh', position: 'relative' }}>
+			<MapContainer
+				center={[36.674222, -39.082187]}
+				zoom={1}
+				scrollWheelZoom={false}
+				style={{ height: '50vh', position: 'relative' }}
+			>
+				<TileLayer
+					attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+					url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+				/>
+				<Markers members={members} />
+			</MapContainer>
+		</div>
+	);
+}

app/routes/__frontend/members/index.tsx

@@ -6,7 +6,7 @@ import UndrawIllustration from '~/components/UndrawIllustration';
 import getMembers from '~/data/members';
 import type { MembersResponse } from '~/data/members';
 import { createMetaData } from '~/util/createMetaData.server';
-import type { LoaderArgs } from '@remix-run/node';
+import type { LoaderArgs, MetaFunction } from '@remix-run/node';
 
 export const loader = async (args: LoaderArgs) => {
 	const { core, members }: MembersResponse = await getMembers();
@@ -20,9 +20,9 @@ export const loader = async (args: LoaderArgs) => {
 	return json({ core, members, meta });
 };
 
-export function meta({ data: { meta } = {} } = {}) {
+export const meta: MetaFunction = ({ data: { meta } = {} }) => {
 	return meta;
-}
+};
 
 export default function EventsIndex() {
 	const { core, members } = useLoaderData<typeof loader>();

app/routes/__frontend/members/map.tsx

@@ -0,0 +1,62 @@
+import { json } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+import DefaultLayout from '~/components/layouts/DefaultLayout';
+
+import getMembers from '~/data/members';
+import type { MembersResponse } from '~/data/members';
+import { createMetaData } from '~/util/createMetaData.server';
+import type { LinksFunction, LoaderArgs, MetaFunction } from '@remix-run/node';
+import { type MemberList } from 'members/types';
+
+import { lazy } from 'react';
+import { ClientOnly } from 'remix-utils';
+
+export const links: LinksFunction = () => [
+	{
+		rel: 'stylesheet',
+		href: 'https://unpkg.com/[email protected]/dist/leaflet.css',
+		crossOrigin: 'anonymous',
+		integrity: 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=',
+	},
+];
+
+let MapLoader = lazy(() => import('~/components/MemberMap'));
+
+export const loader = async (args: LoaderArgs) => {
+	const { core, members }: MembersResponse = await getMembers();
+
+	const membersWithLocation: MemberList = [
+		...core.filter((member) => !!member?.location),
+		...members.filter((member) => !!member?.location),
+	];
+
+	const meta = createMetaData({
+		title: 'Virtual Coffee Members',
+		description: 'Meet our amazing members!',
+		Hero: 'UndrawTeamSpirit',
+	});
+
+	return json({ members: membersWithLocation, meta });
+};
+
+export const meta: MetaFunction = ({ data: { meta } = {} }) => {
+	return meta;
+};
+
+export default function EventsIndex() {
+	const { members } = useLoaderData<typeof loader>();
+
+	return (
+		<DefaultLayout
+			Hero="UndrawTeamSpirit"
+			heroHeader="Virtual Coffee Members"
+			heroSubheader="A community is only as awesome as its members!"
+		>
+			<div className="bg-light py-5">
+				<div className="container-xl">
+					<ClientOnly>{() => <MapLoader members={members} />}</ClientOnly>
+				</div>
+			</div>
+		</DefaultLayout>
+	);
+}

app/svg/badges/hacktoberfest-2023.tsx

@@ -0,0 +1,69 @@
+export function Hacktoberfest2023({
+	ariaHidden,
+	title = 'Hacktoberfest 2023 Contributor',
+}: {
+	ariaHidden?: boolean;
+	title?: string;
+}) {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			style={{
+				fillRule: 'evenodd',
+				clipRule: 'evenodd',
+				strokeLinejoin: 'round',
+				strokeMiterlimit: 2,
+			}}
+			{...(ariaHidden
+				? {
+						'aria-hidden': 'true',
+				  }
+				: {
+						role: 'img',
+						'aria-labelledby': 'Hacktoberfest2023SvgTitle',
+				  })}
+		>
+			{!ariaHidden && <title id="Hacktoberfest2023SvgTitle">{title}</title>}
+			<g>
+				<path
+					d="M3.833,20.574c-1.054,-0 -1.73,-0.716 -1.73,-1.79l-0,-4.456c-0,-1.112 -0.757,-1.725 -1.809,-1.768c-0.067,-0.003 -0.121,-0.056 -0.121,-0.123l0,-1.609c0,-0.067 0.054,-0.12 0.121,-0.123c1.052,-0.043 1.809,-0.655 1.809,-1.748l-0,-4.455c-0,-1.074 0.676,-1.791 1.73,-1.791l1.747,0c0.068,0 0.123,0.056 0.123,0.124l0,1.364c0,0.068 -0.055,0.124 -0.123,0.124l-1.404,-0c-0.069,-0 -0.124,0.055 -0.124,0.123l0,4.551c0,1.217 -0.806,2.265 -1.873,2.525c-0.056,0.014 -0.096,0.062 -0.096,0.12l-0,0.001c-0,0.058 0.04,0.107 0.096,0.12c1.067,0.26 1.873,1.308 1.873,2.525l0,4.551c0,0.068 0.055,0.124 0.124,0.124l1.404,-0c0.068,-0 0.123,0.055 0.123,0.123l0,1.364c0,0.068 -0.055,0.124 -0.123,0.124l-1.747,-0Z"
+					fill="#2a2a2a"
+					fillRule="nonzero"
+				/>
+				<path
+					d="M20.106,2.711c1.054,0 1.77,0.717 1.77,1.791l-0,4.455c-0,1.093 0.757,1.705 1.809,1.748c0.067,0.003 0.12,0.056 0.12,0.123l0,1.609c0,0.067 -0.053,0.12 -0.12,0.123c-1.052,0.043 -1.809,0.656 -1.809,1.768l-0,4.456c-0,1.074 -0.716,1.79 -1.77,1.79l-1.747,-0c-0.068,-0 -0.123,-0.056 -0.123,-0.124l-0,-1.364c-0,-0.068 0.055,-0.123 0.123,-0.123l1.444,-0c0.068,-0 0.124,-0.056 0.124,-0.124l-0,-4.551c-0,-1.217 0.769,-2.266 1.871,-2.525c0.057,-0.014 0.098,-0.062 0.098,-0.12c-0,-0.058 -0.041,-0.107 -0.098,-0.121c-1.102,-0.259 -1.871,-1.307 -1.871,-2.525l-0,-4.551c-0,-0.068 -0.056,-0.123 -0.124,-0.123l-1.444,-0c-0.068,-0 -0.123,-0.056 -0.123,-0.124l-0,-1.364c-0,-0.068 0.055,-0.124 0.123,-0.124l1.747,0Z"
+					fill="#2a2a2a"
+					fillRule="nonzero"
+				/>
+				<g>
+					<path
+						d="M16.719,9.685c-1.351,-0.322 -0.643,-4.76 -4.695,-4.76c-4.181,0 -3.216,4.245 -4.695,4.76c-1.48,0.514 -2.38,1.672 -2.38,3.28c3.28,0.193 1.544,2.958 2.766,3.344c1.222,0.45 1.736,0.515 2.186,1.479c0.322,0.708 0.836,1.287 2.123,1.287c2.122,-0 1.865,-1.801 2.958,-2.123c2.83,-0.836 0.193,-3.473 4.052,-3.28c0.064,-1.608 0.064,-3.409 -2.315,-3.987Z"
+						fillRule="nonzero"
+						fill="#f45d00"
+						stroke="#2a2a2a"
+						strokeWidth="1.29px"
+					/>
+					<use
+						xlinkHref="#_Image1"
+						x="11.534"
+						y="10.215"
+						width="4.181px"
+						height="2.315px"
+						transform="matrix(0.83611,0,0,0.771794,0,0)"
+					/>
+				</g>
+			</g>
+			<defs>
+				<image
+					id="_Image1"
+					width="5px"
+					height="3px"
+					xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAADCAYAAABbNsX4AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAOElEQVQImS3KUQ2AIAAFwGMzASVwLwrt6GAHRxOcGTSDP973lSQDDR0nVknyoGLHwrvh+OeNiesDHtoJuXOdP8QAAAAASUVORK5CYII="
+				/>
+			</defs>
+		</svg>
+	);
+}

app/svg/badges/index.ts

@@ -1 +1,2 @@
 export * from './hacktoberfest-2022';
+export * from './hacktoberfest-2023';

members/types.ts

@@ -30,11 +30,17 @@ export type Account =
 			title: string;
 	  };
 
-export type Badge = 'Hacktoberfest2022';
+export type Badge = 'Hacktoberfest2022' | 'Hacktoberfest2023';
 export type Flare = {
 	profileMask?: string;
 };
 
+export type Location = {
+	latitute: number;
+	longitude: number;
+	title?: string;
+};
+
 export type MemberObject = {
 	github: string;
 	name?: string;
@@ -43,6 +49,7 @@ export type MemberObject = {
 	accounts?: Account[];
 	badges?: Badge[];
 	flare?: Flare;
+	location?: Location;
 };
 
 export type GithubSearchUser = {

package.json

@@ -68,6 +68,7 @@
 		"graphql-request": "^6.1.0",
 		"hast-util-to-string": "^2.0.0",
 		"hastscript": "^8.0.0",
+		"leaflet": "^1.9.4",
 		"luxon": "^3.4.3",
 		"markdown-it": "^13.0.1",
 		"mdast-util-toc": "^7.0.0",
@@ -78,6 +79,7 @@
 		"prop-types": "^15.8.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-leaflet": "^4.2.1",
 		"react-router": "^6.16.0",
 		"react-router-dom": "^6.16.0",
 		"rehype-autolink-headings": "^6.1.1",
@@ -90,6 +92,7 @@
 		"remark-rehype": "^10.1.0",
 		"remix-auth": "^3.5.1",
 		"remix-auth-form": "^1.3.0",
+		"remix-utils": "^6.6.0",
 		"require-dir": "^1.2.0",
 		"sanitize-html": "^2.11.0",
 		"sass": "^1.67.0",
@@ -100,6 +103,7 @@
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/forms": "^0.5.6",
 		"@tailwindcss/typography": "^0.5.10",
+		"@types/leaflet": "^1.9.6",
 		"@types/luxon": "^3.3.2",
 		"@types/react": "^18.2.22",
 		"@types/react-dom": "^18.2.7",