chore: Added icons to docs

Author: matvp91

packages/docs/.vitepress/theme/custom.css

@@ -1,3 +1,24 @@
-.image-rounded {
-  border-radius: 8px;
+:root {
+  --vp-c-brand-1: #7600ff;
+  --vp-c-brand-2: #7600ff;
+  --vp-c-brand-3: #7600ff;
+}
+
+.logo {
+  width: 96px;
+}
+
+.hidden {
+  display: none;
+}
+
+.VPHero .name {
+  line-height: 0px;
+}
+
+.title-image {
+  display: inline-block;
+  width: 30px;
+  margin-bottom: -6px;
+  margin-right: 2px;
 }

packages/docs/features/dashboard.md

@@ -6,8 +6,8 @@ Typically, you'd want to build the dashboard once and upload it to `S3` to serve
 
 You can use the API docs to `Test Request`.
 
-<img src="../assets/dashboard-api.png" alt="Dashboard API" class="image-rounded" />
+<img src="../assets/dashboard-api.png" alt="Dashboard API" />
 
 Each job, or child job, has detailed logs.
 
-<img src="../assets/dashboard-job.png" alt="Dashboard job" class="image-rounded" />
+<img src="../assets/dashboard-job.png" alt="Dashboard job" />

packages/docs/index.md

@@ -3,16 +3,19 @@
 layout: home
 
 hero:
-  name: "Mixwave"
-  text: "Convert, package and manipulate your video on the fly."
+  name: <img class="logo" src="/mixwave/logo.svg" /> <span class="hidden">Mixwave</span>
+  text: "Convert, package and manipulate on the fly."
   tagline: "A friendly API to simplify the complexities of video delivery."
   actions:
     - theme: brand
-      text: Documentation
+      text: Introduction
       link: /introduction
     - theme: alt
       text: Getting Started
       link: /getting-started
+    - theme: alt
+      text: GitHub
+      link: https://github.com/matvp91/mixwave
 
 features:
   - title: Transcode

packages/docs/introduction.md

@@ -16,7 +16,7 @@ Before we go further, it's important to note that Mixwave intentionally keeps it
 
 Mixwave makes it easier for you to do the following tasks using a user-friendly API:
 
-### 1. Transcode
+### <img src="/transcode.svg" class="title-image" /> Transcode
 
 The process of converting a video file from one format or codec to another. The [transcode](/features/transcode) job generates video, audio and text fragments from your sources and uploads them to `S3`. We ensure proper keyframes are in place for packaging purposes.
 
@@ -27,7 +27,7 @@ The process of converting a video file from one format or codec to another. The
 Consider the result of a transcode job as an intermediate format ready for packaging.
 :::
 
-### 2. Package
+### <img src="/package.svg" class="title-image" /> Package
 
 The process of preparing and organizing video files for delivery and playback over various streaming platforms and devices. Packaging isn't as resource intensive as transcoding. The [package](/features/package) job generates an HLS playlist from the output of a transcode job. Basically, it comes down to the following steps:
 
@@ -46,7 +46,7 @@ As with transcode, the end result will be uploaded to your configured `S3` bucke
 At this point, your stream can be played by HLS-compatible players, such as [HLS.js](https://github.com/video-dev/hls.js), or natively on Apple devices.
 :::
 
-### 3. Stitch
+### <img src="/stitch.svg" class="title-image" /> Stitch
 
 At this point, you've created playable assets. Stitching involves serving the manifest through a proxy that can modify the output based on different parameters. If you're looking to dynamically merge manifests, stitch them together, or add interstitials, this is for you.