blog.gohtml (1968B)
1 {{define "blog"}} 2 <section id="blog" class="page"> 3 {{if eq (len .Blogs) 0}} 4 <div class="blog-empty"> 5 <p class="color-dim">~/blog is empty</p> 6 <p class="color-dim">check back soon</p> 7 </div> 8 {{else}} 9 <div id="blog-list-view" class="blog-list-view{{if .Blog}} hidden{{end}}"> 10 <div class="blog-fs-shell"> 11 <div class="blog-fs-header">~/blog $ ls -l</div> 12 <div class="blog-list-columns"> 13 <span class="col-mode">mode</span> 14 <span>date</span> 15 <span>name</span> 16 <span class="col-desc">desc</span> 17 <span class="col-arrow"></span> 18 </div> 19 <div class="blog-list-container" preload-images="true"> 20 {{range $i, $blog := .Blogs}} 21 <div class="blog-list-item{{if $.SelectedBlogID}}{{if eq $blog.ID $.SelectedBlogID}} selected{{end}}{{else}}{{if eq $i 0}} selected{{end}}{{end}}" data-index="{{$i}}" data-id="{{$blog.ID}}" hx-get="/api/blog/{{$blog.ID}}" hx-target="#blog-post-content" hx-swap="innerHTML" preload="blog:selected"> 22 <span class="blog-list-mode">-rw-r--r--</span> 23 <span class="blog-list-date">{{$blog.Date.Format "2006-01-02"}}</span> 24 <span class="blog-list-name"> 25 <span class="blog-list-file">{{$blog.ID}}.md</span> 26 <span class="blog-list-title">{{$blog.Title}}</span> 27 </span> 28 <span class="blog-list-desc" title="{{$blog.Description}}">{{$blog.Description}}</span> 29 <span class="blog-list-arrow">-></span> 30 </div> 31 {{end}} 32 </div> 33 </div> 34 </div> 35 36 <div id="blog-post-view" class="blog-post-view{{if not .Blog}} hidden{{end}}"> 37 <div class="blog-post-container"> 38 <button class="blog-back-btn">cd ..</button> 39 <div id="blog-post-content">{{if .Blog}}{{template "blog_detail" .}}{{end}}</div> 40 </div> 41 </div> 42 {{end}} 43 </section> 44 45 <style>{{inlineCSS "blog.css"}}</style> 46 {{end}}