Timeline and projects for learning jam

src/templates/mapping.go

@@ -103,6 +103,9 @@ func ProjectToTemplate(
 func ProjectAndStuffToTemplate(p *hmndata.ProjectAndStuff, url string, theme string) Project {
 	res := ProjectToTemplate(&p.Project, url)
 	res.Logo = ProjectLogoUrl(&p.Project, p.LogoLightAsset, p.LogoDarkAsset, theme)
+	for _, o := range p.Owners {
+		res.Owners = append(res.Owners, UserToTemplate(o, theme))
+	}
 	return res
 }
 

src/templates/src/jam_2024_lj_feed.html

@@ -17,7 +17,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="flex g3 justify-center">
+		<div class="flex g3 justify-center link--white">
 			{{ if and (eq .DaysUntilStart 0) (gt .DaysUntilEnd 0) }}
 				{{ if .SubmittedProjectUrl }}
 					<a class="btn--jam" href="{{ .SubmittedProjectUrl }}">Share your progress</a>
@@ -33,26 +33,53 @@
 
 {{ define "content" }}
 <div class="mw7 margin-center flex flex-column">
+	<div class="ph3 pv4 bb b--rich-gray">
+		<h2 class="c--theme-gradient-light">Projects</h2>
+		<div class="flex flex-row flex-wrap g2">
+			{{ if .Projects }}
+				{{ range .Projects }}
+					<div class="flex-basis-40-ns flex-grow-1 flex-shrink-1 bg--rich-gray pa3 flex flex-column g1">
+						<div class="f3">
+							<a href="{{ .Url }}" class="fw6">{{ .Name }}</a>
+						</div>
+						<div class="flex-grow-1">{{ .Blurb }}</div>
+						<div class="f7">
+							by
+							{{ $owners := .Owners }}
+							{{ range $idx, $owner := .Owners }}
+								<a href="{{ $owner.ProfileUrl }}" class="fw6 link--white">{{ $owner.Name }}</a>{{ if not (lastidx $idx (len $owners)) }},{{ end }}
+							{{ end }}
+						</div>
+					</div>
+				{{ end }}
+				{{ if isodd (len .Projects) }}
+					<div class="flex-basis-40-ns flex-grow-1 flex-shrink-1"></div>
+				{{ end }}
+			{{ end }}
+		</div>
+	</div>
 	<div class="ph3 pv4 bb b--rich-gray">
 		<h2 class="c--theme-gradient-light">Recent activity</h2>
 		<div class="flex flex-column g2">
 			{{ if .TimelineItems }}
 				{{ range .TimelineItems }}
-					<div class="flex flex-column g2 bg--rich-gray pa3">
+					<div class="flex flex-column g3 bg--rich-gray pa3">
-						<div class="flex flex-row g2">
+						<div class="flex flex-row g3 items-start">
 							{{ if .OwnerAvatarUrl }}
 								<a class="flex flex-shrink-0 br-100 square items-center justify-center overflow-hidden bg--gray" href="{{ .OwnerUrl }}">
-									<img class="w2" src="{{ .OwnerAvatarUrl }}" />
+									<img class="w2-5" src="{{ .OwnerAvatarUrl }}" />
 								</a>
 							{{ end }}
 							<div class="flex flex-column">
-								<div class="fw6">{{ .OwnerName }}</div>
+								<div class="">
-								<div class="f7">{{ timehtml (relativedate .Date) .Date }}</div>
+									<a title="{{ (index .Projects 0).Blurb }}" href="{{ (index .Projects 0).Url }}" class="link--white fw6">{{ (index .Projects 0).Name }}</a>
+									by
+									<a href="{{ .OwnerUrl }}" class="link--white fw6">{{ .OwnerName }}</a>
+									<span class="f7 c--gray nowrap">{{ timehtml (relativedate .Date) .Date }}</span>
 								</div>
-						</div>
-						{{ if .Description }}
 								<div>{{ trim .Description }}</div>
-						{{ end }}
+							</div>
+						</div>
 						{{ range .EmbedMedia }}
 							<div class="flex flex-column {{ if eq .Type mediaembed }}wide-screen{{ end }} justify-stretch iframe-fill">
 								{{ if eq .Type mediaimage }}
@@ -69,7 +96,7 @@
 									{{ .EmbedHTML }}
 								{{ else }}
 									<div class="">
-										<a href="{{ .AssetUrl }}" target="_blank">{{ .Filename }} ({{ filesize .FileSize }})</a>
+										<a href="{{ .AssetUrl }}" target="_blank">💾{{ .Filename }} ({{ filesize .FileSize }})</a>
 									</div>
 								{{ end }}
 							</div>
@@ -82,7 +109,7 @@
 		</div>
 	</div>
 	<div>
-		<div class="mv5 h3 fill-current">
+		<div class="mv5 h3 fill-current link--white">
 			<a href="{{ .Header.HMNHomepageUrl }}">{{ svg "hmn_circuit" }}</a>
 		</div>
 	</div>

src/templates/src/jam_2024_lj_index.html

@@ -17,7 +17,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="flex g3 justify-center">
+		<div class="flex g3 justify-center link--white">
 			{{ if eq .DaysUntilStart 0 }}
 				{{ if gt .DaysUntilEnd 0 }}
 					{{ if .SubmittedProjectUrl }}

src/templates/src/layouts/jam_2024_learning_base.html

@@ -54,6 +54,8 @@
 			--spacing-6: 8rem;
 			--spacing-7: 16rem;
 			--border-radius-2: 0.25rem;
+
+			--link-color: #8Bd5FF;
 		}
 
 		body {
@@ -65,6 +67,14 @@
 			font-weight: 700;
 		}
 
+		.w2-5 {
+			width: 3rem;
+		}
+
+		.link--white {
+			--link-color: var(--white);
+		}
+
 		.post-content p {
 			/* stupid override, should be done by .post-content instead of .content */
 			margin: 0.6rem 0;
@@ -90,6 +100,10 @@
 			background: var(--gray);
 		}
 
+		.b--charcoal {
+			border-color: var(--charcoal);
+		}
+
 		.b--rich-gray {
 			border-color: var(--rich-gray);
 		}
@@ -108,6 +122,10 @@
 			color: transparent;
 		}
 
+		.c--gray {
+			color: var(--gray);
+		}
+
 		.btn--jam {
 			border: 1px solid var(--white);
 			border-radius: var(--border-radius-2);
@@ -203,7 +221,9 @@
 
 		/* not small */
 		@media screen and (min-width: 35em) {
-
+			.flex-basis-40-ns {
+				flex-basis: 40%;
+			}
 		}
 	</style>
 
@@ -212,7 +232,7 @@
 
 <body class="bg--charcoal flex flex-column">
 	<div class="c-white bg--theme-gradient-dark">
-		<div class="bg-black-20 flex flex-row items-center">
+		<div class="bg-black-20 flex flex-row items-center link--white">
 			<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
 				Handmade
 			</a>

src/templates/templates.go

@@ -287,6 +287,12 @@ var HMNTemplateFuncs = template.FuncMap{
 	"trim": func(str template.HTML) template.HTML {
 		return template.HTML(strings.TrimSpace(string(str)))
 	},
+	"lastidx": func(idx int, l int) bool {
+		return idx == l-1
+	},
+	"isodd": func(num int) bool {
+		return num%2 == 1
+	},
 
 	// NOTE(asaf): Template specific functions:
 	"projectcarddata": func(project Project, classes string) ProjectCardData {

src/website/jam.go

@@ -144,6 +144,7 @@ func JamFeed2024_Learning(c *RequestContext) ResponseData {
 		ProjectSubmissionUrl         string
 		SubmittedProjectUrl          string
 
+		Projects      []templates.Project
 		TimelineItems []templates.TimelineItem
 	}
 
@@ -194,6 +195,13 @@ func JamFeed2024_Learning(c *RequestContext) ResponseData {
 		}
 	}
 
+	projects := make([]templates.Project, 0, len(jamProjects))
+	for _, jp := range jamProjects {
+		urlContext := hmndata.UrlContextForProject(&jp.Project)
+		projectUrl := urlContext.BuildHomepage()
+		projects = append(projects, templates.ProjectAndStuffToTemplate(&jp, projectUrl, c.Theme))
+	}
+
 	tmpl := JamFeedData{
 		BaseData:             baseData,
 		UserAvatarUrl:        templates.UserAvatarDefaultUrl("dark"),
@@ -202,6 +210,7 @@ func JamFeed2024_Learning(c *RequestContext) ResponseData {
 		TwitchEmbedUrl:       twitchEmbedUrl,
 		ProjectSubmissionUrl: hmnurl.BuildProjectNewJam(),
 		SubmittedProjectUrl:  "",
+		Projects:             projects,
 		TimelineItems:        timelineItems,
 	}