Skip to content

Commit 3d68a36

Browse files
committedJan 19, 2025
feat(videos): add video tutorial section and layout
Introduced a new videos page with a collection of tutorials for learning Aurelia. Updated the header to include a link to the videos section and created a layout for displaying individual video content.
1 parent fdbc780 commit 3d68a36

File tree

3 files changed

+62
-0
lines changed

3 files changed

+62
-0
lines changed
 

‎content/videos.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: "Videos"
3+
description: "Videos for learning Aurelia"
4+
url: "/videos/"
5+
type: "videos"
6+
videos:
7+
- title: "Working with AppTasks in Aurelia 2"
8+
youtube_id: "gR5pdsYh1uU"
9+
description: "Learn how to use AppTasks and how they differ from other Aurelia lifecycles."
10+
---
11+
12+
Learn about the fundamentals of Aurelia and how to work with its numerous APIs through our video tutorials.
13+
14+
## Tutorial Videos
15+
16+
Below you'll find a curated collection of videos to help you master Aurelia 2.
17+

‎themes/aurelia-theme/data/header.yaml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ menu:
3232
- name: "Resources"
3333
link: "/learn"
3434
active: "eq .RelPermalink '/learn/'"
35+
- name: "Videos"
36+
link: "/videos"
37+
active: "eq .RelPermalink '/videos/'"
3538
- title: "Community"
3639
items:
3740
- name: "Newsletter"
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{{ define "main" }}
2+
3+
{{ partial "page-header" . }}
4+
5+
<!-- Video Content -->
6+
<article class="py-4 bg-white">
7+
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
8+
<div class="prose prose-lg max-w-none
9+
prose-h1:text-4xl prose-h1:font-bold prose-h1:mb-8 prose-h1:text-gray-900
10+
prose-h2:text-3xl prose-h2:font-bold prose-h2:mb-6 prose-h2:mt-12 prose-h2:text-gray-900
11+
prose-h3:text-2xl prose-h3:font-bold prose-h3:mb-4 prose-h3:mt-8 prose-h3:text-gray-900
12+
prose-p:text-base prose-p:leading-relaxed prose-p:mb-6 prose-p:text-gray-700">
13+
{{ .Content }}
14+
15+
<!-- Videos Grid -->
16+
{{ with .Params.videos }}
17+
<div class="grid gap-8 mt-8">
18+
{{ range . }}
19+
<div class="video-container bg-gray-50 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300">
20+
<!-- Video container with correct 16:9 aspect ratio (56.25%) -->
21+
<div class="relative" style="padding-bottom: 56.25%">
22+
<iframe
23+
src="https://www.youtube.com/embed/{{ .youtube_id }}"
24+
class="absolute top-0 left-0 w-full h-full"
25+
title="{{ .title }}"
26+
frameborder="0"
27+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
28+
allowfullscreen>
29+
</iframe>
30+
</div>
31+
<div class="p-6">
32+
<h3 class="text-xl font-semibold text-gray-900 mb-2">{{ .title }}</h3>
33+
<p class="text-gray-600">{{ .description }}</p>
34+
</div>
35+
</div>
36+
{{ end }}
37+
</div>
38+
{{ end }}
39+
</div>
40+
</div>
41+
</article>
42+
{{ end }}

0 commit comments

Comments
 (0)