Files
go_blog/templates/pages/comment_node.html
dsh 83866f6de2 feat: enhance frontend Markdown rendering
- Add shared BlogMD renderer (static/js/markdown.js): marked + DOMPurify
  + highlight.js pipeline with GFM support, heading id slugger with
  CJK-aware anchors, syntax highlighting, per-block copy button and
  language badge, lazy images with lightbox, external links opened
  safely in new tabs, tables wrapped for small screens.
- Add .md-body typography styles (static/css/markdown.css) so articles,
  comments and editor previews render with proper headings, tables,
  lists, blockquotes and code blocks (previously the prose classes had
  no effect because the Tailwind typography plugin is not loaded).
- Fix marked options that were set after parsing and removed from
  marked v4+ (mangle/headerIds no-ops).
- Pin CDN versions (marked 15.0.12, dompurify 3.4.13, highlight.js
  11.12.0) instead of floating 'latest' URLs.
- Wire EasyMDE preview/side-by-side to BlogMD in admin and user
  article editors; use BlogMD for comment bodies on the article page,
  admin comment list and comment preview.
- Serve /static in main.go and deploy it in install_linux.sh.
2026-08-18 06:05:53 -04:00

34 lines
2.0 KiB
HTML

{{define "comment_node"}}
<div id="comment-{{.Comment.ID}}" class="comment-node">
<div class="flex items-start gap-3 py-3">
{{if .UseGravatar}}
<img src="{{.Comment.GravatarURL 48}}" alt="" class="w-10 h-10 rounded-full bg-gray-100 flex-shrink-0">
{{else}}
<div class="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0" style="background:{{.AvatarColor}}">{{.Comment.AuthorInitial}}</div>
{{end}}
<div class="flex-1 min-w-0">
<div class="flex flex-wrap items-center gap-2 text-sm">
{{if .Comment.Website}}
<a href="{{.Comment.Website}}" target="_blank" rel="nofollow ugc noopener" class="font-semibold text-gray-800 hover:text-blue-600">{{.Comment.AuthorName}}</a>
{{else}}
<span class="font-semibold text-gray-800">{{.Comment.AuthorName}}</span>
{{end}}
<span class="text-gray-400 text-xs">{{.RelTime}}</span>
{{if .Comment.IsPrivate}}<span class="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded">{{index .Tr "comments_private_badge"}}</span>{{end}}
{{if eq .Comment.Status 0}}<span class="text-xs bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded">{{index .Tr "comments_pending"}}</span>{{end}}
</div>
<div class="comment-body mt-1 text-sm text-gray-700 prose prose-sm max-w-none md-body" data-md="{{.Comment.Content}}"></div>
<button type="button" class="reply-btn mt-2 text-xs text-blue-600 hover:text-blue-800 font-medium bg-transparent border-none cursor-pointer"
data-id="{{.Comment.ID}}" data-name="{{.Comment.AuthorName}}">{{index .Tr "comments_reply"}}</button>
</div>
</div>
{{if .Children}}
<div class="ml-6 sm:ml-10 pl-4 border-l-2 border-gray-100">
{{range .Children}}
{{template "comment_node" .}}
{{end}}
</div>
{{end}}
</div>
{{end}}