entry.html 12 KB

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