This link was posted by rkwz 1 hour ago on HN. It received 49 points and 35 comments.
I don't immediately think of composition as react's main feature (I think of reactivity), but this is a cleaner pattern than I arrived at when doing go templates in the past.
https://old.grepmed.com is done using golang templates and a template "engine" I made myself. I compose them, but it's pretty nasty in the end. It was like 7 years ago and I suspect go's html templating has improved a lot since then.
The template to the homepage:
{{define "navbar"}} {{template "_navbarEmpty"}} {{end}} {{define "content"}} <div id="homesearchbox" class="text-center row mx-0"> <div class="col-md-6 offset-md-3 col-sm-10 offset-sm-1 my-5"> <h1 class="home-brand my-4"> <span>GrepMed</span> <div class="lead text-muted pt-1"> <span>Image Based Medical Reference</span> <div class="text-muted small mt-2"> Find <a href="/?q=Algorithm">Algorithms</a>, <a href="/?q=DecisionAid">Decision Aids</a>, <a href="/?q=Checklist">Checklists</a>, <a href="/?q=Guideline">Guidelines</a>, <a href="/?q=Differential">Differentials</a>, <a href="/?q=POCUS">Point of Care Ultrasound (POCUS)</a>, <a href="/?q=PhysicalExam">Physical Exam clips</a> and <a href="/browse">more</a> <div class="alert alert-warning mt-3" role="alert"> <a href="/?q=COVID" class="alert-link">COVID-19 resources for clinicians</a> </div> </div> </div> </h1> <form class="py-1" action="/" method="get"> <div class="input-group"> <input class="form-control home-search-input" type="text" name="q" required="" placeholder="Search for hashtags ..."> <div class="input-group-append"> <button class="btn btn-primary home-search-button" type="submit"> <svg class="icon-md" viewBox="0 0 8 8"><use xlink:href="#magnifying-glass" class="icon-btn-lightgrey"></use></svg> </button> </div> </div> </form> </div> </div> <div class="top-contributor-row"> {{template "_infRow" (infRowParams "Top Contributors" false 25 "ranks" "/ranks")}} </div> <div class="search-row"> {{if currentUser}} {{$you := printf "/users/%d/searches" currentUser.ID}} {{template "_infRow" (infRowParams "Latest Searches" false 10 "You" $you "Global" "/searches")}} {{else}} {{template "_infRow" (infRowParams "Latest Searches" false 10 "Global" "/searches" "You" "/users/new")}} {{end}} </div> {{$cats := homeImageRowCats}} {{range $v := $cats}} <div class="image-row image-row-home"> {{$global := printf "/?q=&cat=%s" (toLower $v)}} {{$title := printf "Latest %s" $v}} {{if currentUser}} {{$you := printf "/users/%d/%s" currentUser.ID (toLower $v)}} {{template "_infRow" (infRowParams $title true 5 "You" $you "Global" $global)}} {{else}} {{template "_infRow" (infRowParams $title true 5 "Global" $global "You" "/users/new" )}} {{end}} </div> {{end}} {{template "_aboutFooter" .}} {{end}} {{define "footer"}}{{template "_footer"}}{{end}}
reply