Skip to content

Commit beab5c7

Browse files
parloughparlough
authored
Use lite-youtube web component to speed up homepage load (#11806)
This significantly improves the loading time of the pages with YouTube embeds, such as the docs homepage and the widget catalog index.
1 parent d9998fd commit beab5c7

File tree

15 files changed

+55
-46
lines changed

15 files changed

+55
-46
lines changed

‎src/_11ty/shortcodes.ts

+5-11
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,11 @@ export function registerShortcodes(eleventyConfig: UserConfig): void {
1010
}
1111

1212
function _setupMedia(eleventyConfig: UserConfig): void {
13-
eleventyConfig.addShortcode('ytEmbed', function (id: string, title: string, skipAlternativeLink = false, fullWidth = false) {
14-
let embedMarkup = `<iframe ${fullWidth ? 'class="full-width"' : 'width="560" height="315"'}
15-
src="https://www.youtube.com/embed/${id}" title="${title}" frameborder="0"
16-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
17-
allowfullscreen loading="lazy"></iframe><br>`;
18-
19-
if (!skipAlternativeLink) {
20-
embedMarkup += `<p><a href="https://www.youtube.com/watch/${id}" target="_blank" rel="noopener" title="Open '${title}' video in new tab">${title}</a></p>`;
21-
}
22-
23-
return embedMarkup;
13+
eleventyConfig.addShortcode('ytEmbed', function (id: string, title: string, fullWidth = false) {
14+
return `
15+
<lite-youtube videoid="${id}" videotitle="${title}" ${fullWidth ? 'class="full-width"' : ''}>
16+
<p><a class="lite-youtube-fallback" href="https://www.youtube.com/watch/${id}" target="_blank" rel="noopener">Watch on YouTube in a new tab: "${title}"</a></p>
17+
</lite-youtube>`;
2418
});
2519

2620
eleventyConfig.addPairedShortcode('videoWrapper', function (content: string, intro = '') {

‎src/_layouts/base.html

+1
Original file line numberDiff line numberDiff line change
@@ -113,5 +113,6 @@
113113
{% endfor -%}
114114
{% endif -%}
115115

116+
<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/[email protected]/lite-youtube.js" integrity="sha256-86ffB4sPsE/4qX2arBqtw6F1Ofv8lvv7AomIyHHTB5s=" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
116117
</body>
117118
</html>

‎src/_sass/base/_base.scss

+9
Original file line numberDiff line numberDiff line change
@@ -443,6 +443,15 @@ td ol, td ul, td dl, td p {
443443
padding: 0 0.75rem;
444444
text-wrap: pretty;
445445
}
446+
447+
lite-youtube {
448+
border-radius: 0.25rem;
449+
border: 2px solid $site-color-card-border;
450+
}
451+
}
452+
453+
lite-youtube:not(.full-width) {
454+
max-width: 560px;
446455
}
447456

448457
.footnote-ref a {

‎src/_sass/base/_variables.scss

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ $site-color-body-caption: color.scale($site-color-body, $lightness: 30%);
2525
$site-color-footer: #303c42;
2626
$site-color-primary: $flutter-color-blue-500;
2727
$site-color-panel-background: color.scale($site-color-primary, $lightness: 95%);
28+
$site-color-card-border: rgba(0, 0, 0, .125);
2829
$sidenav-divider-color: #e7e8ed;
2930

3031
// Fonts

‎src/_sass/components/_card.scss

+4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
margin-block-end: 1rem;
99
justify-content: center;
1010

11+
// Disable lite-youtube shadow for videos in cards.
12+
--lite-youtube-frame-shadow-visible: false;
13+
1114
&.wide {
1215
--card-min-width: 19rem;
1316
}
@@ -47,6 +50,7 @@
4750

4851
&.wrapped-card {
4952
padding: 0;
53+
border-width: 2px;
5054
}
5155

5256
.card-leading {

‎src/content/data-and-backend/state-mgmt/options.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ doesn't need a `BuildContext`.
191191
:::note
192192
To learn more, watch this short Package of the Week video on the GetIt package:
193193

194-
{% ytEmbed 'f9XQD5mf6FY', 'get_it | Flutter package of the week', true %}
194+
{% ytEmbed 'f9XQD5mf6FY', 'get_it | Flutter package of the week' %}
195195
:::
196196

197197
[Flutter state management for minimalists]: {{site.medium}}/flutter-community/flutter-state-management-for-minimalists-4c71a2f2f0c1?sk=6f9cedfb550ca9cc7f88317e2e7055a0

‎src/content/get-started/flutter-for/swiftui-devs.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ you can open and run some of the examples on DartPad.
4949
As an introduction, watch the following video.
5050
It outlines how Flutter works on iOS and how to use Flutter to build iOS apps.
5151

52-
{% ytEmbed 'ceMsPBbcEGg', 'Flutter for iOS developers', false, true %}
52+
{% ytEmbed 'ceMsPBbcEGg', 'Flutter for iOS developers', true %}
5353

5454
Flutter and SwiftUI code describes how the UI looks and works.
5555
Developers call this type of code a _declarative framework_.

‎src/content/get-started/flutter-for/uikit-devs.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ Jump around and find questions that address your most relevant needs.
4646
As an introduction, watch the following video.
4747
It outlines how Flutter works on iOS and how to use Flutter to build iOS apps.
4848

49-
{% ytEmbed 'ceMsPBbcEGg', 'Flutter for iOS developers', false, true %}
49+
{% ytEmbed 'ceMsPBbcEGg', 'Flutter for iOS developers', true %}
5050

5151
### Views vs. Widgets
5252

‎src/content/index.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -78,14 +78,14 @@ Learn more about `Stateless` and `Stateful`
7878
widgets in [What is State?][]
7979

8080
<div class="card-grid">
81-
<div class="card wrapped-card">
81+
<div class="card wrapped-card outlined-card">
8282
<div class="card-content">
83-
{% ytEmbed 'xWV71C2kp38', 'Create your first Flutter app', true, true %}
83+
{% ytEmbed 'xWV71C2kp38', 'Create your first Flutter app', true %}
8484
</div>
8585
</div>
86-
<div class="card wrapped-card">
86+
<div class="card wrapped-card outlined-card">
8787
<div class="card-content">
88-
{% ytEmbed 'QlwiL_yLh6E', 'What is state?', true, true %}
88+
{% ytEmbed 'QlwiL_yLh6E', 'What is state?', true %}
8989
</div>
9090
</div>
9191
</div>
@@ -94,7 +94,7 @@ widgets in [What is State?][]
9494
[What is State?]: {{site.yt.watch}}?v=QlwiL_yLh6E
9595

9696
{% videoWrapper 'Only have 60 seconds? Learn how to build and deploy a Flutter App!' %}
97-
{% ytEmbed 'ZnufaryH43s', 'How to build and deploy a Flutter app in 60 seconds!', true %}
97+
{% ytEmbed 'ZnufaryH43s', 'How to build and deploy a Flutter app in 60 seconds!' %}
9898
{% endvideoWrapper %}
9999

100100
## Want to skill up?
@@ -105,14 +105,14 @@ using helper methods][standalone-widgets] or
105105
[what is "BuildContext" and how is it used][buildcontext]?
106106

107107
<div class="card-grid">
108-
<div class="card wrapped-card">
108+
<div class="card wrapped-card outlined-card">
109109
<div class="card-content">
110-
{% ytEmbed 'IOyq-eTRhvo', 'Widgets vs helper methods | Decoding Flutter', true, true %}
110+
{% ytEmbed 'IOyq-eTRhvo', 'Widgets vs helper methods | Decoding Flutter', true %}
111111
</div>
112112
</div>
113-
<div class="card wrapped-card">
113+
<div class="card wrapped-card outlined-card">
114114
<div class="card-content">
115-
{% ytEmbed 'rIaaH87z1-g', 'BuildContext?! | Decoding Flutter', true, true %}
115+
{% ytEmbed 'rIaaH87z1-g', 'BuildContext?! | Decoding Flutter', true %}
116116
</div>
117117
</div>
118118
</div>

‎src/content/testing/common-errors.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -500,7 +500,7 @@ For more information and to learn how to fix,
500500
check out the following video on
501501
[`PrimaryScrollController`][controller-video]:
502502

503-
{% ytEmbed '33_0ABjFJUU', 'PrimaryScrollController | Decoding Flutter', true %}
503+
{% ytEmbed '33_0ABjFJUU', 'PrimaryScrollController | Decoding Flutter' %}
504504

505505
[controller-video]: {{site.api}}/flutter/widgets/PrimaryScrollController-class.html
506506

‎src/content/ui/animations/index.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ For a deeper understanding of just how animations work in Flutter, watch
4040
[Animation deep dive][].
4141
(Also published as a [_companion article_][article6].)
4242

43-
{% ytEmbed 'PbcILiN8rbo', 'Take a deep dive into Flutter animation', true %}
43+
{% ytEmbed 'PbcILiN8rbo', 'Take a deep dive into Flutter animation' %}
4444

4545
## Implicit and explicit animations
4646

@@ -71,7 +71,7 @@ For more information, watch
7171
built-in explicit animations][].
7272
(Also published as a [_companion article_][article4].)
7373

74-
{% ytEmbed 'CunyH6unILQ', 'Making your first directional animations with built-in explicit animations', true %}
74+
{% ytEmbed 'CunyH6unILQ', 'Making your first directional animations with built-in explicit animations' %}
7575

7676
### Explicit animations
7777

@@ -80,7 +80,7 @@ If you need to build an explicit animation from scratch, watch
8080
AnimatedBuilder and AnimatedWidget][].
8181
(Also published as a [_companion article_][article5].)
8282

83-
{% ytEmbed 'fneC7t4R_B0', 'Creating custom explicit animations with AnimatedBuilder and AnimatedWidget', true %}
83+
{% ytEmbed 'fneC7t4R_B0', 'Creating custom explicit animations with AnimatedBuilder and AnimatedWidget' %}
8484

8585
## Animation types
8686

‎src/content/ui/animations/staggered-animations.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ staggered_pic_selection.
5656
The following video demonstrates the animation performed by
5757
basic_staggered_animation:
5858

59-
{% ytEmbed '0fFvnZemmh8', 'Staggered animation example', true %}
59+
{% ytEmbed '0fFvnZemmh8', 'Staggered animation example' %}
6060

6161
In the video, you see the following animation of a single widget,
6262
which begins as a bordered blue square with slightly rounded corners.

‎src/content/ui/layout/index.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1298,9 +1298,9 @@ The following videos, part of the
12981298
[Flutter in Focus][] series,
12991299
explain `Stateless` and `Stateful` widgets.
13001300

1301-
{% ytEmbed 'wE7khGHVkYY', 'How to create stateless widgets', true %}
1301+
{% ytEmbed 'wE7khGHVkYY', 'How to create stateless widgets' %}
13021302

1303-
{% ytEmbed 'AqCMFXEmf3w', 'How and when stateful widgets are best used', true %}
1303+
{% ytEmbed 'AqCMFXEmf3w', 'How and when stateful widgets are best used' %}
13041304

13051305
[Flutter in Focus playlist]({{site.yt.playlist}}PLjxrf2q8roU2HdJQDjJzOeO6J3FoFLWr2)
13061306

@@ -1310,7 +1310,7 @@ Each episode of the
13101310
[Widget of the Week series]({{site.yt.playlist}}PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG)
13111311
focuses on a widget. Several of them includes layout widgets.
13121312

1313-
{% ytEmbed 'b_sQ9bMltGU', 'Introducing widget of the week', true %}
1313+
{% ytEmbed 'b_sQ9bMltGU', 'Introducing widget of the week' %}
13141314

13151315
[Flutter Widget of the Week playlist]({{site.yt.playlist}}PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG)
13161316

‎src/content/ui/layout/scrolling/slivers.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,21 @@ in Flutter, see the following resources:
2929
video that gives an overview of the
3030
`SliverAppBar` widget.
3131

32-
{% ytEmbed 'R9C5KMJKluE', 'SliverAppBar | Flutter widget of the week', true %}
32+
{% ytEmbed 'R9C5KMJKluE', 'SliverAppBar | Flutter widget of the week' %}
3333

3434
**[SliverList and SliverGrid][]**
3535
: A one-minute Widget-of-the-week
3636
video that gives an overview of the `SliverList`
3737
and `SliverGrid` widgets.
3838

39-
{% ytEmbed 'ORiTTaVY6mM', 'SliverList & SliverGrid | Flutter widget of the week', true %}
39+
{% ytEmbed 'ORiTTaVY6mM', 'SliverList & SliverGrid | Flutter widget of the week' %}
4040

4141
**[Slivers explained - Making dynamic layouts][]**
4242
: A 50-minute episode of [The Boring Show][]
4343
where Ian Hickson, Flutter's Tech Lead, and Filip Hracek
4444
discuss the power of slivers.
4545

46-
{% ytEmbed 'Mz3kHQxBjGg', 'Slivers explained - Making dynamic layouts', true %}
46+
{% ytEmbed 'Mz3kHQxBjGg', 'Slivers explained - Making dynamic layouts' %}
4747

4848
## API docs
4949

‎src/content/ui/widgets/index.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -62,34 +62,34 @@ like input, layout, and text.
6262
help you quickly get started with Flutter widgets.
6363

6464
<div class="card-grid wide">
65-
<div class="card wrapped-card">
65+
<div class="card wrapped-card outlined-card">
6666
<div class="card-content">
67-
{% ytEmbed '1z6YP7YmvwA', 'TextStyle - Flutter widget of the week', true, true %}
67+
{% ytEmbed '1z6YP7YmvwA', 'TextStyle - Flutter widget of the week', true %}
6868
</div>
6969
</div>
70-
<div class="card wrapped-card">
70+
<div class="card wrapped-card outlined-card">
7171
<div class="card-content">
72-
{% ytEmbed 'VdkRy3yZiPo', 'flutter_rating_bar - Flutter package of the week', true, true %}
72+
{% ytEmbed 'VdkRy3yZiPo', 'flutter_rating_bar - Flutter package of the week', true %}
7373
</div>
7474
</div>
75-
<div class="card wrapped-card">
75+
<div class="card wrapped-card outlined-card">
7676
<div class="card-content">
77-
{% ytEmbed 'gYNTcgZVcWw', 'LinearGradient - Flutter widget of the week', true, true %}
77+
{% ytEmbed 'gYNTcgZVcWw', 'LinearGradient - Flutter widget of the week', true %}
7878
</div>
7979
</div>
80-
<div class="card wrapped-card">
80+
<div class="card wrapped-card outlined-card">
8181
<div class="card-content">
82-
{% ytEmbed '-Nny8kzW380', 'AutoComplete - Flutter widget of the week', true, true %}
82+
{% ytEmbed '-Nny8kzW380', 'AutoComplete - Flutter widget of the week', true %}
8383
</div>
8484
</div>
85-
<div class="card wrapped-card">
85+
<div class="card wrapped-card outlined-card">
8686
<div class="card-content">
87-
{% ytEmbed 'y9xchtVTtqQ', 'NavigationRail - Flutter widget of the week', true, true %}
87+
{% ytEmbed 'y9xchtVTtqQ', 'NavigationRail - Flutter widget of the week', true %}
8888
</div>
8989
</div>
90-
<div class="card wrapped-card">
90+
<div class="card wrapped-card outlined-card">
9191
<div class="card-content">
92-
{% ytEmbed 'qjA0JFiPMnQ', 'mason - Flutter package of the week', true, true %}
92+
{% ytEmbed 'qjA0JFiPMnQ', 'mason - Flutter package of the week', true %}
9393
</div>
9494
</div>
9595
</div>

0 commit comments

Comments
 (0)