Set up examples folder structure

docs/.vitepress/config.mts

@@ -63,4 +63,5 @@ export default withMermaid({
 			md.use(footnote);
 		},
 	},
+	outDir: '../dist-docs',
 });

docs/guide/media-sources.md

@@ -25,7 +25,7 @@ Closing sources manually is _technically_ not required and will happen automatic
 
 ### Backpressure
 
-Media sources are the means by which backpressure is propagated from the output pipeline into your application logic. The `Output` may want to apply backpressure if the encoders or the [StreamTarget](./writing-overview/#streamtarget)'s writable can't keep up.
+Media sources are the means by which backpressure is propagated from the output pipeline into your application logic. The `Output` may want to apply backpressure if the encoders or the [StreamTarget](./writing-overview#streamtarget)'s writable can't keep up.
 
 Backpressure is communicated by media sources via promises. All media sources with an `add` method return a promise:
 ```ts
@@ -67,7 +67,7 @@ type VideoEncodingConfig = {
 	) => unknown;
 };
 ```
-- `codec`: The [video codec](./supported-formats-and-codecs/#video-codecs) used for encoding.
+- `codec`: The [video codec](./supported-formats-and-codecs#video-codecs) used for encoding.
 - `bitrate`: The target number of bits per second. Alternatively, this can be a [subjective quality](#subjective-qualities).
 - `latencyMode`: The latency mode as specified by the WebCodecs API. Media stream-driven video sources will automatically use the `realtime` setting.
 - `keyFrameInterval`: The maximum interval in seconds between two adjacent key frames. Defaults to 5 seconds. More frequent key frames improve seeking behavior but increase file size. When using multiple video tracks, this value should be set to the same value for all tracks.
@@ -97,7 +97,7 @@ type AudioEncodingConfig = {
 	) => unknown;
 };
 ```
-- `codec`: The [audio codec](./supported-formats-and-codecs/#audio-codecs) used for encoding. Can be omitted for uncompressed PCM codecs.
+- `codec`: The [audio codec](./supported-formats-and-codecs#audio-codecs) used for encoding. Can be omitted for uncompressed PCM codecs.
 - `bitrate`: The target number of bits per second. Alternatively, this can be a [subjective quality](#subjective-qualities).
 - `fullCodecString`: Allows you to optionally specify the full codec string used by the audio encoder, as specified in the [WebCodecs Codec Registry](https://www.w3.org/TR/webcodecs-codec-registry/). For example, you may set it to `'mp4a.40.2'` when using AAC. Keep in mind that the codec string must still match the codec specified in `codec`. If you don't set this field, a codec string will be generated automatically.
 - `onEncodedPacket`: Called for each successfully encoded packet. Useful for determining encoding progress.	

docs/guide/reading-overview.md

@@ -407,7 +407,13 @@ fileInput.addEventListener('change', (event) => {
 });
 ```
 
-### `UrlSource`
+### `UrlSource` <Badge type="warning" text="beta" />
+
+::: warning
+This is a **beta** feature. `UrlSource` tends to make tons of requests and is potentially slow. This is something that will be fixed in the near future.
+
+It still works, but keep in mind it's going to be much higher-latency than reading directly from disk or from memory.
+:::
 
 This source fetches data from a URL. This is useful for reading files over the network.
 ```ts
@@ -417,9 +423,7 @@ const source = new UrlSource('https://example.com/bigbuckbunny.mp4');
 ```
 
 ::: warning
-Keep in mind that reading data over the network is typically much higher-latency than reading directly from disk or from memory.
-
-Also, if you're using this source in the browser and the URL is on a different origin, make sure [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS) is properly configured.
+If you're using this source in the browser and the URL is on a different origin, make sure [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS) is properly configured.
 :::
 
 `UrlSource` accepts a few options as its second parameter:

docs/guide/writing-overview.md

@@ -38,7 +38,7 @@ output.addAudioTrack(audioSource);
 output.addSubtitleTrack(subtitleSource);
 ```
 
-For each track you want to add, you'll need to create a unique [media source](./media-source) for it. You'll be able to add media data to the output via these media sources. A media source can only ever be used for one output track.
+For each track you want to add, you'll need to create a unique [media source](./media-sources) for it. You'll be able to add media data to the output via these media sources. A media source can only ever be used for one output track.
 
 Optionally, you can specify additional track metadata when adding tracks:
 ```ts
@@ -115,7 +115,7 @@ await output.start(); // Resolves once the output is ready to receive media data
 
 ## Adding media data
 
-After starting an `Output`, you can use the media sources you used to add tracks to pipe media data to the output file. The API for this is different for each [media source](./media-source), but it typically looks something like this:
+After starting an `Output`, you can use the media sources you used to add tracks to pipe media data to the output file. The API for this is different for each [media source](./media-sources), but it typically looks something like this:
 ```ts
 mediaSource.add(...);
 ```

docs/index.md

@@ -24,15 +24,24 @@ features:
 ---
 
 things the guide needs to cover:
-- writing files
-	- output usage
-	- all output formats
-	- all media sources
-- reading files
-	- input usage
-	- all input formats
-	- all media sinks
-- utility functions
-- supported containers / codecs
-- samples & packets
-- conversion
+- writing files ✅
+	- output usage ✅
+	- all output formats ✅
+	- all media sources ✅
+- reading files ✅
+	- input usage ✅
+	- all input formats ✅
+	- all media sinks ✅
+- utility functions ✅
+- supported containers / codecs ✅
+- samples & packets ✅
+- conversion
+
+Examples:
+- Extracting media file metadata
+- Rendering thumbnails for a video / extracting a wave form?
+- Media player
+- Conversion demo: File compressor
+- Procedurally generated video (faster than real time)
+- Video generated from live sources
+- Live streaming demo?