Add github stars

Author: xPaw

index.html

@@ -83,6 +83,15 @@
 					<svg width="16" height="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h0"/></svg>
 					<a href="https://steamcommunity.com/workshop/filedetails/?id=3124567099">Inferno Night</a> by Angel, created by decompiling with Source 2 Viewer.
 				</div>
+				<a href="https://github.com/ValveResourceFormat/ValveResourceFormat" class="github-stars" id="js-stars">
+					<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
+						<path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
+					</svg>
+					<span>
+						<b id="js-stars-count">—</b>
+						stars
+					</span>
+				</a>
 			</div>
 		</div>
 

static/main.js

@@ -1,3 +1,20 @@
+fetch( 'https://api.github.com/repositories/42366054' )
+	.then( function( response )
+	{
+		if( !response.ok )
+		{
+			throw new Error( 'Failed to fetch github repo info' );
+		}
+
+		return response.json();
+	} )
+	.then( function( response )
+	{
+		const starsCount = document.getElementById( 'js-stars-count' );
+		const formatter = new Intl.NumberFormat( 'en', { notation: 'compact' } );
+		starsCount.textContent = formatter.format( response.stargazers_count );
+	} );
+
 fetch( 'https://api.github.com/repositories/42366054/releases/latest' )
 	.then( function( response )
 	{

static/style.css

@@ -154,7 +154,7 @@ a:active {
 
 .hero-right {
 	display: flex;
-    flex-direction: column;
+	flex-direction: column;
 	align-self: center;
 	gap: 2px;
 	flex-basis: 1000px;
@@ -532,3 +532,36 @@ a.hljs-built_in {
 		grid-template-columns: 1fr;
 	}
 }
+
+.github-stars {
+	display: inline-flex;
+	align-items: center;
+	align-self: center;
+	gap: 0.5rem;
+	padding: 0.5rem 0.75rem;
+	font-size: 1rem;
+	line-height: 1;
+	text-decoration: none;
+	color: #fff;
+	background: rgb(255 255 255 / 10%);
+	border: 1px solid rgb(255 255 255 / 20%);
+	border-radius: .5rem;
+	margin-top: 1rem;
+
+	&:hover {
+		background: rgb(255 255 255 / 15%);
+		color: #fff;
+		text-decoration: underline;
+	}
+
+	svg {
+		fill: currentColor;
+		flex-shrink: 0;
+	}
+
+	@media (min-width: 841px) {
+		position: absolute;
+		top: 0;
+		right: 1rem;
+	}
+}