You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Go to file
Max Nuding d65eca1faa
Inlined stylesheet, fixed colors
1 month ago
.nova Saving song infos to DB, refactor logging 1 month ago
src Inlined stylesheet, fixed colors 1 month ago
static Inlined stylesheet, fixed colors 1 month ago
.editorconfig Add toast for error messages, fix #16 2 months ago
.env.EXAMPLE Fix #24, refactor URL detection 1 month ago
.eslintignore Initial commit 2 months ago
.eslintrc.cjs Clean up initial state 2 months ago
.gitignore Add ansible playbook to gitignore 2 months ago
.npmrc Initial commit 2 months ago
.prettierignore Improve type safety 1 month ago
.prettierrc Clean up initial state 2 months ago Fix #24, refactor URL detection 1 month ago
apache2.conf.EXAMPLE Added installation instructions and example files 2 months ago
faviconDescription.json Improve formatting 2 months ago
icon.svg Add icons, fix #5 2 months ago
moshing-mammut.service.EXAMPLE Fix #17 and improve instructions 2 months ago
package-lock.json Update packages 1 month ago
package.json Add song info to existing posts 1 month ago Fix #17 and improve instructions 2 months ago
svelte.config.js Fix #28 specify a CSP 1 month ago
tsconfig.json Clean up initial state 2 months ago
vite.config.ts Clean up initial state 2 months ago

License: MIT Release

Moshing Mammut

The fine folks on the Mastodon Server occasionally share like to share what they're currently listening to. Having a quick overview over what is being posted can be a great way to discover new music!

Technical Notes

This is fairly simple from a technical point of view!'s local timeline is being watched using the Mastodon Streaming API over a Websocket. Every time a new post arrives, it is checked if it contains any music by checking included hashtags and URLs. A list of tags can be found in the configuration. Additionally, links are vetted if they are music by checking if finds info on them.

If a post passes this check it is saved to a SQLite database.

The UI is built using SvelteKit. The initial page is rendered on the server, and works even without Javascript. If Javascript is enabled, new posts are fetched every 10 seconds, but there are plans to switch to Websockets instead. See #10.

The Mastodon Elephant in the Room

So, are you just going to save other peoples posts into your own database?

I'm afraid so, and I'm not particularly happy about this. I've thought about how to do it without and it doesn't look good.

My initial plan was to search for posts and work with the search results, however Mastodon doesn't offer full text search, so this would be limited to work with hashtags. I can see that there are plenty of posts using only descriptions and links without a corresponding hashtag that would be missed. This isn't a great solution.

Another idea was to store only URLs of posts and resolve the content and account information live. This would be better, but I'm still storing post information while also slowing the app down and introduce more code complexity. I'm willing to make this change if people prefer this though.

Additionally, I ended up adding a few things which turned out to be not needed: The tags table (tags are included in the post's content and I don't do anything separately with tags) and accounts.username (s being used for #18) and accounts.avatar_static (has been removed). I will keep these in until the initial wave of feedback arrives, and remove it if no new features required them.

I'll gladly accept any help in coming up with a good solution which doesn't need to store anything at all!

Set Up

This might not be the ideal setup to run this, but here's how I am doing it. Instructions are for running on a Debian or Debian derivative, using Apache as HTTP Proxy. Other setups are possible, but not covered here. By default, NVM is used to install NodeJS, but you can install it any way you want.

This is based on SvelteKit's instructions and How To Deploy Node.js Applications Using Systemd and Nginx

On your server

Install Apache2 if not already installed.

Copy apache2.conf.EXAMPLE and moshing-mammut.service.EXAMPLE to your server.

Set up a user for the app: useradd -mrU moshing-mammut

Switch to your newly created user: su moshing-mammut

Set up NVM:

$ cd
$ curl | sh
$ source ~/.nvm/
$ nvm install --lts

Create a directory for the app. This will be called $APP_DIR from now on. I use /home/moshing-mammut/app.

Enter $APP_DIR.

Place package-lock.json and in this directory. Run npm ci --omit dev to install the dependencies.

Rename to and set the path to your NVM.

If you do not have NVM installed, simply remove the line and make sure your node executable can be found either by specifying the full path or by adding it to your $PATH.

Exit out of your moshing-mammut user shell.

Copy apache2.conf.EXAMPLE to /etc/apache2/sites-available/moshingmammut.conf and replace ServerName with your Domain. If you do not need or want SSL support, remove the whole <IfModule mod_ssl.c> block. If you do, add the path to your SSLCertificateFile and SSLCertificateKeyFile.

Copy moshing-mammut.service.EXAMPLE to /etc/systemd/system/moshing-mammut.service and set your User, Group, ExecStart and WorkingDirectory accordingly.

On your development machine

Copy .env.EXAMPLE to .env and add your YOUTUBE_API_KEY and ODESLI_API_KEY. To obtain one follow YouTube's guide to create an API key. If YOUTUBE_API_KEY is unset, no playlist will be updated.

If ODESLI_API_KEY is unset, your rate limit to the API will be lower.

Run npm run build and copy the output folder, usually build to $APP_DIR on your server.

On your server again

Now, you are ready to start everything up.

Enable the site in Apache2 by running a2ensite moshingmammut.conf.

Create and start the system service by running sudo systemctl enable moshing-mammut.service and then service moshing-mammut start.

Verify that everything is okay with service moshing-mammut status.

The app should now be reachable on http://localhost:3000 or whatever you configured your domain to be!


Favicon is a combination of speaker-line by remix icon and the official Mastodon icon.

It has been mushed together by me, saved as SVG file in icon.svg and turned into a slew of icons by

npm install -g cli-real-favicon
real-favicon generate faviconDescription.json faviconData.json static

Other icons: