Add repository node to json (#438)

svelte-society · Aug 16, 2023 · 60bb47f · 60bb47f
1 parent dd27257
commit 60bb47f
Show file tree

Hide file tree

Showing 8 changed files with 617 additions and 976 deletions.
diff --git a/.github/actions/update-stars/main.js b/.github/actions/update-stars/main.js
@@ -33,9 +33,9 @@ function gatherUrls() {
 	let templates = JSON.parse(readFileSync('src/routes/templates/templates.json'));
 
 	return [
-		...components.map((component) => component.url),
-		...tools.map((tool) => tool.url),
-		...templates.map((template) => template.url)
+		...components.map((component) => component.repository),
+		...tools.map((tool) => tool.repository),
+		...templates.map((template) => template.repository)
 	];
 }
 

diff --git a/src/lib/components/ComponentIndex/Card.svelte b/src/lib/components/ComponentIndex/Card.svelte
@@ -10,7 +10,7 @@
 	export let stars;
 	export let url = '';
 	export let npm = '';
-	export let repo = '';
+	export let repository = undefined;
 
 	let clipboardCopy = false;
 
@@ -34,7 +34,8 @@
 
 <div class="card" class:active id="component-{title}">
 	<h3>
-		<a href="#component-{title}">#</a> <a href={url}>{title}</a>
+		<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"
@@ -49,24 +50,28 @@
 			{/each}
 		</div>
 	{/if}
-	{#if typeof stars !== 'undefined'}
-		<div class="card__bottom">
-			<div>
-				{#if (repo || url).includes('github')}
-					<img style="display:inline" src="/images/github_logo.svg" alt="github logo" />
-				{:else if (repo || url).includes('gitlab')}
-					<img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" />
-					<!-- {:else} -->
-				{/if}
-			</div>
-			<div>
+	<div class="card__bottom">
+		<div>
+			{#if (repository || url || '').includes('github')}
+				<a 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}
+					><img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" /></a
+				>
+				<!-- {:else} -->
+			{/if}
+		</div>
+		<div>
+			{#if typeof stars !== 'undefined'}
 				&#9733;
 				<code>{stars}</code>
-			</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}
 		</div>
-	{/if}
+		<!-- 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> -->
+	</div>
 </div>
 
 <style>
@@ -95,10 +100,26 @@
 	.card__bottom {
 		display: flex;
 		justify-content: space-between;
+		align-items: end;
 	}
 	.card__bottom > * {
 		white-space: nowrap;
 	}
+	.card__bottom a {
+		border-bottom: none;
+		aspect-ratio: 1/1;
+		display: flex;
+		min-height: 26px;
+		padding: 4px;
+		border-radius: 50%;
+		margin: -4px;
+		box-sizing: border-box;
+		background-color: rgba(0, 0, 0, 0);
+		transition: background-color 200ms ease-out;
+	}
+	.card__bottom a:hover {
+		background-color: rgba(0, 0, 0, 0.25);
+	}
 
 	.flex-grow {
 		flex-grow: 1;