Port all documents to MDX

2025-09-13 09:03:27 +00:00 · 2024-03-30 20:34:50 +01:00
parent c06bedc93c
commit 268014552c
30 changed files with 62 additions and 120 deletions
--- a/pages/client/changelog.mdx
+++ b/pages/client/changelog.mdx
@@ -0,0 +1,264 @@
+---
+title: 'Changelog'
+---
+
+# Version 4.6.3
+- Updated providers to 2.2.5
+- Fixed vercel routing
+- Fixed TV browsers crashing because of MediaSession
+- Fixed Chinese (traditional) translation
+- Optimized all images
+- Fixed page scrolling when adjusting the volume using the scroll wheel
+- Added support for HLS audio tracks (You now have the option to change the audio language for RidoMovies)
+- Admin page no longer leaks the worker url.
+- Added the ability to drag and drop your subtitle files.
+- Improved the error message when the extension has not whitelisted the domain. It should now ask you to grant permission.
+- Fixed an issue where the episode progression would not save after clicking the 'Next episode' button
+- Improved translations: Catalan, Czech, German, Spanish, Estonian, Persian, French, Galician, Indonesian, Italian, Dutch, Polish, Portuguese (Brazil), Romanian, Russian, Turkish, Chinese (Han (Traditional variant))
+
+# Version 4.6.2
+- Updated providers to 2.2.3
+- Added defaults for extension store links
+- Onboarding now defaults to true for self-hosters.
+- Support for embedded HLS subtitles (This fixes Ridomovies having default subtitles that could not be changed).
+- Improved translations: Polish, Toki Pona
+
+# Version 4.6.1
+- Fixed subtitle blur settings loading as NaN
+- Improved translations: Czech, German, Persian, French, Italian, Dutch, Russian, Slovenian, Ukrainian, Chinese (Han (Simplified variant))
+
+# Version 4.6.0
+
+- Implemented media session support!
+- Added option to blur background in subtitles
+- Added vercel config to properly support using non-hash routing
+- Fixed a bug in config that treated empty environment variables as being set, causing config.js to be ignored
+- Fixed a bug in the button component that meant our own pages opened in a new tab
+- Added new translations: Catalan
+- Improved translations: Catalan, Spanish, Persian, French, Hindi, Icelandic, Italian, Nepali (macrolanguage), Dutch, Panjabi, Slovenian, Chinese (Han (Simplified variant)), Russian, Estonian, Korean
+
+# Version 4.5.1
+
+- Improved translations: Catalan, Czech, Spanish, Persian, French, Italian, Portuguese (Brazil), Russian, Tamil, Vietnamese, Chinese (Han (Simplified variant))
+- Update providers to 2.2.2
+- Update Dockerfile to have build-time arguments and add a Docker compose file
+- Allow banners to be dismissible
+- Update extension logic to process all URLs in a HLS playlist
+- Automatically prefix backend URL with https:// if not provided
+
+# Version 4.5.0
+
+- Improved translations: Estonian, Persian, Toki Pona, Vietnamese.
+- Route subtitles through extension if installed.
+- Fix Docker build failing when PWA is enabled.
+- Add randomised placeholders for search bar.
+- Add preview to the theme selector.
+- Remove references to the official domain.
+- Update admin page to run worker tests in parallel.
+- Disable creating account when backend server isn't set.
+- Remove default setup option if no default proxy set.
+- Remove extension help text when extension succeeded.
+- Allow configuration of Google Analytics - removed our default one.
+- Fix media download button redirection to incorrect URL on main tab.
+- Allow users to change volume with scroll wheel.
+
+# Version 4.4.0
+
+- Changed behaviour of HLS playlists to have a copy button instead of a download button for more compatibility.
+- Improve the appearance of the "active" pill under theme settings - it now has better padding and matches the theme it represents.
+- If a user selects a proxy during onboarding, it is now saved to the backend if the user is signed in.
+- Fixed sorting of shows that caused the "continue watching" to not update properly when syncing with the backend.
+- Added an "x" button to clear the search query.
+- Improve mobile layout for setup component.
+- Fix HLS issue with throwing 403 error.
+- Improved translations: Arabic, German, Persian, Finnish, Galician, Italian, Japanese, Korean, Panjabi, Russian, Turkish, Ukrainian, Chinese (Han (Simplified variant)).
+- Update providers package to 2.2.
+
+# Version 4.3.3
+
+- Fixed body not being transferred properly to the extension (needs latest version of extension)
+- Added new translations: Finnish
+- Improved translations: Czech, German, English, Spanish, Persian, French, Galician, Gujarati, Hebrew, Hindi, Icelandic, Navajo, Portuguese (Brazil), Russian, Ukrainian, Chinese (Han (Simplified variant))
+
+# Version 4.3.2
+
+- Run account server data fetching in parallel.
+- Added specific text per browser for extension setup screen
+- Fix bug where first load the page couldn't talk to extension
+- Fix too short of a timeout when checking for proxy response
+- Move start of bolding for HLS disclaimer
+- Fix app crash when opening download screen on lower RAM browsers
+- Make onboarding start screen more mobile friendly
+- Separate extension install links into two settings (firefox & chrome)
+- Added new translations: Icelandic
+- Improved translations: German, Spanish, Persian, French, Hebrew, Italian, Nepali (macrolanguage), Dutch, Polish, Portuguese (Brazil), Romanian, Chinese (Han (Simplified variant))
+
+# Version 4.3.1
+
+- Fix provider API interaction with extension.
+
+# Version 4.3.0
+
+- Add onboarding process to movie-web, triggable manually through settings. This needs to be turned when selfhosting.
+- Added settings to toggle generated thumbnails, disabled by default
+- Fix multiple subtitles with same language all showing as selected
+- Add docker support, a hosted container image included (with ARM support)
+- Added extension support, run movie-web without setting up a custom proxy
+- Add disabled cursor for disabled buttons
+- Add instruction link to custom proxy and custom server settings
+- Added backdrop blur to navigation buttons
+- Updated provider package (Re-enabled showbox/febbox subtitles)
+- Added new translations: Catalan
+- Improved translations: Bengali, Czech, German, Spanish, Persian, French, Galician, Italian, Nepali, Dutch, Polish, Portuguese, Portuguese, Russian, Turkish, Ukrainian, Vietnamese, Chinese
+
+# Version 4.2.5
+
+::alert{type="warning"}
+This release requires a new version of simple-proxy: 2.1.3
+::
+
+- Update provider package, with fixes for febbox-mp4
+
+# Version 4.2.4
+
+::alert{type="warning"}
+This release requires a new version of simple-proxy: 2.1.1
+::
+
+- Add meta tag for PWA's for apple devices
+- Add galician flag
+- Fix language fallback, this fixes weird dot notation instead of english language fallback
+- Add Docker image for frontend
+- Fix Brazilian portuguese flag in language selector
+- Add profile picture preview in register and update
+- Update Provider package to 2.0.4
+- Added new translations: Catalan
+- Improved translations: Czech, Greek, French, Gujarati, Hebrew, Hindi, Italian, Khmer (Central), Nepali, Dutch, Punjabi, Polish, Portuguese (Brazil), Romanian, Russian, Ukrainian, Vietnamese, Chinese (Simplified), pirate (generated), minion (generated)
+
+# Version 4.2.3
+
+- Fix player UI not disappearing
+- Implement new locale system to support regional and alternative languages
+- Add Turnstile interactive challenge and Turnstile loading screen
+- Added new translations: Galician, Punjabi, Romanian
+- Improved translations: Arabic, Czech, German, Spanish, Estonian, Gujarati, Hindi, Russian, Chinese (Simplified)
+
+# Version 4.2.2
+
+- Add worker URL syncing for accounts
+- Fix broken hero title during the day
+- Move search items with no poster to the end of the search results
+- disable episodes if they have not been aired yet
+- update provider package: disable febbox HLS, irreparable
+- Added new translations: Bulgarian, Bengali, Greek, Persian, Gujarati, Indonesian, Japanese, Korean, Slovenian, Tamil, Chinese (Traditional)
+- Improved translations: Arabic, Czech, German, Spanish, Estonian, French, Hebrew, Hindi, Italian, Nepali, Dutch, Polish, Portuguese (Brazil), Russian, Thai, Toki Pona, Turkish, Ukrainian, Chinese (Simplified), pirate (generated), minion (generated)
+
+# Version 4.2.1
+
+- Fix the scrape screen showing success when it shouldn't
+- Fix some more [Object object] showing in the error dialogue
+- Updated translations: Czech, German, French, Polish, Italian, Thai, Hebrew, Nepali, Estonian, Toki Pona, Portuguese, Pirate
+- Fix Ukrainian, Hindi and Toki Pona flags
+
+# Version 4.2.0
+
+- Add splashscreens for PWA
+- Renamed captions to subtitles in translations
+- Add youtube-esque shortcuts for navigating video
+- Fix error dialogue not showing actual error message but instead shows [Object object]
+- Gray subtitle color
+- Hide settings button on mobile when it shouldnt have shown
+- Fix Estonia and Nepal flag
+- Update provider package to 2.0.1
+- Superstream now split into showbox and febbox.
+- Fixed sidebar not highlighting last item on high screens
+- New translations: Hindi, Polish, Portuguese - Brazillian, Ukrainian
+- Updates to translations: Czech, Estonian, German, Hebrew, Cambodian, Nepali, Swedish, Thai, Chinese, Minion
+
+# Version 4.1.3
+
+- Add support for downloading HLS playlists
+- Added cdn replacements configuration option
+- new translations: estonian, toki pona, spanish
+- Translation improvements: german, turkish, nepali, chinese
+
+# Version 4.1.2
+
+- Improve bundle chunking
+- Add millionjs for faster react
+- Update all dependency versions
+- Translation improvements: czech, hebrew, german
+- Fix mobile controls not going away after some time
+- Improve poster quality
+- Fix "media not found" error not being shown
+- Add more information to the error details modal
+
+# Version 4.1.1
+
+- Fixed bug where settings toggles sometimes weren't usable
+- Fixed bug where captions were permanently enabled
+- Fixed some missing translations
+- Translation improvements: arabic, french, nepali, chinese
+
+# Version 4.1.0
+
+- Added new translations: arabic, chinese, latvian, thai, nepali, dutch
+- Translation improvements: turkish, hebrew
+- Fixed text directions for captions
+- Anti-tamper script has been removed and replaced with turnstile (this is the devtools blocked, you can use devtools again)
+- Added way to add the providers-API instead of proxies
+
+# Version 4.0.2
+
+- Added new translations: Hebrew, French, German, Swedish, Turkish.
+- Added minion joke language. Blame @jip\_.
+- Thumbnail preview no longer goes under the next episode button.
+- Passphrase inputs are now actual password fields, so they may act nicer with password managers.
+- The player now remembers what your subtitle settings were, so no longer you need to keep selecting english every time you watch.
+- Fix home link not working with /s/:term shortcut.
+- Swedish flag is now an actual Swedish flag.
+- Fix for various layout issues with small width mobile screens.
+
+# Version 4.0.0
+
+::alert{type="info"}
+If you are upgrading from a previous version, make sure to read [the upgrade guide](5.upgrade.md).
+::
+
+### Bug fixes
+
+- Fixed bug where video player overlays the controls on IOS.
+- Fixed bug where you are kicked out of the fullscreen when switching episode.
+- Fixed bug where you cannot select a different episode if first episode fails to load.
+
+### Enhancements
+
+- Completely redesigned look and feel for the entire website.
+- Added FAQ and DMCA pages.
+- Source loading page is more detailed.
+- Video player has been remade from scratch, all internal workings are brand new.
+- You can now input numbers manually into the subtitle customization menu.
+- Subtitle delay can now be increased outside of the slider range by inputting manual numbers.
+- Movie and show URL's now include the name of the media in the link, makes it easier at a glance to see what a link is about.
+- Instructions on how to download are now given inside the app.
+- Chromecasting no longer shows captions on the web player (still doesnt show on cast receiver)
+- Chromecasting now supports HLS
+
+### New features
+
+- Quality selector! You can now switch qualities.
+- Search bar no longer requires you to choose between shows or movies.
+- Visit `/s/:term` to quickly watch something. For example `https://movie-web.app/s/hamilton`.
+- You can now add movie-web as a search provider in your browser.
+- Safari now has subtitles when fullscreening.
+- A next episode button will appear when close to the end of an episode, allowing quick switching to next episode.
+- When seeking and hovering over progress bar, you will now see a thumbnail for the place you're hovering.
+- Subtitles now have language flag next to them.
+- Your subtitle preference gets saved.
+- Turn on subtitles using keyboard shortcut `C`.
+- Self-hosters can now test their configurations at the `/admin` page.
+- Subtitles can now be downloaded.
+- Sync your data through online accounts (using passphrases for maximum privacy)
+- You can now choose your own worker URL set in the settings page.
+- A custom backend server URL can be set on the settings page.
+- On the settings page, you can now choose between multiple themes.
--- a/pages/client/configuration.mdx
+++ b/pages/client/configuration.mdx
@@ -0,0 +1,207 @@
+---
+title: 'Configuration'
+---
+
+# Client Config Reference
+
+The config for the movie-web can be provided in 2 different ways, depending on how you are hosting movie-web:
+
+- If you are using a static web hoster (such as Vercel, Netlify or Cloudflare Pages), you can use [environment variables](#method-1-environment-variables).
+- If you are hosting movie-web using shared hosting (such as cPanel or FTP), please use [the config file](#method-2-config-file).
+
+Both methods can specify any of the keys listed in the [Shared Config](#config-reference-shared-config) section.
+
+## Method 1 - Environment Variables
+
+The movie-web client can be configured using environment variables **at build time**. You cannot use this method if hosting the pre-built `movie-web.zip` files!
+
+Using environment variables to configure movie-web also allows configuration of some [environment variable specific keys](#config-reference-environment-variables-only).
+
+## Method 2 - Config File
+
+When using the pre-built `movie-web.zip`, you can set the configuration in the `config.js` file.
+
+The `config.js` file contains a JavaScript object which must be set to the correct values:
+
+```js
+window.__CONFIG__ = {
+  // ... Config variables go here ...
+};
+```
+
+## Config Reference - Shared Config
+
+### `VITE_TMDB_READ_API_KEY` ⚠
+
+- Type: `string`
+- Default: `""`
+
+This is the **read** API key from TMDB to allow movie-web to search for media. [Get one by following our guide](/client/tmdb).
+
+::alert{type="danger"}
+**Required. The client will not work properly if this is not configured.**
+::
+
+### `VITE_CORS_PROXY_URL`
+
+- Type: `string`
+- Default: `""`
+- Example: `"https://example1.example.com,https://example2.example.com"`
+
+This is where you put proxy URLs. [Get some by following our guides](/proxy/deploy).
+
+If left empty, the client onboarding will not provide a "default setup" and the user will have to manually configure their own proxy or use the extension.
+
+You can add multiple Workers by separating them with a comma, they will be load balanced using round robin method on the client.
+**Worker URL entries must not end with a slash.**
+
+::alert{type="danger"}
+**Required. The client will not work properly if this is not configured.**
+::
+
+### `VITE_DMCA_EMAIL`
+
+- Type: `string`
+- Default: `""`
+- Example: `"dmca@example.com"`
+
+This is the DMCA email for on the DMCA page. If this config value is present, a new page will be made and linked in the footer, where it will mention how to handle DMCA take-down requests. If the configuration value is left empty, the page will not exist.
+
+### `VITE_NORMAL_ROUTER`
+
+- Type: `boolean`
+- Default: `false`
+
+The application has two routing modes: hash-router and history-router.
+Hash router means that every page is linked with a hash like so: <code style="overflow-wrap: anywhere">https://example.com/#/browse</code>.
+
+History router does routing without a hash like so: `https://example.com/browse`, this looks a lot nicer, but it requires that your hosting environment supports Single-Page-Application (SPA) redirects (Vercel supports this feature). If you don't know what that means, don't enable this.
+
+Setting this configuration value to `true` will enable the history-router.
+
+### `VITE_BACKEND_URL`
+
+- Type: `string`
+- Default: `""`
+- Example: `"https://backend.example.com"`
+
+This is the URL for the movie-web backend server which handles cross-device syncing.
+
+The backend server can be found at https://github.com/movie-web/backend and is offered as a [Docker](https://docs.docker.com/get-started/overview/){target="\_blank"} image for deployment.
+
+Backend URL must **not** end with a slash.
+
+### `VITE_HAS_ONBOARDING`
+
+- Type: `boolean`
+- Default: `true`
+
+If you want your users to be prompted with an onboarding screen before they start watching, enable this.
+
+### `VITE_ONBOARDING_CHROME_EXTENSION_INSTALL_LINK`
+
+- Type: `string`
+- Default: `"https://chromewebstore.google.com/detail/movie-web-extension/hoffoikpiofojilgpofjhnkkamfnnhmm"`
+- Example: `"https://google.com"`
+
+When onboarding is enabled using `VITE_HAS_ONBOARDING`. This link will be used to link the proper Chrome extension to install.
+
+If omitted, this will still show the extension onboarding screen, just without an install link for the extension.
+
+### `VITE_ONBOARDING_FIREFOX_EXTENSION_INSTALL_LINK`
+
+- Type: `string`
+- Default: `"https://addons.mozilla.org/en-GB/firefox/addon/movie-web-extension"`
+- Example: `"https://google.com"`
+
+When onboarding is enabled using `VITE_HAS_ONBOARDING`. This link will be used to link the proper Firefox extension to install.
+
+If omitted, this will still show the extension onboarding screen, just without an install link for the extension.
+
+### `VITE_ONBOARDING_PROXY_INSTALL_LINK`
+
+- Type: `string`
+- Default: `""`
+- Example: `"https://google.com"`
+
+When onboarding is enabled using `VITE_HAS_ONBOARDING`. This link will be used to link the user to resources to host a custom proxy.
+
+If omitted, this will still show the proxy onboarding screen, just without an documentation link for the proxy.
+
+### `VITE_DISALLOWED_IDS`
+
+- Type: `string`
+- Default: `""`
+- Example: `"series-123,movie-456"`
+
+In the unfortunate event that you've been sent a DMCA take down notice, you'll need to disable some pages. This configuration key will allow you to disable specific ids.
+
+For shows, it needs to be in this format: `series-<TMDB_ID>`. For movies the format is this: `movie-<TMDB_ID>`.
+
+The list is comma separated, you can add as many as needed.
+
+### `VITE_CDN_REPLACEMENTS`
+
+- Type: `string`
+- Default: `""`
+- Example: <code style="overflow-wrap: anywhere">"google.com:example.com,123movies.com:flixhq.to"</code>
+
+Sometimes you want to proxy a CDN. This is how you can easily replace a CDN URL with your own.
+
+The format is `<beforeA>:<afterA>,<beforeB>:<afterB>,...`
+
+### `VITE_TURNSTILE_KEY`
+
+- Type: `string`
+- Default: `""`
+
+The [Turnstile key](https://dash.cloudflare.com/sign-up?to=/:account/turnstile){target="\_blank"} for Cloudflare captchas. It's used to authenticate requests to proxy workers (or providers API).
+
+[The proxy workers will need to be configured to accept these captcha tokens](../2.proxy/2.configuration.md#turnstile_secret), otherwise it has no effect for security.
+
+## Config reference - Environment Variables Only
+
+::alert{type="danger"}
+:icon{name="material-symbols:warning-rounded"} These configuration keys are specific to environment variables, they **only** work as environment variables **set at build time**.
+::
+
+### `VITE_PWA_ENABLED`
+
+- Type: `boolean`
+- Default: `false`
+
+Set to `true` if you want to output a PWA application. Set to `false` or omit to get a normal web application.
+A PWA web application can be installed as an application to your phone or desktop computer, but can be tricky to manage and comes with a few footguns.
+
+::alert{type="warning"}
+Make sure you know what you're doing before enabling this, it **cannot be disabled** after you've set it up once.
+::
+
+### `VITE_GA_ID`
+
+- Type: `string`
+- Default: `""`
+- Example: `"G-1234567890"`
+
+The Google Analytics ID for tracking user behavior. If omitted, no tracking will be done.
+
+### `VITE_APP_DOMAIN`
+
+- Type: `string`
+- Default: `""`
+- Example: `"https://movie-web.app"`
+
+The domain where the app lives. Only required when having the [`VITE_OPENSEARCH_ENABLED`](#vite_opensearch_enabled) option enabled.
+
+The value must include the protocol (HTTP/HTTPS) but must **not** end with a slash.
+
+### `VITE_OPENSEARCH_ENABLED`
+
+- Type: `boolean`
+- Default: `false`
+
+Whether to enable [OpenSearch](https://developer.mozilla.org/en-US/docs/Web/OpenSearch){target="\_blank"}, this allows a user to add a search engine to their browser. When enabling you **must** also set [`VITE_APP_DOMAIN`](#vite_app_domain).
+
+::alert{type="warning"}
+:icon{name="material-symbols:warning-rounded"} This field is case sensitive, make sure you use the correct casing.
+::
--- a/pages/client/deploy.mdx
+++ b/pages/client/deploy.mdx
@@ -0,0 +1,109 @@
+---
+title: 'Deploy'
+---
+
+# Deploying the client
+
+## Method 1 - Vercel - Recommended
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmovie-web%2Fmovie-web%2Ftree%2Fmaster&env=VITE_CORS_PROXY_URL,VITE_TMDB_READ_API_KEY)
+
+1. Click the Deploy button.
+1. Sign in using either a GitHub, GitLab, or Bitbucket.
+1. Follow the instructions to create a repository for movie-web.
+1. Configure the environment variables:
+
+   - `VITE_CORS_PROXY_URL`: Enter your proxy URL here. Make sure to not have a slash at the end of your URL.
+
+     Example (THIS IS AN EXAMPLE, IT WON'T WORK FOR YOU): `https://test-proxy.test.workers.dev`
+
+   - `VITE_TMDB_READ_API_KEY`: Enter your TMDB Read Access Token here. Please read [the TMDB page](2.tmdb.md) on how to get an API key.
+
+   - `VITE_BACKEND_URL`: Only set if you have a self-hosted backend. Put in your backend URL. Check out [configuration reference](../4.client/2.configuration.md) for details. Make sure to not have a slash at the end of the URL.
+
+1. Click "Deploy"
+1. Congrats! You have your own version of movie-web hosted.
+1. You may wish to configure a custom domain - Please consult [the Vercel docs for how to do this](https://vercel.com/docs/getting-started-with-vercel/domains).
+
+## Method 2 - Static Web Host
+
+1. Download the file `movie-web.zip` from the latest release: https://github.com/movie-web/movie-web/releases/latest.
+2. Extract the ZIP file so you can edit the files.
+3. Open `config.js` in an editor such as Notepad, Visual Studio Code or similar.
+4. Put your proxy URL in-between the double quotes of `VITE_CORS_PROXY_URL: ""`. Make sure to not have a slash at the end of your URL.
+
+   Example (THIS IS AN EXAMPLE, IT WON'T WORK FOR YOU): `VITE_CORS_PROXY_URL: "https://test-proxy.test.workers.dev"`
+
+5. Put your TMDB Read Access Token inside the quotes of `VITE_TMDB_READ_API_KEY: ""`. Please read [the TMDB page](2.tmdb.md) on how to get an API key.
+6. If you have a self-hosted backend server, enter your URL in the `VITE_BACKEND_URL` variable. Check out [configuration reference](../4.client/2.configuration.md) for details. Make sure to not have a slash at the end of the URL.
+7. Save the file.
+8. Upload **all** of the files to a static website hosting such as:
+   - GitHub Pages
+   - Netlify
+   - Vercel
+   - Etc, [there are lots of options](https://www.staticwebsitehosting.org/){target="\_blank"}.
+9. Congrats! You have your own version of movie-web hosted.
+
+## Method 3 - Docker Compose - Home Network
+
+This method is meant for those using a desktop device or single board computer with a minimum of 4GB of RAM such as a [Raspberry Pi](https://www.raspberrypi.com/) to run movie-web on there home network for network connected devices.
+
+1. Ensure you have [docker](https://docs.docker.com/get-docker/) installed. In a newly created directory called `movie-web` create a file called `docker-compose.yaml`. Paste the contents of the code block below into this file.
+
+```yaml
+version: "3.8"
+
+services:
+
+  movieweb:
+    build:
+      context: https://github.com/movie-web/movie-web.git
+      # args:
+      #   TMDB_READ_API_KEY: ""
+      #   CORS_PROXY_URL: ""
+      #   BACKEND_URL: ""
+    ports:
+      - "80:80"
+    restart: unless-stopped
+```
+
+2. Within the `docker-compose.yaml` file uncomment `args`, `TMDB_READ_API_KEY`, `CORS_PROXY_URL`. 
+- Make sure `args` is in-line with `context` 
+- Make sure `TMDB_READ_API_KEY` and `CORS_PROXY_URL` are tabbed once to the right of `args`.
+3. Put your proxy URL in-between the double quotes of `CORS_PROXY_URL: ""`. Make sure to not have a slash at the end of your URL. 
+
+   Example (THIS IS AN EXAMPLE, IT WON'T WORK FOR YOU): `CORS_PROXY_URL: "https://test-proxy.test.workers.dev"`
+
+4. Put your TMDB Read Access Token inside the quotes of `TMDB_READ_API_KEY: ""`. Please read [the TMDB page](2.tmdb.md) on how to get an API key.
+5. Uncomment and add any [additional environment variables](3.configuration.md) you may need. Remove the `VITE_` prefix when adding an environment variable to `args`.
+6. Save the file!
+7. Now use [docker](https://docs.docker.com/get-docker/) to run `movieweb` as background service.
+
+```bash
+# movie-web is the current working directory
+$ docker compose up --detach
+```
+
+8. Verify that setup was successful
+- Navigate to `http://localhost`. You should see the UI for `movie-web`. Find something to watch and make sure that it plays. 
+- View logs with
+
+   ```bash
+   $ docker compose logs --follow movieweb
+   ```
+
+9. Set a static IP address for your device.
+- For Raspberry Pi: [guide](https://www.makeuseof.com/raspberry-pi-set-static-ip/)
+- For Mac: [guide](https://www.macinstruct.com/tutorials/how-to-set-a-static-ip-address-on-a-mac/)
+- For Windows: [guide](https://www.pcmag.com/how-to/how-to-set-up-a-static-ip-address)
+
+10. Navigate to movie web at `http://<static-ip-address` from another device connected to your network.
+
+### To Perform Updates For New Releases of Movie Web
+
+1. Make sure `movie-web` is your current working directory and run:
+
+```bash
+# Re-build the image and start the container
+$ docker compose up --build --detach
+```
--- a/pages/client/introduction.mdx
+++ b/pages/client/introduction.mdx
@@ -0,0 +1,17 @@
+---
+title: 'Introduction'
+---
+
+# Introduction to the client
+
+The client is what users sees when navigating to your domain, it's the main part of the application and houses the interface and all of the scraping logic.
+
+## Progressive Web App
+
+The client can be optionally ran as a [PWA](https://web.dev/explore/progressive-web-apps), which allows it to be installed on a mobile device. **This can be hard to do correctly and really hard if not almost impossible to reverse**, so it's generally not recommended to do so if you don't have experience hosting PWAs. If you understand the risks and still want to continue, then read more about it [here](../1.self-hosting/3.about-pwa.md).
+
+## Configuration
+
+The client features various configuration options, some of which are required for the client to function. [If you are using Vercel to host the client](1.deploy.md#method-1-vercel-recommended), then the required variables are a necessary part of creating the site, if you're using another host, or hosting it for yourself, you'll need to set them up yourself.
+
+You can view all of the configuration options on the [configurations page](3.configuration.md).
--- a/pages/client/tmdb.mdx
+++ b/pages/client/tmdb.mdx
@@ -0,0 +1,20 @@
+---
+title: 'TMDB API Key'
+---
+
+# Getting an API Key
+
+In order to search for movies and TV shows, we use an API called ["The Movie Database" (TMDB)](https://www.themoviedb.org/){target="\_blank"}. For your client to be able to search, you need to generate an API key for yourself.
+
+::alert{type="info"}
+The API key is **free**, you just need to create an account.
+::
+
+1. Create an account at https://www.themoviedb.org/signup
+1. You will be required to verify your email; click the link that you get sent to verify your account.
+1. Go to https://www.themoviedb.org/settings/api/request to create a developer account.
+1. Read the terms and conditions and accept them.
+1. Fill out your details:
+   - Select "Website" as type of use.
+   - For the other details can put any values; they are not important.
+1. Copy the "API Read Access Token" - **DO NOT COPY THE API Key - IT WILL NOT WORK**
--- a/pages/client/upgrade.mdx
+++ b/pages/client/upgrade.mdx
@@ -0,0 +1,65 @@
+---
+title: 'Update guide'
+---
+
+# Keeping your instance synced
+
+Keeping your instance up-to-date with the latest features and bug fixes can enhance your instance's functionality and ensure it stays current. When updates are released, you have the option to adopt them using either one of the guides. Below is a automatic and an manual guide on updating your instance.
+
+## Automatic update
+
+You can also setup a scheduled workflow to automatically update your instance. This will allow you to keep your instance up to date without manual intervention.
+
+To do this, you will need to follow the guide below...
+1. If you have not already, click [here](https://github.com/movie-web/movie-web/fork) to fork the movie-web Github repository.
+2. Paste the below file into your repository's root `/.github/workflows` directory
+
+```yaml
+# File: .github/workflows/sync.yml
+name: Sync fork
+
+on:
+  schedule:
+  - cron: "0 * * * *" # Run the job every hour
+  push:
+    branches:
+    - "*"
+    paths:
+    - .github/workflows/sync.yml
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - run: gh repo sync <OWNER>/<FORK> # Replace the placeholders within the < >
+    - uses: gautamkrishnar/keepalive-workflow@v1
+```
+
+3. Replace the `<OWNER>` placeholder with the GitHub username of the account that owns the fork.
+4. Replace the `<FORK>` placeholder with the repository name of your fork.
+5. Commit and push the changes to your repository.
+
+Your instance should now be automatically updated to the latest version.
+
+## Manual update
+
+You can manually update by executing the following commands in the root directory of the repository you have created, you would have to do this every time a push occurs to stay up-to-date:
+
+```bash
+git remote add movie-web https://github.com/movie-web/movie-web.git
+git fetch movie-web
+# Change `dev` to `master` if you want a stable experience
+git merge movie-web/dev --allow-unrelated-histories
+git push -f # Force push to your origin main branch
+```
+
+# Upgrade version
+
+## From `3.X` to `4.X`
+
+You will need the latest version of the proxy worker. Redeploy a new worker using [our self-hosting guide](../2.proxy/1.deploy.md).
+
+After you have the new worker, you will need to [get the new movie-web deployment files](https://github.com/movie-web/movie-web/releases/latest). **You CANNOT use the non-PWA version**. To upgrade safely without any complications, you need to update with `movie-web.pwa.zip`, Not the non-PWA version.
+
+In the future, you will **ALWAYS** need to go with the PWA option. You cannot downgrade to non-PWA version without facing many caching complications.