Merge pull request #286 from apivideo/component-system-migration

Component system migration

README.md

@@ -1,93 +1,96 @@
 ---
 hide_navigation: false
-hide_side_table_of_contents: true
+toc: false
+breadcrumbs: false
 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.
 ---
 
-<div class="section-header">
+<div class="section-header no-toc">
 
 ### New to api.video?
 
-## Get started [here](/get-started/start-building.md)!
-
-<hr>
+# Get started <span style="color: var(--accent-10)">[here](/get-started/start-building.md)</span>!
 
 </div>
 
-Welcome to the developer documentation of api.video! Our platform empowers developers and businesses to seamlessly integrate video functionality into their applications and services. Whether you're looking to offer video on demand, live streaming, or leverage our player and analytics features, the api.video API is designed to simplify the process.
-
-Check out the products:
-
-<div class="product-cards">
+Welcome to the developer documentation of api.video! Our platform empowers developers and businesses to seamlessly integrate video functionality into their applications and services. Whether you're looking to offer video on demand, live streaming, or leverage our player and analytics features, the api.video API is designed to simplify the process. 
 
-{% capture vod-description %}
+Check out the products!
 
-api.video's hosting service enables users to upload and store videos, which can then be easily delivered and shared across various devices and platforms.
+<Grid cols="3" gap="3">
+    <Component.LandingPageCard heading="Video" subheading="on demand">
+        <Flex dir="column" pad="0" justify="between" gap="2">
+            api.video's hosting service enables you to upload and store videos, and then deliver and share them easily across various devices and platforms.
 
+            <Button href="/vod">Learn More</Button>
+        </Flex>
+    </Component.LandingPageCard>
+    <Component.LandingPageCard heading="Live" subheading="streaming">
+        <Flex dir="column" pad="0" justify="between" gap="2">
+            api.video provides you with the possibility to embed low-latency live streaming into your application, website, or project seamlessly.
+           
+           <Button href="/live-streaming">Learn More</Button>
+        </Flex>
+    </Component.LandingPageCard>
+    <Component.LandingPageCard heading="Delivery" subheading="& analytics">
+        <Flex dir="column" pad="0" justify="between" gap="2">
+            api.video lets you customize a large part of the delivery, whether it's the player's branding or adding captions, chapters, and watermarks.
 
-{% endcapture %}
+           
+           <Button href="/delivery-analytics">Learn More</Button>
+        </Flex>
+    </Component.LandingPageCard>
+</Grid>
 
-{% capture live-stream-description %}
 
-api.video provides you with the possibility to embed live streaming into your application or project seamlessly.
+<div class="section-header">
 
+<hr/>
 
-{% endcapture %}
+## Quick links
 
-{% capture delivery-analytics-description %}
+</div>
 
-api.video lets you customize a large part of the delivery, whether it's the player's branding or adding captions, chapters, and watermarks.
+<Grid cols="3" gap="3">
+    <Component.LandingPageList heading="Get Started">
+        <Flex pad="0" dir="column">
+            [Start building with api.video](/get-started/start-building)
 
-<br>
+            [VOD quickstart](/vod/get-started-in-5-minutes)
 
-{% endcapture %}
+            [Live streaming quickstart](/live-streaming/create-a-live-stream)
 
-{% include "_partials/product-card.md" product: "Video", subheading: "on demand", description: vod-description, link: "/vod/README.md" %}
-{% include "_partials/product-card.md" product: "Live", subheading: "streaming", description: live-stream-description, link: "/live-streaming/README.md" %}
-{% include "_partials/product-card.md" product: "Delivery", subheading: "& analytics", description: delivery-analytics-description, link: "/delivery-analytics/README.md" %}
+            [Delivery & analytics quickstart](/delivery-analytics/delivery-analytics-quickstart)
+        </Flex>
+    </Component.LandingPageList>
 
-</div>
+    <Component.LandingPageList heading="Libraries & SDKs">
+        <Flex pad="0" dir="column">
+            [API clients](/sdks/api-clients)
 
+            [Video libraries & SDKs](/sdks/vod)
 
-<div class="section-header">
+            [Live streaming libraries & SDKs](/sdks/livestream)
 
-<hr/>
+            [Delivery & analytics SDKs](/sdks/player)
 
-## Quick links
+            [No-code solutions](/sdks/nocode)
+        </Flex>
+    </Component.LandingPageList>
 
-</div>
+    <Component.LandingPageList heading="Resources">
+        <Flex pad="0" dir="column">
+            [Help Center and FAQs](https://help.api.video/en/)
 
-<div class="quick-links">
-{% capture get-started-links %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/setup-checklist.svg", label: "Start building with api.video", link: "/get-started/start-building" %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/vod-quickstart.svg", label: "VOD quickstart", link: "/vod/get-started-in-5-minutes" %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/livestream-quickstart.svg", label: "Live streaming quickstart", link: "/live-streaming/create-a-live-stream" %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/player-customization.svg", label: "Delivery & analytics quickstart", link: "/delivery-analytics/delivery-analytics-quickstart" %}
-{% endcapture %}
-
-{% capture libraries-sdks %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/github.svg", label: "API clients", link: "/sdks/api-clients" %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/videos-sdks.svg", label: "Video libraries & SDKs", link: "/sdks/vod" %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/livestream-sdks.svg", label: "Live streaming libraries & SDKs", link: "/sdks/livestream" %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/player-sdks.svg", label: "Delivery & analytics SDKs", link: "/sdks/player" %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/no-code.svg", label: "No-code solutions", link: "/sdks/nocode" %}
-{% endcapture %}
-
-{% capture resources %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/helpcenter.png", label: "Help Center and FAQs", link: "https://help.api.video/en/" %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/api_reference.png", label: "API reference", link: "/reference" %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/blog.png", label: "Blog", link: "https://api.video/blog/" %}
-{% include "_partials/quick-link.md" icon: "/_assets/icons/changelog.png", label: "Changelog", link: "https://api.video/changelog/" %}
-{% endcapture %}
-
-
-{% include "_partials/quick-links-container.md" name: "getting-started", title: "Get Started", content: get-started-links %}
-{% include "_partials/quick-links-container.md" name: "sdks", title: "Libraries & SDKs", content: libraries-sdks %}
-{% include "_partials/quick-links-container.md" name: "resources", title: "Resources", content: resources %}
+            [API reference](/reference)
 
-</div>
+            [Blog](https://api.video/blog/)
 
+            [Changelog](https://api.video/changelog/)
+        </Flex>
+    </Component.LandingPageList>
+</Grid>
 
 <div class="section-header"> 
 
@@ -97,7 +100,19 @@ api.video lets you customize a large part of the delivery, whether it's the play
 
 </div>
 
-<div class="support-cards">
-{% include "_partials/support-card.md" label: "Browse Help Center", icon: "/_assets/icons/helpcenter.png", link: "https://help.api.video/en/" %}
-{% include "_partials/support-card.md" label: "Ask the Community", icon: "/_assets/icons/community.png", link: "https://community.api.video/" %}
-</div> 
+<Grid cols="1" gap="2">
+    <Card href="https://help.api.video/en/" pad="0">
+        <Flex pad="1" align="center" gap="2">
+            <Box>![Help center](/_assets/icons/helpcenter.png)</Box>
+
+            <Box>[Browse help center ›](https://help.api.video/en/)</Box>
+        </Flex>
+    </Card>
+    <Card href="https://community.api.video/" pad="0">
+        <Flex pad="1" align="center" gap="2">
+            <Box>![Community](/_assets/icons/community.png)</Box>
+
+            <Box>[Ask the community ›](https://community.api.video/)</Box>
+        </Flex>
+    </Card>
+</Grid>

_assets/css/style.css

@@ -352,6 +352,25 @@
   .content-markdown {
     padding-left: 80px !important;
   }
+
+}
+
+@media (min-width: 1024px) {
+  #page-content > div > div > div:has(.no-toc) {
+    --max-width-sm: auto !important;
+    padding-left: 40px !important;
+  }
+}
+
+
+@media (min-width: 1280px) {
+  #page-content > div > div > div:has(.no-toc) {
+    padding-left: 80px !important;
+  }
+
+  #page-content > div > div:has(.no-toc) {
+    width: auto !important;
+  }  
 }
 
 .section-header hr {
@@ -383,4 +402,104 @@ 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.Delivery .landing-page-card-header {
+  background: linear-gradient(76deg, #4eb2dd -24.15%, #642180 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>