Add image and custom components

README.md

@@ -1,5 +1,8 @@
 ---
-hide_navigation: false
+experimental:
+  v2_templates: false
+toc: true
+breadcrumbs: false
 hide_side_table_of_contents: true
 meta: 
     description: Cloud-based video hosting and live streaming platform with analytics. Mobile and web SDKs for VOD, live streaming, and player for NodeJS, Javascript, Typescript, Python, Go, PHP, C#, iOS Swift, Android Kotlin.

_assets/css/style.css

@@ -383,4 +383,100 @@ p {
 
 .dark p {
   color: rgba(255, 255, 255, 0.70);
-}
+}
+
+.landing-page-card {
+  border: 1px solid var(--gray-4);
+  color: var(--gray-10);
+  overflow: hidden;
+  border-radius: var(--radius-5);
+  box-shadow: 0px 20px 50px 0px rgba(59, 43, 92, 0.1), 0px 34px 24px -20px rgba(65, 79, 110, 0.04);
+}
+
+.landing-page-card.Video .landing-page-card-header {
+  background: linear-gradient(215deg, #fa5b30 -5.18%, #f7b500 179.35%);
+}
+
+.landing-page-card.Live .landing-page-card-header {
+  background: linear-gradient(76deg, #642180 -24.15%, #af2a72 93.03%);
+}
+
+.landing-page-card-header {
+  height: 12rem;
+  background: linear-gradient(215deg, #fa5b30 -5.18%, #f7b500 179.35%);
+  color: var(--accent-contrast);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+
+  border-radius: 0 !important;
+}
+
+.landing-page-card-header-title {
+  font-weight: 700;
+  font-size: 20pt;
+}
+
+.landing-page-card-header > p {
+  margin: 0 !important;
+}
+
+/* ----------------------------- */
+
+.landing-page-list {
+  border: 1px solid var(--gray-4);
+  color: var(--gray-10);
+  overflow: hidden;
+  border-radius: var(--radius-5);
+  box-shadow: 0px 20px 50px 0px rgba(59, 43, 92, 0.1), 0px 34px 24px -20px rgba(65, 79, 110, 0.04);
+}
+
+div.landing-page-list-header {
+  font-weight: 800;
+  color: var(--gray-12);
+  position: relative;
+  padding-top: var(--padding-3) !important;
+  padding-left: var(--padding-3) !important;
+  padding-right: var(--padding-3) !important;
+}
+
+.landing-page-list-header::before {
+  content: '';
+  height: 3px;
+  width: 1.5rem;
+  position: absolute;
+  left: var(--padding-3);
+  bottom: var(--padding-0);
+  background-color: var(--accent-10);
+}
+
+.landing-page-list-body div p {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  width: 100%;
+  padding-top: 0.8rem;
+}
+
+.landing-page-list-body div p:not(:last-child) {
+  padding-bottom: 0.8rem;
+}
+
+.landing-page-list-body div p {
+  border-top: 1px solid var(--gray-4);
+}
+
+.landing-page-list-body p a {
+  color: var(--gray-10);
+  font-size: 14px;
+  text-decoration: none;
+}
+
+/* ----------------------------- */
+
+.api-video-card {
+  color: var(--gray-10);
+  overflow: hidden;
+  border-radius: var(--radius-2);
+  box-shadow: 0px 20px 50px 0px rgba(59, 43, 92, 0.1), 0px 34px 24px -20px rgba(65, 79, 110, 0.04);
+}

_components/api-video-card.md

@@ -0,0 +1,6 @@
+---
+---
+
+<Box class='api-video-card' pad='3'>
+  <Slot />
+</Box>

_components/landing-page-card.md

@@ -0,0 +1,18 @@
+---
+attributes:
+  - title: heading
+    required: true
+  - title: subheading
+    required: true
+---
+
+<Box pad="0" class={"landing-page-card " | append(@heading) }>
+  <Box pad="4" class="landing-page-card-header">
+    <span class="landing-page-card-header-title">{@heading}</span>
+
+    {@subheading}
+  </Box>
+  <Box pad="4">
+    <Slot />
+  </Box>
+</Box>

_components/landing-page-list.md

@@ -0,0 +1,14 @@
+---
+attributes:
+  - title: heading
+    required: true
+---
+
+<Box class="landing-page-list">
+  <Box class="landing-page-list-header">
+    <span>{@heading}</span>
+  </Box>
+  <Box pad="3" class="landing-page-list-body">
+    <Slot />
+  </Box>
+</Box>

delivery-analytics/private-video-get-started.md

@@ -9,7 +9,7 @@ This article explains how to secure and limit access to videos.
 
 ## Secure & manage access to your videos
 
-Maybe you are asking yourself: “ok, but how does _video privacy_ help me?”. There are quite a few use cases for private videos, and we’ve discussed the hassle of securing the videos yourself. 
+Maybe you are asking yourself: "ok, but how does _video privacy_ help me?". There are quite a few use cases for private videos, and we’ve discussed the hassle of securing the videos yourself. 
 
 - On-demand videos behind a paywall
 - Content Protection
@@ -38,11 +38,11 @@ After you learn how private video works and what it’s good for, we can now tal
 
 To reiterate the private video concept, here’s a visual representation of how the whole thing works:
 
-{% include "_partials/dark-light-image.md" dark: "/_assets/delivery-analytics/private-videos/private-videos-dark.svg", light: "/_assets/delivery-analytics/private-videos/private-videos-light.svg", alt: "A diagram that shows the process of using private tokens" %}
+<Image src="/_assets/delivery-analytics/private-videos/private-videos-light.svg" src_dark="/_assets/delivery-analytics/private-videos/private-videos-dark.svg" alt="A diagram that shows the process of using private tokens" />
 
 Knowing that now we can finally start building stuff! 
 
-It’s that simple! (if you want the advanced stuff, scroll down to “Time to roll up our sleeves!”)
+It’s that simple! (if you want the advanced stuff, scroll down to "Time to roll up our sleeves!")
 
 Let’s try to deliver one video in HTML with our own (amazing!) [api.video](https://api.video/) player. 
 
@@ -150,7 +150,7 @@ There are two types of tokens for private videos:
 
 At a very high level, to request different assets for the same private video, more than having the private token is required; you also need to retain the session. For that, we have the session token. In the flowchart below, you can see that for each private video, we are using a session token + the private token:
 
-{% include "_partials/dark-light-image.md" dark: "/_assets/delivery-analytics/private-videos/single-session-token-dark.svg", light: "/_assets/delivery-analytics/private-videos/single-session-token-light.svg", alt: "A diagram that shows the steps of using a session token" %}
+<Image src="/_assets/delivery-analytics/private-videos/private-videos-light.svg" src_dark="/_assets/delivery-analytics/private-videos/single-session-token-dark.svg" alt="A diagram that shows the steps of using a session token" />
 
 So let’s get a bit technical here. To start the session, you will need to request the `/session` endpoint, get the session token, add it to the first asset you request, and then add it to every following asset you request. In the example above, we will request the `/session` endpoint, then add the session token to the query string of the private video thumbnail → request an embedded video asset with the session token in the query string → request a private video asset in mp4 format with the session token, and so on, you get the idea.
 
@@ -250,9 +250,7 @@ Notice that the second object has a property `public` which is set to `false` ,
 2. If you remember, we need to get the session token by requesting the /session endpoint. The endpoint accepts the video id and private token; however, if you notice the private token is only in the URL. So let’s extract it! we can use this simple regex to extract it from the embedded URL `(?<=token=).*$` 
 3. We first extract the private token from the URL and map it to the asset objects (with the video URL, video id, etc.) 
 4. Then we request the /session endpoint passing in the video id and private token, and we get the session_token. Now we can also map to the same asset object.
-{% raw %}
 5. We’re almost done; hang in there! now let’s get generate `<img>` tags with the src as the asset thumbnails and add the session token in the query string as an `avh` parameter, i.e: `<img src=https://vod.api.video/vod/AABBCC/token/c77d7bf3-4e2f-4a85-9e15-5c35992c11fc/thumbnail.jpg?avh={{session token}}>` .  Then in the same line generate the `<a href>` tag that will lead us to the actual video, and as you understood already, it too has to include the session token, i.e: `<a href=https://embed.api.video/vod/AABBCC?token=c77d7bf3-4e2f-4a85-9e15-5c35992c11fc&avh={{session token}}>`
-{% endraw %}
 6. And lastly, generate the HTML `<head>` and `<body>` while encapsulating the `<a href><img></a>` we’ve already created, and…. DONE!
 
 Now you have clickable thumbnails of your private videos which you can secure behind user credentials for example.

delivery-analytics/private-video-session-tokens.md

@@ -14,7 +14,7 @@ The session starts with the /session endpoint where we get the session token fro
 
 Once the session token is acquired, it is reused in all other requests to the different assets.
 
-{% include "_partials/dark-light-image.md" dark: "/_assets/delivery-analytics/private-videos/session-token-dark.svg", light: "/_assets/delivery-analytics/private-videos/session-token-light.svg", alt: "A diagram that shows the session token flow" %}
+<Image src="/_assets/delivery-analytics/private-videos/session-token-light.svg" src_dark="/_assets/delivery-analytics/private-videos/session-token-dark.svg" alt="A diagram that shows the session token flow" />
 
 {% capture content %}
 **Time to Live**

delivery-analytics/using-custom-domains.md

@@ -16,7 +16,7 @@ When you request custom domains, api.video only has 3 simple requirements:
 - Provide the domains you want to use
 - Provide the TLS certificates for those domanins
 
-{% include "_partials/dark-light-image.md" dark: "/_assets/delivery-analytics/custom-domains/custom-domains-dark.svg", light: "/_assets/delivery-analytics/custom-domains/custom-domains-light.svg", alt: "A diagram that shows the steps of requesting and using custom domains" %}
+<Image src="/_assets/delivery-analytics/custom-domains/custom-domains-light.svg" src_dark="/_assets/delivery-analytics/custom-domains/custom-domains-dark.svg" alt="A diagram that shows the steps of requesting and using custom domains" />
 
 You can maintain your company branding by utilizing custom domains in any of these use cases, and more:
 

delivery-analytics/video-privacy-access-management.md

@@ -17,7 +17,7 @@ A **private token** is a string of unique numbers and letters. For example: `009
 {% endcapture %}
 {% include "_partials/callout.html" kind: "info", content: content %}
 
-{% include "_partials/dark-light-image.md" dark: "/_assets/delivery-analytics/private-videos/private-videos-dark.svg", light: "/_assets/delivery-analytics/private-videos/private-videos-light.svg", alt: "A diagram that shows the process of using private tokens" %}
+<Image src="/_assets/delivery-analytics/private-videos/private-videos-light.svg" src_dark="/_assets/delivery-analytics/private-videos/private-videos-dark.svg" alt="A diagram that shows the process of using private tokens" />
 
 ### How to create private videos?
 
@@ -41,6 +41,6 @@ You can see that for each url the token will be included in different places. Fo
 
 You can [retrieve a video](/reference/api/Videos#retrieve-a-video-object) via the API, which will generate the private token while you retrieve it. Each time you make a new request to retrieve a video it will generate a new private token. Hence, if the same user would like to play the video multiple times, on different pages you'll need to make a request to the `https://ws.api.video/videos/{videoId}` endpoint mentioned above in order to get a new private token.
 
-{% include "_partials/dark-light-image.md" dark: "/_assets/delivery-analytics/private-videos/private-video-reusability-dark.svg", light: "/_assets/delivery-analytics/private-videos/private-video-reusability-light.svg", alt: "A diagram that shows the process of reusing private videos" %}
+<Image src="/_assets/delivery-analytics/private-videos/private-video-reusability-light.svg" src_dark="/_assets/delivery-analytics/private-videos/private-video-reusability-dark.svg" alt="A diagram that shows the process of reusing private videos" />
 
 Once you've retrieved the video you can either use api.video player or an external player to play it back for the user. Hence the user can play it back for as long as the session lives, which is 24 hours in this case. When the session has ended, you will have to generate a new private token.

doctave.yaml

@@ -1,5 +1,6 @@
 ---
 title: api.video documentation
+version: 2
 header:
   links:
     - external: https://community.api.video/
@@ -14,17 +15,15 @@ header:
     external: https://dashboard.api.video/register
     text: Sign up for free
 
-colors:
-  main: "#FA5B30"
-  main_dark: "#FA5B30"
-  content_bg_secondary: "#F6F8FA"
-
-favicon:
-  src: _assets/favicon.ico
-
-logo:
-  src: _assets/logo.svg
-  src_dark: _assets/logo-dark.svg
+theme:
+  colors:
+    accent: "#FA5B30"
+    content_bg_secondary: "#F6F8FA"
+  favicon:
+    src: _assets/favicon.ico
+  logo:
+    src: _assets/logo.svg
+    src_dark: _assets/logo-dark.svg
 
 styles:
   - _assets/css/style.css
@@ -41,6 +40,50 @@ open_api:
   - spec_file: openapi.yaml
     uri_prefix: /reference/api
 
+tabs:
+  - label: Get started
+    path: /
+  - label: VOD
+    path: /vod/
+  - label: Live streaming
+    path: /live-streaming/
+  - label: Delivery & analytics
+    path: /delivery-analytics/
+  - label: API Reference
+    path: /reference/
+  - label: Libraries & SDKs
+    path: /sdks/
+    subtabs:
+    - label: Overview
+      path: /sdks/
+    - label: Security best practices
+      path: /sdks/security/
+    - label: API clients
+      path: /sdks/api-clients/
+      icon:
+        set: lucide
+        name: square-code
+    - label: VOD
+      path: /sdks/vod/
+      icon:
+        set: lucide
+        name: video
+    - label: Live streaming
+      path: /sdks/livestream/
+      icon:
+        set: lucide
+        name: radio-tower
+    - label: Delivery & analytics
+      path: /sdks/player/
+      icon:
+        set: lucide
+        name: monitor-play
+    - label: No-code solutions
+      path: /sdks/nocode/
+      icon:
+        set: lucide
+        name: blocks
+
 redirects:
   - from: /docs
     to: /

get-started/infra.md

@@ -13,7 +13,7 @@ To fulfill this commitment, we've meticulously crafted a robust infrastructure t
 
 ## How it works?
 
-{% include "_partials/dark-light-image.md" dark: "/_assets/get-started/infra/infra_flow_dark.png", light: "/_assets/get-started/infra/infra_flow_light.png", alt: "A diagram that shows the hosting location flow" %}
+<Image src="/_assets/get-started/infra/infra_flow_light.png" src_dark="/_assets/get-started/infra/infra_flow_dark.png" alt="A diagram that shows the hosting location flow" />
 
 When creating a new account or adding a project after you have switched to production, you will be prompted to choose the region from which your videos will be hosted and delivered. You will encounter two primary options:
 

get-started/start-building.md

@@ -13,7 +13,7 @@ This documentation serves as your foundational guide to integrating api.video's
 
 ## What is api.video?
 
-{% include "_partials/dark-light-image.md" dark: "/_assets/get-started/start-building/what-is-api-video-dark.svg", light: "/_assets/get-started/start-building/what-is-api-video-light.svg", alt: "A diagram that shows how api.video works" %}
+<Image src="/_assets/get-started/start-building/what-is-api-video-light.svg" src_dark="/_assets/get-started/start-building/what-is-api-video-dark.svg" alt="A diagram that shows how api.video works" />
 
 api.video is a cloud-based video hosting and live streaming platform that provides developers and businesses with an easy-to-use API to handle all video-related tasks. The platform offers a range of features to help developers and businesses manage video content, including video hosting, transcoding, player customization, live streaming, and analytics.
 

live-streaming/restreams.md

@@ -19,7 +19,7 @@ api.video gives you the ability to broadcast a live stream to multiple platforms
 
 ## How it works
 
-{% include "_partials/dark-light-image.md" dark: "/_assets/live-streaming/restreams/restreams-dark.svg", light: "/_assets/live-streaming/restreams/restreams-light.svg", alt: "A diagram that shows RTMP restreaming on different platforms" %}
+<Image src="/_assets/live-streaming/restreams/restreams-light.svg" src_dark="/_assets/live-streaming/restreams/restreams-dark.svg" alt="A diagram that shows RTMP restreaming on different platforms" />
 
 You can add restreams to an existing live stream or you can create a live stream that already includes the restream list.   
 

reference/authentication-guide.md

@@ -59,7 +59,7 @@ Bearer authentication (also called token authentication) is an HTTP authenticati
 
 api.video provides an enhanced security authentication method, which uses a disposable bearer token that has a short time to live and has to be refreshed every 3600 seconds.
 
-{% include "_partials/dark-light-image.md" dark: "/_assets/reference/authentication/disposable-bearer-token-dark.svg", light: "/_assets/reference/authentication/disposable-bearer-token-light.svg", alt: "A diagram that shows how disposable bearer tokens can be created, used, and refreshed"%} 
+<Image src="/_assets/reference/authentication/disposable-bearer-token-light.svg" src_dark="/_assets/reference/authentication/disposable-bearer-token-dark.svg" alt="A diagram that shows how disposable bearer tokens can be created, used, and refreshed" />
 
 Bearer token authentication is simple to set up and use; however, we encourage you to use one of our client libraries if possible. [api.video client libraries](/sdks/api-clients) handle authentication for you, including renewing your token as needed.
 

reference/create-and-manage-webhooks.md

@@ -21,7 +21,7 @@ api.video provides you the possibility to get a `POST` request to your server th
 
 Here’s how the `video.encoding` webhook’s flow looks like:
 
-{% include "_partials/dark-light-image.md" dark: "/_assets/reference/webhooks/webhooks-dark.svg", light: "/_assets/reference/webhooks/webhooks-light.svg", alt: "A diagram that shows the video.encoding webhook flow"  %}
+<Image src="/_assets/reference/webhooks/webhooks-light.svg" src_dark="/_assets/reference/webhooks/webhooks-dark.svg" alt="A diagram that shows the video.encoding webhook flow" />
 
 ## Event properties
 

reference/disposable-bearer-token-authentication.md

@@ -10,7 +10,7 @@ We provide an enhanced security authentication method, which uses a disposable b
 
 ## How it works?
 
-{% include "_partials/dark-light-image.md" dark: "/_assets/reference/disposable-bearer-auth/disposable-bearer-token-dark.svg", light: "/_assets/reference/disposable-bearer-auth/disposable-bearer-token-light.svg", alt: "A diagram that shows how disposable bearer tokens can be created, used, and refreshed" %}
+<Image src="/_assets/reference/disposable-bearer-auth/disposable-bearer-token-light.svg" src_dark="/_assets/reference/disposable-bearer-auth/disposable-bearer-token-dark.svg" alt="A diagram that shows how disposable bearer tokens can be created, used, and refreshed" />
 
 _Fig. 1_