entry.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. {{ define "title"}}{{ .entry.Title }}{{ end }}
  2. {{ define "page_header"}}
  3. <section class="entry" data-id="{{ .entry.ID }}" aria-labelledby="page-header-title">
  4. <header class="entry-header">
  5. <h1 id="page-header-title" dir="auto">
  6. <a href="{{ .entry.URL | safeURL }}" {{ if $.user.OpenExternalLinksInNewTab }}target="_blank"{{ end }} rel="noopener noreferrer" referrerpolicy="no-referrer">{{ .entry.Title }}</a>
  7. </h1>
  8. {{ if .user }}
  9. <div class="entry-actions">
  10. <ul>
  11. <li>
  12. <button
  13. class="page-button"
  14. title="{{ t "entry.status.title" }}"
  15. data-toggle-status="true"
  16. data-label-loading="{{ t "entry.state.saving" }}"
  17. data-label-unread="{{ t "entry.status.mark_as_unread" }}"
  18. data-label-read="{{ t "entry.status.mark_as_read" }}"
  19. data-toast-unread="{{ t "entry.status.toast.unread" }}"
  20. data-toast-read="{{ t "entry.status.toast.read" }}"
  21. data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
  22. >{{ if eq .entry.Status "unread" }}{{ icon "read" }}{{ else }}{{ icon "unread" }}{{ end }}<span class="icon-label">{{ if eq .entry.Status "unread" }}{{ t "entry.status.mark_as_read" }}{{ else }}{{ t "entry.status.mark_as_unread" }}{{ end }}</span></button>
  23. </li>
  24. <li>
  25. <button
  26. class="page-button"
  27. data-toggle-bookmark="true"
  28. data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
  29. data-label-loading="{{ t "entry.state.saving" }}"
  30. data-label-star="{{ t "entry.bookmark.toggle.on" }}"
  31. data-label-unstar="{{ t "entry.bookmark.toggle.off" }}"
  32. data-toast-star="{{ t "entry.bookmark.toast.on" }}"
  33. data-toast-unstar="{{ t "entry.bookmark.toast.off" }}"
  34. data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
  35. >{{ if .entry.Starred }}{{ icon "unstar" }}{{ else }}{{ icon "star" }}{{ end }}<span class="icon-label">{{ if .entry.Starred }}{{ t "entry.bookmark.toggle.off" }}{{ else }}{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></button>
  36. </li>
  37. {{ if .hasSaveEntry }}
  38. <li>
  39. <button
  40. class="page-button"
  41. title="{{ t "entry.save.title" }}"
  42. data-save-entry="true"
  43. data-save-url="{{ route "saveEntry" "entryID" .entry.ID }}"
  44. data-label-loading="{{ t "entry.state.saving" }}"
  45. data-label-done="{{ t "entry.save.completed" }}"
  46. data-toast-done="{{ t "entry.save.toast.completed" }}"
  47. >{{ icon "save" }}<span class="icon-label">{{ t "entry.save.label" }}</span></button>
  48. </li>
  49. {{ end }}
  50. {{ if .entry.ShareCode }}
  51. <li>
  52. <a href="{{ route "sharedEntry" "shareCode" .entry.ShareCode }}"
  53. title="{{ t "entry.shared_entry.title" }}"
  54. data-share-status="shared"
  55. {{ if $.user.OpenExternalLinksInNewTab }}target="_blank"{{ end }}>{{ icon "share" }}<span class="icon-label">{{ t "entry.shared_entry.label" }}</span></a>
  56. </li>
  57. <li>
  58. <button
  59. class="page-button"
  60. data-confirm="true"
  61. data-url="{{ route "unshareEntry" "entryID" .entry.ID }}"
  62. data-label-question="{{ t "confirm.question" }}"
  63. data-label-yes="{{ t "confirm.yes" }}"
  64. data-label-no="{{ t "confirm.no" }}"
  65. data-label-loading="{{ t "confirm.loading" }}">{{ icon "delete" }}<span class="icon-label">{{ t "entry.unshare.label" }}</span></button>
  66. </li>
  67. {{ else }}
  68. <li>
  69. <form method="post" action="{{route "shareEntry" "entryID" .entry.ID }}">
  70. <input type="hidden" name="csrf" value="{{ .csrf }}">
  71. <button type="submit" class="page-button">
  72. {{ icon "share" }}<span class="icon-label">{{ t "entry.share.label" }}</span>
  73. </button>
  74. </form>
  75. </li>
  76. {{ end }}
  77. <li>
  78. <button
  79. class="page-button"
  80. title="{{ t "entry.scraper.title" }}"
  81. data-fetch-content-entry="true"
  82. data-fetch-content-url="{{ route "fetchContent" "entryID" .entry.ID }}"
  83. data-label-loading="{{ t "entry.state.loading" }}"
  84. >{{ icon "scraper" }}<span class="icon-label">{{ t "entry.scraper.label" }}</span></button>
  85. </li>
  86. {{ if .entry.CommentsURL }}
  87. <li>
  88. <a href="{{ .entry.CommentsURL | safeURL }}"
  89. class="page-link"
  90. title="{{ t "entry.comments.title" }}"
  91. {{ if $.user.OpenExternalLinksInNewTab }}target="_blank"{{ end }}
  92. rel="noopener noreferrer"
  93. referrerpolicy="no-referrer"
  94. data-comments-link="true"
  95. >{{ icon "comment" }}<span class="icon-label">{{ t "entry.comments.label" }}</span></a>
  96. </li>
  97. {{ end }}
  98. </ul>
  99. </div>
  100. {{ end }}
  101. <div class="entry-meta" dir="auto">
  102. <span class="entry-website">
  103. {{ if ne .entry.Feed.Icon.IconID 0 }}
  104. <img src="{{ route "feedIcon" "externalIconID" .entry.Feed.Icon.ExternalIconID }}" width="16" height="16" loading="lazy" alt="{{ .entry.Feed.Title }}">
  105. {{ end }}
  106. {{ if .user }}
  107. <a href="{{ route "feedEntries" "feedID" .entry.Feed.ID }}">{{ .entry.Feed.Title }}</a>
  108. {{ else }}
  109. <a href="{{ .entry.Feed.SiteURL | safeURL }}">{{ .entry.Feed.Title }}</a>
  110. {{ end }}
  111. </span>
  112. {{ if .entry.Author }}
  113. <span class="entry-author">
  114. {{ if isEmail .entry.Author }}
  115. - <a href="mailto:{{ .entry.Author }}">{{ .entry.Author }}</a>
  116. {{ else }}
  117. – <em>{{ .entry.Author }}</em>
  118. {{ end }}
  119. </span>
  120. {{ end }}
  121. {{ if .user }}
  122. <span class="category">
  123. <a href="{{ route "categoryEntries" "categoryID" .entry.Feed.Category.ID }}">{{ .entry.Feed.Category.Title }}</a>
  124. </span>
  125. {{ end }}
  126. </div>
  127. {{ if .entry.Tags }}
  128. <div class="entry-tags">
  129. {{ t "entry.tags.label" }}
  130. {{ $allTags := .entry.Tags }}
  131. {{ $numTags := len $allTags }}
  132. {{ $tagsLimit := 5 }}
  133. {{ $numerOfAdditionalTags := subtract $numTags $tagsLimit }}
  134. <ul class="entry-tags-list">
  135. {{ range $i, $tagName := $allTags }}
  136. {{ if lt $i $tagsLimit }}
  137. {{ if $.user }}
  138. <li><a href="{{ route "tagEntriesAll" "tagName" (urlEncode $tagName) }}"><strong>{{ $tagName }}</strong></a></li>
  139. {{ else }}
  140. <li><strong>{{ $tagName }}</strong></li>
  141. {{ end }}
  142. {{ end }}
  143. {{ end }}
  144. </ul>
  145. {{ if gt $numTags $tagsLimit }}
  146. <details class="entry-additional-tags">
  147. <summary>
  148. {{ plural "entry.tags.more_tags_label" $numerOfAdditionalTags $numerOfAdditionalTags }}
  149. </summary>
  150. <ul class="entry-tags-list">
  151. {{ range $idx, $tagName := $allTags }}
  152. {{ if ge $idx $tagsLimit }}
  153. {{ if $.user }}
  154. <li><a href="{{ route "tagEntriesAll" "tagName" (urlEncode $tagName) }}"><strong>{{ $tagName }}</strong></a></li>
  155. {{ else }}
  156. <li><strong>{{ $tagName }}</strong></li>
  157. {{ end }}
  158. {{ end }}
  159. {{ end }}
  160. </ul>
  161. </details>
  162. {{ end }}
  163. </div>
  164. {{ end }}
  165. <div class="entry-external-link">
  166. <a
  167. href="{{ .entry.URL | safeURL }}"
  168. {{ if $.user.OpenExternalLinksInNewTab }}target="_blank"{{ end }}
  169. rel="noopener noreferrer"
  170. referrerpolicy="no-referrer"
  171. data-original-link="{{ $.user.MarkReadOnView }}">{{ .entry.URL }}</span></a>
  172. </div>
  173. <div class="entry-date">
  174. {{ if .user }}
  175. <time datetime="{{ isodate .entry.Date }}" title="{{ isodate .entry.Date }}">{{ elapsed $.user.Timezone .entry.Date }}</time>
  176. {{ else }}
  177. <time datetime="{{ isodate .entry.Date }}" title="{{ isodate .entry.Date }}">{{ elapsed "UTC" .entry.Date }}</time>
  178. {{ end }}
  179. {{ if and .user.ShowReadingTime (gt .entry.ReadingTime 0) }}
  180. &centerdot;
  181. <span class="entry-reading-time">
  182. {{ plural "entry.estimated_reading_time" .entry.ReadingTime .entry.ReadingTime }}
  183. </span>
  184. {{ end }}
  185. </div>
  186. </header>
  187. </section>
  188. {{ end }}
  189. {{ define "content"}}
  190. {{ if gt (len .entry.Content) 120 }}
  191. {{ if .user }}
  192. <div class="pagination-entry-top">
  193. {{ template "entry_pagination" . }}
  194. </div>
  195. {{ end }}
  196. {{ end }}
  197. <article class="entry-content {{ if ne $.user.GestureNav "none" }}gesture-nav-{{ $.user.GestureNav }}{{ end }}" dir="auto">
  198. {{ if not .entry.Feed.NoMediaPlayer }}
  199. {{ $mediaPlayerEnclosure := .entry.Enclosures.FindMediaPlayerEnclosure }}
  200. {{ if $mediaPlayerEnclosure }}
  201. {{ with $mediaPlayerEnclosure }}
  202. {{ if .IsAudio }}
  203. <div class="enclosure-audio" >
  204. <audio controls preload="metadata"
  205. {{ if $.user }}data-last-position="{{ .MediaProgression }}"{{ end }}
  206. {{ if $.user.MediaPlaybackRate }}data-playback-rate="{{ $.user.MediaPlaybackRate }}"{{ end }}
  207. {{ if $.user.MarkReadOnMediaPlayerCompletion }}data-mark-read-on-completion="0.9"{{ end }}
  208. {{ if $.user }}data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"{{ end }}
  209. data-enclosure-id="{{ .ID }}"
  210. >
  211. {{ if (and $.user (mustBeProxyfied "audio")) }}
  212. <source src="{{ proxyURL .URL }}" type="{{ .Html5MimeType }}">
  213. {{ else }}
  214. <source src="{{ .URL | safeURL }}" type="{{ .Html5MimeType }}">
  215. {{ end }}
  216. </audio>
  217. {{ template "enclosure_media_controls" . }}
  218. </div>
  219. {{ else if .IsVideo }}
  220. <div class="enclosure-video">
  221. <video controls preload="metadata"
  222. {{ if $.user }}data-last-position="{{ .MediaProgression }}"{{ end }}
  223. {{ if $.user.MediaPlaybackRate }}data-playback-rate="{{ $.user.MediaPlaybackRate }}"{{ end }}
  224. {{ if $.user.MarkReadOnMediaPlayerCompletion }}data-mark-read-on-completion="0.9"{{ end }}
  225. {{ if $.user }}data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"{{ end }}
  226. data-enclosure-id="{{ .ID }}"
  227. >
  228. {{ if (and $.user (mustBeProxyfied "video")) }}
  229. <source src="{{ proxyURL .URL }}" type="{{ .Html5MimeType }}">
  230. {{ else }}
  231. <source src="{{ .URL | safeURL }}" type="{{ .Html5MimeType }}">
  232. {{ end }}
  233. </video>
  234. {{ template "enclosure_media_controls" . }}
  235. </div>
  236. {{ end }}
  237. {{ end }}
  238. {{ end }}
  239. {{ end }}
  240. {{ if .user }}
  241. {{ noescape (proxyFilter .entry.Content) }}
  242. {{ else }}
  243. {{ noescape .entry.Content }}
  244. {{ end }}
  245. </article>
  246. {{ if .entry.Enclosures }}
  247. <details class="entry-enclosures">
  248. <summary>{{ t "page.entry.attachments" }} ({{ len .entry.Enclosures }})</summary>
  249. {{ range .entry.Enclosures }}
  250. {{ if ne .URL "" }}
  251. <div class="entry-enclosure">
  252. {{ if .IsImage }}
  253. <div class="enclosure-image">
  254. {{ if (and $.user (mustBeProxyfied "image")) }}
  255. <img src="{{ proxyURL .URL }}" title="{{ .URL }} ({{ .MimeType }})" loading="lazy" alt="{{ .URL }} ({{ .MimeType }})">
  256. {{ else }}
  257. <img src="{{ .URL | safeURL }}" title="{{ .URL }} ({{ .MimeType }})" loading="lazy" alt="{{ .URL }} ({{ .MimeType }})">
  258. {{ end }}
  259. </div>
  260. {{ end }}
  261. <div class="entry-enclosure-download">
  262. <a href="{{ .URL | safeURL }}" title="{{ t "action.download" }}{{ if gt .Size 0 }} - {{ formatFileSize .Size }}{{ end }}" {{ if $.user.OpenExternalLinksInNewTab }}target="_blank"{{ end }} rel="noopener noreferrer" referrerpolicy="no-referrer">{{ .URL | safeURL }}</a>
  263. <small>{{ if gt .Size 0 }} - <strong>{{ formatFileSize .Size }}</strong>{{ end }}</small>
  264. </div>
  265. </div>
  266. {{ end }}
  267. {{ end }}
  268. </details>
  269. {{ end }}
  270. {{ if .user }}
  271. <div class="pagination-entry-bottom">
  272. {{ template "entry_pagination" . }}
  273. </div>
  274. {{ end }}
  275. {{ end }}