Merging Events, Local communities and part of nat communities

src/lib/redirects.ts

@@ -18,10 +18,12 @@ const REDIRECTS: Record<string, string> = {
 	'/national-chapters': '/national-groups',
 	'/email': '/email-builder',
 	'/dangers': '/risks',
+	'/events': '/communities',
 	'/polls': '/polls-and-surveys',
 	'/surveys': '/polls-and-surveys',
 	'/stipends': '/volunteer-stipends',
-	'/volunteer-vacancies': '/join#volunteer-vacancies'
+	'/volunteer-vacancies': '/join#volunteer-vacancies',
+	'/find-your-community': '/communities'
 }
 
 /** Temporary redirects (302) - for time-limited campaigns, A/B tests, etc. */

src/routes/communities/+page.svelte

@@ -144,6 +144,30 @@
 </div>
 <CommunitiesList {communities} />
 
+<h2>View all events <Link href="https://lu.ma/PauseAI">here</Link></h2>
+
+<iframe
+	src="https://lu.ma/embed/calendar/cal-E1qhLPs5IvlQr8S/events?"
+	height="450"
+	frameborder="0"
+	style="border: 1px solid #bfcbda88; border-radius: 4px; width: 100%;"
+	allowfullscreen
+	aria-hidden="false"
+	title="PauseAI Events Calendar"
+></iframe>
+
+<h2>Create an event</h2>
+
+<p>
+	If you want to organize an event, please <Link href="https://lu.ma/create"
+		>create an event on lu.ma</Link
+	> and press the "submit event" button on <Link href="https://lu.ma/PauseAI"
+		>our calendar page</Link
+	>.
+</p>
+
+<p>Read more about <Link href="/local-organizing">local organizing</Link>.</p>
+
 <style>
 	.map-wrap {
 		position: relative;

src/routes/communities/CommunitiesList.svelte

@@ -40,29 +40,191 @@
 		},
 		{} as Record<string, string>
 	)
+
+	// Start with all countries collapsed by default
+	let expandedCountries: Set<string> = new Set()
+
+	function toggleCountry(country: string) {
+		const newSet = new Set(expandedCountries)
+		if (newSet.has(country)) {
+			newSet.delete(country)
+		} else {
+			newSet.add(country)
+		}
+		expandedCountries = newSet
+	}
 </script>
 
-<div class="prose">
-	<ul>
+<div class="communities-container">
+	<div class="grid">
 		{#each sortedNationalities as nationality}
-			<li>
-				<strong>
-					{#if nationalLinks[nationality]}
-						<Link href={nationalLinks[nationality]}>{nationality}</Link>
-					{:else}
-						{nationality}
+			{@const localCommunities = groupedCommunities[nationality] || []}
+			<div class="country-card">
+				<button
+					class="country-header"
+					class:expanded={expandedCountries.has(nationality)}
+					class:has-communities={localCommunities.length > 0}
+					on:click={() => toggleCountry(nationality)}
+				>
+					<span class="country-name">
+						{#if nationalLinks[nationality]}
+							<Link href={nationalLinks[nationality]}>{nationality}</Link>
+						{:else}
+							{nationality}
+						{/if}
+					</span>
+					{#if localCommunities.length > 0}
+						<span class="count-badge">{localCommunities.length}</span>
+						<span class="expand-icon">{expandedCountries.has(nationality) ? '−' : '+'}</span>
 					{/if}
-				</strong>
-				{#if groupedCommunities[nationality] && groupedCommunities[nationality].length > 0}
-					<ul>
-						{#each groupedCommunities[nationality].sort( (a, b) => a.name.localeCompare(b.name) ) as localCommunity}
-							<li>
-								<Link href={localCommunity.link}>{localCommunity.name}</Link>
-							</li>
+				</button>
+				{#if expandedCountries.has(nationality) && localCommunities.length > 0}
+					<div class="local-communities">
+						{#each localCommunities.sort((a, b) => a.name.localeCompare(b.name)) as localCommunity}
+							<a
+								href={localCommunity.link}
+								class="local-link"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								{localCommunity.name}
+							</a>
 						{/each}
-					</ul>
+					</div>
 				{/if}
-			</li>
+			</div>
 		{/each}
-	</ul>
+	</div>
 </div>
+
+<style>
+	.communities-container {
+		margin-top: 2rem;
+	}
+
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		gap: 0.75rem;
+	}
+
+	.country-card {
+		border: 1px solid var(--text-subtle);
+		border-radius: 6px;
+		background: var(--bg);
+		overflow: hidden;
+		transition:
+			box-shadow 0.2s,
+			transform 0.2s;
+	}
+
+	.country-card:hover {
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		transform: translateY(-1px);
+	}
+
+	.country-header {
+		width: 100%;
+		padding: 0.75rem 1rem;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		background: none;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		font-size: 0.95rem;
+		transition: background-color 0.2s;
+		color: var(--text);
+	}
+
+	.country-header:hover {
+		background-color: var(--bg-subtle);
+	}
+
+	.country-header.has-communities:hover {
+		background-color: var(--bg-subtle);
+	}
+
+	.country-header.expanded {
+		background-color: var(--bg-subtle);
+	}
+
+	.country-name {
+		flex: 1;
+		font-weight: 600;
+		min-width: 0;
+	}
+
+	.country-name :global(a) {
+		text-decoration: none;
+		color: inherit;
+	}
+
+	.country-name :global(a:hover) {
+		text-decoration: underline;
+	}
+
+	.count-badge {
+		background-color: var(--bg-subtle);
+		color: var(--brand);
+		padding: 0.2rem 0.5rem;
+		border-radius: 12px;
+		font-size: 0.75rem;
+		font-weight: 600;
+		white-space: nowrap;
+	}
+
+	.expand-icon {
+		font-size: 1.2rem;
+		font-weight: bold;
+		color: var(--text);
+		line-height: 1;
+		width: 1.2rem;
+		text-align: center;
+		opacity: 0.7;
+	}
+
+	.local-communities {
+		padding: 0.5rem 1rem 0.75rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+		border-top: 1px solid var(--text-subtle);
+		background-color: var(--bg-subtle);
+	}
+
+	.local-link {
+		padding: 0.4rem 0.6rem;
+		text-decoration: none;
+		color: var(--text);
+		font-size: 0.875rem;
+		border-radius: 4px;
+		transition:
+			background-color 0.2s,
+			color 0.2s;
+		display: block;
+	}
+
+	.local-link:hover {
+		background-color: var(--bg-secondary);
+		color: var(--brand);
+	}
+
+	@media (max-width: 768px) {
+		.grid {
+			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+			gap: 0.5rem;
+		}
+
+		.country-header {
+			padding: 0.6rem 0.75rem;
+			font-size: 0.9rem;
+		}
+
+		.local-communities {
+			padding: 0.4rem 0.75rem 0.6rem;
+		}
+	}
+</style>

src/routes/communities/communities.ts

@@ -21,9 +21,9 @@ export type Community = RawCommunity & {
 }
 
 export const communitiesMeta: Post = {
-	title: 'PauseAI Local Communities',
+	title: 'Find your PauseAI Community',
 	description:
-		'A map of all the local PauseAI communities and people around the world. Also shows adjacent AI Safety communities.',
+		'Find your local PauseAI community and join events. A map of all PauseAI communities and people around the world.',
 	date: '2023-12-15',
 	slug: 'communities',
 	categories: []

src/routes/communities/national-chapters.json

@@ -1,91 +1,91 @@
 {
 	"communities": [
 		{
-			"name": "PauseAI Netherlands",
+			"name": "Nederland",
 			"lat": 52,
 			"lon": 5.6,
 			"link": "https://chat.whatsapp.com/EOGvhoPCiCqDqwuf9JUxtB"
 		},
 		{
-			"name": "PauseAI Serbia",
+			"name": "Srbija",
 			"lat": 44,
 			"lon": 21,
 			"link": "https://www.facebook.com/PauseAISerbia"
 		},
 		{
-			"name": "PauseAI UK",
+			"name": "United Kingdom",
 			"lat": 54.2,
 			"lon": -2.4,
 			"link": "https://x.com/PauseAI_UK"
 		},
 		{
-			"name": "PauseAI France",
+			"name": "France",
 			"lat": 47.8,
 			"lon": 2.6,
 			"link": "$$DISCORD_FRANCE$$"
 		},
 		{
-			"name": "PauseAI Canada",
+			"name": "Canada",
 			"lat": 56,
 			"lon": -105,
 			"link": "https://pauseai.ca/"
 		},
 		{
-			"name": "PauseAI Romania",
+			"name": "România",
 			"lat": 44.5,
 			"lon": 26,
 			"link": "https://www.facebook.com/people/Pause-AI-Romania/61581783381263/?rdid=LfnCxIeWHG9TL4Bp&share_url=https%3A%2F%2Fwww.facebook.com%2Fshare%2F19yinn6qj4%2F"
 		},
 		{
-			"name": "PauseAI Kenya",
+			"name": "Kenya",
 			"lat": 0.5,
 			"lon": 38,
 			"link": "https://x.com/Pauseaikenya"
 		},
 		{
-			"name": "PauseAI España",
+			"name": "España",
 			"lat": 41.3,
 			"lon": -4,
 			"link": "https://chat.whatsapp.com/KEgD22LEo6xEVvjH4fD8br"
 		},
 		{
-			"name": "PauseAI Australia",
+			"name": "Australia",
 			"lat": -25,
 			"lon": 134.5,
 			"link": "https://www.facebook.com/groups/571590459293618/"
 		},
 		{
-			"name": "PauseAI Germany",
+			"name": "Deutschland",
 			"lat": 51.1,
 			"lon": 10,
 			"link": "$$DISCORD_GERMANY$$"
 		},
 		{
-			"name": "PauseAI US",
+			"name": "United States",
 			"lat": 39.5,
 			"lon": -98,
 			"link": "$$WEBSITE_US$$"
 		},
 		{
-			"name": "PauseAI Czechia",
+			"name": "Czechia",
 			"lat": 50,
 			"lon": 15,
 			"link": "https://discord.gg/4rZ2nGZB3r"
 		},
 		{
-			"name": "PauseAI Poland",
+			"name": "Polska",
 			"lat": 52,
 			"lon": 19.5,
 			"link": "mailto:[email protected]"
 		},
 		{
-			"name": "PauseAI Nigeria",
+			"name": "Nigeria",
 			"lat": 9.5,
 			"lon": 8,
 			"link": "mailto:[email protected]"
 		},
 		{
-			"name": "PauseAI Sweden",
+			"name": "Sverige",
 			"lat": 65,
 			"lon": 17,
 			"link": "mailto:[email protected]"