diff --git a/_assets/css/components/content-card.css b/_assets/css/components/content-card.css index edeedf08..ffec62cb 100644 --- a/_assets/css/components/content-card.css +++ b/_assets/css/components/content-card.css @@ -4,6 +4,12 @@ grid-gap: 2rem; } +.dark .content-card { + border: 0.5px solid rgba(255, 255, 255, 0.20); +background: #242933; +box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.10), 0px 34px 24px -20px rgba(0, 0, 0, 0.04); +} + .content-card { padding: 24px !important; display: flex; @@ -32,6 +38,11 @@ margin-bottom: 24px !important; } +.dark .content-card p.content-card-label { + color: white; + opacity: 0.7; +} + .content-card p.content-card-label { font-size: 18px; font-weight: 600; @@ -40,6 +51,11 @@ margin-bottom: 16px !important; } +.dark .content-card p.content-card-description { + color: white !important; + opacity: 0.5 !important; +} + .content-card p.content-card-description { padding-bottom: 32px !important; opacity: 0.6; @@ -58,3 +74,7 @@ text-transform: uppercase; text-decoration: none !important; } + +.dark .content-card-link { + color: rgba(255, 255, 255, 0.70) !important; +} \ No newline at end of file diff --git a/_assets/css/components/dark-light-image.css b/_assets/css/components/dark-light-image.css new file mode 100644 index 00000000..6b0b6f01 --- /dev/null +++ b/_assets/css/components/dark-light-image.css @@ -0,0 +1,8 @@ + +html.dark .dark-light-image .light { + display: none; +} + +html:not(.dark) .dark-light-image .dark { + display: none; +} \ No newline at end of file diff --git a/_assets/css/components/hero.css b/_assets/css/components/hero.css index 3f2f7120..35baaa95 100644 --- a/_assets/css/components/hero.css +++ b/_assets/css/components/hero.css @@ -20,3 +20,11 @@ line-height: normal; letter-spacing: -0.68px; } + +.dark .hero h1 { + color: white !important; +} + +.dark .hero h1 em { + opacity: 0.7 +} \ No newline at end of file diff --git a/_assets/css/components/product-card.css b/_assets/css/components/product-card.css index 0f02d0b4..e89583f6 100644 --- a/_assets/css/components/product-card.css +++ b/_assets/css/components/product-card.css @@ -13,6 +13,13 @@ flex-direction: column; } +.dark .product-grid-item { + border: 0.5px solid rgba(255, 255, 255, 0.2); + background: #242933; + box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.1), + 0px 34px 24px -20px rgba(0, 0, 0, 0.1); +} + .product-grid-item-header * { margin: 0 !important; color: #fff !important; @@ -75,6 +82,11 @@ height: 100%; } +.dark .product-grid-item-body-description p { + color: #FFF; + opacity: 0.6; +} + .product-grid-item-body-description p { flex: 1; opacity: 0.6; @@ -107,6 +119,11 @@ text-decoration: none !important; } +.dark .product-grid-item-body p a { + color: #FFF !important; + background: rgba(255, 255, 255, 0.15); +} + .product-grid-item-body a:hover { background: rgb(250, 91, 48, 0.3); } diff --git a/_assets/css/components/quick-link.css b/_assets/css/components/quick-link.css index d31b63f2..53916827 100644 --- a/_assets/css/components/quick-link.css +++ b/_assets/css/components/quick-link.css @@ -5,6 +5,12 @@ margin-bottom: 2em; } +.dark .quick-links-item { + border: 0.5px solid rgba(255, 255, 255, 0.20); + background: #242933; + box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.10), 0px 34px 24px -20px rgba(0, 0, 0, 0.04); +} + .quick-links-item { border-radius: 4px; background: #fff; @@ -13,6 +19,11 @@ padding: 0 24px; } +.dark .quick-links-item h4 { + color: rgba(255, 255, 255, 0.70) !important; + +} + .quick-links-item h4 { color: var(--AV_Primary_Blue_Dark, #202d47) !important; font-size: 18px !important; @@ -45,15 +56,25 @@ background: linear-gradient(90deg, #414f6e 0%, #2773aa 100%); } +.dark .quick-links-item > p { + border-top: 1px solid rgba(255,255,255,0.1) !important; +} + .quick-links-item > p { border-top: 1px solid #efefef !important; padding-top: 18px !important; } +.dark .quick-links-item > p > a.quick-links-item-line { + color: rgba(255, 255, 255, 0.50) !important; + +} + .quick-links-item > p > a.quick-links-item-line { display: flex !important; gap: 16px !important; align-items: center !important; + font-size: 14px; text-decoration: none !important; color: var(--AV_Primary_Blue, #414f6e) !important; diff --git a/_assets/css/components/support-card.css b/_assets/css/components/support-card.css index 2b3abeba..af2f2771 100644 --- a/_assets/css/components/support-card.css +++ b/_assets/css/components/support-card.css @@ -3,6 +3,13 @@ gap: 56px; } +.dark .support-cards .support-card { + border: 0.5px solid rgba(255, 255, 255, 0.2); + background: #242933; + box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.1), + 0px 34px 24px -20px rgba(0, 0, 0, 0.04); +} + .support-cards .support-card { flex: 1; display: flex; @@ -22,6 +29,10 @@ letter-spacing: -0.36px !important; } +.dark .support-card p.support-card-label { + color: rgba(255, 255, 255, 0.50) !important; +} + .support-card p.support-card-label { flex: 1; } diff --git a/_assets/css/style.css b/_assets/css/style.css index 35a69723..1ba9c0df 100644 --- a/_assets/css/style.css +++ b/_assets/css/style.css @@ -335,6 +335,11 @@ border-top: 1px dashed var(--doctave-theme-content-bg-secondary); } +.dark .section-header hr { + border-top: 1px dashed white !important; + opacity: 0.6 !important; +} + .section-header h3 { color: var(--AV_Primary_Blue_06, rgba(65, 79, 110, 0.60)) !important; font-family: JetBrains Mono, sans-serif; @@ -347,4 +352,12 @@ font-size: 34px !important; line-height: 34px !important; font-weight: 500 !important; +} + +p { + font-size: 18px; +} + +.dark p { + color: rgba(255, 255, 255, 0.70); } \ No newline at end of file diff --git a/_assets/getting-started-diagram-dark.png b/_assets/getting-started-diagram-dark.png new file mode 100644 index 00000000..57f98b93 Binary files /dev/null and b/_assets/getting-started-diagram-dark.png differ diff --git a/_assets/getting-started-diagram-light.png b/_assets/getting-started-diagram-light.png new file mode 100644 index 00000000..b78c9576 Binary files /dev/null and b/_assets/getting-started-diagram-light.png differ diff --git a/_partials/dark-light-image.md b/_partials/dark-light-image.md new file mode 100644 index 00000000..9facb17c --- /dev/null +++ b/_partials/dark-light-image.md @@ -0,0 +1,6 @@ +
+ +![]({{dark}}) +![]({{light}}) + +
\ No newline at end of file diff --git a/doctave.yaml b/doctave.yaml index a20f32b1..9e8ae17c 100644 --- a/doctave.yaml +++ b/doctave.yaml @@ -32,6 +32,7 @@ styles: - _assets/css/components/product-card.css - _assets/css/components/hero.css - _assets/css/components/content-card.css + - _assets/css/components/dark-light-image.css open_api: - spec_file: openapi.yaml diff --git a/get-started/aws-migration.md b/get-started/aws-migration.md index 4d119bae..14213b36 100644 --- a/get-started/aws-migration.md +++ b/get-started/aws-migration.md @@ -5,7 +5,50 @@ meta: description: This page gets users started on how to migrate from AWS to api.video. --- -AWS migration guide -============= +# AWS migration guide -This page gets users started on how to migrate from AWS to api.video. \ No newline at end of file +Planning to migrate api.video from Amazon S3? We got you covered! + +There are two methods for your disposal that you can use in order to migrate all of your video content from S3 to api.video. + +## api.video Import Tool + +With api.video, you can use our in-house import tool in order to migrate all of your video in a short time from the popular hosting and video provider. + +The simple tool will require you to input serveral parameters from provider you are leaving and from api.video. + +Check out the [Import Tool](https://import.api.video/) now. + + + + +### How to get the AWS Access Key and Account Secret + +To access AWS, you will need to sign up for an AWS account. + +Access keys consist of an access key ID and secret access key, which are used to sign programmatic requests that you make to AWS. If you don't have access keys, you can create them by using the IAM console at https://console.aws.amazon.com/iam/. We recommend that you use IAM access keys instead of AWS root account access keys. IAM lets you securely control access to AWS services and resources in your AWS account. + +Note +To create access keys, you must have permissions to perform the required IAM actions. For more information, see Granting IAM User Permission to Manage Password Policy and Credentials in the IAM User Guide. + +To get your access key ID and secret access key +Open the IAM console at https://console.aws.amazon.com/iam/. + +On the navigation menu, choose Users. + +Choose your IAM user name (not the check box). + +Open the Security credentials tab, and then choose Create access key. + +To see the new access key, choose Show. Your credentials resemble the following: + +Access key ID: AKIAIOSFODNN7EXAMPLE + +Secret access key: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY + +To download the key pair, choose Download .csv file. Store the .csv file with keys in a secure location. + +Important +Keep the keys confidential to protect your AWS account, and never email them. Do not share them outside your organization, even if an inquiry appears to come from AWS or Amazon.com. No one who legitimately represents Amazon will ever ask you for your secret key. + +You can retrieve the secret access key only when you initially create the key pair. Like a password, you can't retrieve it later. If you lose it, you must create a new key pair. \ No newline at end of file diff --git a/get-started/start-building.md b/get-started/start-building.md index 4a5e3a5e..d2722dbc 100644 --- a/get-started/start-building.md +++ b/get-started/start-building.md @@ -14,7 +14,7 @@ Within this section, you can find essential insights into building with api.vide ## What is api.video? -![](/_assets/how-api-video-works.jpg) +{% include "_partials/dark-light-image.md" dark: "/_assets/getting-started-diagram-dark.png", light: "/_assets/getting-started-diagram-light.png" %} 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.