entry.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  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 }}" target="_blank" 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.unread" }}"
  18. data-label-read="{{ t "entry.status.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.read" }}{{ else }}{{ t "entry.status.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. target="_blank">{{ 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. <a href="{{ route "shareEntry" "entryID" .entry.ID }}"
  70. class="page-link"
  71. title="{{ t "entry.share.title" }}"
  72. data-share-status="share"
  73. target="_blank">{{ icon "share" }}<span class="icon-label">{{ t "entry.share.label" }}</span></a>
  74. </li>
  75. {{ end }}
  76. <li>
  77. <a href="{{ .entry.URL | safeURL }}"
  78. class="page-link"
  79. target="_blank"
  80. rel="noopener noreferrer"
  81. referrerpolicy="no-referrer"
  82. data-original-link="{{ .user.MarkReadOnView }}">{{ icon "external-link" }}<span class="icon-label">{{ t "entry.external_link.label" }}</span></a>
  83. </li>
  84. <li>
  85. <button
  86. class="page-button"
  87. title="{{ t "entry.scraper.title" }}"
  88. data-fetch-content-entry="true"
  89. data-fetch-content-url="{{ route "fetchContent" "entryID" .entry.ID }}"
  90. data-label-loading="{{ t "entry.state.loading" }}"
  91. >{{ icon "scraper" }}<span class="icon-label">{{ t "entry.scraper.label" }}</span></button>
  92. </li>
  93. {{ if .entry.CommentsURL }}
  94. <li>
  95. <a href="{{ .entry.CommentsURL | safeURL }}"
  96. class="page-link"
  97. title="{{ t "entry.comments.title" }}"
  98. target="_blank"
  99. rel="noopener noreferrer"
  100. referrerpolicy="no-referrer"
  101. data-comments-link="true"
  102. >{{ icon "comment" }}<span class="icon-label">{{ t "entry.comments.label" }}</span></a>
  103. </li>
  104. {{ end }}
  105. </ul>
  106. </div>
  107. {{ end }}
  108. <div class="entry-meta" dir="auto">
  109. <span class="entry-website">
  110. {{ if and .user (ne .entry.Feed.Icon.IconID 0) }}
  111. <img src="{{ route "icon" "iconID" .entry.Feed.Icon.IconID }}" width="16" height="16" loading="lazy" alt="{{ .entry.Feed.Title }}">
  112. {{ end }}
  113. {{ if .user }}
  114. <a href="{{ route "feedEntries" "feedID" .entry.Feed.ID }}">{{ .entry.Feed.Title }}</a>
  115. {{ else }}
  116. <a href="{{ .entry.Feed.SiteURL | safeURL }}">{{ .entry.Feed.Title }}</a>
  117. {{ end }}
  118. </span>
  119. {{ if .entry.Author }}
  120. <span class="entry-author">
  121. {{ if isEmail .entry.Author }}
  122. - <a href="mailto:{{ .entry.Author }}">{{ .entry.Author }}</a>
  123. {{ else }}
  124. – <em>{{ .entry.Author }}</em>
  125. {{ end }}
  126. </span>
  127. {{ end }}
  128. {{ if .user }}
  129. <span class="category">
  130. <a href="{{ route "categoryEntries" "categoryID" .entry.Feed.Category.ID }}">{{ .entry.Feed.Category.Title }}</a>
  131. </span>
  132. {{ end }}
  133. </div>
  134. {{ if .entry.Tags }}
  135. <div class="entry-tags">
  136. {{ t "entry.tags.label" }}
  137. {{range $i, $e := .entry.Tags}}{{if $i}}, {{end}}<a href="{{ route "tagEntriesAll" "tagName" (urlEncode $e) }}"><strong>{{ $e }}</strong></a>{{end}}
  138. </div>
  139. {{ end }}
  140. <div class="entry-date">
  141. {{ if .user }}
  142. <time datetime="{{ isodate .entry.Date }}" title="{{ isodate .entry.Date }}">{{ elapsed $.user.Timezone .entry.Date }}</time>
  143. {{ else }}
  144. <time datetime="{{ isodate .entry.Date }}" title="{{ isodate .entry.Date }}">{{ elapsed "UTC" .entry.Date }}</time>
  145. {{ end }}
  146. {{ if and .user.ShowReadingTime (gt .entry.ReadingTime 0) }}
  147. &centerdot;
  148. <span class="entry-reading-time">
  149. {{ plural "entry.estimated_reading_time" .entry.ReadingTime .entry.ReadingTime }}
  150. </span>
  151. {{ end }}
  152. </div>
  153. </header>
  154. </section>
  155. {{ end }}
  156. {{ define "content"}}
  157. {{ if gt (len .entry.Content) 120 }}
  158. {{ if .user }}
  159. <div class="pagination-entry-top">
  160. {{ template "entry_pagination" . }}
  161. </div>
  162. {{ end }}
  163. {{ end }}
  164. <article class="entry-content gesture-nav-{{ $.user.GestureNav }}" dir="auto">
  165. {{ if (and .entry.Enclosures (not .entry.Feed.NoMediaPlayer)) }}
  166. {{ range .entry.Enclosures }}
  167. {{ if ne .URL "" }}
  168. {{ if hasPrefix .MimeType "audio/" }}
  169. <div class="enclosure-audio" >
  170. <audio controls preload="metadata"
  171. data-last-position="{{ .MediaProgression }}"
  172. {{ if $.user.MediaPlaybackRate }}data-playback-rate="{{ $.user.MediaPlaybackRate }}"{{ end }}
  173. data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"
  174. >
  175. {{ if (and $.user (mustBeProxyfied "audio")) }}
  176. <source src="{{ proxyURL .URL }}" type="{{ .Html5MimeType }}">
  177. {{ else }}
  178. <source src="{{ .URL | safeURL }}" type="{{ .Html5MimeType }}">
  179. {{ end }}
  180. </audio>
  181. </div>
  182. {{ else if hasPrefix .MimeType "video/" }}
  183. <div class="enclosure-video">
  184. <video controls preload="metadata"
  185. data-last-position="{{ .MediaProgression }}"
  186. {{ if $.user.MediaPlaybackRate }}data-playback-rate="{{ $.user.MediaPlaybackRate }}"{{ end }}
  187. data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"
  188. >
  189. {{ if (and $.user (mustBeProxyfied "video")) }}
  190. <source src="{{ proxyURL .URL }}" type="{{ .Html5MimeType }}">
  191. {{ else }}
  192. <source src="{{ .URL | safeURL }}" type="{{ .Html5MimeType }}">
  193. {{ end }}
  194. </video>
  195. </div>
  196. {{ end }}
  197. {{ end }}
  198. {{ end }}
  199. {{end}}
  200. {{ if .user }}
  201. {{ noescape (proxyFilter .entry.Content) }}
  202. {{ else }}
  203. {{ noescape .entry.Content }}
  204. {{ end }}
  205. </article>
  206. {{ if .entry.Enclosures }}
  207. <details class="entry-enclosures">
  208. <summary>{{ t "page.entry.attachments" }} ({{ len .entry.Enclosures }})</summary>
  209. {{ range .entry.Enclosures }}
  210. {{ if ne .URL "" }}
  211. <div class="entry-enclosure">
  212. {{ if hasPrefix .MimeType "audio/" }}
  213. <div class="enclosure-audio">
  214. <audio controls preload="metadata"
  215. data-last-position="{{ .MediaProgression }}"
  216. {{ if $.user.MediaPlaybackRate }}data-playback-rate="{{ $.user.MediaPlaybackRate }}"{{ end }}
  217. data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"
  218. >
  219. {{ if (and $.user (mustBeProxyfied "audio")) }}
  220. <source src="{{ proxyURL .URL }}" type="{{ .Html5MimeType }}">
  221. {{ else }}
  222. <source src="{{ .URL | safeURL }}" type="{{ .Html5MimeType }}">
  223. {{ end }}
  224. </audio>
  225. </div>
  226. {{ else if hasPrefix .MimeType "video/" }}
  227. <div class="enclosure-video">
  228. <video controls preload="metadata"
  229. data-last-position="{{ .MediaProgression }}"
  230. {{ if $.user.MediaPlaybackRate }}data-playback-rate="{{ $.user.MediaPlaybackRate }}"{{ end }}
  231. data-save-url="{{ route "saveEnclosureProgression" "enclosureID" .ID }}"
  232. >
  233. {{ if (and $.user (mustBeProxyfied "video")) }}
  234. <source src="{{ proxyURL .URL }}" type="{{ .Html5MimeType }}">
  235. {{ else }}
  236. <source src="{{ .URL | safeURL }}" type="{{ .Html5MimeType }}">
  237. {{ end }}
  238. </video>
  239. </div>
  240. {{ else if hasPrefix .MimeType "image/" }}
  241. <div class="enclosure-image">
  242. {{ if (and $.user (mustBeProxyfied "image")) }}
  243. <img src="{{ proxyURL .URL }}" title="{{ .URL }} ({{ .MimeType }})" loading="lazy" alt="{{ .URL }} ({{ .MimeType }})">
  244. {{ else }}
  245. <img src="{{ .URL | safeURL }}" title="{{ .URL }} ({{ .MimeType }})" loading="lazy" alt="{{ .URL }} ({{ .MimeType }})">
  246. {{ end }}
  247. </div>
  248. {{ end }}
  249. <div class="entry-enclosure-download">
  250. <a href="{{ .URL | safeURL }}" title="{{ t "action.download" }}{{ if gt .Size 0 }} - {{ formatFileSize .Size }}{{ end }} ({{ .MimeType }})" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer">{{ .URL | safeURL }}</a>
  251. <small>{{ if gt .Size 0 }} - <strong>{{ formatFileSize .Size }}</strong>{{ end }}</small>
  252. </div>
  253. </div>
  254. {{ end }}
  255. {{ end }}
  256. </details>
  257. {{ end }}
  258. {{ if .user }}
  259. <div class="pagination-entry-bottom">
  260. {{ template "entry_pagination" . }}
  261. </div>
  262. {{ end }}
  263. {{ end }}