monospac.ee

Blog style website for the DJ duo monospacee.

Features

• Blog posts generated from markdown
• Audio player with song timestamps read from .cue files
• Progress for each recording saved into Local Storage
• Keyboard controlls for playback and post filtration
• Programmatically generated OG (social preview) images
• Programmatically generated podcast RSS feed

Tech Stack

Frontend: SvelteKit, svelte-img, TypeScript, Sass, Pico Css

OG img API: SvelteKit, sveltekit-og, Satori, resvg-js

.md posts MDsveX, remark, rehype, Shiki, Curtail

Audio Mixxx, Ear Tag, Deemix

Deployment Docker, Docker Compose

Run Locally

Clone the project

  git clone [email protected]:MihkelMK/monospacee.git

Go to the project directory

  cd monospacee

Install dependencies

  cd frontend && pnpm install
  cd og && pnpm install

Start the OG image API

  cd og
  pnpm dev

Start the website

  cd frontend
  pnpm dev

Deployment

Deployment is handled with Docker Compose

In the project root, run

  docker compose up --build

This exposes the frontend on localhost:9001 and the OG image API on localhost:9002.

Roadmap

• Automate adding posts

• Livestream support (Icecast?)

• Rewrite streaming progress code

  • Right now, switching recordings sometimes overwrites the next recordings progess with last recordings progress

• Keyboard shortcut cheatsheet/legend

• Move to selfhosted Gitea instance

  • Get SSH auth working

Color Reference

Color	Hex
Primary	#a160cd
Secondary	#75c6e6
Contrast	#e7eaee
Text	#bdc3cb
Background	#14171c

Contributing

Found a bug or error on the site? Suggestion to improve some hacky code?

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

Authors

• @mihkelmk
• @riks-jogi