Merge branch 'svelte-society:main' into main

scripts/updateNpm.js

@@ -35,6 +35,9 @@ writeFileSync('src/lib/data/npm.json', JSON.stringify(output));
 
 /** @param {import('zod').infer<typeof packagesSchema>[0]} pkg */
 async function processPackage(pkg) {
+	if (!('npm' in pkg)) {
+		return {};
+	}
 	const { stdout } = await execAsync(`npm view ${pkg.npm} --json`);
 	const data = JSON.parse(stdout.toString());
 	const version = data.version;

scripts/updatePublint.js

@@ -16,6 +16,9 @@ import { chunk } from './chunk.js';
 const injectVersions = (input) => {
 	const output = [];
 	for (const item of input) {
+		if (!('npm' in item)) {
+			continue;
+		}
 		/** @type {string} */
 		const version = npm[item.npm]?.version;
 		if (version) {

src/lib/SearchableJson.svelte

@@ -5,6 +5,7 @@
 	import { packageManager } from '$stores/packageManager';
 	import CategoryFilters from '$lib/CategoryFilters.svelte';
 	import { filterArray, sortArray } from '$utils/arrayUtils';
+	import { tick } from 'svelte';
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	export let data: any[];
@@ -18,6 +19,28 @@
 	let searchValue: string;
 	let sort = sortableFields[0];
 
+	packageManager.subscribe((newValues) => {
+		const grouped = newValues.reduce(
+			(carry, item) => {
+				if (['npm', 'pnpm', 'yarn'].includes(item)) {
+					carry['npm'].push(item);
+				}
+				if (['gem', 'bundler'].includes(item)) {
+					carry['gem'].push(item);
+				}
+				return carry;
+			},
+			{ npm: [], gem: [] } as { npm: Array<string>; gem: Array<string> }
+		);
+		const corrected = [
+			grouped['npm'][grouped['npm'].length - 1] ?? 'npm',
+			grouped['gem'][grouped['gem'].length - 1] ?? 'gem'
+		];
+		if (newValues.join() !== corrected.join()) {
+			tick().then(() => packageManager.set(corrected));
+		}
+	});
+
 	$: filteredData = filterArray(data, searchValue);
 	$: sortedData = sortArray(filteredData, sort);
 </script>
@@ -48,12 +71,19 @@
 			isClearable={false}
 			isSearchable={false}
 			showIndicator
-			value={{ value: $packageManager }}
-			on:select={({ detail }) => ($packageManager = detail.value)}
+			handleClear={() => ({})}
+			value={$packageManager.map((value) => ({ value }))}
+			groupBy={(item) => item.group}
+			isMulti={true}
+			on:select={({ detail }) => {
+				$packageManager = (detail ?? []).map((i) => i.value);
+			}}
 			items={[
-				{ label: 'NPM', value: 'npm' },
-				{ label: 'PNPM', value: 'pnpm' },
-				{ label: 'Yarn', value: 'yarn' }
+				{ label: 'NPM', value: 'npm', group: 'NPM' },
+				{ label: 'PNPM', value: 'pnpm', group: 'NPM' },
+				{ label: 'Yarn', value: 'yarn', group: 'NPM' },
+				{ label: 'RubyGem', value: 'gem', group: 'Gem' },
+				{ label: 'Bundler', value: 'bundler', group: 'Gem' }
 			]}
 		/>
 		<a href="/help/submitting?type={submittingType}" class="submit"
@@ -74,6 +104,7 @@
 			stars={entry.stars}
 			date={entry.date}
 			npm={entry.npm}
+			gem={entry.gem}
 			version={entry.version}
 		/>
 	{/each}

src/lib/components/ComponentIndex/Card.svelte

@@ -7,22 +7,35 @@
 	export let title: string;
 	export let description: string;
 	export let stars: string;
-	export let npm = '';
-	export let repository = undefined;
+	export let npm: string | undefined = undefined;
+	export let gem: string | undefined = undefined;
+	export let repository: string | undefined = undefined;
 	export let date = undefined;
 	export let version = undefined;
 
 	let clipboardCopy = false;
 
 	const copy = () => {
-		copyToClipboard(`${packageManagers[$manager]} ${npm}`).then(() => (clipboardCopy = false));
+		copyToClipboard(packageManagerAction($manager, npm, gem)).then(() => (clipboardCopy = false));
 		clipboardCopy = true;
 	};
 
+	const packageManagerAction = ($manager: Array<string>, npm?: string, gem?: string): string => {
+		if (npm) {
+			return `${packageManagers[$manager.find((m) => ['npm', 'pnpm', 'yarn'].includes(m)) ?? 'npm']} ${npm}`;
+		}
+		if (gem) {
+			return `${packageManagers[$manager.find((m) => ['gem', 'bundler'].includes(m)) ?? 'gem']} ${gem}`;
+		}
+		return '';
+	};
+
 	const packageManagers = {
 		npm: 'npm install',
 		pnpm: 'pnpm add',
-		yarn: 'yarn add'
+		yarn: 'yarn add',
+		gem: 'gem install',
+		bundler: 'bundle add'
 	};
 </script>
 
@@ -34,7 +47,7 @@
 			</h3>
 		</div>
 		<div>
-			{#if repository.includes('github')}
+			{#if repository?.includes('github')}
 				<a
 					class="repo box-border flex aspect-square rounded-full border-none"
 					title="Go to the source code"
@@ -43,7 +56,7 @@
 				>
 					<img style="display:inline" src="/images/github_logo.svg" alt="github logo" />
 				</a>
-			{:else if repository.includes('gitlab')}
+			{:else if repository?.includes('gitlab')}
 				<a
 					class="repo box-border flex aspect-square rounded-full border-none"
 					title="Go to the source code"
@@ -52,16 +65,24 @@
 				>
 					<img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" />
 				</a>
-				<!-- {:else} -->
+			{:else if repository}
+				<a
+					class="repo box-border flex aspect-square rounded-full border-none"
+					title="Go to the source code"
+					target="_blank"
+					href={repository}
+				>
+					🌐
+				</a>
 			{/if}
 		</div>
 	</div>
 
-	{#if npm}
+	{#if npm || gem}
 		<Tag
 			click={() => copy()}
 			variant="copy"
-			title={clipboardCopy ? 'copied!' : `${packageManagers[$manager]} ${npm}`}
+			title={clipboardCopy ? 'copied!' : packageManagerAction($manager, npm, gem)}
 		/>
 	{/if}
 	<p class="flex-grow pb-6">{description}</p>
@@ -89,6 +110,9 @@
 		margin: -4px;
 		background-color: rgba(0, 0, 0, 0);
 		transition: background-color 200ms ease-out;
+		text-decoration: none;
+		font-size: 1rem;
+		line-height: 18px;
 	}
 	.repo:hover {
 		background-color: rgba(0, 0, 0, 0.25);

src/lib/components/Select.svelte

@@ -28,7 +28,7 @@
 		flex-direction: column;
 	}
 
-	.themed :global(.select-container) {
+	.themed :global(.select-container.select-container) {
 		border: 2px solid var(--dark-gray);
 		cursor: pointer;
 		flex: 1;
@@ -39,17 +39,18 @@
 	}
 
 	.themed :global(.multiSelectItem) {
-		font-size: 0.875rem;
+		font-size: 1rem;
 		align-items: center;
 		--multiItemBorderRadius: var(--s-1);
-		--multiItemHeight: 1.25rem;
+		/*--multiItemHeight: 1.25rem;*/
 		--multiItemMargin: 0;
 		--multiItemPadding: 0.2rem 0.3rem;
 		--multiClearBG: transparent;
 		--multiClearFill: var(--secondary);
 		--multiClearHoverBG: transparent;
-		/* --multiClearHoverFill: var(--white); */
-		/* --multiLabelMargin: 1px 5px 0 0; */
+		--multiClearHoverFill: var(--white);
+		--multiClearTop: 0px;
+		/*--multiLabelMargin: 1px 5px 0 0;*/
 	}
 
 	.themed :global(input) {

src/lib/components/Societies/societies.json

@@ -29,17 +29,22 @@
 		"url": "https://www.meetup.com/de-DE/Svelte-js-Meetup-Hamburg/",
 		"githuburl": "https://github.com/svelte-meetup-hamburg/meetups/issues"
 	},
+	{
+		"name": "Svelte Berlin",
+		"country": "🇩🇪 Germany",
+		"url": "https://lu.ma/ud76698y",
+		"githuburl": "https://github.com/nika-d/svelte-berlin"
+	},
 	{
 		"name": "Amsterdam SvelteJS",
 		"country": "🇳🇱 Netherlands",
 		"url": "https://www.meetup.com/Amsterdam-SvelteJS/",
 		"discord": "https://discord.gg/YWbEhX99"
 	},
 	{
-		"name": "Svelte Bergen",
+		"name": "Svelte Norway",
 		"country": "🇳🇴 Norway",
-		"twitter": "@stephanevanraes",
-		"url": "https://www.downtomeet.com/Svelte-Bergen"
+		"discord": "https://discord.gg/Agneq5jQ7P"
 	},
 	{
 		"name": "Svelte Society Stockholm",