[Docs Site] Render WebVTT transcripts in video catalog (#24105)

* [Docs Site] Render WebVTT transcripts in video catalog

* unused import

* tweak

---------

Co-authored-by: kodster28 <[email protected]>

Author: KianNH

src/content/stream/china-network-inside-china/index.yaml

@@ -7,9 +7,176 @@ products:
   - china-network
 thumbnail:
   url: https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/1-China-network-thumbnail.png
-chapters: {
-  "Introduction": "0s",
-  "How does it work?": 50s,
-  "ICP Regulations": 1m35s,
-  "China Express": 2m
-  }
+chapters:
+  {
+    "Introduction": "0s",
+    "How does it work?": 50s,
+    "ICP Regulations": 1m35s,
+    "China Express": 2m,
+  }
+transcript: |
+  WEBVTT
+
+  1
+  00:00:03.650 --> 00:00:08.210
+  Do you have users in mainland China who are 
+  experiencing high latency accessing your
+
+  2
+  00:00:08.210 --> 00:00:12.860
+  services? Cloudflare China network solution 
+  can help you solve this easily.
+
+  3
+  00:00:13.310 --> 00:00:18.530
+  Hello, I'm Jess from Cloudflare here to teach 
+  you about our China network products.
+
+  4
+  00:00:18.530 --> 00:00:23.780
+  Sometimes when the internet users in mainland 
+  China visit your website on Cloudflare global
+
+  5
+  00:00:23.780 --> 00:00:27.620
+  network. They are connected to data centers 
+  outside of mainland China,
+
+  6
+  00:00:27.620 --> 00:00:32.210
+  and these longer distances will lead to high 
+  latency and low availability,
+
+  7
+  00:00:32.210 --> 00:00:35.240
+  creating a slow and poor user experience.
+
+  8
+  00:00:35.510 --> 00:00:40.160
+  We can speed up these web services easily 
+  with Cloudflare China network solution,
+
+  9
+  00:00:40.160 --> 00:00:46.530
+  with availability improving from 25% to 100% 
+  and response time speeding up from 300
+
+  10
+  00:00:46.530 --> 00:00:49.040
+  milliseconds to just 50 milliseconds.
+
+  11
+  00:00:49.040 --> 00:00:55.160
+  How first Cloudflare China network provides 
+  caching in mainland China through our partner
+
+  12
+  00:00:55.190 --> 00:00:58.640
+  JD cloud, with data centers in 34 cities.
+
+  13
+  00:00:58.640 --> 00:01:03.530
+  This means for your users in mainland China, 
+  their requests will go to the nearest data
+
+  14
+  00:01:03.560 --> 00:01:08.570
+  center inside of mainland China instead of 
+  any external Cloudflare data center.
+
+  15
+  00:01:08.600 --> 00:01:11.870
+  Shorter distance means faster content 
+  delivery.
+
+  16
+  00:01:11.930 --> 00:01:15.980
+  These data centers are fully integrated with 
+  Cloudflare global network.
+
+  17
+  00:01:16.010 --> 00:01:22.050
+  You'll have access to the same configuration 
+  tools for cache WAF origin rules and other
+
+  18
+  00:01:22.050 --> 00:01:24.450
+  settings, all within a single dashboard.
+
+  19
+  00:01:24.960 --> 00:01:27.330
+  The same goes for name servers in Mainland 
+  China.
+
+  20
+  00:01:27.360 --> 00:01:30.840
+  If the majority of your users are located 
+  within Mainland China,
+
+  21
+  00:01:30.840 --> 00:01:35.910
+  we offer the option of an Inchina name server 
+  that will help speed up DNS resolution.
+
+  22
+  00:01:36.120 --> 00:01:41.070
+  Second, the China network is designed to 
+  follow mainland China's ICP regulations.
+
+  23
+  00:01:41.070 --> 00:01:46.020
+  This means we can guarantee your web service 
+  will always remain accessible to users in
+
+  24
+  00:01:46.050 --> 00:01:51.240
+  mainland China, without interruptions from 
+  local internet service providers or ISPs.
+
+  25
+  00:01:51.270 --> 00:01:55.500
+  If you're not sure how ICP works, 
+  our China based partners can help you with
+
+  26
+  00:01:55.500 --> 00:01:57.840
+  the ICP filing and maintenance.
+
+  27
+  00:01:57.870 --> 00:02:03.210
+  Third, for dynamic content that cannot be 
+  cached in the data centers within mainland
+
+  28
+  00:02:03.210 --> 00:02:09.300
+  China, such as API calls or web apps, 
+  users may still experience increased latency
+
+  29
+  00:02:09.300 --> 00:02:12.540
+  if your origin is located outside of mainland 
+  China.
+
+  30
+  00:02:12.540 --> 00:02:16.590
+  So for these cases, we offer the option of 
+  China Express,
+
+  31
+  00:02:16.590 --> 00:02:21.870
+  which will accelerate both DNS resolution and 
+  traffic for origin content.
+
+  32
+  00:02:21.900 --> 00:02:24.840
+  Watch our video on China Express to learn 
+  more.
+
+  33
+  00:02:24.870 --> 00:02:29.490
+  Thus, the China network solutions sound like 
+  something that will help you reach out to our
+
+  34
+  00:02:29.490 --> 00:02:30.870
+  sales team to learn more.

src/pages/videos/[...slug].astro

@@ -5,7 +5,7 @@ import StarlightPage, {
 	type StarlightPageProps,
 } from "@astrojs/starlight/components/StarlightPage.astro";
 
-import { Stream, Width } from "~/components";
+import { Stream, Width, Details } from "~/components";
 
 export const getStaticPaths = (async () => {
 	const entries = await getCollection("stream");
@@ -33,10 +33,38 @@ const props = {
 	},
 	hideBreadcrumbs: true,
 } as StarlightPageProps;
+
+let parts;
+if (entry.transcript) {
+	let replaced = entry.transcript.replace("WEBVTT", "");
+
+	replaced = replaced.replace(/.+ --> .+/g, "");
+	replaced = replaced.replace(/<\/c>/g, "");
+	replaced = replaced.replace(/<.+?>/g, "");
+	replaced = replaced.replace(/^\s*$/g, "");
+	replaced = replaced.replace(/&nbsp;/g, " ");
+
+	parts = replaced.split("\n\n");
+
+	parts = parts.map((line) => line.trim().replaceAll("\n", ""));
+	parts = parts.filter(Boolean);
+	parts = parts.filter((line) => !/\d/.test(line));
+	parts = parts.filter((line, index, lines) => line !== lines[index + 1]);
+}
 ---
 
 <StarlightPage {...props}>
 	<Width size="large" center={true}>
 		<Stream id={entry.id} title={entry.title} chapters={entry.chapters} />
+			{
+				parts && (
+					<br/>
+					<Details header="Transcript">
+						{parts.map((part) => (
+							<p>{part}</p>
+						))}
+					</Details>
+				)
+			}
 	</Width>
 </StarlightPage>