20 sats \ 0 replies \ @k00b 27 May freebie \ on: Show HN: Use Go's HTML/template to write React-like code tech
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}}
write
preview