Add project authors, improve user profiles

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);

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);

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="

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 }}

src/templates/src/episode.html

@@ -10,7 +10,7 @@
 {{ end }}
 
 {{ define "content" }}
-	<div class="content-block">
+	<div>
 		{{ .Content }}
 	</div>
 {{ end }}

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>

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>

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">

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>

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>
+		{{ with .Owners }}
-		<div>TODO: Authors</div>
+			<hr class="mv3">
-		{{ if .LifecycleString }}
+			<div class="flex flex-wrap g2">
-			<div class="badges mt2">
+				{{ range . }}
-				<span class="badge {{ .LifecycleBadgeClass }}">{{ .LifecycleString }}</span>
+					<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>

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 }}

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>

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 }}" />

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>

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 }}

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>

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>
+				{{ with .Owners }}
-				<div>TODO: Authors</div>
+					<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="bg1 mt4 bt bb pv4">
-	<div class="w-100 mw-site flex g3">
+	<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 }}

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>

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">

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">
+			<div class="ph3 ph0-ns">
-				<h2>{{ if .OwnProfile }}My {{ end }}Projects</h2>
+				<h2 class="mb2">{{ if .OwnProfile }}My {{ end }}Projects</h2>
-				{{ range .ProfileUserProjects }}
+				<div class="flex flex-column g2">
-					<div class="mv3">
+					{{ 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="timeline-container ph3 ph0-ns flex flex-column g2">
-				<div class="flex flex-row items-center">
+				<div class="flex flex-column g1">
-					<h2 id="recent">Recent Activity</h2>
+					<div class="flex flex-row items-center">
-					<div class="flex-grow-1"></div>
+						<h2 id="recent">Recent Activity</h2>
-					{{ if .OwnProfile }}
+						<div class="flex-grow-1"></div>
-						<a href="javascript:;" class="button submit create_snippet_link button">Add Snippet</a>
+						{{ if .OwnProfile }}
-					{{ end }}
+							<a href="javascript:;" class="button submit create_snippet_link button">Add Snippet</a>
-				</div>
+						{{ end }}
-				<div class="timeline-filters mb2">
+					</div>
+					<div class="timeline-filters f6"></div>
 				</div>
 				<div class="timeline">
 					{{ range .TimelineItems }}

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!