Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion astro.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ export default defineConfig({
assets: '_astro_docs'
},
integrations: [
AutoImport({ imports: [asideAutoImport] }),
AutoImport({
imports: [asideAutoImport, { '~/components/Video.astro': [['default', 'Video']] }],
}),
preact({ compat: true }),
sitemap(),
astroAsides(),
Expand Down
102 changes: 69 additions & 33 deletions src/components/Video.astro
Original file line number Diff line number Diff line change
@@ -1,42 +1,78 @@
---
import { parse } from 'node:path';
import { getLanguageFromURL } from '../util';
import languages from '../i18n/languages';
/**
* Single source of truth for embedded videos in the docs.
*
* From one authoring point (`<Video src="…" title="…" />`) it renders BOTH:
* 1. a responsive YouTube `<iframe>` embed, and
* 2. an inline `<script type="application/ld+json">` with a schema.org
* `VideoObject` (so Google can index the video and show rich results).
*
* Emitting the JSON-LD inline next to the embed is valid for Google — it does
* not need to live in `<head>` or in an `@graph`.
*/
import { SITE_URL } from '~/consts';
import { getVideoObjectSchema, getYouTubeId } from '~/util/videoObject';

export interface Props {
/** YouTube embed URL, e.g. `https://www.youtube.com/embed/KB4f4bSyHgI`. */
src: string;
type: string;
/** Video title (required — used as the accessible iframe title and schema `name`). */
title: string;
/** Optional video description for the structured data. */
description?: string;
/** Overrides the thumbnail derived from the YouTube ID. */
thumbnailUrl?: string;
/** ISO 8601 date used as `uploadDate` (e.g. `2023-07-03`). */
uploadDate?: string;
/** ISO 8601 duration (e.g. `PT1M30S`). Optional. */
duration?: string;
}

const { src, type } = Astro.props as Props;
const url = new URL(Astro.request.url);
const lang = getLanguageFromURL(url.pathname);
const filename = parse(src).name;

const allCaptions = import.meta.glob('../../public/captions/**/*.vtt', { as: 'raw' });
const fileCaptions = Object.keys(allCaptions)
.map((caption) => {
const dir = '/captions/';
const path = caption.substring(caption.indexOf(dir));
const lang = path.substring(dir.length, path.indexOf(filename) - 1);
return { path, lang };
})
.filter(({ path }) => path.includes(filename));

const defaultLang = fileCaptions.find((caption) => caption.lang == lang) ? lang : 'en';
const { src, title, description, thumbnailUrl, uploadDate, duration } = Astro.props;

// Stable, page-scoped @id so the node is unambiguous and unique per video.
const youtubeId = getYouTubeId(src);
const canonical = new URL(Astro.url.pathname, SITE_URL).href;
const id = `${canonical}#video${youtubeId ? `-${youtubeId}` : ''}`;

const schema = getVideoObjectSchema({
src,
title,
description,
thumbnailUrl,
uploadDate,
duration,
id,
});
---

<video controls>
<source src={src} type={type} />
{
fileCaptions.map(({ lang, path }) => (
<track
label={languages[lang as keyof typeof languages]}
src={path}
kind="captions"
srclang={lang}
default={lang == defaultLang}
/>
))
<div class="video-embed">
<iframe
src={src}
title={title}
loading="lazy"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>
</div>

<script is:inline type="application/ld+json" set:html={JSON.stringify(schema)} />

<style>
.video-embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
margin: 1.5rem 0;
}

.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 0.5rem;
}
</video>
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ Your Application was built successfully

Learn how to build with Astro running on a local development server. Watch the video below:
<div class="cms-embed">
<iframe width="600" height="400" src="https://www.youtube.com/embed/lQo6rLigHfk?si=2vfJZxAP1gzNzeta" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/lQo6rLigHfk?si=2vfJZxAP1gzNzeta" title="How to build with Astro" description="Learn how to initialize and deploy an Astro project on the Azion platform using Functions, featuring guides on setting up with the Azion CLI and managing deployments." uploadDate="2023-10-17" />
</div>

#### Deploying the project
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -166,12 +166,4 @@ Wait a few minutes so the propagation takes place, and then access your applicat

Watch how to build with Next.js on Azion's YouTube channel:

<iframe
src="https://www.youtube.com/embed/HEINn5ErqD0"
title="How to build with Next.js"
loading="lazy"
width="600"
height="400"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/HEINn5ErqD0" title="How to build with Next.js" description="Learn how to initialize and deploy a Next.js project on the Azion Edge Platform, leveraging Functions and the latest Node.js features." uploadDate="2023-10-17" />
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,7 @@ Through [Azion CLI](/en/documentation/products/azion-cli/overview/) it's possibl

Watch a video about the compatibility between Azion and web frameworks through Azion Bundler on Azion's YouTube channel:
<div class="cms-embed">
<iframe
src="https://www.youtube.com/embed/BV4jRPpADw8"
title="Compatibility between Azion and web frameworks through Azion Bundler"
loading="lazy"
width="600"
height="400"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/BV4jRPpADw8" title="Local development" description="Explore how Azion CLI enhances local development for Applications with efficient debugging, accelerated workflows, and collaborative features." uploadDate="2023-10-17" />
</div>


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,14 +55,6 @@ Here's a real-life implementation of the Functions ChatGPT integration:

Watch a video about the Functions Code Editor on Azion’s YouTube channel:

<iframe
src="https://www.youtube.com/embed/qPB7Exnh8O4"
title="Functions Code Editor"
loading="lazy"
width="600"
height="400"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/qPB7Exnh8O4" title="Functions Code Editor" description="Explore the Functions Code Editor on Azion, featuring VS Code’s Monaco editor, ChatGPT integration, and tools like debugging and IntelliSense for efficient edge development." uploadDate="2023-07-03" />


Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ The `--help` option displays more information about the `link` command.

Learn how to link and deploy projects on Azion Web Platform. Watch the video below:
<div class="cms-embed">
<iframe width="600" height="400" src="https://www.youtube.com/embed/Ub2nzz3Ap2U?si=AALxnhtVNuejUEHt" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/Ub2nzz3Ap2U?si=AALxnhtVNuejUEHt" title="Azion CLI link" description="Learn how to link and deploy projects on the Azion Web Platform, using interactive commands for optimal edge computing integration." uploadDate="2023-09-28" />
</div>


Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,7 @@ Now, the events associated with the domains you selected will be collected and s

Watch a video tutorial on How to associate domains on Data Stream on Azion’s YouTube channel:

<iframe
src="https://www.youtube.com/embed/soyIbJW0VdQ"
loading="lazy"
width="600"
height="400"
title="How to associate domains on Data Stream"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/soyIbJW0VdQ" title="How to associate domains on Data Stream" description="When associating domains with Data Stream, the events related to the specified domains will be collected and sent to its endpoint." uploadDate="2023-07-03" />



Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ This comprehensive video demonstrates how to install and use the dig across diff
* Validate Edge Computing services


<iframe width="560" height="315" src="https://www.youtube.com/embed/KB4f4bSyHgI?autoplay=1" title="Dig into DNS: Install & Use Dig Command Like a Pro" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/KB4f4bSyHgI?autoplay=1" title="How to look up DNS servers with Dig command" description="Learn how to specify DNS servers with the dig command. Step-by-step guide for Windows and other systems, including Google DNS queries and record lookups." uploadDate="2023-07-03" />

---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,6 @@ hCaptcha is a registered trademark of Intuition Machines, Inc.

Watch a video on how to install the hCaptcha® integration through Azion Marketplace on Azion's YouTube channel.

<iframe width="560" height="315" src="https://www.youtube.com/embed/HqdX9wAWJDg?si=YQqDt2Z5fzq-6VQv" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/HqdX9wAWJDg?si=YQqDt2Z5fzq-6VQv" title="How to Install the hCaptcha® Integration" description="hCaptcha is an integration to protect your assets from bot attacks, SPAM, and others." uploadDate="2023-09-28" />

---
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,6 @@ Done. Now **Upstash Rate Limiting** is running and protecting your domains.

Discover how to enhance your web application's performance with this tutorial on **Rate Limit with Penalty on Azion + Upstash DB**. Watch now on Azion's YouTube channel.

<iframe width="560" height="315" src="https://www.youtube.com/embed/3qsiKK2GzRw?si=Em23FF2i1BHzTV7r" loading="lazy" title="How to install Upstash Rate Limiting integration through Azion Marketplace" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/3qsiKK2GzRw?si=Em23FF2i1BHzTV7r" title="How to Install Upstash Rate Limiting" description="This integration allows you to control incoming traffic right at the edge and protect your applications." uploadDate="2024-03-14" />

---
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ Done. Now the **reCAPTCHA** integration is running for every request made to the

Watch a video about how to install the reCAPTCHA integration through Azion Marketplace on Azion’s YouTube channel:

<iframe width="560" height="315" src="https://www.youtube.com/embed/X-S1qDdVVbg?si=J7dzeymFxJH0P_Zs" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/X-S1qDdVVbg?si=J7dzeymFxJH0P_Zs" title="How to Install the reCAPTCHA Integration" description="reCAPTCHA is an integration to block attacks from bots, SPAM and others." uploadDate="2023-09-28" />

---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ import LinkButton from 'azion-webkit/linkbutton';

Watch a video on how to deploy applications using the Angular Boilerplate on Azion's YouTube channel.

<iframe width="560" height="315" src="https://www.youtube.com/embed/rD4K39a70Xk?si=NCq7BvqJXTUU2ERQ" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/rD4K39a70Xk?si=NCq7BvqJXTUU2ERQ" title="Deploy Apps with the Angular Boilerplate" description="The Angular Boilerplate provides an automation solution to build an Angular application on Azion." uploadDate="2023-09-28" />



Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,6 @@ import LinkButton from 'azion-webkit/linkbutton';

Learn how to deploy the Azion Starter Kit:
<div class="cms-embed">
<iframe width="600" height="400" src="https://www.youtube.com/embed/9VDnYVGf5lI?si=u7eJ77YaKHjDpF7W" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/9VDnYVGf5lI?si=u7eJ77YaKHjDpF7W" title="How to deploy the Azion Starter Kit" description="This template accelerates the creation of a basic edge stack to explore Azion's platform and its features." uploadDate="2024-04-11" />
</div>

Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ import LinkButton from 'azion-webkit/linkbutton';

Learn how to deploy the Dynamic and Static File Optimization template. Watch the video below:
<div class="cms-embed">
<iframe width="600" height="400" src="https://www.youtube.com/embed/O_LoGeyNAQY?si=kVeyrU8GOL6hXySi" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/O_LoGeyNAQY?si=kVeyrU8GOL6hXySi" title="Deploy the File Optimization Template" description="This template helps you to deploy an application with standard cache policies to improve the delivery of your content." uploadDate="2024-02-22" />
</div>


Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,6 @@ Read the documentation about [managing applications](/en/documentation/products/

Learn how to deploy the Applications Proxy template. Watch the video below:
<div class="cms-embed">
<iframe width="600" height="400" src="https://www.youtube.com/embed/BRoJ9lRZ80I?si=27wHP6P3PTw3Jj3m" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/BRoJ9lRZ80I?si=27wHP6P3PTw3Jj3m" title="How to deploy the Applications Proxy template" description="This template includes configurations that add a layer of engine rules to ignore all cache settings for a specific URL route." uploadDate="2023-12-06" />
</div>

Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,6 @@ Read the documentation about [managing applications](/en/documentation/products/

Learn how to deploy the Image Optimization template. Watch the video below:
<div class="cms-embed">
<iframe width="600" height="400" src="https://www.youtube.com/embed/7RtuYnHDtcM?si=IY7N7NdpUh0BYAYF" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/7RtuYnHDtcM?si=IY7N7NdpUh0BYAYF" title="How to deploy the Image Optimization template" description="This template includes configurations for enhancing image loading and caching, based on the file extension." uploadDate="2023-12-06" />
</div>

Original file line number Diff line number Diff line change
Expand Up @@ -94,5 +94,5 @@ Read the documentation about [managing applications](/en/documentation/products/

Learn how to deploy the Static Cache template. Watch the video below:
<div class="cms-embed">
<iframe width="600" height="400" src="https://www.youtube.com/embed/k3tZuEG8hwA?si=PiWzfbqUm_fICRiT" loading="lazy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/k3tZuEG8hwA?si=PiWzfbqUm_fICRiT" title="How to deploy the Static Cache template" description="This template includes configurations for optimizing the delivery and performance of static content." uploadDate="2023-12-06" />
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,4 @@ You'll see a message confirming the deletion of your token.

Watch a video tutorial on how to manage a personal token on Azion's YouTube channel:

<iframe
src="https://www.youtube.com/embed/HOkuSudhKfE"
loading="lazy"
width="600"
height="400"
title="Secure Your Azion Personal Tokens: Creating and revoking Personal Tokens"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
<Video src="https://www.youtube.com/embed/HOkuSudhKfE" title="How to manage a personal token" description="Find out how to use Personal Tokens on Azion." uploadDate="2023-10-17" />
Original file line number Diff line number Diff line change
Expand Up @@ -212,12 +212,4 @@ You can [debug rules created with Rules Engine for Firewall](/en/documentation/p

Watch a video tutorial about programming Firewall rules for optimal WAF usage and cost optimization on Azion's YouTube channel:

<iframe
src="https://www.youtube.com/embed/HhVdxVnOnvw"
title="Programming Firewall rules engine for optimal WAF usage (cost optimization)."
loading="lazy"
width="600"
height="400"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/HhVdxVnOnvw" title="Rules Engine for Firewall" description="Implement security logic, based on criteria and behaviors, with Rules Engine for Firewall." uploadDate="2023-07-03" />
Original file line number Diff line number Diff line change
Expand Up @@ -119,15 +119,7 @@ You can keep track of the calls made by Data Stream to Amazon S3 on [Real-Time E

Watch a video tutorial on how to use Amazon S3 with Data Stream on Azion’s YouTube channel:

<iframe
src="https://www.youtube.com/embed/tuUanVc_HFE?si=3-oG5BiHElJzb63-"
loading="lazy"
width="600"
height="400"
title="Using Amazon S3 to receive data from Azion Data Stream"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/tuUanVc_HFE?si=3-oG5BiHElJzb63-" title="How to use Amazon S3 to receive data from Data Stream" description="Hands-on to configure Amazon S3 to receive data from Data Stream." uploadDate="2023-07-03" />

---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -122,15 +122,7 @@ You can keep track of the calls made by Data Stream to Amazon Kinesis Data Fireh

Watch a video tutorial on how to use Amazon Kinesis Data Firehose with Data Stream on Azion's YouTube channel:

<iframe
src="https://www.youtube.com/embed/V0g4ih9NwRY?si=Bs1Xaq-GLkRYzG6d"
loading="lazy"
width="600"
height="400"
title="Using Amazon Kinesis Data Firehose to receive data from Azion Data Stream"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<Video src="https://www.youtube.com/embed/V0g4ih9NwRY?si=Bs1Xaq-GLkRYzG6d" title="Send Data Stream Data to Amazon Kinesis" description="Hands-on to use Amazon Kinesis Data Firehose to receive data from Azion Data Stream." uploadDate="2023-07-03" />

---

Expand Down
Loading