feat: Add script to get npm package data

.github/workflows/update-stars.yml → .github/workflows/fetch-latest-data.yml

@@ -1,4 +1,4 @@
-name: Update stars count
+name: Fetch latest data
 
 on:
   schedule:
@@ -19,10 +19,12 @@ jobs:
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install
-      - name: Run script
+      - name: Update stars
         uses: ./.github/actions/update-stars
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Update npm data
+        run: node scripts/updateNpm.js
       - name: Run format
         run: pnpm run format
       - name: Create Pull Request

package.json

@@ -26,6 +26,7 @@
 		"@types/node": "^20.10.4",
 		"@typescript-eslint/eslint-plugin": "^6.14.0",
 		"@typescript-eslint/parser": "^6.14.0",
+		"dayjs": "^1.11.10",
 		"eslint": "^8.55.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",

scripts/updateNpm.js

@@ -0,0 +1,33 @@
+// @ts-check
+
+import { writeFileSync } from 'node:fs';
+import { promisify } from 'node:util';
+import { exec } from 'node:child_process';
+import { componentsSchema, toolsSchema } from '../src/lib/schemas.js';
+import components from '../src/routes/components/components.json' assert { type: 'json' };
+import tools from '../src/routes/tools/tools.json' assert { type: 'json' };
+
+const execAsync = promisify(exec);
+
+const data = [...componentsSchema.parse(components), ...toolsSchema.parse(tools)];
+
+const npm = await Promise.all(
+	data.map((pkg) => processPackage(pkg).catch((error) => console.log(error.message)))
+).then((values) => {
+	return values.reduce((result, value) => Object.assign(result, value), {});
+});
+
+writeFileSync('src/lib/npm.json', JSON.stringify(npm));
+
+/** @param {ReturnType<typeof data>[0]} pkg */
+async function processPackage(pkg) {
+	if (!pkg.npm) {
+		throw new Error(`npm field missing from ${pkg.title} (skipping)`);
+	}
+	const { stdout } = await execAsync(`npm view ${pkg.npm} --json`);
+	const data = JSON.parse(stdout.toString());
+	const version = data.version;
+	const date = data.time[version];
+	const support = data.peerDependencies?.svelte ? data.peerDependencies.svelte : 'Unknown';
+	return { [pkg.npm]: { version: version, date: date, support: support } };
+}

src/lib/components/ComponentIndex/Card.svelte

@@ -2,6 +2,7 @@
 	import Tag from '../Tag.svelte';
 	import { copyToClipboard } from '$lib/utils/clipboard';
 	import { packageManager as manager } from '$stores/packageManager';
+	import { relativeDate } from '$utils/relativeDate';
 
 	export let active = false;
 	export let title = '';
@@ -11,6 +12,8 @@
 	export let url = '';
 	export let npm = '';
 	export let repository = undefined;
+	export let date = undefined;
+	export let version = undefined;
 
 	let clipboardCopy = false;
 
@@ -33,44 +36,51 @@
 </script>
 
 <div class="card" class:active id="component-{title}">
-	<h3>
-		<a href="#component-{title}">#</a>
-		{#if url || repository}<a href={url || repository}>{title}</a>{:else}<span>{title}</span>{/if}
-		{#if npm}<Tag
-				click={() => copy()}
-				variant="copy"
-				title={clipboardCopy ? 'copied!' : `${packageManagers[$manager]} ${cleanupNpm(npm)}`}
-			/>{/if}
-	</h3>
-	<p class="flex-grow">{description}</p>
-	{#if tags}
-		<div class="card__tags">
-			{#each tags as tag}
-				<Tag title={tag} variant="blue" />
-			{/each}
+	<div class="card__top">
+		<div>
+			<h3>
+				<a href="#component-{title}">#</a>
+				{#if url || repository}<a href={url || repository}>{title}</a>{:else}<span>{title}</span
+					>{/if}
+			</h3>
 		</div>
-	{/if}
-	<div class="card__bottom">
 		<div>
 			{#if (repository || url || '').includes('github')}
-				<a title="Go to the source code" href={repository || url}
+				<a class="repo" title="Go to the source code" href={repository || url}
 					><img style="display:inline" src="/images/github_logo.svg" alt="github logo" /></a
 				>
 			{:else if (repository || url || '').includes('gitlab')}
-				<a title="Go to the source code" href={repository || url}
+				<a class="repo" title="Go to the source code" href={repository || url}
 					><img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" /></a
 				>
 				<!-- {:else} -->
 			{/if}
 		</div>
+	</div>
+
+	{#if npm}
+		<Tag
+			click={() => copy()}
+			variant="copy"
+			title={clipboardCopy ? 'copied!' : `${packageManagers[$manager]} ${cleanupNpm(npm)}`}
+		/>
+	{/if}
+	<p class="flex-grow">{description}</p>
+	{#if tags}
+		<div class="card__tags">
+			{#each tags as tag}
+				<Tag title={tag} variant="blue" />
+			{/each}
+		</div>
+	{/if}
+	<div class="card__bottom">
 		<div>
 			{#if typeof stars !== 'undefined'}
 				&#9733;
 				<code>{stars}</code>
 			{/if}
 		</div>
-		<!-- commenting out dates just cause it is not very updated yet - all the cards show same date. put back in when we have better scraping -->
-		<!-- <datetime value={addedOn}>{new Intl.DateTimeFormat('en-Us').format(Date.parse(addedOn))}</datetime> -->
+		{#if date && version}<span class="date">Updated {relativeDate(date)} ({version})</span>{/if}
 	</div>
 </div>
 
@@ -97,6 +107,11 @@
 		flex-wrap: wrap;
 		margin-bottom: 1rem;
 	}
+	.card__top {
+		display: flex;
+		justify-content: space-between;
+		align-items: top;
+	}
 	.card__bottom {
 		display: flex;
 		justify-content: space-between;
@@ -105,7 +120,7 @@
 	.card__bottom > * {
 		white-space: nowrap;
 	}
-	.card__bottom a {
+	.repo {
 		border-bottom: none;
 		aspect-ratio: 1/1;
 		display: flex;
@@ -117,10 +132,12 @@
 		background-color: rgba(0, 0, 0, 0);
 		transition: background-color 200ms ease-out;
 	}
-	.card__bottom a:hover {
+	.repo:hover {
 		background-color: rgba(0, 0, 0, 0.25);
 	}
-
+	.date {
+		font-size: 14px;
+	}
 	.flex-grow {
 		flex-grow: 1;
 	}