orchard

 1{{ define "content" }}
 2<div class="index-imageWrapper">
 3  <!-- The hero is the largest thing on the site and the only image worth
 4       preloading: everything else is below the fold or on another page. -->
 5  <img
 6    src="{{ .HeroSrc }}"
 7    srcset="{{ .HeroSrcset }}"
 8    sizes="100vw"
 9    alt="#005 Nebulas in Triangulum"
10    fetchpriority="high"
11    decoding="async"
12  />
13</div>
14
15<!-- Filled by JS. Each word plays an entrance animation on arrival, so one
16     rendered here server-side would sit there having never played it. -->
17<div class="index-words"></div>
18
19<div class="index-hero">
20  <h1 class="index-name">
21    <span class="index-firstName">Isaac</span>
22    <span class="index-lastName">Bythewood</span>
23  </h1>
24  <div class="index-role">
25    <span class="index-roleTitle">Senior Solutions Architect</span>
26    <span class="index-roleAt">at</span>
27    <span class="index-roleCompany">Craftmaster Furniture</span>
28  </div>
29  {{- /*
30    The promo slot. It was a hardcoded Dark Furrow card, which meant it aged by
31    construction: it kept advertising the site for a day after the takedown and
32    the domain was already gone. It now shows whatever went up on the blog most
33    recently, fetched hourly in the background, so the slot maintains itself.
34
35    Rendered only when there is something cached. A blog outage leaves the hero
36    without a card rather than with an empty one.
37  */ -}}
38  {{- with .Latest }}
39  <a href="{{ .URL }}" class="index-notice">
40    <span class="index-noticeLabel">Latest Post</span>
41    <span class="index-noticeTitle">{{ .Title }}</span>
42    <span class="index-noticeDesc">{{ .Description }}</span>
43  </a>
44  {{- end }}
45</div>
46{{ end }}