feat: Updated docs (#166)

* Updated docs

* New structure

* Updated docs

* Added Stitcher and Player reference

* Integrated scalar

* Finished docs

* More docs

Author: matvp91

docs/.vitepress/config.mts

@@ -51,7 +51,7 @@ export default defineConfig({
       },
       {
         text: "Reference",
-        link: "/reference/player",
+        link: "/reference/api",
         activeMatch: "/reference/",
       },
       {
@@ -108,46 +108,80 @@ function sidebarGuide() {
           text: "Getting Started",
           link: "getting-started",
         },
+        {
+          text: "What's included",
+          link: "whats-included",
+        },
       ],
     },
     {
-      text: "Project",
+      text: "Manage media",
       items: [
         {
-          text: "What's included",
-          link: "whats-included",
+          text: "Overview",
+          link: "media-overview",
         },
         {
-          text: "Building blocks",
-          link: "building-blocks",
+          text: "Media processing",
+          link: "media-processing",
           items: [
             {
-              text: "Video processing",
-              link: "video-processing",
+              text: "Import video",
+              link: "media-import-video",
             },
             {
-              text: "Video personalization",
-              link: "video-personalization",
+              text: "Transcode & package",
+              link: "media-transcode-package",
             },
             {
-              text: "Player",
-              link: "player",
+              text: "Storage",
+              link: "media-storage",
             },
           ],
         },
         {
-          text: "Tutorials",
+          text: "Dashboard",
+          link: "media-dashboard",
+        },
+      ],
+    },
+    {
+      text: "Stitcher",
+      items: [
+        {
+          text: "Overview",
+          link: "stitcher-overview",
+        },
+        {
+          text: "Create a session",
+          link: "stitcher-create-a-session",
+        },
+        {
+          text: "Features",
           items: [
             {
-              text: "Play adaptive video",
-              link: "tutorials/play-adaptive-video"
+              text: "Filtering",
+              link: "stitcher-filtering",
+            },
+            {
+              text: "HLS interstitials",
+              link: "stitcher-hls-interstitials",
             },
             {
-              text: "Add bumper like Netflix",
-              link: "tutorials/add-bumper-like-netflix"
-            }
-          ]
-        }
+              text: "Ad insertion",
+              link: "stitcher-ad-insertion",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      text: "Player",
+      items: [
+        {
+          text: "Overview",
+          link: "player-overview",
+        },
       ],
     },
     {
@@ -172,8 +206,26 @@ function sidebarReference() {
       text: "Reference",
       items: [
         {
-          text: "Player",
-          link: "/player",
+          text: "Services",
+          items: [
+            {
+              text: "API",
+              link: "api",
+            },
+            {
+              text: "Stitcher",
+              link: "stitcher",
+            },
+          ],
+        },
+        {
+          text: "Packages",
+          items: [
+            {
+              text: "Player",
+              link: "player",
+            },
+          ],
         },
       ],
     },

docs/.vitepress/theme/components/ApiDocs.vue

@@ -0,0 +1,12 @@
+<template>
+  <Content class="api-reference" />
+</template>
+
+<style>
+.api-reference {
+  margin-right: 8px;
+}
+.api-reference .scalar-app {
+  --refs-header-height: 64px;
+}
+</style>

docs/.vitepress/theme/custom.css

@@ -30,15 +30,6 @@
   }
 }
 
-.hidden {
-  display: none;
-}
-
-.iframe {
-  width: 100%;
-  border: none;
-}
-
 .VPHomeHero .VPImage {
   max-width: 160px;
 }
@@ -47,8 +38,10 @@
   margin: 4em 0;
 }
 
-.framed {
+.image {
+  margin: 1.5rem 0;
   border-radius: 1rem;
+  border: 2px solid rgba(0, 0, 0, .85);
 }
 
 .package {
@@ -78,36 +71,3 @@
 .package div {
   margin-left: 2rem;
 }
-
-.video {
-  border-radius: 1rem;
-  width: 100%;
-}
-
-.number {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.85rem;
-  color: #ffffff;
-  background-color: #000000;
-  border-radius: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 0.5rem;
-  text-align: center;
-  font-weight: bold;
-}
-
-h1,
-h2,
-h3 {
-  display: flex;
-  align-items: center;
-}
-
-.image-rounded {
-  border-radius: 1rem;
-  width: 100%;
-  border: 2px solid #f1f1f1;
-}

docs/.vitepress/theme/index.ts

@@ -1,4 +1,11 @@
 import DefaultTheme from "vitepress/theme";
+import ApiDocs from "./components/ApiDocs.vue";
 import "./custom.css";
+import type { Theme } from "vitepress";
 
-export default DefaultTheme;
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component("api-docs", ApiDocs);
+  },
+} satisfies Theme;

docs/.vitepress/theme/types.d.ts

@@ -0,0 +1 @@
+declare module "*.vue";