feat: Updated docs (#109)

* New documentatoin
superstreamerapp · Nov 27, 2024 · e2830d0 · e2830d0
1 parent 5a954a8
commit e2830d0
Show file tree

Hide file tree

Showing 45 changed files with 528 additions and 523 deletions.
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
@@ -24,13 +24,7 @@ services:
     env_file: config.env
     environment:
       - REDIS_HOST=superstreamer-redis
-      - REDIS_PORT=6379
       - DATABASE_URI=postgresql://postgres:sprs@superstreamer-postgres/sprs
-      - S3_ENDPOINT=${S3_ENDPOINT}
-      - S3_REGION=${S3_REGION}
-      - S3_ACCESS_KEY=${S3_ACCESS_KEY}
-      - S3_SECRET_KEY=${S3_SECRET_KEY}
-      - S3_BUCKET=${S3_BUCKET}
 
   superstreamer-stitcher:
     image: "superstreamerapp/stitcher:alpha"
@@ -42,14 +36,8 @@ services:
     env_file: config.env
     environment:
       - REDIS_HOST=superstreamer-redis
-      - REDIS_PORT=6379
       - PUBLIC_API_ENDPOINT=http://localhost:52001
       - PUBLIC_STITCHER_ENDPOINT=http://localhost:52002
-      - S3_ENDPOINT=${S3_ENDPOINT}
-      - S3_REGION=${S3_REGION}
-      - S3_ACCESS_KEY=${S3_ACCESS_KEY}
-      - S3_SECRET_KEY=${S3_SECRET_KEY}
-      - S3_BUCKET=${S3_BUCKET}
 
   superstreamer-artisan:
     image: "superstreamerapp/artisan:alpha"
@@ -59,12 +47,6 @@ services:
     env_file: config.env
     environment:
       - REDIS_HOST=superstreamer-redis
-      - REDIS_PORT=6379
-      - S3_ENDPOINT=${S3_ENDPOINT}
-      - S3_REGION=${S3_REGION}
-      - S3_ACCESS_KEY=${S3_ACCESS_KEY}
-      - S3_SECRET_KEY=${S3_SECRET_KEY}
-      - S3_BUCKET=${S3_BUCKET}
 
   superstreamer-redis:
     image: redis/redis-stack-server:7.2.0-v6

diff --git a/docker/minio/minio.env → docker/integrations/minio/config.env.example b/docker/minio/minio.env → docker/integrations/minio/config.env.example
@@ -1,6 +1,6 @@
 # MinIO Configuration
 S3_ENDPOINT=http://superstreamer-minio:9000
 S3_REGION=us-east-1
-S3_ACCESS_KEY=minioadmin
-S3_SECRET_KEY=minioadmin
-S3_BUCKET=superstreamer
+S3_ACCESS_KEY=sprs
+S3_SECRET_KEY=sprs
+S3_BUCKET=sprs
diff --git a/docker/minio/docker-compose.minio.yml → docker/integrations/minio/docker-compose.yml b/docker/minio/docker-compose.minio.yml → docker/integrations/minio/docker-compose.yml
@@ -7,12 +7,12 @@ services:
   superstreamer-minio:
     image: quay.io/minio/minio
     environment:
-      MINIO_ROOT_USER: minioadmin
-      MINIO_ROOT_PASSWORD: minioadmin
+      MINIO_ROOT_USER: sprs
+      MINIO_ROOT_PASSWORD: sprs
     command: server /data --console-address ":9001"
     ports:
-      - "9000:9000" # API
-      - "9001:9001" # Console
+      - "9000:9000"
+      - "9001:9001"
     volumes:
       - superstreamer_minio_data:/data
     healthcheck:
@@ -21,14 +21,14 @@ services:
       timeout: 5s
       retries: 5
 
-  createbuckets:
+  superstreamer-minio-bootstrap:
     image: minio/mc
     depends_on:
       superstreamer-minio:
         condition: service_healthy
     entrypoint: >
       /bin/sh -c "
-      mc alias set myminio http://superstreamer-minio:9000 minioadmin minioadmin;
-      mc mb myminio/superstreamer;
+      mc alias set myminio http://superstreamer-minio:9000 sprs sprs;
+      mc mb myminio/sprs;
       exit 0;
       "
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -39,7 +39,7 @@ export default defineConfig({
       provider: "algolia",
       options: {
         appId: "4JIX5YPW7R",
-        apiKey: "004a506c5ecd75d2a16d12feefc7af58",
+        apiKey: "97be940a67cc7ae000c625203b1c51f1",
         indexName: "matvp91io",
       },
     },
@@ -108,35 +108,46 @@ function sidebarGuide() {
           text: "Getting Started",
           link: "getting-started",
         },
-        {
-          text: "Packages",
-          link: "packages",
-        },
-        {
-          text: "Learning",
-          link: "learning",
-        },
       ],
     },
     {
-      text: "Features",
+      text: "Project",
       items: [
         {
-          text: "Video processing",
-          link: "video-processing",
+          text: "What's included",
+          link: "whats-included",
         },
         {
-          text: "Playlist manipulation",
-          link: "playlist-manipulation",
+          text: "Building blocks",
+          link: "building-blocks",
+          items: [
+            {
+              text: "Video processing",
+              link: "video-processing",
+            },
+            {
+              text: "Video personalization",
+              link: "video-personalization",
+            },
+            {
+              text: "Player",
+              link: "player",
+            },
+          ],
         },
         {
-          text: "Player",
-          link: "player",
-        },
-        {
-          text: "Dashboard",
-          link: "dashboard",
-        },
+          text: "Tutorials",
+          items: [
+            {
+              text: "Play adaptive video",
+              link: "tutorials/play-adaptive-video"
+            },
+            {
+              text: "Add bumper like Netflix",
+              link: "tutorials/add-bumper-like-netflix"
+            }
+          ]
+        }
       ],
     },
     {
@@ -147,8 +158,8 @@ function sidebarGuide() {
           link: "contribute",
         },
         {
-          text: "Credits",
-          link: "credits",
+          text: "Thank you",
+          link: "thank-you",
         },
       ],
     },

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -4,9 +4,17 @@
   --vp-c-brand-3: #ff7400;
 
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #ff4d00 30%, #ff9a00);
-
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, rgba(255, 77, 0, .2) 40%, rgba(255, 154, 0, .2) 40%);
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #ff4d00 30%,
+    #ff9a00
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    rgba(255, 77, 0, 0.2) 40%,
+    rgba(255, 154, 0, 0.2) 40%
+  );
   --vp-home-hero-image-filter: blur(44px);
 }
 
@@ -35,10 +43,12 @@
   max-width: 160px;
 }
 
-.video {
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+.schema {
+  margin: 4em 0;
+}
+
+.framed {
+  border-radius: 1rem;
 }
 
 .package {
@@ -65,20 +75,39 @@
   border-left: 1px solid var(--vp-c-divider);
 }
 
-.schema {
-  margin: 3rem auto;
+.package div {
+  margin-left: 2rem;
+}
+
+.video {
+  border-radius: 1rem;
   width: 100%;
 }
 
-.schema-stitcher {
-  max-width: 400px;
+.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;
 }
 
-.schema-dashboard {
-  max-width: 300px;
+h1,
+h2,
+h3 {
+  display: flex;
+  align-items: center;
 }
 
-.details.minimal {
-  background-color: transparent;
-  padding: 0;
-}
+.image-rounded {
+  border-radius: 1rem;
+  width: 100%;
+  border: 2px solid #f1f1f1;
+}
diff --git a/docs/guide/building-blocks.md b/docs/guide/building-blocks.md
@@ -0,0 +1,5 @@
+# Building blocks
+
+Getting the bigger picture from a high-level perspective can be challenging, but we'll do our best to guide you through how the different building blocks come together. 
+
+Ideally, Superstreamer provides tools that cover everything from input source files, like an MP4, all the way to playback, such as a player embedded in a page. However, you're free to choose the tools that best fit your use case and extend them with Superstreamer's features as needed.
diff --git a/docs/guide/contribute.md b/docs/guide/contribute.md
@@ -2,41 +2,6 @@
 
 This is a living document about notes from contributors. If you'd like to contribute yourself, feel free to read through this info first.
 
-## Project structure
-
-Superstreamer consists of multiple packages, each serve their own purpose. This is particularly handy when you want to scale. You could easily run a package on multiple machines, such as Artisan.
-
-<table>
-  <thead>
-    <tr>
-      <th>Package</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><a href="https://github.com/matvp91/superstreamer/tree/main/packages/app" target="_blank"><b>App</b></a></td>
-      <td>A front-end that uses the API and visualizes running jobs.</td>
-    </tr>
-    <tr>
-      <td><a href="https://github.com/matvp91/superstreamer/tree/main/packages/api" target="_blank"><b>API</b></a></td>
-      <td>Used to interact with the system. Start transcode jobs, get a list of pending jobs, and much more.</td>
-    </tr>
-    <tr>
-      <td><a href="https://github.com/matvp91/superstreamer/tree/main/packages/artisan" target="_blank"><b>Artisan</b></a></td>
-      <td>The main job runner, can be run on as many machines as you like.</td>
-    </tr>
-    <tr>
-      <td><a href="https://github.com/matvp91/superstreamer/tree/main/packages/stitcher" target="_blank"><b>Stitcher</b></a></td>
-      <td>An HLS playlist proxy for on the fly manipulation, such as interstitials insertion and resolution filtering.</td>
-    </tr>
-    <tr>
-      <td><a href="https://github.com/matvp91/superstreamer/tree/main/packages/player" target="_blank"><b>Player</b></a></td>
-      <td>An easy to use HLS.js wrapper and UI built with React.</td>
-    </tr>
-  </tbody>
-</table>
-
 ## Running jobs
 
 We rely on [BullMQ](https://docs.bullmq.io/), a queue job runner, to define transcode, package and ffmpeg jobs. Eg; take the `/transcode` endpoint, this will push a job to the Redis queue. Artisan constantly monitors the Redis queue for pending work, and when there is a pending job available, it'll start working on that. When finished, it'll update the job that it finished.

diff --git a/docs/guide/credits.md b/docs/guide/credits.md
diff --git a/docs/guide/dashboard.md b/docs/guide/dashboard.md