From 3bdee6d047c52f5b7f8298209fee603e3edea992 Mon Sep 17 00:00:00 2001
From: hazycora <hazysu@riseup.net>
Date: Wed, 2 Aug 2023 19:22:09 -0500
Subject: [PATCH] add issue number to issue template

---
 views/issue.eta | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/views/issue.eta b/views/issue.eta
index 03345bc..6d192c0 100644
--- a/views/issue.eta
+++ b/views/issue.eta
@@ -1,9 +1,17 @@
 <% layout('layout') %>
+<%
+	const issueTitleWords = it.issue.title.split(/\s/)
+	// 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>...
+%>
 <div class="main">
 	<div class="contents">
 		<div class="info">
 			<p style="font-size: 36px; color: #9A8FA7;">@<%= it.issue.repository?.full_name || it.issue.base.repo.full_name %></p>
-			<p style="font-weight: 800; font-size: 4.5rem; line-height: 1.2em;"><%= it.issue.title %></p>
+			<p style="font-weight: 800; font-size: 4.5rem; line-height: 1.2em; column-gap: 0.125em; flex-wrap: wrap;"><span style="font-weight: 400; color: #9A8FA7">#<%= it.issue.number %></span> <%
+				for (const word of issueTitleWords) { %>
+					<span><%= word %></span>
+				<% }%></p>
 			<% if (it.issue.body) { %>
 				<p style="font-size: 42px; font-weight: 500; text-overflow: ellipsis; color: #9A8FA7; overflow: hidden; white-space: nowrap;"><%= it.issue.body %></p>
 			<% } %>