browndust2.com news viewer

custom news viewer for sucking browndust2.com

目前為 2024-10-18 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name browndust2.com news viewer
  3. // @namespace Violentmonkey Scripts
  4. // @match https://www.browndust2.com/robots.txt
  5. // @grant none
  6. // @version 1.4.4
  7. // @author Rplus
  8. // @description custom news viewer for sucking browndust2.com
  9. // @require https://unpkg.com/localforage@1.10.0/dist/localforage.min.js#sha384-MTDrIlFOzEqpmOxY6UIA/1Zkh0a64UlmJ6R0UrZXqXCPx99siPGi8EmtQjIeCcTH
  10. // @@run-at document-end
  11. // @license WTFPL
  12. // ==/UserScript==
  13.  
  14. document.head.insertAdjacentHTML(
  15. 'beforeend',
  16. `<link rel="icon" type="image/png" sizes="16x16" href="/img/seo/favicon.png">`
  17. );
  18.  
  19. document.body.innerHTML = `
  20. <form id="filterform">
  21. Filter
  22. <input type="search" name="q" tabindex="1" id="searchinput">
  23. <style id="filter_style"></style>
  24. </form>
  25.  
  26. <div class="list" id="list" data-query=""></div>
  27. <hr>
  28. <input type="reset" value="Delete all cached data" id="delete_btn">
  29.  
  30. <label class="showall-label">
  31. <input type="checkbox" class="showall" >
  32. show all list
  33. </label>
  34. <style>
  35. *, *::before, *::after {
  36. box-sizing: border-box;
  37. }
  38. body {
  39. max-width: 1200px;
  40. margin: 0 auto;
  41. background-color: #e5cc9c;
  42. color: #111;
  43. }
  44.  
  45. img {
  46. max-width: 100%;
  47. }
  48.  
  49. h2 {
  50. display: inline;
  51. font-size: inherit;
  52. margin: 0;
  53.  
  54. & span {
  55. font-weight: 400;
  56. font-size: smaller;
  57. vertical-align: middle;
  58. opacity: .5;
  59. }
  60. }
  61. @media (max-width:750px) {
  62. details summary {
  63. text-indent: -1.1em;
  64. padding-left: 1.5rem;
  65. padding: .8em .5em .5em 1.5em;
  66.  
  67. &::marker {
  68. _font-size: smaller;
  69. }
  70. }
  71. h2 {
  72. position: relative;
  73. }
  74. h2 span {
  75. position: absolute;
  76. left: 1.2rem;
  77. bottom: 100%;
  78. font-size: 11px;
  79. opacity: .4;
  80. }
  81. }
  82.  
  83. .ctx {
  84. white-space: pre-wrap;
  85. background-color: #fff9;
  86. padding: 1em;
  87.  
  88. & [style*="background-color"],
  89. & [style*="font-size"],
  90. & [style*="font-family"] {
  91. font-size: inherit !important;
  92. font-family: inherit !important;
  93. background-color: unset !important;
  94. }
  95. }
  96.  
  97. .list {
  98. list-style: none;
  99. margin: 2em 0;
  100. padding-left: 50px;
  101. }
  102.  
  103. summary {
  104. position: relative;
  105. top: 0;
  106. background-color: #dfb991;
  107. min-height: 50px;
  108. cursor: pointer;
  109. padding: .5em;
  110. place-content: center;
  111.  
  112. &::before {
  113. content: '';
  114. position: absolute;
  115. inset: 0;
  116. background-color: #fff1;
  117. pointer-events: none;
  118. opacity: 0;
  119. transition: opacity .1s;
  120. }
  121.  
  122. :target & {
  123. box-shadow: inset 0 -.5em #0003;
  124. }
  125.  
  126. &:hover::before {
  127. opacity: 1;
  128. }
  129.  
  130. & > img {
  131. position: absolute;
  132. top: 0;
  133. right: 100%;
  134. width: 50px;
  135. height: 50px;
  136. }
  137. }
  138.  
  139. summary a {
  140. color: inherit;
  141. text-decoration: none;
  142. pointer-events: none;
  143.  
  144. }
  145. details:not([open]) summary a:visited {
  146. color: #633;
  147. }
  148.  
  149. details {
  150. margin-block-start: 1em;
  151.  
  152. &[open] summary {
  153. position: sticky;
  154. background-color: #ceac71;
  155. box-shadow: inset 0 -.5em #0003;
  156. }
  157. }
  158.  
  159. #filterform {
  160. position: fixed;
  161. top: 0;
  162. left: 0;
  163. transition: opacity .2s;
  164. opacity: .1;
  165.  
  166. &:hover,
  167. &:focus-within {
  168. opacity: .75;
  169. }
  170. }
  171.  
  172. body:not(:has(.showall:checked))
  173. .list[data-query=""]
  174. details:nth-child(n + 20) {
  175. display: none;
  176. }
  177.  
  178. .showall-label {
  179. position: sticky;
  180. bottom: 0;
  181. display: block;
  182. width: fit-content;
  183. margin: 0 1em 0 auto;
  184. padding: .25em 1em .25em .5em;
  185. background-color: #0002;
  186. border-radius: 1em 1em 0 0;
  187. cursor: pointer;
  188. }
  189. </style>
  190. `;
  191.  
  192. let data = [];
  193. let news_map = new Map();
  194. let query_arr = [];
  195. let id_arr = [];
  196.  
  197. function render(id) {
  198. list.innerHTML = data.map(i => {
  199. let info = i.attributes;
  200. // let ctx = info.NewContent || info.content;
  201. let time = format_time(info.publishedAt);
  202. return `
  203. <details name="item" data-id="${i.id}" id="news-${i.id}">
  204. <summary>
  205. <img src="https://www.browndust2.com/img/newsDetail/tag-${info.tag}.png" width="36" height="36" alt="${info.tag}" title="#${info.tag}">
  206. <h2>
  207. <span>
  208. #${i.id} -
  209. <time datetime="${info.publishedAt}" title="${info.publishedAt}">${time}</time>
  210. </span>
  211. <a href="./?id=${i.id}#news-${i.id}" tabindex="-1">${info.subject}</a>
  212. </h2>
  213. </summary>
  214. <article class="ctx"></article>
  215. </details>
  216. `;
  217. }).join('');
  218.  
  219. list.querySelectorAll('details').forEach(d => {
  220. d.addEventListener('toggle', show);
  221. });
  222.  
  223. list.addEventListener('click', (e) => {
  224. if (e.target.tagName === 'A') {
  225. e.preventDefault();
  226. console.log(123, e.target, e.target.href);
  227. history.pushState('', null, e.target.href);
  228. }
  229. });
  230.  
  231. if (id) {
  232. auto_show(id);
  233. }
  234. }
  235.  
  236. function auto_show(id) {
  237. let target = list.querySelector(`details[data-id="${id}"]`);
  238. if (target) {
  239. target.open = true;
  240. show({ target, });
  241. }
  242. }
  243.  
  244. function show({ target, }) {
  245. if (!target.open) {
  246. target.scrollIntoView({behavior:'smooth', block: 'nearest'});
  247. return;
  248. }
  249.  
  250. let id = +target.dataset.id;
  251. let ctx = target.querySelector(':scope > article.ctx');
  252. // target.scrollIntoView({behavior:'smooth', block: 'nearest'});
  253. let info = news_map.get(id)?.attributes;
  254. location.hash = `news-${id}`;
  255. history.pushState(`news-${id}`, null, `./?id=${id}#news-${id}`);
  256. document.title = `#${id} - ${info.subject}`
  257.  
  258. if (!ctx || ctx.dataset?.init === '1') {
  259. return;
  260. }
  261.  
  262. ctx.dataset.init = '1';
  263.  
  264. let ori_link = `<a href="https://www.browndust2.com/zh-tw/news/view?id=${id}" target="_bd2news" title="official link">#</a>`;
  265. if (!info) {
  266. ctx.innerHTML = ori_link;
  267. return;
  268. }
  269.  
  270. let content = (info.content || info.NewContent);
  271. content = content.replace(/\<img\s/g, '<img loading="lazy" ');
  272. ctx.innerHTML = content + ori_link;
  273. }
  274.  
  275. function format_time(time) {
  276. let _time = time ? new Date(time) : new Date();
  277. return _time.toLocaleString('zh-TW', {
  278. weekday: 'narrow',
  279. year: 'numeric',
  280. month: '2-digit',
  281. day: '2-digit',
  282. });
  283. }
  284.  
  285. function query_kwd() {
  286. // console.time('query');
  287. let value = searchinput.value?.trim()?.toLowerCase();
  288. // console.log('query', value);
  289. if (!value) {
  290. filter_style.textContent = '';
  291. list.dataset.query = '';
  292. return;
  293. }
  294.  
  295. let matched_ids = query_arr.map((i, index) => {
  296. let regex = new RegExp(value);
  297. return regex.test(i) ? id_arr[index] : null;
  298. })
  299. .filter(Boolean);
  300.  
  301. if (matched_ids.length) {
  302. list.dataset.query = value;
  303. } else {
  304. list.dataset.query = '';
  305. }
  306.  
  307. let selectors = matched_ids.map(i => `details[data-id="${i}"]`).join();
  308. filter_style.textContent = `
  309. details {display:none;}
  310. ${selectors} { display: block; }
  311. `;
  312. // console.timeEnd('query');
  313. }
  314.  
  315. function debounce(func, wait, immediate) {
  316. var timeout;
  317. return function() {
  318. var context = this, args = arguments;
  319. clearTimeout(timeout);
  320. if (immediate && !timeout) func.apply(context, args);
  321. timeout = setTimeout(function() {
  322. timeout = null;
  323. if (!immediate) func.apply(context, args);
  324. }, wait);
  325. };
  326. }
  327.  
  328. let data_url = `https://www.browndust2.com/api/newsData_tw.json?${+new Date()}`;
  329. if (window.test_data_url) {
  330. data_url = window.test_data_url;
  331. }
  332.  
  333. async function get_data() {
  334. try {
  335. let is_newer = await check_newer_data();
  336. console.log({is_newer});
  337. if (!is_newer) {
  338. return await localforage.getItem('data');
  339. }
  340.  
  341. let response = await fetch(data_url);
  342. if (!response.ok) {
  343. throw new Error('fetch error', response);
  344. }
  345. let json = await response.json();
  346. let _data = json.data.reverse();
  347. localforage.setItem('etag', response.headers.get('etag'));
  348. localforage.setItem('data', _data);
  349. return _data;
  350. } catch(e) {
  351. throw new Error(e);
  352. }
  353. }
  354.  
  355. async function check_newer_data() {
  356. // data_url = 'https://www.browndust2.com/api/newsData_tw.json';
  357. let response = await fetch(data_url, { method: 'HEAD', });
  358. let new_etag = response.headers.get('etag');
  359.  
  360. let old_etag = await localforage.getItem('etag') || '';
  361. console.log({new_etag, old_etag});
  362. return old_etag !== new_etag;
  363. }
  364.  
  365. async function init() {
  366. list.innerHTML = 'loading...';
  367. data = await get_data();
  368. console.log({data});
  369. data.forEach(i => {
  370. let info = i.attributes;
  371. let string = [
  372. i.id,
  373. info.content,
  374. info.NewContent,
  375. `#${info.tag}`,
  376. info.subject,
  377. ].join().toLowerCase();
  378.  
  379. id_arr.push(i.id);
  380. news_map.set(i.id, i);
  381. query_arr.push(string);
  382. });
  383.  
  384. let id = new URL(location.href)?.searchParams?.get('id') || data[data.length - 1].id;
  385. render(id);
  386. }
  387.  
  388. init();
  389.  
  390. filterform.addEventListener('submit', e => e.preventDefault());
  391. searchinput.addEventListener('input', debounce(query_kwd, 300));
  392. delete_btn.addEventListener('click', () => {
  393. localforage.clear();
  394. location.reload();
  395. });