Home

Awesome

Mastodon Archive Viewer - Zero’s fork

An offline web page to view a Mastodon archive. It gives a powerful data table to tell you what the composition of all your toots is. There is also a line graph telling you the tooting trend. You can select a period of time to view.

Screenshot

The branch “exhibition” is for my season’s toots exhibition.

Features (and changelog):

Usage:

Simply put, just request your Mastodon archive and download it, save this repo, open the archive_page.html web page in your browser and choose your archive, there you go.

Linux:

First go to your Mastodon instance, request an archive of your toots and uploaded media (Settings - Import and export - Data export), and download your archive. Then:

$ git clone https://github.com/zero-mstd/mav-z.git
$ cd mav-z
$ firefox archive_page.html

Windows or macOS:

  1. First go to your Mastodon instance, request an archive of your toots and uploaded media (Settings - Import and export - Data export), and download your archive;
  2. Open this link https://github.com/zero-mstd/mav-z/tree/master in a browser;
  3. Hit the green button Code;
  4. Choose Download ZIP;
  5. Unzip what you downloaded (should be mav-z-master.zip) and enter this folder;
  6. Open the archive_page.html in your browser;
  7. Follow the instructions, choose and open the entire .tar.gz archive file you got from the 1st step.

Troubleshooting:

If your archive file is too big:

This web page tool can automatically decompress the archive-xxx.tar.gz file for you, and it will store all the decompressed files in memory (RAM) temporarily. For reference, my archive file is about 200 MB and it will take 5 seconds to finish all the works.

If your archive file is too big (I don't know, maybe > 1000 MB), your browser may get stuck. In this case, using the manual mode is a good idea, i.e., unzipping the archive file manually by yourself. In order to display media files correctly, you should copy and paste your files so that your directory tree is like:

./
├── actor.json
├── archive_page.html
├── assets
│   ├── avatar.png
│   ├── chart.js
│   ├── favicon.ico
│   ├── header.jpg
│   ├── main.js
│   ├── pako.min.js
│   ├── style.css
│   ├── translator.js
│   └── untar.js
├── avatar.{jpg|png|…}
├── bookmarks.json
├── header.{jpg|png|…}
├── likes.json
├── media_attachments
│   └── files
│       ├── ……
│       └── ……
└── outbox.json

Now you can open the archive_page.html in your browser, choose manually in the Loading mode drop-down menu, then follow the instructions, choose and open the four .json files one by one. actor.json must be loaded before outbox.json, while bookmarks.json and likes.json are optional.

If your toots are not in order:

If your toots are not arranged completely in chronological order, as shown below, this may be caused by some kind of unknown bug. (If you can figure it out please let me know.)

One misplaced January toot

Here is the workaround: open and edit the assets/main.js, go to line 431 and remove the first two slashes.

/* 428 */    var statuses = outbox.orderedItems.map(item => item.object)
/* 429 */        .filter(object => typeof(object) === typeof({}));
/* 430 */    // Uncomment the following line to sort your toots by published time.
/* 431 */    statuses = statuses.sort((a,b) => new Date(a.published).getTime() - new Date(b.published).getTime());
/* 432 */    debugLog("(log)(build) turned outbox.orderedItems to statuses");

By the way, if you want to view your toots in reverse order, edit line 431 like this (exchange a and b in the first bracket):

/* 431 */    statuses = statuses.sort((b,a) => new Date(a.published).getTime() - new Date(b.published).getTime());

If your browser is too old:

The line graph function depends on chart.js, whose support for older browsers got dropped a while back. Thus, this tool supports:

If your browser doesn’t meet the minimum version number mentioned above, you should get error like “ReferenceError: ResizeObserver is not defined”. If this happens, upgrading your browser is always the best choice. But if you can’t upgrade for some reasons, you can also delete line 336 and line 338 in archive_page.html:

<!--336-->    <!--
<!--337-->    <script type="text/javascript" src="./assets/polyfillResizeObserver.js"></script>
<!--338-->    -->

Other problems:

If you run into other problems, here's what you can do:

  1. Open the assets/main.js;
  2. Edit it, change the 2nd line to var debug = 1;, which means you turn on the debug mode;
  3. Open the archive_page.html in browser;
  4. Press the F12 button and go to the console tab, make sure you have already seen the log “debug mode on”;
  5. Now do the process normally;
  6. Analyze the log to see if you can find the cause to the problem;
  7. Solve it if you can! Feel free to fork or open a PR;
  8. If you have no clue, you can contact me via Mastodon or raise a issue. Don't forget to provide your log.

Next steps:

Similar Projects:

Open to suggestions. Chinese and English ok.