refactor, redesign

assets/style.css

@@ -3,8 +3,7 @@ p {
 }
 
 .wrapper {
-	background-color: #171926;
+	background-color: #10121d;
-	background-image: linear-gradient(to bottom, #171926, #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: 900px;
-	width: 80%;
 }
 
 .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 {

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>

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>

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) { %>
+			<% if (description) { %>
-				<p class="description"><%= it.repo.description %></p>
+				<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">
+		<% 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>
 		<% } %>
+		<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>

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><% } %>
+<% for (const word of it.text.split(/\s+/)) { %><span class="word"><%= word %></span><% } %>