From ff48d782c3ea37144b1818ba284dcff6fc8c5f8b Mon Sep 17 00:00:00 2001
From: hazycora <hazysu@riseup.net>
Date: Thu, 3 Aug 2023 02:06:43 -0500
Subject: [PATCH] refactor, redesign

---
 assets/style.css    | 32 ++++++++++++++++++++++++++------
 views/issue.eta     |  9 ++-------
 views/layout.eta    |  6 ++++++
 views/repo.eta      | 17 +++++++++++------
 views/spanwords.eta |  2 +-
 5 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 0e2cfa7..7191a09 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -3,8 +3,7 @@ p {
 }
 
 .wrapper {
-	background-color: #171926;
-	background-image: linear-gradient(to bottom, #171926, #10121d);
+	background-color: #10121d;
 	display: flex;
 	align-items: center;
 	flex-direction: column;
@@ -30,21 +29,21 @@ p {
 .contents {
 	display: flex;
 	width: 100%;
+	gap: 30px;
 }
 
 .info {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	gap: 10px;
-	width: 80%;
+	width: 900px;
 }
 
 .graphics {
 	display: flex;
 	justify-content: flex-end;
 	align-items: flex-start;
-	width: 20%;
+	width: 120px;
 }
 
 .graphics > img {
@@ -54,14 +53,31 @@ p {
 }
 
 .title {
+	width: 100%;
 	font-weight: 800;
 	font-size: 4.5rem;
 	line-height: 1em;
 	display: flex;
 	column-gap: 0.25em;
-	row-gap: -0.1em;
 	line-height: 1em;
 	flex-wrap: wrap;
+	margin-bottom: 0.1em;
+}
+
+.repo .title {
+	white-space: nowrap;
+}
+
+.title span.word {
+	max-width: 100%;
+	padding: 2rem 0;
+	margin: -2rem 0;
+	white-space: nowrap;
+}
+
+.title span.word:last-child {
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .issue .number {
@@ -97,6 +113,10 @@ p {
 	font-size: 42px;
 	font-weight: 500;
 	color: #8c91af;
+	overflow: hidden;
+	display: block;
+	text-overflow: ellipsis;
+	line-clamp: 2'...';
 }
 
 .languages {
diff --git a/views/issue.eta b/views/issue.eta
index 0578738..a198552 100644
--- a/views/issue.eta
+++ b/views/issue.eta
@@ -1,15 +1,10 @@
 <% layout('layout') %>
 <%
 	let title = it.issue.title
-	const titleCharLimit = 50
+	const titleCharLimit = 30
 	if (title.length > titleCharLimit) {
 		title = title.slice(0, titleCharLimit).trim() + '...'
 	}
-	let body = it.issue.body
-	const bodyCharLimit = 50
-	if (body.length > bodyCharLimit) {
-		body = body.slice(0, bodyCharLimit).trim() + '...'
-	}
 %>
 <div class="main issue">
 	<div class="contents">
@@ -19,7 +14,7 @@
 			%></p>
 			<% if (it.issue.body) { %>
 				<p class="description">
-					<%= body %>
+					<%= it.issue.body %>
 				</p>
 			<% } %>
 		</div>
diff --git a/views/layout.eta b/views/layout.eta
index 79479b6..075c85a 100644
--- a/views/layout.eta
+++ b/views/layout.eta
@@ -17,6 +17,12 @@
 			place-items: center;
 			height: 100%;
 		}
+		/* we're using unprefixed line-clamp, but we want that to look correct in dev mode */
+		*[style*="line-clamp: 2"] {
+			display: -webkit-box !important;
+			-webkit-line-clamp: 2;
+			-webkit-box-orient: vertical;
+		}
 		</style>
 		<title>OpenGraph Debug Preview</title>
 	</head>
diff --git a/views/repo.eta b/views/repo.eta
index 0fbd350..35a72ce 100644
--- a/views/repo.eta
+++ b/views/repo.eta
@@ -1,5 +1,6 @@
 <% layout('layout') %>
 <%
+	let description = it.repo.description?.replace(/https?:\/\/([\S]+)/g, '$1')
 	function prettyNumber(number) {
 		if (number < 1000) return number
 		return Math.floor(number / 1000)+'k'
@@ -8,18 +9,18 @@
 <div class="main repo">
 	<div class="contents">
 		<div class="info">
-			<p class="author"><span><%= it.repo.owner.full_name %></span><span class="username">@<%= it.repo.owner.login %></span></p>
+			<p class="author"><span><%= it.repo.owner.full_name || it.repo.owner.login %></span><span class="username">@<%= it.repo.owner.login %></span></p>
 			<p class="title"><%= it.repo.name %></p>
-			<% if (it.repo.description) { %>
-				<p class="description"><%= it.repo.description %></p>
+			<% if (description) { %>
+				<p class="description"><%= description %></p>
 			<% } %>
 		</div>
 		<div class="graphics">
 			<img width="120" height="120" src="<%= it.repo.avatar_url || it.repo.owner.avatar_url %>"></img>
 		</div>
 	</div>
-	<% if (it.repo.open_issues_count > 0 || it.repo.stars_count > 0 || it.repo.forks_count > 0) { %>
-		<div class="info-line">
+	<div class="info-line">
+		<% if (it.repo.open_issues_count > 0 || it.repo.stars_count > 0 || it.repo.forks_count > 0) { %>
 			<div class="fact">
 				<p class="fact-heading"><%= prettyNumber(it.repo.open_issues_count) %></p>
 				<p class="fact-subtitle"><%= (it.repo.open_issues_count) != 1 ? 'Issues' : 'Issue' %></p>
@@ -32,6 +33,10 @@
 				<p class="fact-heading"><%= prettyNumber(it.repo.forks_count) %></p>
 				<p class="fact-subtitle"><%= (it.repo.forks_count) != 1 ? 'Forks' : 'Fork' %></p>
 			</div>
+		<% } %>
+		<div class="fact">
+			<p class="fact-subtitle">Last updated</p>
+			<p class="fact-heading"><%= new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(new Date(it.repo.updated_at)) %></p>
 		</div>
-	<% } %>
+	</div>
 </div>
\ No newline at end of file
diff --git a/views/spanwords.eta b/views/spanwords.eta
index 934606f..7e7a736 100644
--- a/views/spanwords.eta
+++ b/views/spanwords.eta
@@ -2,4 +2,4 @@
 	satori, the HTML-to-SVG engine we use, has no concept of "inline" or "inline-block"
 	CSS display values. So, we must emulate them with flex-wrap and making each word a <span>...
 */ %>
-<% for (const word of it.text.split(/\s+/)) { %><span><%= word %></span><% } %>
\ No newline at end of file
+<% for (const word of it.text.split(/\s+/)) { %><span class="word"><%= word %></span><% } %>
\ No newline at end of file