Redesign media page (WIP)

content/english/media/seattle-2023/approaching-local-first-software.md

@@ -3,6 +3,7 @@ title="Approaching Local-First Software"
 mediatype="podcast"
 conference="Handmade Seattle 2023"
 description="Allen Webster sits down with the head of Ink & Switch, an independent research lab."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Approaching Local-First Software"

content/english/media/seattle-2023/cactus-image-viewer.md

@@ -3,6 +3,7 @@ title="Cactus Image Viewer"
 mediatype="demo"
 conference="Handmade Seattle 2023"
 description="Lightweight image viewer for Windows."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Cactus Image Viewer"

content/english/media/seattle-2023/dantes-cowboy.md

@@ -3,6 +3,7 @@ title="Dante's Cowboy"
 mediatype="demo"
 conference="Handmade Seattle 2023"
 description="A Neo-Western town is simmering with conflict."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Dante's Cowboy"

content/english/media/seattle-2023/disassembling-impostor-syndrome.md

@@ -3,6 +3,7 @@ title="Disassembling Impostor Syndrome"
 mediatype="talk"
 conference="Handmade Seattle 2023"
 description="Understand the mechanisms behind how we see ourselves (and others) in communities that focus on building competence."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Disassembling Impostor Syndrome"

content/english/media/seattle-2023/disk-voyager.md

@@ -3,6 +3,7 @@ title="Disk Voyager"
 mediatype="demo"
 conference="Handmade Seattle 2023"
 description="Unleash the thrill of warp-speed file discovery!"
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Disk Voyager"

content/english/media/seattle-2023/embers-of-insight.md

@@ -3,6 +3,7 @@ title="Embers of Insight"
 mediatype="chat"
 conference="Handmade Seattle 2023"
 description="Fireside wisdom with Bill Hall of JangaFX (Makers of EmberGen)"
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Embers of Insight"

content/english/media/seattle-2023/eon.md

@@ -3,6 +3,7 @@ title="Eon: An Amiga 500 Demo"
 mediatype="chat"
 conference="Handmade Seattle 2023"
 description="What can we learn from demo groups trying to coax 40yo hardware into doing things its designers never imagined?"
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Eon: An Amiga 500 Demo"

content/english/media/seattle-2023/handmade-reflections.md

@@ -3,6 +3,7 @@ title="Handmade Reflections"
 mediatype="podcast"
 conference="Handmade Seattle 2023"
 description="Abner Coimbre and Ben Visness discuss Handmade's goals for 2024, with fun shenanigans along the way!"
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Handmade Reflections"

content/english/media/seattle-2023/high-level-is-the-goal.md

@@ -3,6 +3,7 @@ title="High-level is the goal"
 mediatype="talk"
 conference="Handmade Seattle 2023"
 description="Why “Handmade” means more than “low-level.”"
+thumbnail="/images/thumbnails/2023HMSBenVisness.png"
 
 [[videos]]
 title="High-level is the goal"

content/english/media/seattle-2023/mobilecode.md

@@ -3,6 +3,7 @@ title="MobileCode"
 mediatype="demo"
 conference="Handmade Seattle 2023"
 description="A Handmade code editor designed for mobile phones."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="MobileCode"

content/english/media/seattle-2023/opticks.md

@@ -3,6 +3,7 @@ title="Opticks"
 mediatype="demo"
 conference="Handmade Seattle 2023"
 description="RGB that's easy to program and use."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Opticks demo"

content/english/media/seattle-2023/orca.md

@@ -3,6 +3,7 @@ title="Orca"
 mediatype="demo"
 conference="Handmade Seattle 2023"
 description="WebAssembly apps without the web. A brand-new stack for cross-platform apps."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Orca"

content/english/media/seattle-2023/serenum.md

@@ -3,6 +3,7 @@ title="Serenum"
 mediatype="demo"
 conference="Handmade Seattle 2023"
 description="Solving the Thirty Million Line Problem. Not affiliated with Molly Rocket, Inc."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Serenum"

content/english/media/seattle-2023/shapeup.md

@@ -3,6 +3,7 @@ title="ShapeUp"
 mediatype="demo"
 conference="Handmade Seattle 2023"
 description="Create 3D models by adding and subtracting shapes, instead of dealing with vertices and faces."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="ShapeUp"

content/english/media/seattle-2023/sqls-inner-workings.md

@@ -3,6 +3,7 @@ title="SQL's Inner Workings"
 mediatype="talk"
 conference="Handmade Seattle 2023"
 description="An exposé by a whistleblower investigating the marketing claims of “It’s just the same old SQL you know.”"
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="SQL's Inner Workings"

content/english/media/seattle-2023/tb.md

@@ -3,6 +3,7 @@ title="Tilde Backend (TB)"
 mediatype="demo"
 conference="Handmade Seattle 2023"
 description="The future of compiler backends."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Tilde Backend"

content/english/media/seattle-2023/the-ethics-of-psychological-manipulation.md

@@ -3,6 +3,7 @@ title="The Ethics of Psychological Manipulation"
 mediatype="talk"
 conference="Handmade Seattle 2023"
 description="A look at how video games make money."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="The Ethics of Psychological Manipulation"

content/english/media/seattle-2023/the-state-of-software-ux.md

@@ -3,6 +3,7 @@ title="The State of Software UX"
 mediatype="talk"
 conference="Handmade Seattle 2023"
 description="A survey of user-hostile games, apps, and software."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="The State of Software UX"

content/english/media/seattle-2023/whitebox.md

@@ -3,6 +3,7 @@ title="Whitebox"
 mediatype="demo"
 conference="Handmade Seattle 2023"
 description="The world’s only live timeline debugger."
+thumbnail="/images/image-placeholder-16x9.png"
 
 [[videos]]
 title="Whitebox"

layouts/media/section.html

@@ -8,11 +8,44 @@
       {{ range $sections }}
         <div>
           <div>
-            <h1><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
+            <h2 class="mb-6"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
           </div>
-          <div class="flex flex-col">
+          <div class="row">
             {{ range .RegularPages.ByDate }}
-              <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+              <div class="col-12 md:col-6 lg:col-4 mb-3">
+                {{ $image := .Params.thumbnail }}
+                {{ if $image }}
+                  <a href="{{ .RelPermalink }}">
+                    {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "mb-3 w-full rounded") }}
+                  </a>
+                {{ end }}
+                <div class="mb-3">
+                  <a href="{{ .RelPermalink }}">
+                    <h4 class="mb-1">
+                      {{ .Title }}
+                    </h4>
+                  </a>
+                  <div class="flex">
+                    {{ with .Params.mediatype }}
+                      <div class="mr-4">
+                        <i class="fa-regular fa-folder mr-1"></i>
+                        {{ if eq . "talk" }}Talk{{ end }}
+                        {{ if eq . "demo" }}Demo{{ end }}
+                        {{ if eq . "podcast" }}Podcast{{ end }}
+                        {{ if eq . "chat" }}Fireside Chat{{ end }}
+                      </div>
+                    {{ end }}
+
+                    <div>
+                      <i class="fa-regular fa-circle-user mr-1"></i>
+                      {{ range $i, $s := .Params.speakers -}}
+                        {{ if gt $i 0 }}, {{ end }}{{ $s.name }}
+                      {{- end }}
+                    </div>
+                  </div>
+                </div>
+                <p class="mb-6">{{ .Params.description }}</p>
+              </div>
             {{ end }}
           </div>
         </div>