changed baseUrl

.docs/.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_size = 2
+indent_style = space

.docs/.eslintignore

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

.docs/.eslintrc.cjs

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

.docs/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.docs/.github/CODEOWNERS

@@ -0,0 +1 @@
+* @movie-web/project-leads

.docs/.github/CODE_OF_CONDUCT.md

@@ -0,0 +1 @@
+Please visit the [main document at primary repository](https://github.com/movie-web/movie-web/blob/dev/.github/CODE_OF_CONDUCT.md).

.docs/.github/CONTRIBUTING.md

@@ -0,0 +1 @@
+Please visit the [main document at primary repository](https://github.com/movie-web/movie-web/blob/dev/.github/CONTRIBUTING.md).

.docs/.github/workflows/github_pages.yml

@@ -0,0 +1,49 @@
+name: "docs-deploy"
+ 
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  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: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm build
+  
+      - name: Upload
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  deploy:
+    needs: build
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.docs/.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

.docs/.gitignore

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

.docs/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore index due to prettier removing setext headers
+*.index.md
+.github/CODEOWNERS

.docs/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true
+}

.docs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 movie-web
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

.docs/app.config.ts

@@ -1,17 +0,0 @@
-export default defineAppConfig({
-  docus: {
-    title: '@movie-web/providers',
-    description: 'For all your media scraping needs',
-    socials: {
-      github: 'movie-web/providers',
-    },
-    image: '',
-    aside: {
-      level: 0,
-      exclude: [],
-    },
-    header: {
-      logo: false,
-    },
-  },
-});

.docs/assets/css/main.css

@@ -1,3 +0,0 @@
-code > span {
-  white-space: pre;
-}

.docs/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);
+}

.docs/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>
+  );
+}

.docs/content/0.index.md

@@ -1,51 +0,0 @@
----
-title: "@movie-web/providers | For all your media scraping needs"
-navigation: false
-layout: page
----
-
-::block-hero
----
-cta:
-  - Get Started
-  - /get-started/introduction
-secondary:
-  - Open on GitHub →
-  - https://github.com/movie-web/providers
-snippet: npm i @movie-web/providers
----
-
-#title
-@movie-web/providers
-
-#description
-Easily scrape all sorts of media sites for content
-::
-
-::card-grid
-#title
-What's included
-
-#root
-:ellipsis
-
-#default
-  ::card{icon="vscode-icons:file-type-light-json"}
-  #title
-  Scrape popular streaming websites.
-  #description
-  Don't settle for just one media site for you content, use everything that's available.
-  ::
-  ::card{icon="codicon:source-control"}
-  #title
-  Multi-platform.
-  #description
-  Scrape from browser or server, whichever you prefer.
-  ::
-  ::card{icon="logos:typescript-icon-round"}
-  #title
-  Easy to use.
-  #description
-  Get started with scraping your favourite media sites with just 5 lines of code. Fully typed of course.
-  ::
-::

.docs/content/1.get-started/3.examples.md

@@ -1,5 +0,0 @@
-# Examples
-
-::alert{type="warning"}
-There are no examples yet, stay tuned!
-::

.docs/content/1.get-started/_dir.yml

@@ -1,2 +0,0 @@
-icon: ph:shooting-star-fill
-navigation.redirect: /get-started/introduction

.docs/content/2.essentials/_dir.yml

@@ -1,3 +0,0 @@
-icon: ph:info-fill
-navigation.redirect: /essentials/usage
-navigation.title: "Get started"

.docs/content/3.in-depth/_dir.yml

@@ -1,3 +0,0 @@
-icon: ph:atom-fill
-navigation.redirect: /in-depth/sources-and-embeds
-navigation.title: "In-depth"

.docs/content/4.extra-topics/_dir.yml

@@ -1,3 +0,0 @@
-icon: ph:aperture-fill
-navigation.redirect: /extra-topics/development
-navigation.title: "Extra topics"

.docs/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.

.docs/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: '/providers',
+});

.docs/nuxt.config.ts

@@ -1,21 +0,0 @@
-export default defineNuxtConfig({
-  // https://github.com/nuxt-themes/docus
-  extends: '@nuxt-themes/docus',
-
-  css: [
-    '@/assets/css/main.css',
-  ],
-
-  build: {
-    transpile: [
-      "chalk"
-    ]
-  },
-
-  modules: [
-    // https://github.com/nuxt-modules/plausible
-    '@nuxtjs/plausible',
-    // https://github.com/nuxt/devtools
-    '@nuxt/devtools'
-  ]
-})

.docs/package.json

@@ -1,22 +1,28 @@
 {
   "name": "providers-docs",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
-    "dev": "nuxi dev",
-    "build": "nuxi build",
-    "generate": "nuxi generate",
-    "preview": "nuxi preview",
-    "lint": "eslint .",
-    "preinstall": "npx -y only-allow pnpm"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix"
   },
   "devDependencies": {
-    "@nuxt-themes/docus": "^1.13.1",
-    "@nuxt/devtools": "^1.0.1",
-    "@nuxt/eslint-config": "^0.1.1",
-    "@nuxtjs/plausible": "^0.2.1",
-    "@types/node": "^20.4.0",
-    "eslint": "^8.44.0",
-    "nuxt": "^3.6.2"
+    "@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",
+    "prettier": "^3.1.1",
+    "typescript": "5.4.3"
+  },
+  "dependencies": {
+    "@neato/guider": "^0.1.5",
+    "next": "^14.1.4",
+    "next-seo": "^6.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

.docs/pages/404.tsx

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

.docs/pages/_app.tsx

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

.docs/pages/api-reference/ProviderControlsRunAll.md

@@ -6,8 +6,10 @@ You can attach events if you need to know what is going on while it is processin
 ## Example
 
 ```ts
+import { ScrapeMedia, targets } from '@movie-web/providers';
+
 // media from TMDB
-const media = {
+const media : ScrapeMedia = {
   type: 'movie',
   title: 'Hamilton',
   releaseYear: 2020,

.docs/pages/api-reference/ProviderControlsrunSourceScraper.md

@@ -5,10 +5,10 @@ Run a specific source scraper and get its emitted streams.
 ## Example
 
 ```ts
-import { SourcererOutput, NotFoundError } from '@movie-web/providers';
+import { ScrapeMedia , SourcererOutput, NotFoundError } from '@movie-web/providers';
 
 // media from TMDB
-const media = {
+const media : ScrapeMedia = {
   type: 'movie',
   title: 'Hamilton',
   releaseYear: 2020,

.docs/pages/api-reference/index.tsx

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

.docs/pages/essentials/customize-providers.mdx

@@ -71,4 +71,4 @@ const providers = buildProviders()
     }
   })
   .build();
-```
+```

.docs/pages/essentials/fetchers.mdx

@@ -71,4 +71,4 @@ const myFetcher: Fetcher = (url, ops) => {
     statusCode: 200,
   };
 }
-```
+```

.docs/pages/essentials/index.tsx

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

.docs/pages/essentials/targets.mdx

@@ -2,13 +2,13 @@
 
 When creating provider controls, you will immediately be required to choose a target.
 
-::alert{type="warning"}
+<Warning>
 A target is the device on which the stream will be played.
-**Where the scraping is run has nothing to do with the target**, only where the stream is finally played in the end is significant in choosing a target.
-::
+**Where the scraping is being run has nothing to do with the target**, only where the stream is finally played in the end is significant in choosing a target.
+</Warning>
 
 #### Possible targets
 - **`targets.BROWSER`** Stream will be played in a browser with CORS
 - **`targets.BROWSER_EXTENSION`** Stream will be played in a browser using the movie-web extension (WIP)
 - **`targets.NATIVE`** Stream will be played on a native video player
-- **`targets.ANY`** No restrictions for selecting streams, will just give all of them
+- **`targets.ANY`** No restrictions for selecting streams, will just give all of them

.docs/pages/essentials/usage-on-x.mdx

@@ -24,7 +24,7 @@ const providers = makeProviders({
 ## Browser client-side
 
 Using the provider package client-side requires a hosted version of simple-proxy.
-Read more [about proxy fetchers](./2.fetchers.md#using-fetchers-on-the-browser).
+Read more [about proxy fetchers](/essentials/fetchers#using-fetchers-on-the-browser).
 
 ```ts
 import { makeProviders, makeStandardFetcher, targets } from '@movie-web/providers';
@@ -41,27 +41,32 @@ const providers = makeProviders({
 ## React native
 To use the library in a react native app, you would also need a couple of polyfills to polyfill crypto and base64.
 
-1. First install the polyfills:
-```bash
-npm install @react-native-anywhere/polyfill-base64 react-native-quick-crypto
-```
+<Steps>
+  <Steps.Step>
+    ### First install the polyfills:
+    ```sh npm2yarn
+    npm install @react-native-anywhere/polyfill-base64 react-native-quick-crypto
+    ```
+</Steps.Step>
+  <Steps.Step>
+    ### Add the polyfills to your app:
+    ```ts
+    // Import in your entry file
+    import '@react-native-anywhere/polyfill-base64';
+    ```
 
-2. Add the polyfills to your app:
-```ts
-// Import in your entry file
-import '@react-native-anywhere/polyfill-base64';
-```
+    And follow the [react-native-quick-crypto documentation](https://github.com/margelo/react-native-quick-crypto) to set up the crypto polyfill.
+  </Steps.Step>
+    <Steps.Step>
+    ### Then you can use the library like this:
+    ```ts
+    import { makeProviders, makeStandardFetcher, targets } from '@movie-web/providers';
 
-And follow the [react-native-quick-crypto documentation](https://github.com/margelo/react-native-quick-crypto) to set up the crypto polyfill.
-
-3. Then you can use the library like this:
-
-```ts
-import { makeProviders, makeStandardFetcher, targets } from '@movie-web/providers';
-
-const providers = makeProviders({
-  fetcher: makeStandardFetcher(fetch),
-  target: target.NATIVE,
-  consistentIpForRequests: true,
-})
-```
+    const providers = makeProviders({
+      fetcher: makeStandardFetcher(fetch),
+      target: target.NATIVE,
+      consistentIpForRequests: true,
+    })
+    ```
+  </Steps.Step>
+</Steps>

.docs/pages/essentials/using-streams.mdx

@@ -4,13 +4,13 @@ Streams can sometimes be quite picky on how they can be used. So here is a guide
 
 ## Essentials
 
-All streams have the same common parameters:
- - `Stream.type`: The type of stream. Either `hls` or `file`
- - `Stream.id`: The id of this stream, unique per scraper output.
- - `Stream.flags`: A list of flags that apply to this stream. Most people won't need to use it.
- - `Stream.captions`: A list of captions/subtitles for this stream.
- - `Stream.headers`: Either undefined or a key value object of headers you must set to use the stream.
- - `Stream.preferredHeaders`: Either undefined or a key value object of headers you may want to set if you want optimal playback - but not required.
+All streams have the same common parameters :
+ - `Stream.type` : The type of stream. Either `hls` or `file`
+ - `Stream.id` : The id of this stream, unique per scraper output.
+ - `Stream.flags` : A list of flags that apply to this stream. Most people won't need to use it.
+ - `Stream.captions` : A list of captions/subtitles for this stream.
+ - `Stream.headers` : Either undefined or a key value object of headers you must set to use the stream.
+ - `Stream.preferredHeaders` : Either undefined or a key value object of headers you may want to set if you want optimal playback - but not required.
 
 Now let's delve deeper into how to watch these streams!
 
@@ -22,7 +22,7 @@ These streams have an extra property `Stream.playlist` which contains the m3u8 p
 Here is a code sample of how to use HLS streams in web context using hls.js
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
+<script src="https ://cdn.jsdelivr.net/npm/hls.js@1"></script>
 
 <video id="video"></video>
 <script>
@@ -39,17 +39,17 @@ Here is a code sample of how to use HLS streams in web context using hls.js
 
 ## Streams with type `file`
 
-File streams are quite easy to use, they just return a new property: `Stream.qualities`.
+File streams are quite easy to use, they just return a new property : `Stream.qualities`.
 This property is a map of quality and a stream file. So if you want to get 1080p quality you do `stream["1080"]` to get your stream file. It will return undefined if that quality is absent.
 
-The possibly qualities are: `unknown`, `360`, `480`, `720`, `1080`, `4k`.
+The possibly qualities are : `unknown`, `360`, `480`, `720`, `1080`, `4k`.
 File based streams are always guaranteed to have one quality.
 
-Once you get a streamfile, you have the following parameters:
- - `StreamFile.type`: Right now it can only be `mp4`.
- - `StreamFile.url`: The URL linking to the video file.
+Once you get a streamfile, you have the following parameters :
+ - `StreamFile.type` : Right now it can only be `mp4`.
+ - `StreamFile.url` : The URL linking to the video file.
 
-Here is a code sample of how to watch a file based stream in a browser:
+Here is a code sample of how to watch a file based stream in a browser :
 
 ```html
 <video id="video"></video>
@@ -72,13 +72,13 @@ If your target is set to `BROWSER`, headers will never be required, as it's not
 
 ## Using captions/subtitles
 
-All streams have a list of captions at `Stream.captions`. The structure looks like this:
+All streams have a list of captions at `Stream.captions`. The structure looks like this :
 ```ts
 type Caption = {
-  type: CaptionType; // Language type, either "srt" or "vtt"
-  id: string; // Unique per stream
-  url: string; // The URL pointing to the subtitle file
-  hasCorsRestrictions: boolean; // If true, you will need to proxy it if you're running in a browser
-  language: string; // Language code of the caption
+  type : CaptionType; // Language type, either "srt" or "vtt"
+  id : string; // Unique per stream
+  url : string; // The URL pointing to the subtitle file
+  hasCorsRestrictions : boolean; // If true, you will need to proxy it if you're running in a browser
+  language : string; // Language code of the caption
 };
-```
+```

.docs/pages/extra-topics/development.mdx

@@ -1,16 +1,16 @@
 # Development / contributing
 
-::alert{type="warning"}
+<Warning>
 This page isn't quite done yet, stay tuned!
-::
+</Warning>
 
-<!--
+{/*  
 TODO
 - Development setup
 - How to make new sources/embeds (link to the page)
 - How to use the fetchers, when to use proxiedFetcher
 - How to use the context
--->
+*/}
 
 ## Testing using the CLI
 
@@ -27,7 +27,7 @@ Then make sure you've run `npm i` to get all the dependencies.
 
 To run the CLI without needing to learn all the arguments, simply run the following command and go with the flow.
 
-```sh
+```sh npm2yarn
 npm run cli
 ```
 
@@ -35,18 +35,18 @@ npm run cli
 
 For repeatability, it can be useful to specify the arguments one by one.
 To see all the arguments, you can run the help command:
-```sh
+```sh 
 npm run cli -- -h
 ```
 
 Then just run it with your arguments, for example:
-```sh
+```sh 
 npm run cli -- -sid showbox -tid 556574
 ```
 
 ### Examples
 
-```sh
+```sh 
 # Spirited away - showbox
 npm run cli -- -sid showbox -tid 129
 
@@ -63,10 +63,10 @@ npm run cli -- -sid febbox-mp4 -u URL_HERE
 ### Fetcher options
 
 The CLI comes with a few built-in fetchers:
- - `node-fetch`: Fetch using the "node-fetch" library.
- - `native`: Use the new fetch built into Node.JS (undici).
- - `browser`: Start up headless chrome, and run the library in that context using a proxied fetcher.
+ - `node-fetch` : Fetch using the "node-fetch" library.
+ - `native` : Use the new fetch built into Node.JS (undici).
+ - `browser` : Start up headless chrome, and run the library in that context using a proxied fetcher.
 
-::alert{type="warning"}
+<Warning>
 The browser fetcher will require you to run `npm run build` before running the CLI. Otherwise you will get outdated results.
-::
+</Warning>

.docs/pages/extra-topics/index.tsx

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

.docs/pages/get-started/changelog.mdx

@@ -102,9 +102,9 @@ title: 'Changelog'
 
 # Version 2.0.0
 
-::alert{type="warning"}
+<Warning>
 There are breaking changes in this list, make sure to read them thoroughly if you plan on updating.
-::
+</Warning>
 
 **Development tooling:**
 - Added integration test for browser. To make sure the package keeps working in the browser
@@ -125,4 +125,4 @@ There are breaking changes in this list, make sure to read them thoroughly if yo
 - Export Fetcher and Stream types with all types related to it
 - Providers can now return a list of streams instead of just one.
 - Captions now have identifiers returned with them. Just generally useful to have
-- New targets and some of them renamed
+- New targets and some of them renamed

.docs/pages/get-started/examples.mdx

@@ -0,0 +1,7 @@
+---
+title: 'Examples'
+---
+
+<Note>
+    Coming soon
+</Note>

.docs/pages/get-started/index.tsx

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

.docs/pages/get-started/introduction.mdx

@@ -1,6 +1,8 @@
-# Introduction
+---
+title: 'Introduction'
+---
 
-## What is `@movie-web/providers`?
+## What is `@movie-web/providers` ?
 
 `@movie-web/providers` is the soul of [movie-web](https://github.com/movie-web/movie-web). It's a collection of scrapers of various streaming sites. It extracts the raw streams from those sites, so you can watch them without any extra fluff from the original sites.
 
@@ -11,4 +13,4 @@ We support many different environments, here are a few examples:
  - In a native app, scrape in the app itself
  - In a backend server, scrape on the server and give the streams to the client to watch.
 
-To find out how to configure the library for your environment, You can read [How to use on X](../2.essentials/0.usage-on-x.md).
+To find out how to configure the library for your environment, You can read [How to use on X](/essentials/usage-on-x).

.docs/pages/get-started/quick-start.mdx

@@ -1,30 +1,24 @@
-# Quick start
+---
+title: 'Quick Start'
+---
 
 ## Installation
 
 Let's get started with `@movie-web/providers`. First lets install the package.
 
-::code-group
-  ```bash [NPM]
+  ```sh npm2yarn
   npm install @movie-web/providers
   ```
-  ```bash [Yarn]
-  yarn add @movie-web/providers
-  ```
-  ```bash [PNPM]
-  pnpm install @movie-web/providers
-  ```
-::
 
 ## Scrape your first item
 
 To get started with scraping on the **server**, first you have to make an instance of the providers.
 
-::alert{type="warning"}
-This snippet will only work on a **server**. For other environments, check out [Usage on X](../2.essentials/0.usage-on-x.md).
-::
+<Important>
+This snippet will only work on a **server**. For other environments, check out [Usage on X](/essentials/usage-on-x).
+</Important>
 
-```ts [index.ts (server)]
+```ts title="index.ts (server)" showLineNumbers
 import { makeProviders, makeStandardFetcher, targets } from '@movie-web/providers';
 
 // this is how the library will make http requests
@@ -42,19 +36,36 @@ const providers = makeProviders({
 Perfect. You now have an instance of the providers you can reuse everywhere.
 Now let's scrape an item:
 
-```ts [index.ts (server)]
-// fetch some data from TMDB
-const media = {
+```ts title="index.ts (server)" showLineNumbers
+import { ScrapeMedia, makeProviders, makeStandardFetcher, targets } from '@movie-web/providers';
+
+const myFetcher = makeStandardFetcher(fetch);
+
+const providers = makeProviders({
+  fetcher: myFetcher,
+  target: targets.NATIVE
+});
+
+const media: ScrapeMedia = {
   type: 'movie',
-  title: "Hamilton",
-  releaseYear: 2020,
-  tmdbId: "556574"
-}
+  title: "Oppenheimer",
+  releaseYear: 2023,
+  tmdbId: "872585"
+};
   
-const output = await providers.runAll({
-  media: media
-})
+async function fetchData() {
+  try {
+    const output = await providers.runAll({
+      media: media,
+    });
+    console.log("Output:",output)
+  } catch (error) {
+    console.error('Error occurred:', error);
+  }
+}
+
+fetchData();
 ```
 
 Now we have our stream in the output variable. (If the output is `null` then nothing could be found.)
-To find out how to use the streams, check out [Using streams](../2.essentials/4.using-streams.md).
+To find out how to use the streams, check out [Using streams](/essentials/using-streams).

.docs/pages/in-depth/flags.mdx

@@ -6,5 +6,5 @@ For example, some sources only give back content that has the CORS headers set t
 This concept is applied in multiple away across the library.
 
 ## Flag options
- - `CORS_ALLOWED`: Headers from the output streams are set to allow any origin.
- - `IP_LOCKED`: The streams are locked by IP: requester and watcher must be the same.
+ - `CORS_ALLOWED` : Headers from the output streams are set to allow any origin.
+ - `IP_LOCKED` : The streams are locked by IP: requester and watcher must be the same.

.docs/pages/in-depth/index.tsx

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

.docs/pages/in-depth/new-providers.mdx

@@ -1,12 +1,12 @@
 # New providers
 
-::alert{type="warning"}
+<Warning>
 This page isn't quite done yet, stay tuned!
-::
+</Warning>
 
-<!--
+{/*  
 TODO
 - How to make new sources or embeds
 - Ranking
 - Link to flags
--->
+*/}

.docs/pages/in-depth/sources-vs-embeds.mdx

@@ -1,11 +1,11 @@
 # Sources vs embeds
 
-::alert{type="warning"}
+<Warning>
 This page isn't quite done yet, stay tuned!
-::
+</Warning>
 
-<!--
+{/*  
 TODO
 - How do sources and embeds differ
 - How do sources and embeds interact
--->
+*/}

.docs/pages/index.tsx

@@ -0,0 +1,42 @@
+import {
+  Button,
+  Card,
+  CardGrid,
+  GuiderLayout,
+  Hero,
+} from '@neato/guider/client';
+
+export default function LandingPage() {
+  return (
+    <GuiderLayout meta={{ layout: 'page' }}>
+      <Hero>
+        <Hero.Badge title="V2.3.0" to="/get-started/changelog">
+          See changelog for more
+        </Hero.Badge>
+        <Hero.Title>@movie-web/providers</Hero.Title>
+        <Hero.Subtitle>
+          Easily scrape all sorts of media sites for content.
+        </Hero.Subtitle>
+        <Hero.Actions>
+          <Button to="/get-started/introduction">Get Started</Button>
+          <Button to="https://github.com/movie-web/providers" type="secondary">
+            Open on GitHub →
+          </Button>
+        </Hero.Actions>
+      </Hero>
+      <CardGrid>
+        <Card icon="mdi:code-json" title="Scrape popular streaming websites.">
+          Don&apos;t settle for just one media site for you content, use
+          everything that&apos;s available.
+        </Card>
+        <Card icon="mdi:git" title="Multi-platform.">
+          Scrape from browser or server, whichever you prefer.
+        </Card>
+        <Card icon="mdi:language-typescript" title="Easy to use.">
+          Get started with scraping your favourite media sites with just 5 lines
+          of code. Fully typed of course.
+        </Card>
+      </CardGrid>
+    </GuiderLayout>
+  );
+}

.docs/renovate.json

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

.docs/theme.config.tsx

@@ -0,0 +1,112 @@
+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/providers",
+  contentFooter: {
+    text: "Made with 💜",
+    editRepositoryBase: "https://github.com/movie-web/providers",
+    socials: [
+      social.github("https://github.com/movie-web/providers"),
+      social.discord("https://movie-web.github.io/links/discord"),
+    ]
+  },
+  meta: (pageMeta) => (
+    <NextSeo {...{
+      title: `${pageMeta.title ?? "For all your media scraping needs"} | movie-web`,
+      description: pageMeta.description ?? "movie-web/providers : Easily scrape all sorts of media sites for content.",
+      openGraph: {
+        images: [{
+          url: coverUrl.src,
+        }],
+        title: `${pageMeta.title ?? "For all your media scraping needs"} | movie-web`,
+        description: pageMeta.description ?? "movie-web/providers : Easily scrape all sorts of media sites for content.",
+      },
+      twitter: {
+        cardType: 'summary_large_image',
+      },
+      additionalLinkTags: [
+        {
+          href: faviconUrl.src,
+          rel: "icon",
+          type: "image/x-icon",
+        }
+      ]
+    }} />
+  ),
+  settings: {
+    logo: () => <Logo />,
+    colors: {
+      primary: "#E67070",
+      primaryLighter: "#E59595",
+      primaryDarker: "#D21818",
+      background: "#000000",
+      backgroundLighter: "#141414",
+      backgroundLightest: "#292929",
+      backgroundDarker: "#000000",
+      line: "#404040",
+      text: "#B3B3B3",
+      textLighter: "#CCCCCC",
+      textHighlight: "#cccccc",
+
+      codeWarning: '#222D20',
+      codeError: '#2B1B1F',
+      codeGreen: '#0B2823',
+      codeHighlight: '#0E2429',
+      codeWordHighlight: '#365C68',
+
+      semanticTip: '#39B864',
+      semanticTipLighter: '#75F2B6',
+      semanticNote: '#817EF3',
+      semanticNoteLighter: '#B9B8FC',
+      semanticImportant: '#A958E8',
+      semanticImportantLighter: '#D3A2F9',
+      semanticWarning: '#fff708',
+      semanticWarningLighter: '#faf8b1',
+      semanticCaution: '#FC6359',
+      semanticCautionLighter: '#FFA59F',
+    },
+    backgroundPattern: 'flare',
+  },
+  directories: [
+    directory("main", {
+      sidebar: [
+        group("Get Started", [
+          link("Introduction", "/get-started/introduction"),
+          link("Quickstart", "/get-started/quick-start"),
+          link("Examples", "/get-started/examples"),
+          link("Changelog", "/get-started/changelog"),
+        ]),
+        group("Essentials", [
+          link("Usage on X", "/essentials/usage-on-x"),
+          link("Targets", "/essentials/targets"),
+          link("Fetchers", "/essentials/fetchers"),
+          link("Customize Providers", "/essentials/customize-providers"),
+          link("Using Streams", "/essentials/using-streams"),
+        ]),
+        group("In Depth", [
+          link("Sources vs Embeds", "/in-depth/sources-vs-embeds"),
+          link("New Providers", "/in-depth/new-providers"),
+          link("Flags", "/in-depth/flags"),
+        ]),
+        group("Extra Topics", [
+          link("Development and Contributing", "/extra-topics/development"),
+        ]),
+        group("Api Reference", [
+          link("makeProviders", "/api-reference/makeProviders"),
+          link("ProviderControls.runAll", "/api-reference/ProviderControlsRunAll"),
+          link("ProviderControls.runSourceScraper", "/api-reference/ProviderControlsrunSourceScraper"),
+          link("ProviderControls.runEmbedScraper", "/api-reference/ProviderControlsrunEmbedScraper"),
+          link("ProviderControls.listSources", "/api-reference/ProviderControlslistSources"),
+          link("ProviderControls.listEmbeds", "/api-reference/ProviderControlslistEmbeds"),
+          link("ProviderControls.getMetadata", "/api-reference/ProviderControlsgetMetadata"),
+          link("makeStandardFetcher", "/api-reference/makeStandardFetcher"),
+          link("makeSimpleProxyFetcher", "/api-reference/makeSimpleProxyFetcher"),
+        ])
+      ]
+    })
+  ],
+});

.docs/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"
-    }
-  }
-})

.docs/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"
+  ]
 }