Add jam recap (not yet shown off properly)

src/hmnurl/urls.go

@@ -84,6 +84,13 @@ func BuildJamFeed2023_Visibility() string {
 	return Url("/jam/visibility-2023/feed", nil)
 }
 
+var RegexJamRecap2023_Visibility = regexp.MustCompile("^/jam/visibility-2023/recap$")
+
+func BuildJamRecap2023_Visibility() string {
+	defer CatchPanic()
+	return Url("/jam/visibility-2023/recap", nil)
+}
+
 var RegexJamFeed2022 = regexp.MustCompile("^/jam/2022/feed$")
 
 func BuildJamFeed2022() string {

src/templates/mapping.go

@@ -219,6 +219,11 @@ func UserToTemplate(u *models.User, currentTheme string) User {
 	}
 }
 
+var UnknownUser = User{
+	Name:      "Unknown User",
+	AvatarUrl: UserAvatarUrl(nil, ""),
+}
+
 // An online site/service for which we recognize the link
 type LinkService struct {
 	Name     string

src/templates/src/jam_2023_vj_index.html

@@ -59,7 +59,7 @@ $discordInviteURL := "https://discord.gg/hmn" }}
         {{ else }}
         <a
             class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
-            href="{{ .ShowcaseFeedUrl }}"
+            href="{{ .RecapUrl }}"
             >See the results</a
         >
         {{ end }}

src/templates/src/jam_2023_vj_recap.html

@@ -0,0 +1,107 @@
+{{ template "jam_2023_visibility_base.html" . }} {{ define "content" }}
+<style>
+  :root {
+    --theme-color: white;
+    --theme-color-dimmer: rgba(255, 255, 255, 0.1);
+  }
+  
+  #title {
+    margin-top: 0;
+  }
+</style>
+
+<div id="top-container" class="flex flex-column items-center ph3">
+  <a href="{{ .JamUrl }}">
+    <h1 id="title">Visibility Jam</h1>
+  </a>
+  <h2 id="dates">April 14 - 16, 2O23</h2>
+  <div id="tagline" class="center">See things in a new way.</div>
+</div>
+
+<div class="section pt4 pb3 pb4-ns">
+  <div class="mw8 margin-center ph3 ph4-l">
+    <h2 class="mb2">Jam recap</h2>
+    <div class="mb4 flex items-center">
+      <div class="avatar-icon contain bg-center" style="background-image:url('{{ .Ben.AvatarUrl }}');"></div>
+      <div class="flex flex-column ml2">
+        <div>
+          <a class="username" href="{{ .Ben.ProfileUrl }}" target="_blank">{{ .Ben.Name }}</a>
+          <div class="di ph1">
+            {{ if .Ben.IsStaff }}
+            <div class="badge staff"></div>
+            {{ end }}
+          </div>
+        </div>
+        <div class="c--dim f7">{{ timehtml (absoluteshortdate .PostDate) .PostDate }}</div>
+      </div>
+    </div>
+    <div class="post-content">
+      <p>When we were planning the Visibility Jam earlier this year, we expected it to be a small secondary jam to complement our yearly Wheel Reinvention Jam. We weren't sure if a community of primarily low-level programmers would be interested in a jam focused on visibility and visualization.</p>
+      <p>But we had no reason to be worried! We had an amazing turnout, with 23 fantastic submissions exploring a wide variety of topics.</p>
+      <p>While we're not declaring official “winners” for this jam, we wanted to take the time to highlight some of our favorite submissions, and what made them stand out.</p>
+      
+      <a class="db mt4" href="https://handmade.network/p/369/rede/">
+        <h3>REDE - an IDE for regular expressions</h3>
+      </a>
+      <p>
+        <video
+          class="br2"
+          preload="metadata" controls
+          src="https://hmn-assets-2.ams3.cdn.digitaloceanspaces.com/ec99f8e9-4fd4-4d96-a49e-a09287a06e77/rede_demo.mp4"
+          poster="{{ static "visjam2023/rede.jpg" }}"
+        >
+      </p>
+      <p>REDE is easily the most visually striking project from this jam, and simultaneously very informative. There are <a href="https://www.debuggex.com/">other tools</a> out there to visualize the structure of regular expressions, but REDE goes a step further, showing the actual NFA structure and how it gets executed. The result is useful to a wide audience - both beginners unfamiliar with the structure of regular expressions, and developers who know regular expressions but didn't actually know how they get executed.</p>
+      <p>And the particles, man! How can you not love the particles?</p>
+      
+      <a class="db mt4" href="https://handmade.network/p/386/png-chunk-explorer/">
+        <h3>PNG Chunk Explorer</h3>
+      </a>
+      <p><img class="br2 mh-6" src="{{ static "visjam2023/pngexplorer.png" }}"></p>
+      <p>This is a great project that not only shows you the structure of a PNG file, but <em>teaches</em> you in the process. This project puts the familiar hex view alongside a nested description of the format's structure, explaining the purpose of each section and linking to the spec in the process.</p>
+      <p>It also parses each section and tailors the description to your specific image. The result is far richer than a simple hex viewer and far more more educational than a spec or an explainer article. I love the result and I would love to see this expanded in the future with even more features and to more formats!</p>
+      <p>Since this is a web app, you can play with it <a href="https://evanhahn.gitlab.io/png-explorer/">right now</a>, and I recommend that you do.</p>
+      
+      <a class="db mt4" href="https://handmade.network/p/385/string-memory-visualizer/">
+        <h3>String Memory Visualizer</h3>
+      </a>
+      <p>
+        <video
+          class="br2"
+          preload="metadata" controls
+          src="{{ static "visjam2023/stringmem.mp4" }}"
+          poster="{{ static "visjam2023/stringmem.jpg" }}"
+        >
+      </p>
+      <p>This is exactly the kind of project we had in mind when we conceived of this jam. Take the time to make your program's behavior visible, and you can learn so much about it!</p>
+      <p>I'd love to see features like this become commonplace in developer tooling. Lots of programmers would benefit if they could actually see what was going on under the hood of the frameworks, editors, you name it.</p>
+      
+      <a class="db mt4" href="https://handmade.network/p/392/expertmemer-experimental-memory-access-visualizer/">
+        <h3>ExpertMemer - EXPERimenTal MEMory access visualizER</h3>
+      </a>
+      <p><img class="br2" src="{{ static "visjam2023/memer.png" }}"></p>
+      <p>Obviously this project has a great name, but it's also a great idea and an impressive result given the short timeframe of this jam. This project visualizes approximate memory cache usage by dynamically instrumenting applications, tracking their memory accesses, and displaying how those memory accesses hit the L1 cache over time.</p>
+      <p>This is exactly the kind of visualization we need in order for programmers to understand and take advantage of their computer's hardware. I'd love to see more examples of different memory access patterns - it would be amazing to visually see cache thrashing instead of just tracking some boring numbers.</p>
+      
+      <a class="db mt4" href="https://handmade.network/p/379/escape-artist/">
+        <h3>Escape Artist - Terminal escape code visualizer</h3>
+      </a>
+      <p><img class="br2" src="{{ static "visjam2023/escapeartist.jpg" }}"></p>
+      <p>This is one of the most literal entries in the jam and I love it. It makes those pesky invisible characters in your terminal visible. And not only can you use your terminal as normal, it even works in real time, so it really works as a “view source”.</p>
+      <p>Even though this was done in a weekend, it's already a legitimately useful project that I will probably use myself next time I have to work with color codes.</p>
+      
+      <a class="db mt4" href="https://handmade.network/p/366/diffest/">
+        <h3>Diffest</h3>
+      </a>
+      <p><img class="br2" src="{{ static "visjam2023/diffest.png" }}"></p>
+      <p>This project is only obliquely related to the jam topic, but the results are so good that we just have to highlight it. The author, <a href="https://handmade.network/m/abec">abec</a>, has been working on a version control system called <a href="https://darke.handmade.network/">Darke</a>, and his project explores how diff tools could work if they understood code instead of just text.</p>
+      <p>The project submission has a fantastic writeup of the motivation, techniques used, and the end result. This is a very valuable exploration of a difficult problem, and I hope that he and others can take it further in the future and make code-aware diff tools a viable option for all of us.</p>
+      
+      <h3>And more!</h3>
+      <p>We on the admin team were just blown away by the success of this jam. We're so glad you all enjoyed the topic, and we're always amazed by the work this community can achieve in such a short time. Name me one other group of programmers creating new UIs for terminals or regex engines with particle effects!</p>
+      <p>These are just six of the 23 submissions we received. I strongly encourage you to check them all out on the <a href="{{ .FeedUrl }}">jam feed</a>.</p>
+      <p>Thanks everyone for participating, and I hope we see you again this fall for the Wheel Reinvention Jam!</p>
+    </div>
+  </div>
+</div>
+{{ end }}

src/templates/src/layouts/jam_2023_visibility_base.html

@@ -336,6 +336,10 @@
         .jam-sections > div:nth-of-type(even) {
             background-color: rgba(0, 0, 0, 0.2);
         }
+
+        .avatar-icon {
+            background-color: rgba(0, 0, 0, 0.2);
+        }
     </style>
 
     <script src="{{ static "js/carousel.js" }}"></script>

src/website/jam.go

@@ -4,6 +4,7 @@ import (
 	"net/http"
 	"time"
 
+	"git.handmade.network/hmn/hmn/src/db"
 	"git.handmade.network/hmn/hmn/src/hmndata"
 	"git.handmade.network/hmn/hmn/src/hmnurl"
 	"git.handmade.network/hmn/hmn/src/oops"
@@ -38,6 +39,7 @@ func JamIndex2023_Visibility(c *RequestContext) ResponseData {
 		ProjectSubmissionUrl string
 		ShowcaseFeedUrl      string
 		ShowcaseJson         string
+		RecapUrl             string
 
 		JamProjects []templates.Project
 	}
@@ -96,7 +98,7 @@ func JamIndex2023_Visibility(c *RequestContext) ResponseData {
 
 	showcaseJson := templates.TimelineItemsToJSON(showcaseItems)
 
-	res.MustWriteTemplate("jam_2023_visibility.html", JamPageData{
+	res.MustWriteTemplate("jam_2023_vj_index.html", JamPageData{
 		BaseData:             baseData,
 		DaysUntilStart:       daysUntilStart,
 		DaysUntilEnd:         daysUntilEnd,
@@ -106,6 +108,7 @@ func JamIndex2023_Visibility(c *RequestContext) ResponseData {
 		SubmittedProjectUrl:  submittedProjectUrl,
 		ShowcaseFeedUrl:      hmnurl.BuildJamFeed2023_Visibility(),
 		ShowcaseJson:         showcaseJson,
+		RecapUrl:             hmnurl.BuildJamRecap2023_Visibility(),
 		JamProjects:          pageProjects,
 	}, c.Perf)
 	return res
@@ -183,6 +186,50 @@ func JamFeed2023_Visibility(c *RequestContext) ResponseData {
 	return res
 }
 
+func JamRecap2023_Visibility(c *RequestContext) ResponseData {
+	type JamRecapData struct {
+		templates.BaseData
+
+		JamUrl   string
+		FeedUrl  string
+		Ben      templates.User
+		PostDate time.Time
+	}
+
+	var ben templates.User
+	benUser, err := hmndata.FetchUserByUsername(c, c.Conn, c.CurrentUser, "bvisness", hmndata.UsersQuery{})
+	if err == nil {
+		ben = templates.UserToTemplate(benUser, c.Theme)
+	} else if err == db.NotFound {
+		ben = templates.UnknownUser
+	} else {
+		panic("where ben ???")
+	}
+
+	baseData := getBaseDataAutocrumb(c, hmndata.VJ2023.Name)
+
+	baseData.OpenGraphItems = []templates.OpenGraphItem{
+		{Property: "og:title", Value: "Visibility Jam"},
+		{Property: "og:site_name", Value: "Handmade Network"},
+		{Property: "og:type", Value: "website"},
+		{Property: "og:image", Value: hmnurl.BuildPublic("visjam2023/opengraph.png", true)},
+		// {Property: "og:description", Value: "See things in a new way. April 14 - 16."},
+		{Property: "og:url", Value: hmnurl.BuildJamIndex()},
+		{Name: "twitter:card", Value: "summary_large_image"},
+		{Name: "twitter:image", Value: hmnurl.BuildPublic("visjam2023/TwitterCard.png", true)},
+	}
+
+	var res ResponseData
+	res.MustWriteTemplate("jam_2023_vj_recap.html", JamRecapData{
+		BaseData: baseData,
+		JamUrl:   hmnurl.BuildJamIndex2023_Visibility(),
+		FeedUrl:  hmnurl.BuildJamFeed2023_Visibility(),
+		Ben:      ben,
+		PostDate: time.Date(2023, 4, 22, 3, 9, 0, 0, time.UTC),
+	}, c.Perf)
+	return res
+}
+
 func JamIndex2022(c *RequestContext) ResponseData {
 	var res ResponseData
 

src/website/landing.go

@@ -156,7 +156,7 @@ func Index(c *RequestContext) ResponseData {
 		AtomFeedUrl:    hmnurl.BuildAtomFeed(),
 		MarkAllReadUrl: hmnurl.HMNProjectContext.BuildForumMarkRead(0),
 
-		JamUrl:            hmnurl.BuildJamIndex(),
+		JamUrl:            hmnurl.BuildJamIndex2023_Visibility(),
 		JamDaysUntilStart: daysUntil(hmndata.VJ2023.StartTime),
 		JamDaysUntilEnd:   daysUntil(hmndata.VJ2023.EndTime),
 

src/website/routes.go

@@ -55,12 +55,15 @@ func NewWebsiteRoutes(conn *pgxpool.Pool) http.Handler {
 	hmnOnly.GET(hmnurl.RegexProjectSubmissionGuidelines, ProjectSubmissionGuidelines)
 	hmnOnly.GET(hmnurl.RegexConferences, Conferences)
 	hmnOnly.GET(hmnurl.RegexWhenIsIt, WhenIsIt)
-	hmnOnly.GET(hmnurl.RegexJamIndex, JamIndex2023_Visibility)
+	hmnOnly.GET(hmnurl.RegexJamIndex, func(c *RequestContext) ResponseData {
+		return c.Redirect(hmnurl.BuildJamIndex2023_Visibility(), http.StatusFound)
+	})
 	hmnOnly.GET(hmnurl.RegexJamIndex2021, JamIndex2021)
 	hmnOnly.GET(hmnurl.RegexJamIndex2022, JamIndex2022)
 	hmnOnly.GET(hmnurl.RegexJamFeed2022, JamFeed2022)
 	hmnOnly.GET(hmnurl.RegexJamIndex2023_Visibility, JamIndex2023_Visibility)
 	hmnOnly.GET(hmnurl.RegexJamFeed2023_Visibility, JamFeed2023_Visibility)
+	hmnOnly.GET(hmnurl.RegexJamRecap2023_Visibility, JamRecap2023_Visibility)
 
 	hmnOnly.GET(hmnurl.RegexStaffRolesIndex, StaffRolesIndex)
 	hmnOnly.GET(hmnurl.RegexStaffRole, StaffRole)