Organize and add more docs

packages/webamp-docs/docs/01_intro.md

@@ -29,5 +29,5 @@ For more examples you can copy from, see [Examples](./04_examples.md).
 1. [Installation](./02_install.md) - Learn how to install Webamp in your project, including how to use it with npm or a CDN.
 2. [Initialization Options](./03_initialization.md) - Learn about the options you can pass to Webamp when initializing it. Include **tracks, skins, and more.**
 3. API - Learn about the Webamp API, including how to control playback, add tracks, and more.
-   - [Webamp Constructor Options](./API/02_webamp-constructor.md) - Learn about the options you can pass to the Webamp constructor.
-   - [Webamp Instance Methods](./API/03_instance-methods.md) - Learn about the methods you can call on a Webamp instance.
+   - [Webamp Constructor Options](./06_API/02_webamp-constructor.md) - Learn about the options you can pass to the Webamp constructor.
+   - [Webamp Instance Methods](./06_API/03_instance-methods.md) - Learn about the methods you can call on a Webamp instance.

packages/webamp-docs/docs/03_initialization.md

@@ -30,7 +30,7 @@ webamp.renderWhenReady(document.getElementById("winamp-container"));
 ```
 
 :::tip
-See [Webamp Constructor Options](./API/02_webamp-constructor.md) for a list of options you can pass to the Webamp constructor.
+See [Webamp Constructor Options](./06_API/02_webamp-constructor.md) for a list of options you can pass to the Webamp constructor.
 :::
 
 ## Check compatibility

packages/webamp-docs/docs/06_API/01_track.md

@@ -3,7 +3,7 @@
 Many methods on the webamp instance deal with `Track`s. Here is the shape of a `Track`:
 
 :::warning
-**The `url` must be served with the [correct CORS headers](../guides/01_cors.md).**
+**The `url` must be served with the [correct CORS headers](../07_guides/01_cors.md).**
 :::
 
 ```ts

packages/webamp-docs/docs/06_API/02_webamp-constructor.md

@@ -4,7 +4,7 @@ The `Winamp` class is constructed with an options object. _All config properties
 
 ### `initialTracks`
 
-An array of `track`s to prepopulate the playlist with. **The `url` must be served with the [correct CORS headers](../guides/01_cors.md).**
+An array of `track`s to prepopulate the playlist with. **The `url` must be served with the [correct CORS headers](../07_guides/01_cors.md).**
 
 :::warning
 It is highly recommended to provide `metaData` and `duration` for each track, as this will prevent Webamp from needing to fetch the first few bytes of the file to read ID3 tags and duration.
@@ -27,7 +27,7 @@ const options = {
 
 ### `initialSkin`
 
-An object representing the initial skin to use. If omitted, the default skin, included in the bundle, will be used. **The URL must be served with the [correct CORS headers](../guides/01_cors.md).**
+An object representing the initial skin to use. If omitted, the default skin, included in the bundle, will be used. **The URL must be served with the [correct CORS headers](../07_guides/01_cors.md).**
 
 ```ts
 const options = {
@@ -39,7 +39,7 @@ const options = {
 
 ### `availableSkins`
 
-An array of objects representing skins. These will appear in the "Options" menu under "Skins". **The URLs must be served with the [correct CORS headers](../guides/01_cors.md).**
+An array of objects representing skins. These will appear in the "Options" menu under "Skins". **The URLs must be served with the [correct CORS headers](../07_guides/01_cors.md).**
 
 :::tip
 You can find skins to download at the [Winamp Skin Museum](https://skins.webamp.org).

packages/webamp-docs/docs/06_API/03_instance-methods.md

@@ -15,7 +15,7 @@ webamp.appendTracks([
 ```
 
 :::warning
-**The `url` must be served with the [correct CORS headers](../guides/01_cors.md).**
+**The `url` must be served with the [correct CORS headers](../07_guides/01_cors.md).**
 :::
 
 ### `setTracksToPlay(tracks: Track[]): void`
@@ -31,7 +31,7 @@ webamp.setTracksToPlay([
 ```
 
 :::warning
-**The `url` must be served with the [correct CORS headers](../guides/01_cors.md).**
+**The `url` must be served with the [correct CORS headers](../07_guides/01_cors.md).**
 :::
 
 ### `previousTrack(): void`

packages/webamp-docs/docs/06_API/05_custom-media-impl.md

@@ -0,0 +1,30 @@
+# Custom Media Impl.
+
+In order to support more advanced use cases where you want Webamp to play media using something other than the Web Audio API, you can provide your own media player implementation. This is done by defining a class which will replace the internal `Media` class.
+
+This can be used (abused) to implement things like [Winampify](https://github.com/remigallego/winampify) which uses the Webamp UI to control playback via the Spotify Web SDK, but could also be used to implement Webamp as a client for something like [Music Player Daemon (MPD)](https://www.musicpd.org/).
+
+:::danger
+This is a bit of a hack. The API is not considered stable and may change in future versions of Webamp. You may need to suppress some TypeScript errors to get this to work.
+:::
+
+## Custom Media Implementation
+
+```ts
+import Webamp from "webamp";
+
+class MyCustomMediaPlayer {
+  // Add methods such as seeking, volume control, etc.
+}
+
+const webamp = new Webamp({
+  // ... other options
+  __customMediaClass: MyCustomMediaPlayer,
+});
+
+webamp.renderWhenReady(document.getElementById("winamp-container"));
+```
+
+:::tip
+Check the types of the `Media` class (found via the `__customMediaClass` config property) in Webamp's TypeScript types for details of the expected methods and properties. Note that methods prefixed with `_` are not part of the public API and do not need to be implemented, despite what the types say.
+:::

packages/webamp-docs/docs/08_packages/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Packages",
+  "collapsible": true
+}

packages/webamp-docs/docs/08_packages/index.md

@@ -0,0 +1,16 @@
+# Related Packages
+
+Some aspects of Webamp's implementation are split into separate packages which may also prove useful outside of Webamp.
+
+## Webamp Packages
+
+- [ani-cursor](https://www.npmjs.com/package/ani-cursor) - A library for compiling Windows .ani cursors into CSS animations in the browser. [Blog post](https://jordaneldredge.com/blog/rendering-animated-ani-cursors-in-the-browser/).
+- [webamp-eqf](https://www.npmjs.com/package/winamp-eqf) parse or create Winamp binary equalizer (`.eqf`) files. This is used to load and save equalizer presets in Webamp.
+- [eel-wasm](https://www.npmjs.com/package/eel-wasm) - A compiler which can dynamically compiler Mikdrop visualizer preset EEL code to WebAssembly. [Blog post](https://jordaneldredge.com/blog/compiling-milkdrop-eel-code-to-webassembly/).
+
+## Butterchurn Packages
+
+Webamp's Milkdrop visualizer is powered by [Butterchurn](https://butterchurnviz.com/). There are a few packages related to Butterchurn which may be useful outside of Webamp:
+
+- [butterchurn](https://www.npmjs.com/package/butterchurn) - The main Butterchurn library which can be used to render Milkdrop visualizer presets in the browser.
+- [butterchurn-presets](https://www.npmjs.com/package/butterchurn-presets) - A collection of Milkdrop visualizer presets which can be used with Butterchurn.