From 46afc573f63c0f29cd838f63415cd323f10798fb Mon Sep 17 00:00:00 2001
From: Ben Visness <bvisness@gmail.com>
Date: Sat, 29 Jun 2024 14:18:26 -0500
Subject: [PATCH] Add project authors, improve user profiles

---
 public/style.css                              |  5 +++
 src/rawdata/scss/timeline.css                 |  6 ++++
 src/templates/src/admin_approval_queue.html   |  2 +-
 src/templates/src/editor.html                 |  2 +-
 src/templates/src/episode.html                |  2 +-
 src/templates/src/episode_list.html           | 10 +++---
 src/templates/src/feed.html                   |  2 +-
 src/templates/src/forum.html                  |  2 +-
 src/templates/src/forum_thread.html           |  2 +-
 src/templates/src/include/project_card.html   | 23 ++++++++----
 src/templates/src/landing.html                |  8 ++---
 src/templates/src/monthly_update_policy.html  |  2 +-
 src/templates/src/podcast_edit.html           |  2 +-
 src/templates/src/podcast_episode.html        |  2 +-
 src/templates/src/podcast_episode_edit.html   |  2 +-
 src/templates/src/podcast_index.html          |  2 +-
 src/templates/src/project_homepage.html       | 23 ++++++++----
 .../src/project_submission_guidelines.html    |  2 +-
 src/templates/src/showcase.html               |  2 +-
 src/templates/src/user_profile.html           | 35 ++++++++++---------
 todo-styles.md                                |  1 +
 21 files changed, 85 insertions(+), 52 deletions(-)

diff --git a/public/style.css b/public/style.css
index ea0db8d8..3ad6707d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -8705,6 +8705,11 @@ code .ss,
   width: var(--avatar-size-small);
   height: var(--avatar-size-small);
 }
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
 .timeline-item {
   background-color: var(--c3);
   --fade-color: var(--c3);
diff --git a/src/rawdata/scss/timeline.css b/src/rawdata/scss/timeline.css
index 930c5788..b9da7978 100644
--- a/src/rawdata/scss/timeline.css
+++ b/src/rawdata/scss/timeline.css
@@ -18,6 +18,12 @@
     height: var(--avatar-size-small);
 }
 
+.timeline {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+}
+
 .timeline-item {
     background-color: var(--c3);
     --fade-color: var(--c3);
diff --git a/src/templates/src/admin_approval_queue.html b/src/templates/src/admin_approval_queue.html
index 9c33cbaf..1fa4b122 100644
--- a/src/templates/src/admin_approval_queue.html
+++ b/src/templates/src/admin_approval_queue.html
@@ -9,7 +9,7 @@
 {{ end }}
 
 {{ define "content" }}
-<div class="content-block">
+<div>
 	{{ range .UnapprovedUsers }}
 		<div class="flex flex-row bg3 mb3 pa2">
 			<div class="
diff --git a/src/templates/src/editor.html b/src/templates/src/editor.html
index d4b76b0a..f7b881eb 100644
--- a/src/templates/src/editor.html
+++ b/src/templates/src/editor.html
@@ -18,7 +18,7 @@
 {{ end }}
 
 {{ define "content" }}
-<div class="content-block ph3 ph0-ns">
+<div class="ph3 ph0-ns">
     {{ if not .CanEditPostTitle }}
         <h2>{{ .PostTitle }}</h2>
     {{ end }}
diff --git a/src/templates/src/episode.html b/src/templates/src/episode.html
index d344947d..d11337f7 100644
--- a/src/templates/src/episode.html
+++ b/src/templates/src/episode.html
@@ -10,7 +10,7 @@
 {{ end }}
 
 {{ define "content" }}
-	<div class="content-block">
+	<div>
 		{{ .Content }}
 	</div>
 {{ end }}
diff --git a/src/templates/src/episode_list.html b/src/templates/src/episode_list.html
index 55ac024f..636969d6 100644
--- a/src/templates/src/episode_list.html
+++ b/src/templates/src/episode_list.html
@@ -15,10 +15,10 @@
 		{{ .Content }}
     </div>
     <div class="sidebar flex-shrink-0 mw6 w-30-l self-center self-start-l mh3 mh0-ns ml3-l overflow-hidden">
-		<div class="content-block box logo">
+		<div class="box logo">
 			<img alt="{{ .Project.Name }}" src="{{ .Project.Logo }}">
 		</div>
-		<div class="content-block subprojects">
+		<div class="subprojects">
 			<strong>Also have a look at these {{ .Project.Name }} annotations:</strong>
 			<ul>
 				{{ range .Topics }}
@@ -33,7 +33,7 @@
 			</ul>
 		</div>
 		{{ if eq .Project.Subdomain "hero" }}
-			<div class="content-block donate">
+			<div class="donate">
 				<br/>
 				<strong>Preorder the Game, Get the Source!</strong>
 				<p>Visit <a target="_blank" href="https://handmadehero.org">https://handmadehero.org</a> for more information about Handmade Hero</p>
@@ -42,7 +42,7 @@
 				<p><strong><a href="https://handmade.network/m/Miblo">Miblo</a></strong> is currently the sole maintainer of this episode guide. You can see him working live on
 				<a class="external" href="http://www.twitch.tv/miblo" target="_blank">Twitch</a>.</p>
 			</div>
-			<div class="content-block">
+			<div>
 				<br/>
 				<p><strong>Credits</strong></p>
 				<p style="text-align: left; ">
@@ -67,7 +67,7 @@
 				<p>Please take a moment to thank our contributors if you happen to see them on The Twitters!</p>
 			</div>
 		{{ else if eq .Project.Subdomain "riscy" }}
-			<div class="content-block donate">
+			<div class="donate">
 				<strong>Support the Episode Guide</strong>
 				<p><strong><a href="https://handmade.network/m/Miblo">Miblo</a></strong> is currently the sole maintainer of this episode guide. You can see him working live on
 				<a class="external" href="http://www.twitch.tv/miblo" target="_blank">Twitch</a>.</p>
diff --git a/src/templates/src/feed.html b/src/templates/src/feed.html
index 0c20605f..1c3e08ae 100644
--- a/src/templates/src/feed.html
+++ b/src/templates/src/feed.html
@@ -1,7 +1,7 @@
 {{ template "base.html" . }}
 
 {{ define "content" }}
-<div class="content-block">
+<div>
     <div class="optionbar">
         <div class="options">
             <a class="button" href="{{ .AtomFeedUrl }}"><span class="icon big pr1">4</span> RSS Feed</a>
diff --git a/src/templates/src/forum.html b/src/templates/src/forum.html
index 39b36b4b..893f74d0 100644
--- a/src/templates/src/forum.html
+++ b/src/templates/src/forum.html
@@ -1,7 +1,7 @@
 {{ template "base.html" . }}
 
 {{ define "content" }}
-<div class="content-block">
+<div>
     {{ range .Subforums }}
         <div class="mv3">
             <h2 class="ma0 ph3 pb2">
diff --git a/src/templates/src/forum_thread.html b/src/templates/src/forum_thread.html
index 1af99fb7..1cf3db77 100644
--- a/src/templates/src/forum_thread.html
+++ b/src/templates/src/forum_thread.html
@@ -1,7 +1,7 @@
 {{ template "base.html" . }}
 
 {{ define "content" }}
-<div class="content-block">
+<div>
     <div class="optionbar">
         <div class="options">
             <a class="button" href="{{ .SubforumUrl }}">&larr; Back to index</a>
diff --git a/src/templates/src/include/project_card.html b/src/templates/src/include/project_card.html
index a68ee5c4..cabbfba4 100644
--- a/src/templates/src/include/project_card.html
+++ b/src/templates/src/include/project_card.html
@@ -1,4 +1,4 @@
-<a class="bg3 c-normal flex items-start g3 br2 overflow-hidden pa3" href="{{ .Url }}">
+<a class="bg3 c-normal flex items-start g3 overflow-hidden pa3" href="{{ .Url }}">
 	{{ with .Logo }}
 		<div class="bg4 flex-shrink-0 flex">
 			<img class="project-card-logo" src="{{ . }}" alt="Project Logo">
@@ -7,12 +7,23 @@
 	<div class="details flex-grow-1">
 		<h3 class="b mb2 f4">{{ .Name }}</h3>
 		<div class="blurb">{{ .Blurb }}</div>
-		<hr>
-		<div>TODO: Authors</div>
-		{{ if .LifecycleString }}
-			<div class="badges mt2">
-				<span class="badge {{ .LifecycleBadgeClass }}">{{ .LifecycleString }}</span>
+		{{ with .Owners }}
+			<hr class="mv3">
+			<div class="flex flex-wrap g2">
+				{{ range . }}
+					<div class="flex g1 items-center b">
+						<img class="avatar avatar-user avatar-small" src="{{ .AvatarUrl }}">
+						<span>{{ .Name }}</span>
+					</div>
+				{{ end }}
 			</div>
 		{{ end }}
+		{{/*
+			{{ if .LifecycleString }}
+				<div class="badges mt2">
+					<span class="badge {{ .LifecycleBadgeClass }}">{{ .LifecycleString }}</span>
+				</div>
+			{{ end }}
+		*/}}
 	</div>
 </a>
diff --git a/src/templates/src/landing.html b/src/templates/src/landing.html
index cbd3e14d..ef996591 100644
--- a/src/templates/src/landing.html
+++ b/src/templates/src/landing.html
@@ -151,23 +151,23 @@
 				</div>
 				<div>
 					{{ if .User }}
-						<div data-tab="following" class="timeline flex flex-column g3">
+						<div data-tab="following" class="timeline">
 							{{ range .FollowingItems }}
 								{{ template "timeline_item.html" . }}
 							{{ end }}
 						</div>
 					{{ end }}
-					<div data-tab="featured" class="timeline flex flex-column g3">
+					<div data-tab="featured" class="timeline">
 						{{ range .FeaturedItems }}
 							{{ template "timeline_item.html" . }}
 						{{ end }}
 					</div>
-					<div data-tab="recent" class="timeline flex flex-column g3">
+					<div data-tab="recent" class="timeline">
 						{{ range .RecentItems }}
 							{{ template "timeline_item.html" . }}
 						{{ end }}
 					</div>
-					<div data-tab="news" class="timeline flex flex-column g3">
+					<div data-tab="news" class="timeline">
 						{{ range .NewsItems }}
 							{{ template "timeline_item.html" . }}
 						{{ end }}
diff --git a/src/templates/src/monthly_update_policy.html b/src/templates/src/monthly_update_policy.html
index 67559b98..ca9777d9 100644
--- a/src/templates/src/monthly_update_policy.html
+++ b/src/templates/src/monthly_update_policy.html
@@ -1,7 +1,7 @@
 {{ template "base.html" . }}
 
 {{ define "content" }}
-<div class="content-block">
+<div>
 	<div class="description mw7 ph3 ph0-ns">
 		<p>The Handmade Network provides a place for project owners such as yourself to showcase and record the development of their projects, and for users to discover, follow and discuss these projects. This Monthly Update Policy applies to your project if it doesn’t fit into a category listed under “When the Monthly Update Policy Doesn’t Apply” below, and is intended to encourage development and guard against your active or complete project having to share web space with abandoned ones.</p>
 		<h2>What Constitutes an Update</h2>
diff --git a/src/templates/src/podcast_edit.html b/src/templates/src/podcast_edit.html
index c5df98ef..3a334a56 100644
--- a/src/templates/src/podcast_edit.html
+++ b/src/templates/src/podcast_edit.html
@@ -1,7 +1,7 @@
 {{ template "base.html" . }}
 
 {{ define "content" }}
-<div class="content-block">
+<div>
 	<form id="podcast_form" method="POST" enctype="multipart/form-data">
         {{ csrftoken .Session }}
 		<input class="b w-100 mb1" type="text" name="title" required placeholder="Podcast title..." value="{{ .Podcast.Title }}" />
diff --git a/src/templates/src/podcast_episode.html b/src/templates/src/podcast_episode.html
index 34e50957..c92c37a0 100644
--- a/src/templates/src/podcast_episode.html
+++ b/src/templates/src/podcast_episode.html
@@ -1,7 +1,7 @@
 {{ template "base.html" . }}
 
 {{ define "content" }}
-<div class="content-block">
+<div>
 	<div class="ph2 ph0-ns">
 		<h2>Episode {{ .Episode.EpisodeNumber }}: {{ .Episode.Title }}</h2>
 		<div>
diff --git a/src/templates/src/podcast_episode_edit.html b/src/templates/src/podcast_episode_edit.html
index d4ac728b..22a38d45 100644
--- a/src/templates/src/podcast_episode_edit.html
+++ b/src/templates/src/podcast_episode_edit.html
@@ -1,7 +1,7 @@
 {{ template "base.html" . }}
 
 {{ define "content" }}
-<div class="content-block">
+<div>
 	<h1>{{ if .IsEdit }}Edit{{ else }}New{{ end }} Episode</h1>
 	<form method="POST">
 		{{ csrftoken .Session }}
diff --git a/src/templates/src/podcast_index.html b/src/templates/src/podcast_index.html
index ad73e548..3b90b61b 100644
--- a/src/templates/src/podcast_index.html
+++ b/src/templates/src/podcast_index.html
@@ -5,7 +5,7 @@
 {{ end }}
 
 {{ define "content" }}
-<div class="content-block">
+<div>
 	<div class="ph2 ph0-ns">
 		<h2>{{ .Podcast.Title }}</h2>
 		<div>
diff --git a/src/templates/src/project_homepage.html b/src/templates/src/project_homepage.html
index 4e18bd5a..2478042a 100644
--- a/src/templates/src/project_homepage.html
+++ b/src/templates/src/project_homepage.html
@@ -30,15 +30,24 @@
 		</div>
 		<div class="w-100 mw-site-narrow pa3 bg-transparent link-normal flex g3 overflow-hidden" style="margin-top: -4rem">
 			{{ if .Project.Logo }}
-				<a href="{{ .Project.Url }}">
+				<a class="flex-shrink-0 flex" href="{{ .Project.Url }}">
 					<img class="project-card-logo" src="{{ .Project.Logo }}" alt="Project Logo">
 				</a>
 			{{ end }}
 			<div class="details flex-grow-1">
 				<a href="{{ .Project.Url }}"><h3 class="b mb2 f4">{{ .Project.Name }}</h3></a>
 				<div class="blurb">{{ .Project.Blurb }}</div>
-				<hr>
-				<div>TODO: Authors</div>
+				{{ with .Owners }}
+					<hr class="mv3">
+					<div class="flex flex-wrap g2">
+						{{ range . }}
+							<a class="flex g1 items-center b" href="{{ .ProfileUrl }}">
+								<img class="avatar avatar-user avatar-small" src="{{ .AvatarUrl }}">
+								<span>{{ .Name }}</span>
+							</a>
+						{{ end }}
+					</div>
+				{{ end }}
 				{{ if .Project.LifecycleString }}
 					<div class="badges mt2">
 						<span class="badge {{ .Project.LifecycleBadgeClass }}">{{ .Project.LifecycleString }}</span>
@@ -90,14 +99,14 @@
 	</div>
 </div>
 {{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}
-<div class="bg1 mt4 bt bb pv4 flex justify-center">
-	<div class="w-100 mw-site flex g3">
+<div class="bg1 mt4 bt bb pv4">
+	<div class="m-center mw-site flex g3">
 		<div class="flex flex-column g3">
 			<div class="bg3 pa3 w5">
 				Filters
 			</div>
 		</div>
-		<div class="flex-grow-1">
+		<div class="flex-grow-1 overflow-hidden">
 			<div class="flex flex-row items-center mb2">
 				<h2 id="recent">Recent Activity</h2>
 				<div class="flex-grow-1"></div>
@@ -105,7 +114,7 @@
 					<a href="javascript:;" class="create_snippet_link button">Add Snippet</a>
 				{{ end }}
 			</div>
-			<div class="timeline flex flex-column g3">
+			<div class="timeline">
 				{{ range .RecentActivity }}
 					{{ template "timeline_item.html" . }}
 				{{ end }}
diff --git a/src/templates/src/project_submission_guidelines.html b/src/templates/src/project_submission_guidelines.html
index d37c3612..52796586 100644
--- a/src/templates/src/project_submission_guidelines.html
+++ b/src/templates/src/project_submission_guidelines.html
@@ -12,7 +12,7 @@ ol ol {
 </style>
 {{ end }}
 {{ define "content" }}
-<div class="content-block">
+<div>
 	<div class="description mw7 ph3 ph0-ns">
 		<p>At Handmade Network, we pride ourselves on being open to hosting all sorts of projects, from low level tools to games to conscientious web applications to innumerable other carefully crafted varieties of software. With this in mind, there are certain standards of content quality that we expect projects hosted on the site to meet, and certain characteristics that we believe projects should uphold in order to best contribute to the community of software development we are attempting to cultivate.</p>
 		<p>This document outlines these standards and characteristics as specifically as possible, allowing for exceptions both in favor and against project approval if unanticipated circumstances arise. All project approvals or rejections will be accompanied by a justification, and we expect to be held accountable if the provided justification is insufficiently backed by these guidelines.</p>
diff --git a/src/templates/src/showcase.html b/src/templates/src/showcase.html
index 80fdd873..57d33cc7 100644
--- a/src/templates/src/showcase.html
+++ b/src/templates/src/showcase.html
@@ -7,7 +7,7 @@
 {{ define "content" }}
 	{{ template "showcase_templates.html" }}
 
-	<div class="content-block">
+	<div>
 		<div class="pa3">
 			<div class="optionbar">
 				<div class="w-100 pb2 flex flex-row items-end">
diff --git a/src/templates/src/user_profile.html b/src/templates/src/user_profile.html
index ac769b17..f48478b2 100644
--- a/src/templates/src/user_profile.html
+++ b/src/templates/src/user_profile.html
@@ -37,7 +37,7 @@
 		mw5-l mh3 ml0-ns mb3 overflow-hidden
 	">
 		<div class="w-100 w5-ns flex-shrink-0 flex justify-center">
-			<img class="br3" alt="{{ .ProfileUser.Name }}'s Avatar" src="{{ .ProfileUser.AvatarUrl }}">
+			<img alt="{{ .ProfileUser.Name }}'s Avatar" src="{{ .ProfileUser.AvatarUrl }}">
 		</div>
 		<div class="mt3 mt0-ns mt3-l ml3-ns ml0-l flex flex-column items-start overflow-hidden">
 			{{ with or .ProfileUser.Bio .ProfileUser.Blurb }}
@@ -165,15 +165,15 @@
 			{{ end }}
 		{{ end }}
 	</div>
-    <div class="flex-grow-1 overflow-hidden">
+    <div class="flex-grow-1 overflow-hidden flex flex-column g3">
 		{{ if or .OwnProfile .ProfileUserProjects }}
-			<div class="content-block ph3 ph0-ns">
-				<h2>{{ if .OwnProfile }}My {{ end }}Projects</h2>
-				{{ range .ProfileUserProjects }}
-					<div class="mv3">
+			<div class="ph3 ph0-ns">
+				<h2 class="mb2">{{ if .OwnProfile }}My {{ end }}Projects</h2>
+				<div class="flex flex-column g2">
+					{{ range .ProfileUserProjects }}
 						{{ template "project_card.html" . }}
-					</div>
-				{{ end }}
+					{{ end }}
+				</div>
 				{{ if .OwnProfile }}
 					{{ if .CanAddProject }}
 						<a href="{{ .NewProjectUrl }}" class="button submit pv2 ph3">Add New Project</a>
@@ -184,15 +184,16 @@
 			</div>
 		{{ end }}
 		{{ if or .OwnProfile (gt (len .TimelineItems) 0) }}
-			<div class="mv3 content-block timeline-container ph3 ph0-ns">
-				<div class="flex flex-row items-center">
-					<h2 id="recent">Recent Activity</h2>
-					<div class="flex-grow-1"></div>
-					{{ if .OwnProfile }}
-						<a href="javascript:;" class="button submit create_snippet_link button">Add Snippet</a>
-					{{ end }}
-				</div>
-				<div class="timeline-filters mb2">
+			<div class="timeline-container ph3 ph0-ns flex flex-column g2">
+				<div class="flex flex-column g1">
+					<div class="flex flex-row items-center">
+						<h2 id="recent">Recent Activity</h2>
+						<div class="flex-grow-1"></div>
+						{{ if .OwnProfile }}
+							<a href="javascript:;" class="button submit create_snippet_link button">Add Snippet</a>
+						{{ end }}
+					</div>
+					<div class="timeline-filters f6"></div>
 				</div>
 				<div class="timeline">
 					{{ range .TimelineItems }}
diff --git a/todo-styles.md b/todo-styles.md
index fb040140..5ed81f7d 100644
--- a/todo-styles.md
+++ b/todo-styles.md
@@ -61,6 +61,7 @@
 - [ ] Convert any plain TODOs introduced in this massive branch into TODO(redesign)
 - [ ] Resolve TODO(redesign) comments
 - [ ] Audit all project lifecycles on HMN - probably remove "complete", replace with stuff like "alpha", "beta", maybe other stuff that makes sense for other types of projects.
+    - [ ] Afterward, re-enable badges
 
 stack!