From b41fb365cffa2d33d1f7f92aec4cd2c168b60e4c Mon Sep 17 00:00:00 2001
From: Ben Visness <bvisness@gmail.com>
Date: Thu, 11 Nov 2021 16:23:24 -0800
Subject: [PATCH] Improve appearance of projects without logos

---
 src/hmnurl/urls.go                          |  4 ++++
 src/templates/src/include/project_card.html |  8 +++++---
 src/templates/src/project_homepage.html     | 10 ++++++++--
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/hmnurl/urls.go b/src/hmnurl/urls.go
index 8cc63eb..a31552d 100644
--- a/src/hmnurl/urls.go
+++ b/src/hmnurl/urls.go
@@ -746,6 +746,10 @@ func BuildTheme(filepath string, theme string, cachebust bool) string {
 }
 
 func BuildUserFile(filepath string) string {
+	if filepath == "" {
+		return ""
+	}
+
 	filepath = strings.Trim(filepath, "/")
 	return BuildPublic(fmt.Sprintf("media/%s", filepath), false)
 }
diff --git a/src/templates/src/include/project_card.html b/src/templates/src/include/project_card.html
index d2dd969..ad0b8c1 100644
--- a/src/templates/src/include/project_card.html
+++ b/src/templates/src/include/project_card.html
@@ -1,8 +1,10 @@
 {{- /*gotype: git.handmade.network/hmn/hmn/src/templates.ProjectCardData*/ -}}
 <a class="project-card flex br2 overflow-hidden items-center relative {{ .Classes }}" href="{{ .Project.Url }}" >
-	<div class="image-container flex-shrink-0">
-		<div class="image bg-center cover" style="background-image:url({{.Project.Logo}})"></div>
-	</div>
+	{{ with .Project.Logo }}
+		<div class="image-container flex-shrink-0">
+			<div class="image bg-center cover" style="background-image:url({{ . }})"></div>
+		</div>
+	{{ end }}
 	<div class="details pa3 flex-grow-1">
 		<h3 class="mb1">{{ .Project.Name }}</h3>
 		<div class="blurb">{{ .Project.Blurb }}</div>
diff --git a/src/templates/src/project_homepage.html b/src/templates/src/project_homepage.html
index da2b24c..ca6e834 100644
--- a/src/templates/src/project_homepage.html
+++ b/src/templates/src/project_homepage.html
@@ -13,8 +13,14 @@
 		flex flex-column flex-row-ns items-start-ns flex-column-l items-stretch-l
 		mw5-l mh3 ml0-ns mb3 overflow-hidden
 	">
-		<div class="w-100 w5-ns flex-shrink-0 flex justify-center">
-			<img alt="{{ .Project.Name }}" class="br3" src="{{ .Project.Logo }}">
+		<div class="w-100 w5-ns flex-shrink-0 flex justify-center br3 overflow-hidden">
+			{{ if .Project.Logo }}
+				<img alt="{{ .Project.Name }}" src="{{ .Project.Logo }}">
+			{{ else }}
+				<div class="bg--dim w-100 aspect-ratio--1x1 relative">
+					<div class="aspect-ratio--object flex justify-center items-center f3 b c--dimmest">{{ .Project.Name }}</div>
+				</div>
+			{{ end }}
 		</div>
 		<div class="mt3 mt0-ns mt3-l ml3-ns ml0-l overflow-hidden">
 			<div class="mb3">