Merge pull request #77 from mrjvs/update-guider-again

Update Guider to v1.0.1

.eslintignore

@@ -1,7 +1,6 @@
 dist
 node_modules
 .output
-.nuxt
 public
 # Ignore index due to prettier removing setext headers
 *.index.md

.eslintrc.cjs

@@ -1,8 +1,6 @@
 module.exports = {
-  root: true,
-  extends: ['@nuxt/eslint-config', 'plugin:prettier/recommended'],
+  extends: ['next', 'plugin:prettier/recommended'],
   rules: {
-    'vue/max-attributes-per-line': 'off',
-    'vue/multi-word-component-names': 'off',
+    '@next/next/no-img-element': 'off',
   },
 };

.github/workflows/github_pages.yml

@@ -1,71 +1,48 @@
-name: Deploy Nuxt site to Pages
+name: "docs-deploy"
  
 on:
-  # Runs on pushes targeting the default branch
   push:
-    branches: ["master"]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
+    branches:
+      - master
 
 jobs:
-  # Build job
   build:
+    name: Build
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
       - uses: pnpm/action-setup@v2
         with:
           version: 8
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: "20"
           cache: pnpm
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-        #with:
-        #  static_site_generator: nuxt
-      - name: Restore cache
-        uses: actions/cache@v4
-        with:
-          path: |
-            dist
-            .nuxt
-          key: ${{ runner.os }}-nuxt-build-${{ hashFiles('dist') }}
-          restore-keys: |
-            ${{ runner.os }}-nuxt-build-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
-      - name: Static HTML export with Nuxt
-        run: pnpm generate
-        env:
-          NUXT_APP_BASE_URL: /docs/
-      - name: Upload artifact
+
+      - name: Build
+        run: pnpm build
+  
+      - name: Upload
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./dist
+          path: ./out
 
-  # Deployment job
   deploy:
+    needs: build
+    permissions:
+      pages: write
+      id-token: write
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
-    needs: build
     steps:
       - name: Deploy to GitHub Pages
         id: deployment

.github/workflows/linting.yml

@@ -0,0 +1,32 @@
+name: Linting and Testing
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  linting:
+    name: Run Linters
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+            
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+  
+      - name: Install pnpm packages
+        run: pnpm install
+      
+      - name: Run ESLint
+        run: pnpm run lint

.gitignore

@@ -2,11 +2,11 @@ node_modules
 *.iml
 .idea
 *.log*
-.nuxt
 .vscode
 .DS_Store
 coverage
 dist
 sw.*
 .env
-.output
+out
+.next

.npmrc

@@ -1 +0,0 @@
-shamefully-hoist=true

app.config.ts

@@ -1,32 +0,0 @@
-export default defineAppConfig({
-  docus: {
-    title: 'movie-web',
-    description:
-      'movie-web is a free and open source streaming site, no ads, no tracking, no nonsense.',
-    url: 'https://movie-web.github.io/docs',
-    image: '/docs/cover.png',
-    socials: {
-      github: 'movie-web/movie-web',
-    },
-    github: {
-      repo: 'docs',
-      owner: 'movie-web',
-      branch: 'master',
-      dir: 'content',
-    },
-    aside: {
-      level: 0,
-      exclude: [],
-    },
-    header: {
-      logo: true,
-    },
-    footer: {
-      credits: {
-        icon: '',
-        text: 'Made with 💜',
-        href: 'https://github.com/movie-web',
-      },
-    },
-  },
-});

components/Logo.module.css

@@ -0,0 +1,18 @@
+.logo {
+  border-radius: 5px;
+  margin-left: -0.5rem;
+  padding: 0.5rem;
+  transition: transform 100ms ease-in-out, background-color 100ms ease-in-out;
+}
+
+.logo > img {
+  height: 1.5rem;
+}
+
+.logo:hover {
+  background-color: rgba(var(--colors-bgLightest));
+}
+
+.logo:active {
+  transform: scale(1.05);
+}

components/Logo.tsx

@@ -0,0 +1,11 @@
+import Link from 'next/link';
+import classes from './Logo.module.css';
+import logoUrl from '../public/icon-light.png';
+
+export function Logo() {
+  return (
+    <Link href="/" className={classes.logo}>
+      <img src={logoUrl.src} alt="Logo of movie-web" />
+    </Link>
+  );
+}

components/global/Logo.vue

@@ -1,16 +0,0 @@
-<template>
-  <img src="/icon-light.png" alt="Logo of movie-web" class="img-dark" />
-  <img src="/icon-dark.png" alt="Logo of movie-web" class="img-light" />
-</template>
-
-<style scoped>
-img {
-  height: 30px;
-}
-.light .img-dark {
-  display: none;
-}
-.dark .img-light {
-  display: none;
-}
-</style>

content/0.index.md

@@ -1,95 +0,0 @@
----
-title: 'movie-web - For all your movie and TV show needs'
-navigation: false
-head.titleTemplate: ''
-layout: page
----
-
-::block-hero
----
-cta:
-  - Get Started
-  - /self-hosting/hosting-intro
-secondary:
-  - Open on GitHub →
-  - https://github.com/movie-web/movie-web
----
-
-#title
-movie-web
-
-#description
-A simple and no-BS app for watching movies and TV shows. :br
-
-Totally free and open source, forever.
-::
-
-::card-grid
-#title
-What's all the fuss?
-
-#root
-:ellipsis
-
-#default
-  ::card{icon="mdi:server-network"}
-  #title
-  Easy to host
-  #description
-  Can be easily hosted on any static website host.
-  ::
-  ::card{icon="material-symbols:hangout-video-off"}
-  #title
-  No Ads
-  #description
-  movie-web will never show ads, enjoy watching without interruptions.
-  ::
-  ::card{icon="ic:baseline-ondemand-video"}
-  #title
-  Custom Player
-  #description
-  Enjoy a fully custom video player including streaming integration, subtitle customization and easy TV season navigation.
-  ::
-  ::card{icon="mdi:content-save"}
-  #title
-  Saves your progress
-  #description
-  Will remember your progress in movies and TV shows, so you can easily continue where you left off.
-  ::
-  ::card{icon="mdi:bookmark"}
-  #title
-  Bookmarking
-  #description
-  Allows you to bookmark your favorite movies and TV shows, so you can easily find them again.
-  ::
-  ::card{icon="mdi:cloud-refresh"}
-  #title
-  Syncing across devices
-  #description
-  Enjoy uninterrupted streaming as your progress, proxies, and bookmarks sync effortlessly across all your devices.
-  ::
-  ::card{icon="mdi:power-plug-outline"}
-  #title
-  Modular by design
-  #description
-  Mix and match different parts of the movie-web service, [host your backend](4.backend/1.deploy.md) or use ours, it'll work either way.
-  ::
-  ::card{icon="mdi:flag"}
-  #title
-  Multiple Languages
-  #description
-  Supports over 25 languages, including English, German, French, Spanish, Italian, Czech, Hindi, Arabic, Hebrew and more.
-  ::
-  ::card{icon="mdi:brush-variant"}
-  #title
-  Customizable
-  #description
-  Supports various themes, subtitle colors and subtitle sizes so you can make it look however you want.
-  ::
-  ::card{icon="mdi:cellphone"}
-  #title
-  Progressive Web App Support
-  #description
-  Supports PWA, so you can install it on your phone and use it just like a native app.
-  ::
-::

content/1.self-hosting/_dir.yml

@@ -1,4 +0,0 @@
-title: 'Self-Hosting'
-icon: mdi:server-network
-navigation.redirect: /self-hosting/hosting-intro
-titleTemplate: '%s | Self-Hosting'

content/2.proxy/_dir.yml

@@ -1,4 +0,0 @@
-title: 'Proxy'
-icon: mdi:connection
-navigation.redirect: /proxy/introduction
-titleTemplate: '%s | Proxy'

content/3.client/_dir.yml

@@ -1,4 +0,0 @@
-title: 'Client'
-icon: mdi:monitor
-navigation.redirect: /client/introduction
-titleTemplate: '%s | Client'

content/4.backend/_dir.yml

@@ -1,4 +0,0 @@
-title: 'Backend'
-icon: mdi:database
-navigation.redirect: /backend/introduction
-titleTemplate: '%s | Backend'

content/5.extra/_dir.yml

@@ -1,4 +0,0 @@
-title: 'Extra'
-icon: mdi:information-variant-circle-outline
-navigation.redirect: /extra/streaming
-titleTemplate: '%s | Extra'

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.mjs

@@ -0,0 +1,10 @@
+import { guider } from '@neato/guider';
+
+const withGuider = guider({
+  themeConfig: './theme.config.tsx',
+});
+
+export default withGuider({
+  output: 'export',
+  basePath: '/docs',
+});

nuxt.config.ts

@@ -1,11 +0,0 @@
-export default defineNuxtConfig({
-  // https://github.com/nuxt-themes/docus
-  extends: '@nuxt-themes/docus',
-  devtools: { enabled: true },
-
-  app: {
-    head: {
-      link: [{ rel: 'icon', type: 'image/x-icon', href: '/docs/favicon.ico' }],
-    },
-  },
-});

package.json

@@ -1,25 +1,28 @@
 {
-  "name": "docus-starter",
-  "version": "0.1.0",
+  "name": "movie-web-docs",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
-    "dev": "nuxi dev",
-    "build": "nuxi build",
-    "generate": "nuxi generate",
-    "preview": "nuxi preview",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix ."
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix"
   },
   "devDependencies": {
-    "@nuxt-themes/docus": "latest",
-    "@nuxt/devtools": "^1.0.6",
-    "@nuxt/eslint-config": "^0.2.0",
-    "@nuxtjs/plausible": "^0.2.4",
-    "@types/node": "^20.10.6",
+    "@types/react": "18.2.73",
     "eslint": "^8.56.0",
+    "eslint-config-next": "^14.1.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.2",
-    "nuxt": "^3.9.0",
-    "prettier": "^3.1.1"
+    "prettier": "^3.1.1",
+    "typescript": "5.4.3"
+  },
+  "dependencies": {
+    "@neato/guider": "^1.0.1",
+    "next": "^14.1.4",
+    "next-seo": "^6.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

pages/404.tsx

@@ -0,0 +1,3 @@
+import { createNotFoundPage } from '@neato/guider/client';
+
+export default createNotFoundPage();

pages/_app.tsx

@@ -0,0 +1,4 @@
+import '@neato/guider/style.css';
+import { createGuiderApp } from '@neato/guider/client';
+
+export default createGuiderApp();

pages/backend/changelog.mdx

@@ -18,11 +18,11 @@ For this update, you will need to run migrations.
 
 # Version 1.2.0
 
-::alert{type="warning"}
+<Warning>
 For this update, you will need to run migrations.
-::
+</Warning>
 
-- [Added option to trust Cloudflare IP headers for ratelimits](2.configuration.md#servertrustcloudflare)
+- [Added option to trust Cloudflare IP headers for ratelimits](./configuration.mdx#server-trust-cloudflare)
 - Removed unused table
 - Optimized prometheus metrics, should make less indexes
 
@@ -32,5 +32,5 @@ For this update, you will need to run migrations.
 - Account creation/deletion endpoints
 - Endpoints for importing old account data
 - Endpoints for syncing data
-- [Ratelimit system](2.configuration.md#ratelimit)
-- [Captcha system](2.configuration.md#captcha)
+- [Ratelimit system](./configuration.mdx#ratelimits)
+- [Captcha system](./configuration.mdx#captcha)

pages/backend/configuration.mdx

@@ -12,10 +12,10 @@ The backend can be configured in 3 different ways:
 
 These different config options are all mutually inclusive, so you can use multiple at the same time if you want to.
 
-::alert{type="warning"}
+<Warning>
 With any of these configurations, you have to have atleast three variables set for the server to function:
-[`postgres.connection`](#postgresconnection), [`crypto.sessionSecret`](#cryptosessionsecret) and [`meta.name`](#metaname)
-::
+[`postgres.connection`](#postgres-connection-⚠), [`crypto.sessionSecret`](#crypto-session-secret-⚠) and [`meta.name`](#meta-name-⚠)
+</Warning>
 
 ### Method 1 - `config.json`
 
@@ -67,7 +67,7 @@ Space separated list of allowed origins.
 - Type: `boolean`
 - Default: `false`
 
-If set to true, it allows any origin to access the site. This overwrites the [`server.cors`](#servercors) setting.
+If set to true, it allows any origin to access the site. This overwrites the [`server.cors`](#server-cors) setting.
 
 ### `server.trustProxy`
 
@@ -90,13 +90,13 @@ Controls whether the server should trust Cloudflare IP headers. This is used to
 
 Prefix for which path is being listened on. Useful if you're hosting on `example.com/backend` for example.
 
-::alert{type="info"}
+<Note>
 If this is set, you shouldn't apply URL rewriting before proxying.
-::
+</Note>
 
 ## Logging
 
-All configurations related to how the HTTP server will log. This is not related to the [metrics](0.introduction.md#metrics) endpoint.
+All configurations related to how the HTTP server will log. This is not related to the [metrics](./introduction.mdx#metrics) endpoint.
 
 ### `logging.format`
 
@@ -116,20 +116,20 @@ All configurations related to how postgres functions.
 
 Connection URL for postgres instance, should contain the database in the URL.
 
-::alert{type="danger"}
+<Caution>
 **Required. The backend will not start if this is not configured.**
-::
+</Caution>
 
 ### `postgres.migrateOnBoot`
 
 - Type: `boolean`
 - Default: `false`
 
-Run all [migrations](0.introduction.md#migrations) that haven't ran yet on boot.
+Run all [migrations](./introduction.mdx#migrations) that haven't ran yet on boot.
 
-::alert{type="warning"}
+<Warning>
 If you have multiple replicas running, this can cause a lot of issues. We recommend only using this if you run only one replica.
-::
+</Warning>
 
 ### `postgres.debugLogging`
 
@@ -138,9 +138,9 @@ If you have multiple replicas running, this can cause a lot of issues. We recomm
 
 Log all postgres queries in the console. Useful for debugging issues with the database.
 
-::alert{type="warning"}
+<Warning>
 This outputs sensitive, **DO NOT** run it in production.
-::
+</Warning>
 
 ### `postgres.ssl`
 
@@ -159,9 +159,9 @@ All configurations related to cryptography.
 
 The secret used to sign sessions. **Must be at least 32 characters long.**
 
-::alert{type="danger"}
+<Caution>
 **Required. The backend will not start if this is not configured.**
-::
+</Caution>
 
 ## Meta
 
@@ -174,9 +174,9 @@ These options configure how the server will display itself to the frontend.
 
 The name of the backend instance, this will be displayed to users who try to create an account.
 
-::alert{type="danger"}
+<Caution>
 **Required. The backend will not start if this is not configured.**
-::
+</Caution>
 
 ### `meta.description`
 
@@ -195,11 +195,11 @@ All configurations related to adding captcha functionality. Captchas' help to pr
 - Type: `boolean`
 - Default: `false`
 
-Enables [Recaptcha](https://www.google.com/recaptcha/about/) support for user registration and login. [You can follow this guide to create a Recaptcha key](https://cloud.google.com/recaptcha-enterprise/docs/create-key-website#create-key){target="\_blank"}.
+Enables [Recaptcha](https://www.google.com/recaptcha/about/) support for user registration and login. [You can follow this guide to create a Recaptcha key](https://cloud.google.com/recaptcha-enterprise/docs/create-key-website#create-key).
 
-::alert{type="warning"}
+<Warning>
 If this is enabled, all other captcha related settings are required.
-::
+</Warning>
 
 ### `captcha.secret`
 
@@ -221,9 +221,9 @@ If this is enabled, all other captcha related settings are required.
 
 All configuration options related to adding ratelimiting functionality. Helps to protect against bot attacks or spammy users.
 
-::alert{type="info"}
-Make sure your IP headers are properly forwarded if you're using a reverse proxy. Also see [`server.trustProxy`](#servertrustproxy).
-::
+<Note>
+Make sure your IP headers are properly forwarded if you're using a reverse proxy. Also see [`server.trustProxy`](#server-trust-proxy).
+</Note>
 
 ### `ratelimits.enabled`
 
@@ -232,9 +232,9 @@ Make sure your IP headers are properly forwarded if you're using a reverse proxy
 
 Enables ratelimiting some more expensive endpoints.
 
-::alert{type="warning"}
+<Warning>
 If this is enabled, all other ratelimit related settings are required.
-::
+</Warning>
 
 ### `ratelimits.redisUrl`
 

pages/backend/deploy.mdx

@@ -6,15 +6,15 @@ title: 'Deploy'
 
 The only officially recognized hosting method is through Docker (or similar container runtimes). It can be scaled horizontally to all your heart's content and is the safest way to host the backend.
 
-For configuration, check out the [configuration reference](2.configuration.md).
+For configuration, check out the [configuration reference](./configuration.mdx).
 
-::alert{type="info"}
-The postgres database will need to be populated with [migrations](0.introduction.md#migrations) if `postgres.migrateOnBoot` isn't enabled.
-::
+<Note>
+The postgres database will need to be populated with [migrations](./introduction.mdx#migrations) if `postgres.migrateOnBoot` isn't enabled.
+</Note>
 
 ## Method 1 - Docker Deployment
 
-This method provides a straightforward setup with minimal configuration. For more extensive customization, see the [Configuration Reference](2.configuration.md).
+This method provides a straightforward setup with minimal configuration. For more extensive customization, see the [Configuration Reference](./configuration.mdx).
 
 **Prerequisites**
 
@@ -94,4 +94,4 @@ Railway offers you $5 of credit once you verify your account, which is enough to
 1. Fill in the required variables or change the default values.
 1. The `Deploy` button at the bottom of the template should be active, click on it.
 1. Once the `Backend` service has deployed, copy the URL from the `Deployments` page. (Might take a second for it to be available after the service has deployed)
-1. Congratulations! You have deployed the backend, you can now [set up the client](../1.self-hosting/2.use-backend.md).
+1. Congratulations! You have deployed the backend, you can now [set up the client](../self-hosting/use-backend.mdx).

pages/backend/index.tsx

@@ -0,0 +1,3 @@
+import { createRedirect } from '@neato/guider/client';
+
+export default createRedirect({ to: '/backend/introduction' });

pages/backend/introduction.mdx

@@ -13,18 +13,18 @@ Meaning users **do not** have to set up a new account; you can use your previous
 
 ## Metrics
 
-The backend exposes an endpoint for [Prometheus metrics](https://prometheus.io/){target="\_blank"} which allows you to keep track of the backend more easily, it can be accessed on `/metrics`.
-To view these metrics properly, you'll need to use an analytics program like [Grafana](https://grafana.com/){target="\_blank"}, [which can visualize logs from Prometheus](https://prometheus.io/docs/visualization/grafana/){target="\_blank"}.
+The backend exposes an endpoint for [Prometheus metrics](https://prometheus.io/) which allows you to keep track of the backend more easily, it can be accessed on `/metrics`.
+To view these metrics properly, you'll need to use an analytics program like [Grafana](https://grafana.com/), [which can visualize logs from Prometheus](https://prometheus.io/docs/visualization/grafana/).
 
 ## Security
 
 Optionally, there are a few security settings:
 
-- [Recaptcha support](2.configuration.md#captcha), the server can verify Recaptcha v3 tokens on register and login.
-- [Ratelimits](2.configuration.md#ratelimits), some expensive endpoints have ratelimits, but only when enabled. This requires an additional redis connection.
+- [Recaptcha support](./configuration.mdx#captcha), the server can verify Recaptcha v3 tokens on register and login.
+- [Ratelimits](./configuration.mdx#ratelimits), some expensive endpoints have ratelimits, but only when enabled. This requires an additional redis connection.
 
 ## Migrations
 
 Migrations help keep your database schema in sync with everyone else. To run migrations, you can use the `pnpm migration:up` command inside the docker container or in your command-line if you're not using docker.
 
-Alternatively, you can enable the [`postgres.migrateOnBoot`](2.configuration.md#postgresmigrateonboot) variable and it will be automatically migrated on boot.
+Alternatively, you can enable the [`postgres.migrateOnBoot`](./configuration.mdx#postgres-migrate-on-boot) variable and it will be automatically migrated on boot.

pages/client/changelog.mdx

@@ -2,6 +2,30 @@
 title: 'Changelog'
 ---
 
+# Version 4.7.0
+- Updated providers to 2.3.0
+- Keyboard shortcuts now also work with uppercase keys
+- Audio language now defaults to your language preference 
+- The "Back to home" button in the video player can now be opened in a new tab using middle click
+- The "Next episode" button now turns into a "Next season" button if you are on the last episode
+- Added a fallback TMDB API if the first one cannot be reached. This should fix an issue for some users that are not able to search.
+- Added autoplay. This can be turned on for extension users, users with a custom proxy, or can be turned on for all users for self-hosters using a environment variable.
+- Improved translations: Persion (Mehdi), French (Erwann)
+
+# Version 4.6.6
+- Updated providers to 2.2.9
+- Fixes for VidSrcTo and RidoMovies
+- Improved translations: German, Persian, Hindi, Korean, Nepali (macrolanguage), Dutch, Chinese (Han (Simplified variant))
+
+# Version 4.6.5
+- Updated providers to 2.2.7
+
+# Version 4.6.4
+- Updated providers to 2.2.6
+- Fixed Ridomovies not playing for extension users
+- Added a default workflow for syncing forks
+- Improved translations: Persian, Indonesian, Portuguese (Brazil), Russian
+
 # Version 4.6.3
 - Updated providers to 2.2.5
 - Fixed vercel routing
@@ -113,17 +137,17 @@ title: 'Changelog'
 
 # Version 4.2.5
 
-::alert{type="warning"}
+<Warning>
 This release requires a new version of simple-proxy: 2.1.3
-::
+</Warning>
 
 - Update provider package, with fixes for febbox-mp4
 
 # Version 4.2.4
 
-::alert{type="warning"}
+<Warning>
 This release requires a new version of simple-proxy: 2.1.1
-::
+</Warning>
 
 - Add meta tag for PWA's for apple devices
 - Add galician flag
@@ -221,9 +245,9 @@ This release requires a new version of simple-proxy: 2.1.1
 
 # 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).
-::
+<Note>
+If you are upgrading from a previous version, make sure to read [the upgrade guide](./upgrade.mdx).
+</Note>
 
 ### Bug fixes
 

pages/client/configuration.mdx

@@ -36,11 +36,11 @@ window.__CONFIG__ = {
 - 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).
+This is the **read** API key from TMDB to allow movie-web to search for media. [Get one by following our guide](./tmdb.mdx).
 
-::alert{type="danger"}
-**Required. The client will not work properly if this is not configured.**
-::
+<Caution>
+  **Required. The client will not work properly if this is not configured.**
+</Caution>
 
 ### `VITE_CORS_PROXY_URL`
 
@@ -48,16 +48,16 @@ This is the **read** API key from TMDB to allow movie-web to search for media. [
 - 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).
+This is where you put proxy URLs. [Get some by following our guides](../proxy/deploy.mdx).
 
 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.**
-::
+<Caution>
+  **Required. The client will not work properly if this is not configured.**
+</Caution>
 
 ### `VITE_DMCA_EMAIL`
 
@@ -73,7 +73,7 @@ This is the DMCA email for on the DMCA page. If this config value is present, a
 - 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>.
+Hash router means that every page is linked with a hash like so: `https://example.com/#/browse`.
 
 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.
 
@@ -87,7 +87,7 @@ Setting this configuration value to `true` will enable the history-router.
 
 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.
+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/) image for deployment.
 
 Backend URL must **not** end with a slash.
 
@@ -128,6 +128,13 @@ When onboarding is enabled using `VITE_HAS_ONBOARDING`. This link will be used t
 
 If omitted, this will still show the proxy onboarding screen, just without an documentation link for the proxy.
 
+### `VITE_ALLOW_AUTOPLAY`
+
+- Type: `boolean`
+- Default: `false`
+
+Whether to allow autoplay for users that use the host provided proxies.
+
 ### `VITE_DISALLOWED_IDS`
 
 - Type: `string`
@@ -144,7 +151,7 @@ The list is comma separated, you can add as many as needed.
 
 - Type: `string`
 - Default: `""`
-- Example: <code style="overflow-wrap: anywhere">"google.com:example.com,123movies.com:flixhq.to"</code>
+- Example: `"google.com:example.com,123movies.com:flixhq.to"`
 
 Sometimes you want to proxy a CDN. This is how you can easily replace a CDN URL with your own.
 
@@ -155,15 +162,16 @@ The format is `<beforeA>:<afterA>,<beforeB>:<afterB>,...`
 - 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 [Turnstile key](https://dash.cloudflare.com/sign-up?to=/:account/turnstile) 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.
+[The proxy workers will need to be configured to accept these captcha tokens](../proxy/configuration.mdx#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**.
-::
+<Caution>
+  These configuration keys are specific to environment variables, they **only**
+  work as environment variables **set at build time**.
+</Caution>
 
 ### `VITE_PWA_ENABLED`
 
@@ -173,9 +181,10 @@ The [Turnstile key](https://dash.cloudflare.com/sign-up?to=/:account/turnstile){
 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.
-::
+<Warning>
+  Make sure you know what you're doing before enabling this, it **cannot be
+  disabled** after you've set it up once.
+</Warning>
 
 ### `VITE_GA_ID`
 
@@ -191,7 +200,7 @@ The Google Analytics ID for tracking user behavior. If omitted, no tracking will
 - 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 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.
 
@@ -200,8 +209,8 @@ The value must include the protocol (HTTP/HTTPS) but must **not** end with a sla
 - 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).
+Whether to enable [OpenSearch](https://developer.mozilla.org/en-US/docs/Web/OpenSearch), 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.
-::
+<Warning>
+  This field is case sensitive, make sure you use the correct casing.
+</Warning>

pages/client/deploy.mdx

@@ -6,21 +6,23 @@ title: 'Deploy'
 
 ## 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. Click [here](https://github.com/movie-web/movie-web/fork) to fork the movie-web Github repository
+1. Click [here](https://vercel.com/) to go to Vercel
 1. Sign in using either a GitHub, GitLab, or Bitbucket.
-1. Follow the instructions to create a repository for movie-web.
+1. Clicking the "New Project" button on the top right of your dashboard and following the steps to create a new project for your self hosted version of movie web.
+1. After clicking it, you'll be presented with a list of Git repositories that the Git account you've signed up with has write access to. 
+![image](https://github.com/movie-web/docs/assets/115524074/f0186018-4499-4c29-9d04-f6c421811704)
+1. Select your own fork of the movie-web Github repository.
 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.
+   - `VITE_TMDB_READ_API_KEY`: Enter your TMDB Read Access Token here. Please read [the TMDB page](./tmdb.mdx) 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](../client/configuration.mdx) for details. Make sure to not have a slash at the end of the URL.
+![Screenshot 2024-04-07 at 14-55-24 New Project – Vercel](https://github.com/movie-web/docs/assets/115524074/a584ac1d-6e15-4618-8bb2-988985def3e0)
 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).
@@ -34,14 +36,14 @@ title: 'Deploy'
 
    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.
+5. Put your TMDB Read Access Token inside the quotes of `VITE_TMDB_READ_API_KEY: ""`. Please read [the TMDB page](./tmdb.mdx) 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](../client/configuration.mdx) 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"}.
+   - Etc, [there are lots of options](https://www.staticwebsitehosting.org/).
 9. Congrats! You have your own version of movie-web hosted.
 
 ## Method 3 - Docker Compose - Home Network
@@ -74,8 +76,8 @@ services:
 
    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`.
+4. Put your TMDB Read Access Token inside the quotes of `TMDB_READ_API_KEY: ""`. Please read [the TMDB page](./tmdb.mdx) on how to get an API key.
+5. Uncomment and add any [additional environment variables](configuration.mdx) 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.
 

pages/client/index.tsx

@@ -0,0 +1,3 @@
+import { createRedirect } from '@neato/guider/client';
+
+export default createRedirect({ to: '/client/introduction' });

pages/client/introduction.mdx

@@ -8,10 +8,10 @@ The client is what users sees when navigating to your domain, it's the main part
 
 ## 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).
+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](../self-hosting/about-pwa.mdx).
 
 ## 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.
+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](./deploy.mdx#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).
+You can view all of the configuration options on the [configurations page](./configuration.mdx).

pages/client/tmdb.mdx

@@ -4,11 +4,11 @@ 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.
+In order to search for movies and TV shows, we use an API called ["The Movie Database" (TMDB)](https://www.themoviedb.org/). For your client to be able to search, you need to generate an API key for yourself.
 
-::alert{type="info"}
+<Note>
 The API key is **free**, you just need to create an account.
-::
+</Note>
 
 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.

pages/client/upgrade.mdx

@@ -11,40 +11,50 @@ Keeping your instance up-to-date with the latest features and bug fixes can enha
 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. Create a [personal access token](https://docs.catalyst.zoho.com/en/tutorials/githubbot/java/generate-personal-access-token) and add to [repository's secret](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository) as `PAT`
-3. Paste the below file into your repository's root `/.github/workflows` directory
 
-```yaml
-# File: .github/workflows/sync.yml
-name: Sync fork
+<Warning>This upgrade method will only work if your repository is a fork!</Warning>
 
-on:
+<Steps>
+  <Steps.Step>
+    If you have not already, click [here](https://github.com/movie-web/movie-web/fork) to fork the movie-web Github repository.
+  </Steps.Step>
+  <Steps.Step>
+    Paste the below file into your repository's root `/.github/workflows` directory
+
+    ```yaml
+    # File: .github/workflows/sync.yml
+    name: Sync fork
+
+    permissions:
+      contents: write
+
+    on:
       schedule:
-  - cron: "0 * * * *" # Run the job every hour
-  push:
-    branches:
-    - "*"
-    paths:
-    - .github/workflows/sync.yml
+        - cron: "0 0 * * *"
+      workflow_dispatch:
 
-jobs:
+    jobs:
       sync:
+        name: Sync fork
         runs-on: ubuntu-latest
+        if: ${{ github.event.repository.fork }}
+
         steps:
-    - uses: actions/checkout@v3
-    - run: gh repo sync <OWNER>/<FORK> # Replace the placeholders within the < >
+          - name: Checkout code
+            uses: actions/checkout@v4
+
+          - name: Sync fork
+            run: gh repo sync ${{ github.repository }}
             env:
               GH_TOKEN: ${{ github.token }}
-    - uses: gautamkrishnar/keepalive-workflow@v1
-```
-::alert{type="info"}
-Github action authored by [Toon](https://github.com/Toon-arch)
-::
 
-4. Replace the `<OWNER>` placeholder with the GitHub username of the account that owns the fork.
-5. Replace the `<FORK>` placeholder with the repository name of your fork.
-6. Commit and push the changes to your repository.
+          - uses: gautamkrishnar/keepalive-workflow@v1
+    ```
+  </Steps.Step>
+  <Steps.Step>
+    Commit and push the changes to your repository.
+  </Steps.Step>
+</Steps>
 
 Your instance should now be automatically updated to the latest version.
 
@@ -64,7 +74,7 @@ git push -f # Force push to your origin main branch
 
 ## 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).
+You will need the latest version of the proxy worker. Redeploy a new worker using [our self-hosting guide](../proxy/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.
 

pages/extra/index.tsx

@@ -0,0 +1,3 @@
+import { createRedirect } from '@neato/guider/client';
+
+export default createRedirect({ to: '/extra/streaming' });

pages/extra/selfhost.mdx

@@ -0,0 +1,95 @@
+### Guide to full Self-Deployment of movie-web with Docker Compose
+
+1. **Install Docker and Docker Compose:**
+   
+   Ensure that Docker and Docker Compose are installed on your system. You can follow the official Docker documentation for installation instructions:
+   - [Install Docker](https://docs.docker.com/get-docker/)
+
+2. **Create a Docker Compose file:**
+
+   Create a new file named `docker-compose.yml` in your project directory and paste the following content into it:
+
+   ```yaml
+   version: '3.8'
+
+   services:
+     postgres:
+       image: postgres
+       restart: unless-stopped
+       environment:
+         POSTGRES_USER: movie_web_user
+         POSTGRES_DB: movie_web_backend
+         POSTGRES_PASSWORD: YourPasswordHere
+       networks:
+         - movie-web-network
+
+     movie-web-backend:
+       image: ghcr.io/movie-web/backend:latest
+       restart: unless-stopped
+       environment:
+         MWB_SERVER__CORS: "https://movie-backend.example.tld https://movie.example.tld"
+         MWB_SERVER__PORT: 8080
+         MWB_POSTGRES__CONNECTION: postgresql://movie_web_user:YourPasswordHere@postgres:5432/movie_web_backend
+         MWB_CRYPTO__SESSION_SECRET: 32CHARACTERLONGSECRET
+         MWB_META__NAME: Server name
+         MWB_META__DESCRIPTION: Server Description
+         MWB_POSTGRES__MIGRATE_ON_BOOT: "true"
+         MWB_SERVER__TRUSTPROXY: "true"
+         MWB_SERVER__TRUSTCLOUDFLARE: "true"
+         # This is needed to resolve errors running migrations on some platforms - does not affect the application 
+         MIKRO_ORM_MIGRATIONS_DISABLE_FOREIGN_KEYS: "false"
+       ports:
+         - "8080:8080"
+       depends_on:
+         - postgres
+       networks:
+         - movie-web-network
+
+     movie-web-frontend:
+       build:
+         context: https://github.com/movie-web/movie-web.git
+         args:
+           TMDB_READ_API_KEY: "YourTMDBReadAPIKeyHere"
+           CORS_PROXY_URL: "https://cors.example.tld https://second.cors.example.tld"
+           BACKEND_URL: "https://backend.example.tld"
+           DMCA_EMAIL: "YourEmail"
+           PWA_ENABLED: "true"
+           APP_DOMAIN: "YourDomainHere"
+           OPENSEARCH_ENABLED: "true"
+           GA_ID: "Google ID Here"
+       ports:
+         - "80:80"
+       networks:
+         - movie-web-network
+       restart: unless-stopped
+
+     movie-web-proxy:
+       image: ghcr.io/movie-web/simple-proxy:latest
+       ports:
+         - "3000:3000"
+       networks:
+         - movie-web-network
+       restart: unless-stopped
+
+   networks:
+     movie-web-network:
+       driver: bridge
+    ```
+    **Important:** 
+    * Replace `YourPasswordHere` with your secure database password.
+    * Generate a strong session secret and replace `32CharacterLongStringHere`.
+    * Replace `TMDBReadAPIKey` with your api key learn more [here](../client/tmdb.mdx).
+    * replace `yourDomainHere` with whatever you'll be using to access your main site, like movie-web.app
+    * replace `meta__name` and `meta__description`
+2.  **Start the Backend:**  Open a terminal in the directory containing `docker-compose.yml` and execute:
+
+    ```bash
+    docker compose up --detach 
+    ```
+**Accessing Your Backend**
+
+Your services should be accessible on `(YourPrivateIP):port`. To share it outside your local network, you'll need to configure port forwarding or cloudflared tunnel. 
+
+**Optional: Implementing a Reverse Proxy**
+
+To enhance your SSL and domain configuration, it's advisable to establish a reverse proxy, such as Nginx. For an optimal choice in this regard, Cloudflare Zero Trust Tunnel is recommended. You can find more information [here](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/get-started/create-remote-tunnel/).

pages/extra/streaming.mdx

@@ -6,32 +6,33 @@ title: 'Streaming'
 
 This page explains all the different ways you can enable movie-web to stream your favorite movies & TV shows, each with their own pros and cons.
 
-<!-- ## Method 1 - Browser extension
+{/* ## Method 1 - Browser extension
 
 The movie-web browser extension is the easiest way to be able to watch media with fast streaming speeds, it is available for both [Chrome] and [Firefox].
 
 This method is great if you only use movie-web on your computer. If you use a mobile device or smart TV, you'll unfortunately have to stick to using a proxy since these devices don't usually support browser extensions.
 
-Since this method uses your own IP, it is undetectable by streaming services, so you can use it to watch your favorite shows without worrying about getting blocked by their servers. -->
+Since this method uses your own IP, it is undetectable by streaming services, so you can use it to watch your favorite shows without worrying about getting blocked by their servers.
+*/}
 
 ## Method 1 - Self-hosted proxy
 
-Self-hosting a proxy is an easy way to get faster streaming speeds, [we have a guide](../2.proxy/1.deploy.md) that explains how to set up one for **free**.
+Self-hosting a proxy is an easy way to get faster streaming speeds, [we have a guide](../proxy/deploy.mdx) that explains how to set up one for **free**.
 
 This method is recommended if you want to host a proxy for your friends and or family to use, as it is the faster than using the public proxy and the most reliable way to stream media at the moment.
 
-<!-- This method is recommended if you want to host a proxy for your friends and family to use, or if you want to use movie-web on a device that doesn't support the [browser extension](#method-1---browser-extension), such as a smart TV or mobile device. -->
+{/* This method is recommended if you want to host a proxy for your friends and family to use, or if you want to use movie-web on a device that doesn't support the [browser extension](#method-1---browser-extension), such as a smart TV or mobile device.*/}
 
-1. Set up a proxy using one of our [guides](../2.proxy/1.deploy.md#deploying-the-proxy), [though we recommend Netlify](../2.proxy/1.deploy.md#method-1---netlify-easy).  
-2. Once that's done, go to the **Connections** section of the **Settings page** on your movie-web instance of chocie. 
+1. Set up a proxy using one of our [guides](../proxy/deploy.mdx), [though we recommend Netlify](../proxy/deploy.mdx#method-1-netlify-easy).  
+2. Once that's done, go to the **Connections** section of the **Settings page** on your movie-web instance of choice. 
 3. Enable `Use custom proxy workers` if it's not already enabled.  
 4. Add a new custom proxy by clicking `Add new worker`.
 5. Copy the URL of the proxy you deployed before, and paste it into the empty text box.
 ![Example of settings page](/assets/proxy-url-example.gif)
 
-::alert{type="info"}
-If you're self-hosting the client, you can use the [`VITE_CORS_PROXY_URL`](../3.client/3.configuration.md#vite_cors_proxy_url) variable to set the proxy URL for everyone who uses your client.
-::
+<Note>
+If you're self-hosting the client, you can use the [`VITE_CORS_PROXY_URL`](../client/configuration.mdx#vite-cors-proxy-url) variable to set the proxy URL for everyone who uses your client.
+</Note>
 
 ## Method 2 - Public proxy
 
@@ -39,4 +40,4 @@ The public proxy is the easiest way to get started with movie-web as it is the d
 
 If you are using the main website, then you are most likely already using the public proxy. Unfortunately you will most likely be getting slower speeds and your video might be buffering more often, which is why we recommend using a self-hosted proxy if you can.
 
-This is not the case with self-hosted clients, there is no proxy set up by default on self-hosted clients and you will need to [set up one yourself](../2.proxy/1.deploy.md).
+This is not the case with self-hosted clients, there is no proxy set up by default on self-hosted clients and you will need to [set up one yourself](../proxy/deploy.mdx).

pages/index.tsx

@@ -0,0 +1,67 @@
+import {
+  Button,
+  Card,
+  CardGrid,
+  GuiderLayout,
+  Hero,
+} from '@neato/guider/client';
+
+export default function LandingPage() {
+  return (
+    <GuiderLayout meta={{ layout: 'page' }}>
+      <Hero>
+        <Hero.Title>movie-web</Hero.Title>
+        <Hero.Subtitle>
+          A simple and no-BS app for watching movies and TV shows. Totally free
+          and open source, forever.
+        </Hero.Subtitle>
+        <Hero.Actions>
+          <Button to="/self-hosting/hosting-intro">Get Started</Button>
+          <Button to="https://github.com/movie-web/movie-web" type="secondary">
+            Open on GitHub →
+          </Button>
+        </Hero.Actions>
+      </Hero>
+      <CardGrid>
+        <Card icon="mdi:server-network" title="Easy to host">
+          Can be easily hosted on any static website host.
+        </Card>
+        <Card icon="material-symbols:hangout-video-off" title="No Ads">
+          movie-web will never show ads, enjoy watching without interruptions.
+        </Card>
+        <Card icon="ic:baseline-ondemand-video" title="Custom Player">
+          Enjoy a fully custom video player including streaming integration,
+          subtitle customization and easy TV season navigation.
+        </Card>
+        <Card icon="mdi:content-save" title="Saves your progress">
+          Will remember your progress in movies and TV shows, so you can easily
+          continue where you left off.
+        </Card>
+        <Card icon="mdi:bookmark" title="Bookmarking">
+          Allows you to bookmark your favorite movies and TV shows, so you can
+          easily find them again.
+        </Card>
+        <Card icon="mdi:cloud-refresh" title="Syncing across devices">
+          Enjoy uninterrupted streaming as your progress, proxies, and bookmarks
+          sync effortlessly across all your devices.
+        </Card>
+        <Card icon="mdi:power-plug-outline" title="Modular by design">
+          Mix and match different parts of the movie-web service, host your
+          backend or use ours, it&apos;ll work either way.
+        </Card>
+        <Card icon="mdi:flag" title="Multiple Languages">
+          Supports over 25 languages, including English, German, French,
+          Spanish, Italian, Czech, Hindi, Arabic, Hebrew and more.
+        </Card>
+        <Card icon="mdi:brush-variant" title="Customizable">
+          Supports various themes, subtitle colors and subtitle sizes so you can
+          make it look however you want.
+        </Card>
+        <Card icon="mdi:cellphone" title="Progressive Web App Support">
+          Supports PWA, so you can install it on your phone and use it just like
+          a native app.
+        </Card>
+      </CardGrid>
+    </GuiderLayout>
+  );
+}

pages/instances.mdx

@@ -1,39 +1,40 @@
 ---
 title: 'Instances'
-icon: 'mdi:web'
 ---
 
 # Instances
 
-This page showcases movie-web instances hosted by the community and other alternative sites. If you want to add your instance to this list, please open a pull request on [GitHub](https://github.com/movie-web/docs).
+This page showcases movie-web instances hosted by the community and other alternative sites. 
 
 ## Community Instances
 
-The community maintains these trusted instances, meaning they are likely to be up-to-date. Remember that since these are volunteer instances, they might be down or stop working at any time. If you want to be sure you have access to movie-web, consider [hosting your own instance](../1.self-hosting/1.hosting-intro.md).
+The community maintains these trusted instances, which are likely to be up-to-date. Remember that since these are volunteer instances, they might be down or stop working anytime. If you want to be sure you have access to movie-web, consider [hosting your own instance](../self-hosting/hosting-intro.mdx).
+
+**Instances marked with a 💾 have set up a backend, making it possible to sync your data across multiple devices.**
+
+**Additionally, instances with a 🌐 use the community backend hosted by Lonelil, which has all the original movie-web.app data!**
 
-**Instances marked with a 💾 have set up a backend, making it possible to sync your data across multiple devices.**<br />
-**Additionally, instances with a 🌐 use the community backend hosted by Lonelil, which has all the original movie-web.app data!**<br />
 **Moreover, instances marked with a 📱 have full PWA compatibility, enabling usage on your mobile device as if it were a native application.**
 
 |                    Instance                       |                                        Host                                         |  Status  |
 | :------------------------------------------------ | :---------------------------------------------------------------------------------- | :------- |
-| [mw.lonelil.com](https://mw.lonelil.com)          | [lonelil - Partner](https://github.com/lonelil)                                     | 💾🌐📱     |
+| [mw.lonelil.ru](https://mw.lonelil.ru)            | [lonelil - Partner](https://github.com/lonelil)                                     | 💾🌐📱     |
 | [watch.qtchaos.de](https://watch.qtchaos.de)      | [chaos - Project Lead](https://github.com/qtchaos)                                  | 💾📱       |
-| [bmov](https://bmov.vercel.app)                   | [TheScreechingBagel - Mod](https://github.com/TheScreechingBagel)                   | 💾🌐      |
+| [bmov.app](https://bmov.app)                   | [TheScreechingBagel - Mod](https://github.com/TheScreechingBagel)                   | 💾🌐      |
 | [stream.thehairy.me](https://stream.thehairy.me)  | [thehairy - Mod](https://github.com/thehairy)                                       | 💾🌐📱     |
 | [movie-web-me](https://movie-web-me.vercel.app)   | [Isra - Contributor](https://github.com/zisra)                                      | 💾🌐      |
 | [scootydooter](https://scootydooter.vercel.app)   | [Toon - Contributor](https://github.com/Toon-arch)                                  | 💾🌐📱     |
-| [sudo-flix.lol](https://sudo-flix.lol)            | [itzCozi - Community Self Hoster](https://github.com/sudo-flix)                     | 💾📱      |
+| [sudo-flix.lol](https://sudo-flix.lol)            | [itzCozi - Contributor](https://github.com/sussy-code)                              | 💾📱      |
 | [movie-web.x](https://movie-web.x)                | [Unstoppable Domains](https://unstoppabledomains.com) and [IPFS](https://ipfs.tech) | 💾       |
 
-::alert{type="info"}
+<Note>
 [movie-web.x](https://movie-web.x) is only accessible using Brave, Opera or installing an [extension](https://unstoppabledomains.com/extension) to resolve unstoppable domains.
 If you cannot access [movie-web.x](https://movie-web.x) try using a gateway: [Cloudflare](https://cloudflare-ipfs.com/ipns/k51qzi5uqu5diql6nkzokwdvz9511dp9itillc7xhixptq14tk1oz8agh3wrjd), [dweb.link](https://k51qzi5uqu5diql6nkzokwdvz9511dp9itillc7xhixptq14tk1oz8agh3wrjd.ipns.dweb.link), or [cf-ipfs](https://k51qzi5uqu5diql6nkzokwdvz9511dp9itillc7xhixptq14tk1oz8agh3wrjd.ipns.cf-ipfs.com)
-::
+</Note>
 
 ## Community Backend
 
-Our partner, Lonelil, has kindly offered to host a movie-web backend with a copy of the original data from the movie-web.app. You can access this backend at: `https://mw-backend.lonelil.com` or `https://mw-backend.lonelil.ru`
+Our partner, Lonelil, has kindly offered to host a movie-web backend with a copy of the original data from the movie-web.app. You can access this backend at: `https://mw-backend.lonelil.ru`
 
 You **do not** have to set up a new account; you can use your previous passphrase from movie-web, and all of your data will be there!
 
@@ -41,7 +42,7 @@ You **do not** have to set up a new account; you can use your previous passphras
 
 These sites are not related to movie-web but are good enough to switch to if the official instances are down. You can also use [FMHY](https://fmhy.pages.dev/videopiracyguide) to find even more options.
 
-- [watch.lonelil.com](https://watch.lonelil.com)
+- [watch.lonelil.ru](https://watch.lonelil.ru)
 - [themoviearchive.site](https://themoviearchive.site)
 - [braflix.video](https://braflix.video)
 - [watch.streamflix.one](https://watch.streamflix.one)

pages/proxy/changelog.mdx

@@ -18,7 +18,7 @@ title: 'Changelog'
 
 # Version 2.1.0
 
-- [Added Turnstile integration](2.configuration.md#turnstile_secret) to secure your workers from abuse.
+- [Added Turnstile integration](./configuration.mdx#turnstile-secret) to secure your workers from abuse.
 
 # Version 2.0.1
 

pages/proxy/configuration.mdx

@@ -4,7 +4,7 @@ title: 'Configuration'
 
 # Proxy Config Reference
 
-Adding environment variables is different for every platform, [here's a guide on how to add environment variables on Cloudflare](https://developers.cloudflare.com/workers/configuration/environment-variables/#add-environment-variables-via-the-dashboard){target="\_blank"}. You'll have to do some research on your own if you aren't hosting the proxy on Cloudflare.
+Adding environment variables is different for every platform, [here's a guide on how to add environment variables on Cloudflare](https://developers.cloudflare.com/workers/configuration/environment-variables/#add-environment-variables-via-the-dashboard). You'll have to do some research on your own if you aren't hosting the proxy on Cloudflare.
 
 # Reference
 
@@ -13,10 +13,11 @@ Adding environment variables is different for every platform, [here's a guide on
 - Type: `string`
 - Default: `""`
 
-Turnstile secret key from the [Cloudflare dashboard](https://dash.cloudflare.com/sign-up?to=/:account/turnstile){target="\_blank"}.
-::alert{type="warning"}
-Keep in mind that you will also need to [configure the Turnstile key on the client](../3.client/3.configuration.md#vite_turnstile_key) and **configure the [`JWT_SECRET`](#jwt_secret) below.**
-::
+Turnstile secret key from the [Cloudflare dashboard](https://dash.cloudflare.com/sign-up?to=/:account/turnstile).
+
+<Warning>
+Keep in mind that you will also need to [configure the Turnstile key on the client](../client/configuration.mdx#vite-turnstile-key) and **configure the [`JWT_SECRET`](#jwt-secret) below.**
+</Warning>
 
 ### `JWT_SECRET`
 

pages/proxy/deploy.mdx

@@ -8,7 +8,7 @@ title: 'Deploy'
 
 Netlify has a very generous free plan, so you'll be able to host your proxy for free unless you get hundreds of users.
 
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/movie-web/simple-proxy){target="\_blank"}
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/movie-web/simple-proxy)
 
 1. Create a GitHub account at https://github.com/signup if you don't have one already.
 1. Click on the `Deploy to Netlify` button above.
@@ -16,27 +16,27 @@ Netlify has a very generous free plan, so you'll be able to host your proxy for
 1. There should now be a `Save & Deploy` button, click it.
 1. Once the deployment is complete, click on the `Get Started` button that pops up, this will redirect you to the dashboard of your site.
 1. Click on the only site in the `Sites` section of your dashboard.
-1. Find the link of your site near the top of the page, it should look something like `https://<random-words>.netlify.app`. Right click the link, click `Copy link address`. [Now you'll just have to set up the client](../5.extra/1.streaming.md#method-1---self-hosted-proxy)!
+1. Find the link of your site near the top of the page, it should look something like `https://<random-words>.netlify.app`. Right click the link, click `Copy link address`. [Now you'll just have to set up the client](../extra/streaming.mdx#method-1-self-hosted-proxy)!
 
 ## Method 2 - Cloudflare (Easy)
 
-::alert{type="warning"}
+<Warning>
 The sources showbox and febbox do NOT work with cloudflare. Use a different host if you want those to work.
-::
+</Warning>
 
 Cloudflare has a generous free plan, so you don't need to pay anything unless you get hundreds of users.
 
-[![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/movie-web/simple-proxy){target="\_blank"}
+[![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/movie-web/simple-proxy)
 
 1. Create a GitHub account at https://github.com if you don't have one.
 1. Click the `Deploy with workers` button above.
 1. Click the `Authorize Workers` button to authorize Cloudflare to talk to GitHub.
 1. Authorize Cloudflare Workers in the GitHub page that pops up.
 1. Follow the instructions to configure your Cloudflare account. Select `I have an account` if you have a Cloudflare account already, otherwise follow the link to create one.
-1. Click the link to [`Workers Dashboard`](https://dash.cloudflare.com/sign-up?to=/:account/workers-and-pages){target="\_blank"} to find your account ID.
+1. Click the link to [`Workers Dashboard`](https://dash.cloudflare.com/sign-up?to=/:account/workers-and-pages) to find your account ID.
    1. You can copy your account ID from the URL e.g. https://dash.cloudflare.com/ab7cb454c93987b6343350d4e84c16c7/workers-and-pages/create where `ab7cb454c93987b6343350d4e84c16c7` is the account ID.
    1. Paste the account ID into the text box on the original Cloudflare workers page.
-1. Click the link to [`My Profile`](https://dash.cloudflare.com/profile/api-tokens){target="\_blank"}, to create an API token.
+1. Click the link to [`My Profile`](https://dash.cloudflare.com/profile/api-tokens), to create an API token.
    1. Click `Create Token`.
    1. Select `Use template` next to `Edit Cloudflare Workers`.
    1. Under `Account Resources`, select `Include` and your account under the dropdown.
@@ -48,15 +48,15 @@ Cloudflare has a generous free plan, so you don't need to pay anything unless yo
 1. Click `Fork the Repository` and follow the instructions to enable workflows.
 1. Click `Deploy` to deploy to Cloudflare Workers.
 1. Congratulations! Your worker is now deploying. Please wait for the GitHub Action to build and publish your worker.
-1. You can click the [`Worker dash`](https://dash.cloudflare.com/sign-up?to=/:account/workers-and-pages){target="\_blank"} and `GitHub repo` buttons to see the status of the deploy.
-1. When the worker has deployed, you will need to take note of the URL. This can be found on Cloudflare under [Workers and Pages -> Overview](https://dash.cloudflare.com/sign-up?to=/:account/workers-and-pages){target="\_blank"} -> Proxy.
-1. Use the URL you took note of and [set up a custom proxy in the client](../5.extra/1.streaming.md#method-1---self-hosted-proxy).
+1. You can click the [`Worker dash`](https://dash.cloudflare.com/sign-up?to=/:account/workers-and-pages) and `GitHub repo` buttons to see the status of the deploy.
+1. When the worker has deployed, you will need to take note of the URL. This can be found on Cloudflare under [Workers and Pages -> Overview](https://dash.cloudflare.com/sign-up?to=/:account/workers-and-pages) -> Proxy.
+1. Use the URL you took note of and [set up a custom proxy in the client](../extra/streaming.mdx#method-1-self-hosted-proxy).
 
 ## Method 2 - Cloudflare (Manual)
 
-::alert{type="warning"}
+<Warning>
 The sources showbox and febbox do NOT work with cloudflare. Use a different host if you want those to work.
-::
+</Warning>
 
 1. Login to your Cloudflare account if you have one, otherwise create one [here](https://dash.cloudflare.com/sign-up?to=/:account/workers-and-pages)
    1. If you are signing up for an account, make sure to verify your email before going further!
@@ -88,16 +88,16 @@ Railway offers you $5 of credit once you verify your account, which is enough to
 1. If a `Configure` button is displayed, click on it and allow Railway to access your GitHub account.
 1. The `Deploy` button at the bottom of the template should be active, click on it.
 1. Once the proxy has deployed, copy the URL from the `Deployments` page.
-1. Congratulations! You have deployed the proxy, [you can now set up the client](../5.extra/1.streaming.md#method-1---self-hosted-proxy).
+1. Congratulations! You have deployed the proxy, [you can now set up the client](../extra/streaming.mdx#method-1-self-hosted-proxy).
 
 ## Method 4 - Docker
 
-::alert{type="warning"}
+<Warning>
 Experience with Docker, domains and web hosting is **highly recommended** for this method. <br />
 [Deploying with Netlify](#method-1-netlify-easy) is easier and safer to do! You are exposing your server at your own risk!
-::
+</Warning>
 
-Our `simple-proxy` application is available from the GitHub Container Registry under the image [`ghcr.io/movie-web/simple-proxy:latest`](https://ghcr.io/movie-web/simple-proxy:latest){target="\_blank"} :copy-button{content="ghcr.io/movie-web/simple-proxy:latest"}
+Our `simple-proxy` application is available from the GitHub Container Registry under the image [`ghcr.io/movie-web/simple-proxy:latest`](https://ghcr.io/movie-web/simple-proxy:latest)
 
 The container exposes the HTTP port (Without TLS/SSL) as `3000/TCP`.
 

pages/proxy/index.tsx

@@ -0,0 +1,3 @@
+import { createRedirect } from '@neato/guider/client';
+
+export default createRedirect({ to: '/proxy/introduction' });

pages/self-hosting/about-pwa.mdx

@@ -6,17 +6,17 @@ title: 'PWA vs no-PWA'
 
 So that clients can have a more native app-like experience on mobile, movie-web has a function to support Progressive Web Apps (PWA). You can learn more about what a PWA is [here](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/What_is_a_progressive_web_app).
 
-In movie-web version 3, PWAs were enabled by default. Unfortunately, PWAs tend to come with caching complications that can be tricky to resolve. That's why we have **disabled** PWAs by default in movie-web version 4. If you are upgrading from version 3, please [read our upgrade guide](../3.client/5.upgrade.md) for more information.
+In movie-web version 3, PWAs were enabled by default. Unfortunately, PWAs tend to come with caching complications that can be tricky to resolve. That's why we have **disabled** PWAs by default in movie-web version 4. If you are upgrading from version 3, please [read our upgrade guide](../client/upgrade.mdx) for more information.
 
-::alert{type="warning"}
+<Warning>
 Enabling PWAs means that you cannot disable it again - Please only proceed if you know what you are doing!
-::
+</Warning>
 
 ## If you are running movie-web on a hosting platform such as Vercel
 
-If your hosting is building movie-web from the source, you can enable PWAs using the [`VITE_PWA_ENABLED`](../3.client/3.configuration.md#vite_pwa_enabled) environment variable.
+If your hosting is building movie-web from the source, you can enable PWAs using the [`VITE_PWA_ENABLED`](../client/configuration.mdx#vite-pwa-enabled) environment variable.
 
-Setting [`VITE_PWA_ENABLED`](../3.client/3.configuration.md#vite_pwa_enabled) to `true` will generate a [service worker file](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#service_worker) and a [web app manifest](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#the_web_app_manifest) which enable the website to be installed from a [web browser both on Desktop and on Mobile](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#installation_from_the_web).
+Setting [`VITE_PWA_ENABLED`](../client/configuration.mdx#vite-pwa-enabled) to `true` will generate a [service worker file](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#service_worker) and a [web app manifest](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#the_web_app_manifest) which enable the website to be installed from a [web browser both on Desktop and on Mobile](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#installation_from_the_web).
 
 ## If you are running movie-web using the .zip files
 

pages/self-hosting/hosting-intro.mdx

@@ -4,33 +4,33 @@ title: 'Start self-hosting'
 
 # How to self-host
 
-::alert{type="info"}
-We provide support on a case-by-case basis. If you have any questions, feel free to ask in our [Discord server](https://movie-web.github.io/links/discord).
-::
+<Note>
+  We provide support on a case-by-case basis. If you have any questions, feel free to ask in our [Discord server](https://movie-web.github.io/links/discord).
+</Note>
 
 Since movie-web has many different components, there are a few configurations of how you can host it. Each of these configurations has their own benefits, whether that be having complete control over your data or customizing your experience.
-**If you don't know what to choose, go with [method 1.](#method-1---only-host-the-frontend)**
+**If you don't know what to choose, go with [method 1.](#method-1-only-host-the-frontend)**
 
 ## Method 1 - Only host the frontend
 
 With this method, you only host the essential parts that make movie-web work. But keep using the account server from official movie-web.
 This method is the easiest to self-host and is recommended for most users.
 
-1. [Set up the Proxy!](../2.proxy/1.deploy.md)
-2. [Set up the Client!](../3.client/1.deploy.md)
+1. [Set up the Proxy!](../proxy/deploy.mdx)
+2. [Set up the Client!](../client/deploy.mdx)
 
 ## Method 2 - Only host the account server
 
 If you want to own your own data, it's possible to self-host just the account server and nothing else.
 This method is only recommended if you have experience hosting databases or other similar stateful applications.
 
-1. [Set up the Backend!](../4.backend/1.deploy.md)
-2. [Configure the Client!](../3.client/1.deploy.md)
+1. [Set up the Backend!](../backend/deploy.mdx)
+2. [Configure the Client!](../client/deploy.mdx)
 
 ## Method 3 - Host everything
 
 If you want an instance that's completely isolated from the official movie-web. You can self-host all of the parts yourself, though this method is not recommended for inexperienced hosters.
 
-1. [Set up the Proxy!](../2.proxy/1.deploy.md)
-2. [Set up the Backend!](../4.backend/1.deploy.md)
-3. [Set up the Client!](../3.client/1.deploy.md)
+1. [Set up the Proxy!](../proxy/deploy.mdx)
+2. [Set up the Backend!](../backend/deploy.mdx)
+3. [Set up the Client!](../client/deploy.mdx)

pages/self-hosting/index.tsx

@@ -0,0 +1,3 @@
+import { createRedirect } from '@neato/guider/client';
+
+export default createRedirect({ to: '/self-hosting/hosting-intro' });

pages/self-hosting/troubleshooting.mdx

@@ -12,13 +12,13 @@ There is always a possibility for something to go wrong while trying to deploy y
 
 If the test succeeds, then your TMDB configuration is correct and the issue is with something else.
 
-If the test fails, then you should recheck your credentials. [**Make sure you're using the Read Access Token, not the normal API Key.**](https://www.themoviedb.org/settings/api#v4_auth_key){target="\_blank"}
+If the test fails, then you should recheck your credentials. [**Make sure you're using the Read Access Token, not the normal API Key.**](https://www.themoviedb.org/settings/api#v4_auth_key)
 
 ## Everything I try to watch fails
 
 **This is likely a misconfigured Worker.** To make sure that the Workers are the issue, visit `/admin` or `/#/admin`, then click on the `Test workers` button.
 
-You should have at least 1 Worker registered, if you don't, you should [deploy a worker](../2.proxy/1.deploy.md#method-1---cloudflare-easy) and [set it up in the client](../3.client/3.configuration.md#vite_cors_proxy_url).
+You should have at least 1 Worker registered, if you don't, you should [deploy a worker](../proxy/deploy.mdx) and [set it up in the client](../client/configuration.mdx#vite-cors-proxy-url).
 
 If any Worker fails the test, you should double check its URL and see if its up to date with the latest updates.
 
@@ -26,19 +26,19 @@ If any Worker fails the test, you should double check its URL and see if its up
 
 **This is likely misconfigured or broken backend.** To verify that the backend is the issue, visit `/admin` or `/#/admin`, then click on the `Test backend` button.
 
-If the backend is online and properly configured it should display the name and version of the backend. If the name and description of the test don't match your own instance, [make sure you have your backend URL set correctly.](../3.client/3.configuration.md#vite_backend_url)
+If the backend is online and properly configured it should display the name and version of the backend. If the name and description of the test don't match your own instance, [make sure you have your backend URL set correctly.](../client/configuration.mdx#vite-backend-url)
 
-If the test gives you an error, your [backend URL configuration option](../3.client/3.configuration.md#vite_backend_url) likely has a typo.
+If the test gives you an error, your [backend URL configuration option](../client/configuration.mdx#vite-backend-url) likely has a typo.
 
 If the version that shows up on your backend is not the latest version, you should update your backend to keep up with the latest changes.
 
 ## I updated from version 3 to version 4 but I still see the old version
 
-It is likely that you haven't installed the PWA version of movie-web. Please read the [upgrade guide](../3.client/5.upgrade.md) for more details on the matter.
+It is likely that you haven't installed the PWA version of movie-web. Please read the [upgrade guide](../client/upgrade.mdx) for more details on the matter.
 
 ## I'm getting SSL issues when using a hosted postgres database
 
-You are most likely missing the [`postgres.ssl`](../4.backend/2.configuration.md#postgresssl) variable on your backend, enable it and the connection should work.
+You are most likely missing the [`postgres.ssl`](../backend/configuration.mdx#postgres-ssl) variable on your backend, enable it and the connection should work.
 
 ## Permission denied to set parameter "session_replication_role"
 

pages/self-hosting/use-backend.mdx

@@ -6,9 +6,9 @@ title: 'Configure backend'
 
 If you would like to use an alternative backend server (the server responsible for saving user data across devices) then you can specify your own URL **without needing to host your own movie-web frontend!**
 
-::alert{type="danger"}
+<Caution>
 Changing your backend server will log you out of your account - make sure you have a copy of your 12-word passphrase saved in case you need to go back!
-::
+</Caution>
 
 1. On movie-web, click the menu icon at the top right and then `Settings`.
 1. Scroll down the page to the `Connections` section.

renovate.json

@@ -1,6 +0,0 @@
-{
-  "extends": ["@nuxtjs"],
-  "lockFileMaintenance": {
-    "enabled": true
-  }
-}

theme.config.tsx

@@ -0,0 +1,94 @@
+import { defineTheme, directory, group, link, social } from '@neato/guider/theme';
+import { Logo } from './components/Logo';
+import { NextSeo } from 'next-seo';
+import coverUrl from "./public/cover.png"; 
+import faviconUrl from "./public/favicon.ico";
+
+export default defineTheme({
+  github: "movie-web/movie-web",
+  contentFooter: {
+    text: "Made with 💜",
+    editRepositoryBase: "https://github.com/movie-web/docs/blob/master",
+    socials: [
+      social.github("https://github.com/movie-web"),
+      social.discord("https://movie-web.github.io/links/discord"),
+    ]
+  },
+  meta: (pageMeta) => (
+    <NextSeo {...{
+      title: `${pageMeta.title ?? "For all your movie and TV show needs"} | movie-web`,
+      description: pageMeta.description ?? "movie-web is a free and open source streaming site, no ads, no tracking, no nonsense.",
+      openGraph: {
+        images: [{
+          url: coverUrl.src,
+        }],
+        title: `${pageMeta.title ?? "For all your movie and TV show needs"} | movie-web`,
+        description: pageMeta.description ?? "movie-web is a free and open source streaming site, no ads, no tracking, no nonsense.",
+      },
+      twitter: {
+        cardType: 'summary_large_image',
+      },
+      additionalLinkTags: [
+        {
+          href: faviconUrl.src,
+          rel: "icon",
+          type: "image/x-icon",
+        }
+      ]
+    }} />
+  ),
+  settings: {
+    logo: () => <Logo />,
+    colors: {
+      "primary": "#A476D9",
+      "primaryLighter": "#C4ADDE",
+      "primaryDarker": "#6E23C3",
+      "background": "#0C0B13",
+      "backgroundLighter": "#1A1726",
+      "backgroundLightest": "#282438",
+      "backgroundDarker": "#000000",
+      "line": "#37334C",
+      "text": "#8C899A",
+      "textLighter": "#A6A4AE",
+      "textHighlight": "#fff"
+    }
+  },
+  directories: [
+    directory("main", {
+      sidebar: [
+        link("Instances", "/instances", { icon: 'mdi:web' }),
+        group("Self-Hosting", [
+          link("Start self-hosting", "/self-hosting/hosting-intro"),
+          link("Configure backend", "/self-hosting/use-backend"),
+          link("PWA vs no-PWA", "/self-hosting/about-pwa"),
+          link("Troubleshooting", "/self-hosting/troubleshooting"),
+        ]),
+        group("Proxy", [
+          link("Introduction", "/proxy/introduction"),
+          link("Deploy", "/proxy/deploy"),
+          link("Configuration", "/proxy/configuration"),
+          link("Changelog", "/proxy/changelog"),
+        ]),
+        group("Client", [
+          link("Introduction", "/client/introduction"),
+          link("Deploy", "/client/deploy"),
+          link("TMDB API Key", "/client/tmdb"),
+          link("Configuration", "/client/configuration"),
+          link("Changelog", "/client/changelog"),
+          link("Update guide", "/client/upgrade"),
+        ]),
+        group("Backend", [
+          link("Introduction", "/backend/introduction"),
+          link("Deploy", "/backend/deploy"),
+          link("Configuration", "/backend/configuration"),
+          link("Changelog", "/backend/changelog"),
+          link("Update guide", "/backend/upgrade"),
+        ]),
+        group("Extra", [
+          link("Streaming", "/extra/streaming"),
+          link("Selfhost", "/extra/selfhost"),
+        ])
+      ]
+    })
+  ],
+});

tokens.config.ts

@@ -1,18 +0,0 @@
-import { defineTheme } from 'pinceau';
-
-export default defineTheme({
-  color: {
-    primary: {
-      50: '#F5E5FF',
-      100: '#E7CCFF',
-      200: '#D4A9FF',
-      300: '#BE85FF',
-      400: '#A861FF',
-      500: '#8E3DFF',
-      600: '#7F36D4',
-      700: '#662CA6',
-      800: '#552578',
-      900: '#441E49',
-    },
-  },
-});

tsconfig.json

@@ -1,3 +1,28 @@
 {
-  "extends": "./.nuxt/tsconfig.json"
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }