☰

Mastodon status2html

Save status to a html file.

  1. // ==UserScript==
  2. // @name        Mastodon status2html
  3. // @namespace   https://blog.bgme.me
  4. // @match       https://*/web/*
  5. // @match       https://bgme.me/*
  6. // @match       https://bgme.bid/*
  7. // @match       https://c.bgme.bid/*
  8. // @grant       none
  9. // @run-at      document-end
  10. // @version     1.0.2
  11. // @author      bgme
  12. // @description Save status to a html file.
  13. // @supportURL  https://github.com/yingziwu/Greasemonkey/issues
  14. // @license     AGPL-3.0-or-later
  15. // ==/UserScript==
  16.  
  17.  
  18. /* eslint-disable @typescript-eslint/explicit-member-accessibility */
  19. class Status {
  20.     token = JSON.parse(document.querySelector('#initial-state').text).meta.access_token;
  21.  
  22.     constructor(domain, statusID, sortbytime = false) {
  23.         this.API = {
  24.             'status': `https://${domain}/api/v1/statuses/${statusID}`,
  25.             'context': `https://${domain}/api/v1/statuses/${statusID}/context`
  26.         };
  27.         this.sortbytime = sortbytime;
  28.     }
  29.  
  30.     async init() {
  31.         const status = await this.request(this.API.status);
  32.         const context = await this.request(this.API.context);
  33.  
  34.         const statusList = [];
  35.         const statusMap = new Map();
  36.         const statusIndents = new Map();
  37.  
  38.         if (context.ancestors.length) {
  39.             for (const obj of context.ancestors) {
  40.                 spush(obj)
  41.             }
  42.         }
  43.         spush(status);
  44.         if (context.descendants.length) {
  45.             for (const obj of context.descendants) {
  46.                 spush(obj);
  47.             }
  48.         }
  49.         if (this.sortbytime) {
  50.             statusList.sort((a, b) => ((new Date(a.created_at)) - (new Date(b.created_at))));
  51.         }
  52.         this.statusList = statusList;
  53.  
  54.         statusList.forEach(obj => {
  55.             let k = obj.id;
  56.             statusIndents.set(k, getIndent(k));
  57.         })
  58.         this.statusIndents = statusIndents;
  59.  
  60.         function spush(obj) {
  61.             statusList.push(obj);
  62.             if (obj.in_reply_to_id) {
  63.                 statusMap.set(obj.id, obj.in_reply_to_id);
  64.             }
  65.         }
  66.         function getIndent(id) {
  67.             if (statusMap.get(id)) {
  68.                 return 1 + getIndent(statusMap.get(id))
  69.             } else {
  70.                 return 0
  71.             }
  72.         }
  73.     }
  74.  
  75.     async request(url) {
  76.         console.log(`正在请求：${url}`);
  77.         const resp = await fetch(url, {
  78.             headers: {
  79.                 Authorization: `Bearer ${this.token}`,
  80.             },
  81.             method: 'GET',
  82.         });
  83.         return await resp.json();
  84.     }
  85.  
  86.     html(anonymity_list = []) {
  87.         const HTMLTemplate = `<html>
  88.         <head>
  89.             <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  90.             <meta name="viewport" content="width=device-width, initial-scale=1.0">
  91.             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.css" integrity="sha256-2+dssJtgusl/DZZZ8gF9ayAgRzcewXQsaP86E4Ul+ss=" crossorigin="anonymous">
  92.             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fancybox@3.0.1/dist/css/jquery.fancybox.css" integrity="sha256-iK+zjGHeeTQux1laFiGc4EZWPacH5acc6CnZBGji1ns=" crossorigin="anonymous">
  93.             <style>
  94.                 .ui.feed > .event > .content .user > img {
  95.                     max-height: 1.5em;
  96.                     padding-left: 0.2em;
  97.                 }
  98.                 .emojione {
  99.                     max-height: 1.5em;
  100.                 }
  101.                 .ui.feed > .event > .content .meta {
  102.                     padding-left: 0.5em;
  103.                 }
  104.                 .ui.feed > .event > .content .meta > button {
  105.                     position: relative;
  106.                     top: -1.1em;
  107.                 }
  108.                 .ui.feed > .event.hidden {
  109.                     display: none;
  110.                 }
  111.                 body {
  112.                     overflow-x: scroll;
  113.                 }
  114.             </style>
  115.         </header>
  116.         <body>
  117.             <main id="main">
  118.                 <div id="main-content" class="ui text container">
  119.                     <div class="ui large feed" id="main-feed"></div>
  120.                 </div>
  121.             </main>
  122.  
  123.             <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  124.             <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.js" integrity="sha256-yibQd6vg4YwSTFUcgd+MwPALTUAVCKTjh4jMON4j+Gk=" crossorigin="anonymous"></script>
  125.             <script src="https://cdn.jsdelivr.net/npm/fancybox@3.0.1/dist/js/jquery.fancybox.pack.js" integrity="sha256-VRL0AMrD+7H9+7Apie0Jj4iir1puS6PYigObxCHqf/4=" crossorigin="anonymous"></script>    <script>
  126.                 $(document).ready(function() {
  127.                     $('.image-reference').fancybox();
  128.                     document.querySelectorAll('.ui.feed > .event > .content .meta > button.jump')
  129.                         .forEach(button => {
  130.                             button.addEventListener('click', function() {
  131.                                     const pid = this.parentElement.parentElement.parentElement.getAttribute('pid');
  132.                                     document.location.hash = pid;
  133.                                 }
  134.                             );
  135.                         }
  136.                     );
  137.                     document.querySelectorAll('.ui.feed > .event > .content .meta > button.stream')
  138.                         .forEach(button => {
  139.                             button.addEventListener('click', function() {
  140.                                     const event = this.parentElement.parentElement.parentElement;
  141.                                     const id = event.id;
  142.  
  143.                                     document.querySelectorAll('.ui.feed > .event').forEach(e => e.classList.add('hidden'));
  144.                                     displayAncestor(id);
  145.                                     displayDescendant(id);
  146.  
  147.                                     document.location.hash = id;
  148.  
  149.                                     function displayAncestor(id) {
  150.                                         const event = document.getElementById(id);
  151.                                         event.classList.remove('hidden');
  152.                                           
  153.                                         if (event.getAttribute('pid')) {
  154.                                             return displayAncestor(event.getAttribute('pid'));
  155.                                         } else {
  156.                                             return
  157.                                         }
  158.                                     }
  159.                                     function displayDescendant(id) {
  160.                                         const event = document.getElementById(id);
  161.                                         event.classList.remove('hidden');
  162.                                         
  163.                                         const s = '.event[pid="' + id + '"]'
  164.                                         const descendants = document.querySelectorAll(s);
  165.                                         if (descendants.length) {
  166.                                             return descendants.forEach(event => displayDescendant(event.id));
  167.                                         } else {
  168.                                             return
  169.                                         }
  170.                                     }
  171.                                 }
  172.                             );
  173.                         }
  174.                     );
  175.                     document.querySelectorAll('.ui.feed > .event > .content .meta > button.show-all')
  176.                         .forEach(button => {
  177.                             button.addEventListener('click', function() {
  178.                                     const event = this.parentElement.parentElement.parentElement;
  179.                                     const id = event.id;
  180.  
  181.                                     document.querySelectorAll('.ui.feed > .event.hidden').forEach(e => e.classList.remove('hidden'));
  182.  
  183.                                     document.location.hash = id;
  184.                                 }
  185.                             );
  186.                         }
  187.                     );
  188.                 });
  189.             </script>
  190.         </body>
  191.         </html>`;
  192.         const HTML = new DOMParser().parseFromString(HTMLTemplate, "text/html");
  193.         const feeds = HTML.getElementById('main-feed');
  194.  
  195.         for (const obj of this.statusList) {
  196.             let feed;
  197.             if (anonymity_list.includes(obj.account.acct)) {
  198.                 feed = this.feed(obj, true);
  199.             } else {
  200.                 feed = this.feed(obj);
  201.             }
  202.             feeds.append(feed);
  203.         }
  204.  
  205.         return HTML.documentElement.outerHTML
  206.     }
  207.  
  208.     feed(obj, anonymity = false) {
  209.         let feedHtml;
  210.         let content = obj.content;
  211.         if (obj.emojis) {
  212.             for (const emoji of obj.emojis) {
  213.                 content = content.replace(`:${emoji.shortcode}:`, `<img src="${emoji.url}" alt=":${emoji.shortcode}:" class="emojione">`);
  214.             }
  215.         }
  216.  
  217.         let displayName;
  218.         if (obj.account.display_name) {
  219.             displayName = obj.account.display_name;
  220.             for (const emoji of obj.account.emojis) {
  221.                 displayName = displayName.replace(`:${emoji.shortcode}:`, `<img src="${emoji.url}" alt=":${emoji.shortcode}:" class="emojione">`);
  222.             }
  223.         } else {
  224.             displayName = obj.account.username;
  225.         }
  226.  
  227.         if (anonymity) {
  228.             feedHtml = `<div class="event">
  229.             <div class="label">
  230.                 <img src="https://bgme.me/avatars/original/missing.png">
  231.             </div>
  232.             <div class="content">
  233.                 <div class="user">Anonymity</div>
  234.                 <div class="content">${content}</div>
  235.                 <span class="date">${obj.created_at.replace('T', ' ').replace(/\.\d+Z$/, ' UTC')}</span>
  236.             </div>
  237.             </div>`
  238.         } else {
  239.             feedHtml = `<div class="event">
  240.             <div class="label">
  241.                 <a href="${obj.account.url}" rel="noopener noreferrer" target="_blank">
  242.                     <img src="${obj.account.avatar}">
  243.                 </a>
  244.             </div>
  245.             <div class="content">
  246.                 <div class="user">${(displayName)}</div>
  247.                 <div class="content">${content}</div>
  248.                 <a href="${obj.url}" rel="noopener noreferrer" target="_blank" class="date">${obj.created_at.replace('T', ' ').replace(/\.\d+Z$/, ' UTC')}</a>
  249.             </div>
  250.             </div>`
  251.         }
  252.         const feed = (new DOMParser().parseFromString(feedHtml, "text/html")).documentElement.querySelector('.event');
  253.  
  254.         feed.id = obj.id;
  255.         feed.classList.add(`child-${this.statusIndents.get(obj.id)}`);
  256.         if (this.statusIndents.get(obj.id) && !this.sortbytime) {
  257.             feed.style = `margin-left: ${this.statusIndents.get(obj.id)}em;`
  258.         }
  259.         if (obj.in_reply_to_id) {
  260.             feed.setAttribute('pid', obj.in_reply_to_id);
  261.         }
  262.  
  263.         if (obj.media_attachments.length) {
  264.             const images = document.createElement('div');
  265.             images.className = 'extra images';
  266.             for (const media_attachment of obj.media_attachments) {
  267.                 const img = document.createElement('img');
  268.                 img.src = media_attachment.preview_url;
  269.                 if (media_attachment.description) {
  270.                     img.alt = media_attachment.description;
  271.                 }
  272.  
  273.                 const a = document.createElement('a');
  274.                 a.href = media_attachment.url;
  275.                 a.className = 'image-reference';
  276.  
  277.                 a.append(img);
  278.                 images.append(a);
  279.                 feed.querySelector('.date').before(images);
  280.             }
  281.         }
  282.  
  283.         const button0 = genButton('jump', 'arrow up');
  284.         const button1 = genButton('stream', 'stream');
  285.         const button2 = genButton('show-all', 'globe');
  286.  
  287.         const meta = document.createElement('div');
  288.         meta.className = 'meta';
  289.         meta.textContent = `层级${this.statusIndents.get(obj.id)}`;
  290.         if (this.statusIndents.get(obj.id)) {
  291.             meta.append(button0);
  292.             meta.append(button1);
  293.         }
  294.         meta.append(button2);
  295.         feed.querySelector('.date').after(meta);
  296.  
  297.         return feed
  298.  
  299.         function genButton(className, iconName) {
  300.             const button = document.createElement('button');
  301.             button.className = `mini ui icon tertiary button ${className}`;
  302.             const icon = document.createElement('i');
  303.             icon.className = `${iconName} icon`;
  304.             button.append(icon);
  305.             return button
  306.         }
  307.     }
  308. }
  309.  
  310. function saveFile(data, filename, type) {
  311.     const file = new Blob([data], { type: type });
  312.     const a = document.createElement('a');
  313.     const url = URL.createObjectURL(file);
  314.     a.href = url;
  315.     a.download = filename;
  316.     document.body.appendChild(a);
  317.     a.click();
  318.     setTimeout(function () {
  319.         document.body.removeChild(a);
  320.         window.URL.revokeObjectURL(url);
  321.     }, 0);
  322. }
  323.  
  324. function chromeClickChecker(event) {
  325.     return (
  326.         event.target.tagName.toLowerCase() === 'i' &&
  327.         event.target.classList.contains('fa-ellipsis-h') &&
  328.         document.querySelector('div.dropdown-menu') === null
  329.     );
  330. }
  331.  
  332. function firefoxClickChecker(event) {
  333.     return (
  334.         event.target.tagName.toLowerCase() === 'button' &&
  335.         event.target.classList.contains('icon-button') &&
  336.         document.querySelector('div.dropdown-menu') === null
  337.     );
  338. }
  339.  
  340. function activate() {
  341.     document.querySelector('body').addEventListener('click', function (event) {
  342.         if (chromeClickChecker(event) || firefoxClickChecker(event)) {
  343.             // Get the status for this event
  344.             let status = event.target.parentNode.parentNode.parentNode.parentNode.parentNode;
  345.             if (status.className.match('detailed-status__wrapper')) {
  346.                 addLink(status);
  347.             }
  348.         };
  349.     }, false);
  350. }
  351.  
  352. function addLink(status) {
  353.     setTimeout(function () {
  354.         const url = status.querySelector('.detailed-status__link').getAttribute('href');
  355.         const id = url.match(/\/(\d+)\//)[1];
  356.  
  357.         const dropdown = document.querySelector('div.dropdown-menu ul');
  358.         const separator = dropdown.querySelector('li.dropdown-menu__separator');
  359.  
  360.         const listItem = document.createElement('li');
  361.         listItem.classList.add('dropdown-menu__item');
  362.         listItem.classList.add('mastodon__lottery');
  363.  
  364.         const link = document.createElement('a');
  365.         link.setAttribute('href', '#');
  366.         link.setAttribute('target', '_blank');
  367.         link.textContent = 'Save as HTML';
  368.  
  369.         link.addEventListener('click', function (e) {
  370.             e.preventDefault();
  371.             if (!window.Running) {
  372.                 window.Running = true;
  373.                 link.textContent = 'Saving, please wait……';
  374.                 run(id)
  375.                     .then(() => { window.Running = false; })
  376.                     .catch(e => {
  377.                         window.Running = false;
  378.                         throw e;
  379.                     });
  380.             }
  381.         }, false);
  382.  
  383.         listItem.appendChild(link);
  384.         dropdown.insertBefore(listItem, separator);
  385.     }, 100);
  386. }
  387.  
  388. function run(id) {
  389.     const domain = document.location.host;
  390.  
  391.     const s1 = new Status(domain, id, false);
  392.     s1.init().then(() => {
  393.         const html = s1.html();
  394.         saveFile(html, `${id}.html`, 'text/plain; charset=utf-8');
  395.     });
  396.  
  397.     const s2 = new Status(domain, id, true);
  398.     s2.init().then(() => {
  399.         const html = s2.html();
  400.         saveFile(html, `${id}-time.html`, 'text/plain; charset=utf-8');
  401.     });
  402. }
  403.  
  404.  
  405. window.addEventListener('load', function () {
  406.     activate();
  407. }, false)