diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 845acb4..7875016 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -1,57 +1,69 @@ // @ts-check -import { defineConfig } from 'astro/config'; -import starlight from '@astrojs/starlight'; +import { defineConfig } from "astro/config"; +import starlight from "@astrojs/starlight"; -import tailwindcss from '@tailwindcss/vite'; +import tailwindcss from "@tailwindcss/vite"; // https://astro.build/config export default defineConfig({ integrations: [ - starlight({ - head: [ - { - tag: 'script', - attrs: { - src: 'https://static.cloudflareinsights.com/beacon.min.js', - 'data-cf-beacon': '{"token": "1948caaaba10463fa1d310ee02b0951c"}', - defer: true, - } - } - ], - title: 'Koito', - logo: { - src: './src/assets/logo_text.png', - replacesTitle: true, + starlight({ + head: [ + { + tag: "script", + attrs: { + src: "https://static.cloudflareinsights.com/beacon.min.js", + "data-cf-beacon": '{"token": "1948caaaba10463fa1d310ee02b0951c"}', + defer: true, }, - social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/gabehf/koito' }], - sidebar: [ - { - label: 'Guides', - items: [ - // Each item here is one entry in the navigation menu. - { label: 'Installation', slug: 'guides/installation' }, - { label: 'Importing Data', slug: 'guides/importing' }, - { label: 'Setting up the Scrobbler', slug: 'guides/scrobbler' }, - { label: 'Editing Data', slug: 'guides/editing' }, - ], - }, - { - label: 'Reference', - items: [ - { label: 'Configuration Options', slug: 'reference/configuration' }, - ] - }, + }, + ], + title: "Koito", + logo: { + src: "./src/assets/logo_text.png", + replacesTitle: true, + }, + social: [ + { + icon: "github", + label: "GitHub", + href: "https://github.com/gabehf/koito", + }, + ], + sidebar: [ + { + label: "Guides", + items: [ + // Each item here is one entry in the navigation menu. + { label: "Installation", slug: "guides/installation" }, + { label: "Importing Data", slug: "guides/importing" }, + { label: "Setting up the Scrobbler", slug: "guides/scrobbler" }, + { label: "Editing Data", slug: "guides/editing" }, ], - customCss: [ - // Path to your Tailwind base styles: - './src/styles/global.css', - ], - }), - ], + }, + { + label: "Quickstart", + items: [ + { label: "Setup with Navidrome", slug: "quickstart/navidrome" }, + ], + }, + { + label: "Reference", + items: [ + { label: "Configuration Options", slug: "reference/configuration" }, + ], + }, + ], + customCss: [ + // Path to your Tailwind base styles: + "./src/styles/global.css", + ], + }), + ], site: "https://koito.io", vite: { plugins: [tailwindcss()], }, -}); \ No newline at end of file +}); diff --git a/docs/src/assets/navidrome_lbz_switch.png b/docs/src/assets/navidrome_lbz_switch.png new file mode 100644 index 0000000..a8b44be Binary files /dev/null and b/docs/src/assets/navidrome_lbz_switch.png differ diff --git a/docs/src/content/docs/quickstart/navidrome.md b/docs/src/content/docs/quickstart/navidrome.md new file mode 100644 index 0000000..b24bdb8 --- /dev/null +++ b/docs/src/content/docs/quickstart/navidrome.md @@ -0,0 +1,68 @@ +--- +title: Navidrome Quickstart +description: How to set up Koito to work with your Navidrome instance. +--- + +## Configure Koito +This quickstart assumes you are using Docker compose. Below is an example file, adjusted from the actual file I use personally. +```yaml title="compose.yaml" +services: + koito: + image: gabehf/koito:latest + container_name: koito + depends_on: + - db + user: 1000:1000 + environment: + - KOITO_DATABASE_URL=postgres://postgres:@db:5432/koitodb + - KOITO_ALLOWED_HOSTS=koito.mydomain.com,192.168.1.100 + - KOITO_SUBSONIC_URL=https://navidrome.mydomain.com # the url to your navidrome instance + - KOITO_SUBSONIC_PARAMS=u=&t=&s= + - KOITO_DEFAULT_THEME=black # i like this theme, use whatever you want + ports: + - "4110:4110" + volumes: + - ./koito-data:/etc/koito + restart: unless-stopped + + db: + user: 1000:1000 + image: postgres:16 + container_name: psql + restart: unless-stopped + environment: + POSTGRES_DB: koitodb + POSTGRES_USER: postgres + POSTGRES_PASSWORD: + volumes: + - ./db-data:/var/lib/postgresql/data +``` + +### How do I get the Subsonic params? +The easiest way to get your Subsonic parameters to open your browser and sign into Navidrome, then press F12 to get to +the developer options and navigate to the **Network** tab. Find a `getCoverArt` request (there should be a lot on the home +page) and look for the part of the URL that looks like `u=&t=&s=`. This +is what you need to copy and provide to Koito. +:::note +If you don't want to use Navidrome to provide images to Koito, you can skip the `KOITO_SUBSONIC_URL` and `KOITO_SUBSONIC_PARAMS` +variables entirely. +::: + +## Configure Navidrome +You have to provide Navidrome with the environment variables `ND_LISTENBRAINZ_ENABLED=true` and +`ND_LISTENBRAINZ_BASEURL=/apis/listenbrainz/1`. The place where you edit these environment variables will change +depending on how you have chosen to deploy Navidrome. + +## Enable ListenBrainz in Navidrome +In Navidome, click on **Settings** in the top right, then click **Personal**. + +Here, you will see that **Scrobble to ListenBrainz** is turned off. Flip that switch on. +![navidrome listenbrainz switch screenshot](../../../assets/navidrome_lbz_switch.png) + +When you flip it on, Navidrome will prompt you for a ListenBrainz token. To get this token, open your Koito page and sign in. +Press the settings button (or hit `\`) and go to the **API Keys** tab. Copy the autogenerated API key by either clicking the +copy button, or clicking on the key itself and copying with ctrl+c. + +After hitting **Save** in Navidrome, your listen activity will start being sent to Koito as you listen to tracks. + +Happy scrobbling!