nandi/glean · 8f27e39

modified internal/server/articles_handler.go +8 -3 Viewed

@@ -15,7 +15,7 @@ import (
15	15	"pkg.rbrt.fr/glean/internal/sanitize"
16	16	)
17	17
18		-func writeLikeButton(w http.ResponseWriter, articleID int64, liked bool, count int) {
	18	+func writeLikeButton(w http.ResponseWriter, articleID int64, liked bool, count int, bordered bool) {
19	19	fill := "none"
20	20	colorCls := "text-spot-muted"
21	21	if liked {
@@ -23,7 +23,11 @@ func writeLikeButton(w http.ResponseWriter, articleID int64, liked bool, count i
23	23	colorCls = "text-spot-red"
24	24	}
25	25	w.Header().Set("Content-Type", "text/html")
26		- _, _ = fmt.Fprintf(w, `<button hx-post="/articles/%d/like" hx-target="this" hx-swap="outerHTML" class="border border-spot-outline text-spot-text rounded-pill px-4 py-1.5 text-xs font-bold uppercase tracking-button hover:border-spot-text transition inline-flex items-center gap-1.5"><svg class="w-3.5 h-3.5 %s" fill="%s" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/></svg><span>%d</span></button>`, articleID, colorCls, fill, count)
	26	+ cls := "text-spot-text rounded-pill px-3 py-1 text-xs font-bold transition inline-flex items-center gap-1.5 hover:text-spot-green"
	27	+ if bordered {
	28	+ cls = "border border-spot-outline text-spot-text rounded-pill px-4 py-1.5 text-xs font-bold uppercase tracking-button hover:border-spot-text transition inline-flex items-center gap-1.5"
	29	+ }
	30	+ _, _ = fmt.Fprintf(w, `<button hx-post="/articles/%d/like?bordered=%t" hx-target="this" hx-swap="outerHTML" class="%s"><svg class="w-3.5 h-3.5 %s" fill="%s" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/></svg><span>%d</span></button>`, articleID, bordered, cls, colorCls, fill, count)
27	31	}
28	32
29	33	func (s Server) handleArticles(w http.ResponseWriter, r http.Request) {
@@ -272,7 +276,8 @@ func (s Server) handleLikeArticle(w http.ResponseWriter, r http.Request) {
272	276	}
273	277
274	278	likeCount, _ := s.db.GetLikeCount(r.Context(), article.FeedURL, article.URL.String)
275		- writeLikeButton(w, id, !liked, likeCount)
	279	+ bordered := r.URL.Query().Get("bordered") == "true"
	280	+ writeLikeButton(w, id, !liked, likeCount, bordered)
276	281	}
277	282
278	283	func (s Server) handleMarkAllRead(w http.ResponseWriter, r http.Request) {

  	"pkg.rbrt.fr/glean/internal/sanitize"
  )
--func writeLikeButton(w http.ResponseWriter, articleID int64, liked bool, count int) {
++func writeLikeButton(w http.ResponseWriter, articleID int64, liked bool, count int, bordered bool) {
  	fill := "none"
  	colorCls := "text-spot-muted"
  	if liked {
  		colorCls = "text-spot-red"
  	}
  	w.Header().Set("Content-Type", "text/html")
--	_, _ = fmt.Fprintf(w, `<button hx-post="/articles/%d/like" hx-target="this" hx-swap="outerHTML" class="border border-spot-outline text-spot-text rounded-pill px-4 py-1.5 text-xs font-bold uppercase tracking-button hover:border-spot-text transition inline-flex items-center gap-1.5"><svg class="w-3.5 h-3.5 %s" fill="%s" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/></svg><span>%d</span></button>`, articleID, colorCls, fill, count)
++	cls := "text-spot-text rounded-pill px-3 py-1 text-xs font-bold transition inline-flex items-center gap-1.5 hover:text-spot-green"
++	if bordered {
++		cls = "border border-spot-outline text-spot-text rounded-pill px-4 py-1.5 text-xs font-bold uppercase tracking-button hover:border-spot-text transition inline-flex items-center gap-1.5"
++	}
++	_, _ = fmt.Fprintf(w, `<button hx-post="/articles/%d/like?bordered=%t" hx-target="this" hx-swap="outerHTML" class="%s"><svg class="w-3.5 h-3.5 %s" fill="%s" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/></svg><span>%d</span></button>`, articleID, bordered, cls, colorCls, fill, count)
  }
  func (s *Server) handleArticles(w http.ResponseWriter, r *http.Request) {
  	}
  	likeCount, _ := s.db.GetLikeCount(r.Context(), article.FeedURL, article.URL.String)
--	writeLikeButton(w, id, !liked, likeCount)
++	bordered := r.URL.Query().Get("bordered") == "true"
++	writeLikeButton(w, id, !liked, likeCount, bordered)
  }
  func (s *Server) handleMarkAllRead(w http.ResponseWriter, r *http.Request) {

modified internal/tmpl/article_detail.html +1 -1 Viewed

@@ -23,7 +23,7 @@
23	23	</div>
24	24
25	25	<div class="flex items-center gap-2 mt-6">
26		- <button hx-post="/articles/{{.Article.ID}}/like" hx-target="this" hx-swap="outerHTML"
	26	+ <button hx-post="/articles/{{.Article.ID}}/like?bordered=true" hx-target="this" hx-swap="outerHTML"
27	27	class="border border-spot-outline text-spot-text rounded-pill px-4 py-1.5 text-xs font-bold uppercase tracking-button hover:border-spot-text transition inline-flex items-center gap-1.5">
28	28	<svg class="w-3.5 h-3.5 {{if .HasLiked}}text-spot-red{{else}}text-spot-muted{{end}}" fill="{{if .HasLiked}}currentColor{{else}}none{{end}}" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">{{template "icon-heart"}}</svg>
29	29	<span>{{.LikeCount}}</span>

          </div>
          <div class="flex items-center gap-2 mt-6">
--            <button hx-post="/articles/{{.Article.ID}}/like" hx-target="this" hx-swap="outerHTML"
++            <button hx-post="/articles/{{.Article.ID}}/like?bordered=true" hx-target="this" hx-swap="outerHTML"
                      class="border border-spot-outline text-spot-text rounded-pill px-4 py-1.5 text-xs font-bold uppercase tracking-button hover:border-spot-text transition inline-flex items-center gap-1.5">
                  <svg class="w-3.5 h-3.5 {{if .HasLiked}}text-spot-red{{else}}text-spot-muted{{end}}" fill="{{if .HasLiked}}currentColor{{else}}none{{end}}" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">{{template "icon-heart"}}</svg>
                  <span>{{.LikeCount}}</span>

modified internal/tmpl/partials/like-button.html +2 -2 Viewed

@@ -1,7 +1,7 @@
1	1	{{define "like-button.html"}}
2	2	<button hx-post="/articles/{{.ID}}/like" hx-target="this" hx-swap="outerHTML"
3		- class="border border-spot-outline text-spot-text rounded-pill px-4 py-1.5 text-xs font-bold uppercase tracking-button hover:border-spot-text transition inline-flex items-center gap-1.5">
4		- <svg class="w-3.5 h-3.5 {{if .HasLiked}}text-spot-red{{else}}text-spot-muted{{end}}" fill="{{if .HasLiked}}currentColor{{else}}none{{end}}" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">{{template "icon-heart"}}</svg>
	3	+ class="text-spot-text rounded-pill px-2 py-1 text-xs font-bold transition inline-flex items-center gap-1 hover:text-spot-green">
	4	+ <svg class="w-4 h-4 {{if .HasLiked}}text-spot-red{{else}}text-spot-muted{{end}}" fill="{{if .HasLiked}}currentColor{{else}}none{{end}}" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">{{template "icon-heart"}}</svg>
5	5	<span>{{.LikeCount}}</span>
6	6	</button>
7	7	{{end}}

  {{define "like-button.html"}}
  <button hx-post="/articles/{{.ID}}/like" hx-target="this" hx-swap="outerHTML"
--        class="border border-spot-outline text-spot-text rounded-pill px-4 py-1.5 text-xs font-bold uppercase tracking-button hover:border-spot-text transition inline-flex items-center gap-1.5">
++        class="text-spot-text rounded-pill px-2 py-1 text-xs font-bold transition inline-flex items-center gap-1 hover:text-spot-green">
--    <svg class="w-3.5 h-3.5 {{if .HasLiked}}text-spot-red{{else}}text-spot-muted{{end}}" fill="{{if .HasLiked}}currentColor{{else}}none{{end}}" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">{{template "icon-heart"}}</svg>
++    <svg class="w-4 h-4 {{if .HasLiked}}text-spot-red{{else}}text-spot-muted{{end}}" fill="{{if .HasLiked}}currentColor{{else}}none{{end}}" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">{{template "icon-heart"}}</svg>
      <span>{{.LikeCount}}</span>
  </button>
  {{end}}

modified internal/tmpl/partials/trending-card.html +2 -2 Viewed

@@ -12,9 +12,9 @@
12	12	<p class="text-sm text-spot-secondary mt-2 line-clamp-2">{{plainText .Summary}}</p>
13	13	{{end}}
14	14	</div>
15		- <div class="flex flex-col items-end gap-1 shrink-0">
	15	+ <div class="flex flex-col items-end shrink-0 gap-0.5">
16	16	{{template "like-button.html" (dict "ID" .ArticleID "HasLiked" .HasLiked "LikeCount" .LikeCount)}}
17		- <span class="text-xs text-spot-muted">{{.AnnotationCount}} notes</span>
	17	+ <span class="text-xs text-spot-muted font-bold inline-flex items-center gap-1 px-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" role="img" aria-label="Annotation"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>{{.AnnotationCount}}</span>
18	18	</div>
19	19	</div>
20	20	</div>

              <p class="text-sm text-spot-secondary mt-2 line-clamp-2">{{plainText .Summary}}</p>
              {{end}}
          </div>
--        <div class="flex flex-col items-end gap-1 shrink-0">
++        <div class="flex flex-col items-end shrink-0 gap-0.5">
              {{template "like-button.html" (dict "ID" .ArticleID "HasLiked" .HasLiked "LikeCount" .LikeCount)}}
--            <span class="text-xs text-spot-muted">{{.AnnotationCount}} notes</span>
++            <span class="text-xs text-spot-muted font-bold inline-flex items-center gap-1 px-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" role="img" aria-label="Annotation"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>{{.AnnotationCount}}</span>
          </div>
      </div>
  </div>

Refactor like button styling and update trending card annotationsUnverified