diff --git a/src/_11ty/shortcodes.ts b/src/_11ty/shortcodes.ts index 2f114da6a7..76f238342b 100644 --- a/src/_11ty/shortcodes.ts +++ b/src/_11ty/shortcodes.ts @@ -10,17 +10,11 @@ export function registerShortcodes(eleventyConfig: UserConfig): void { } function _setupMedia(eleventyConfig: UserConfig): void { - eleventyConfig.addShortcode('ytEmbed', function (id: string, title: string, skipAlternativeLink = false, fullWidth = false) { - let embedMarkup = `
`; - - if (!skipAlternativeLink) { - embedMarkup += `

${title}

`; - } - - return embedMarkup; + eleventyConfig.addShortcode('ytEmbed', function (id: string, title: string, fullWidth = false) { + return ` + +

Watch on YouTube in a new tab: "${title}"

+`; }); eleventyConfig.addPairedShortcode('videoWrapper', function (content: string, intro = '') { diff --git a/src/_layouts/base.html b/src/_layouts/base.html index a678544ce5..100c9c0329 100644 --- a/src/_layouts/base.html +++ b/src/_layouts/base.html @@ -113,5 +113,6 @@ {% endfor -%} {% endif -%} + \ No newline at end of file diff --git a/src/_sass/base/_base.scss b/src/_sass/base/_base.scss index f37ad5dfb8..be4bcd918a 100644 --- a/src/_sass/base/_base.scss +++ b/src/_sass/base/_base.scss @@ -443,6 +443,15 @@ td ol, td ul, td dl, td p { padding: 0 0.75rem; text-wrap: pretty; } + + lite-youtube { + border-radius: 0.25rem; + border: 2px solid $site-color-card-border; + } +} + +lite-youtube:not(.full-width) { + max-width: 560px; } .footnote-ref a { diff --git a/src/_sass/base/_variables.scss b/src/_sass/base/_variables.scss index 3ef13b5542..0c14ff6b43 100644 --- a/src/_sass/base/_variables.scss +++ b/src/_sass/base/_variables.scss @@ -25,6 +25,7 @@ $site-color-body-caption: color.scale($site-color-body, $lightness: 30%); $site-color-footer: #303c42; $site-color-primary: $flutter-color-blue-500; $site-color-panel-background: color.scale($site-color-primary, $lightness: 95%); +$site-color-card-border: rgba(0, 0, 0, .125); $sidenav-divider-color: #e7e8ed; // Fonts diff --git a/src/_sass/components/_card.scss b/src/_sass/components/_card.scss index e13727c83a..b89caa649e 100644 --- a/src/_sass/components/_card.scss +++ b/src/_sass/components/_card.scss @@ -8,6 +8,9 @@ margin-block-end: 1rem; justify-content: center; + // Disable lite-youtube shadow for videos in cards. + --lite-youtube-frame-shadow-visible: false; + &.wide { --card-min-width: 19rem; } @@ -47,6 +50,7 @@ &.wrapped-card { padding: 0; + border-width: 2px; } .card-leading { diff --git a/src/content/data-and-backend/state-mgmt/options.md b/src/content/data-and-backend/state-mgmt/options.md index b316912aae..239cdbb18a 100644 --- a/src/content/data-and-backend/state-mgmt/options.md +++ b/src/content/data-and-backend/state-mgmt/options.md @@ -191,7 +191,7 @@ doesn't need a `BuildContext`. :::note To learn more, watch this short Package of the Week video on the GetIt package: -{% ytEmbed 'f9XQD5mf6FY', 'get_it | Flutter package of the week', true %} +{% ytEmbed 'f9XQD5mf6FY', 'get_it | Flutter package of the week' %} ::: [Flutter state management for minimalists]: {{site.medium}}/flutter-community/flutter-state-management-for-minimalists-4c71a2f2f0c1?sk=6f9cedfb550ca9cc7f88317e2e7055a0 diff --git a/src/content/get-started/flutter-for/swiftui-devs.md b/src/content/get-started/flutter-for/swiftui-devs.md index b94820653f..d25e227025 100644 --- a/src/content/get-started/flutter-for/swiftui-devs.md +++ b/src/content/get-started/flutter-for/swiftui-devs.md @@ -49,7 +49,7 @@ you can open and run some of the examples on DartPad. As an introduction, watch the following video. It outlines how Flutter works on iOS and how to use Flutter to build iOS apps. -{% ytEmbed 'ceMsPBbcEGg', 'Flutter for iOS developers', false, true %} +{% ytEmbed 'ceMsPBbcEGg', 'Flutter for iOS developers', true %} Flutter and SwiftUI code describes how the UI looks and works. Developers call this type of code a _declarative framework_. diff --git a/src/content/get-started/flutter-for/uikit-devs.md b/src/content/get-started/flutter-for/uikit-devs.md index c7c01603e1..42c3a5900f 100644 --- a/src/content/get-started/flutter-for/uikit-devs.md +++ b/src/content/get-started/flutter-for/uikit-devs.md @@ -46,7 +46,7 @@ Jump around and find questions that address your most relevant needs. As an introduction, watch the following video. It outlines how Flutter works on iOS and how to use Flutter to build iOS apps. -{% ytEmbed 'ceMsPBbcEGg', 'Flutter for iOS developers', false, true %} +{% ytEmbed 'ceMsPBbcEGg', 'Flutter for iOS developers', true %} ### Views vs. Widgets diff --git a/src/content/index.md b/src/content/index.md index e115966cee..fd74f1ee6c 100644 --- a/src/content/index.md +++ b/src/content/index.md @@ -78,14 +78,14 @@ Learn more about `Stateless` and `Stateful` widgets in [What is State?][]
-
+
- {% ytEmbed 'xWV71C2kp38', 'Create your first Flutter app', true, true %} + {% ytEmbed 'xWV71C2kp38', 'Create your first Flutter app', true %}
-
+
- {% ytEmbed 'QlwiL_yLh6E', 'What is state?', true, true %} + {% ytEmbed 'QlwiL_yLh6E', 'What is state?', true %}
@@ -94,7 +94,7 @@ widgets in [What is State?][] [What is State?]: {{site.yt.watch}}?v=QlwiL_yLh6E {% videoWrapper 'Only have 60 seconds? Learn how to build and deploy a Flutter App!' %} -{% ytEmbed 'ZnufaryH43s', 'How to build and deploy a Flutter app in 60 seconds!', true %} +{% ytEmbed 'ZnufaryH43s', 'How to build and deploy a Flutter app in 60 seconds!' %} {% endvideoWrapper %} ## Want to skill up? @@ -105,14 +105,14 @@ using helper methods][standalone-widgets] or [what is "BuildContext" and how is it used][buildcontext]?
-
+
- {% ytEmbed 'IOyq-eTRhvo', 'Widgets vs helper methods | Decoding Flutter', true, true %} + {% ytEmbed 'IOyq-eTRhvo', 'Widgets vs helper methods | Decoding Flutter', true %}
-
+
- {% ytEmbed 'rIaaH87z1-g', 'BuildContext?! | Decoding Flutter', true, true %} + {% ytEmbed 'rIaaH87z1-g', 'BuildContext?! | Decoding Flutter', true %}
diff --git a/src/content/testing/common-errors.md b/src/content/testing/common-errors.md index d3d3b72bee..4c91237c9a 100644 --- a/src/content/testing/common-errors.md +++ b/src/content/testing/common-errors.md @@ -500,7 +500,7 @@ For more information and to learn how to fix, check out the following video on [`PrimaryScrollController`][controller-video]: -{% ytEmbed '33_0ABjFJUU', 'PrimaryScrollController | Decoding Flutter', true %} +{% ytEmbed '33_0ABjFJUU', 'PrimaryScrollController | Decoding Flutter' %} [controller-video]: {{site.api}}/flutter/widgets/PrimaryScrollController-class.html diff --git a/src/content/ui/animations/index.md b/src/content/ui/animations/index.md index 06ccd15a6c..1a24d398ae 100644 --- a/src/content/ui/animations/index.md +++ b/src/content/ui/animations/index.md @@ -40,7 +40,7 @@ For a deeper understanding of just how animations work in Flutter, watch [Animation deep dive][]. (Also published as a [_companion article_][article6].) -{% ytEmbed 'PbcILiN8rbo', 'Take a deep dive into Flutter animation', true %} +{% ytEmbed 'PbcILiN8rbo', 'Take a deep dive into Flutter animation' %} ## Implicit and explicit animations @@ -71,7 +71,7 @@ For more information, watch built-in explicit animations][]. (Also published as a [_companion article_][article4].) -{% ytEmbed 'CunyH6unILQ', 'Making your first directional animations with built-in explicit animations', true %} +{% ytEmbed 'CunyH6unILQ', 'Making your first directional animations with built-in explicit animations' %} ### Explicit animations @@ -80,7 +80,7 @@ If you need to build an explicit animation from scratch, watch AnimatedBuilder and AnimatedWidget][]. (Also published as a [_companion article_][article5].) -{% ytEmbed 'fneC7t4R_B0', 'Creating custom explicit animations with AnimatedBuilder and AnimatedWidget', true %} +{% ytEmbed 'fneC7t4R_B0', 'Creating custom explicit animations with AnimatedBuilder and AnimatedWidget' %} ## Animation types diff --git a/src/content/ui/animations/staggered-animations.md b/src/content/ui/animations/staggered-animations.md index 07afb0b8ec..220c8002ac 100644 --- a/src/content/ui/animations/staggered-animations.md +++ b/src/content/ui/animations/staggered-animations.md @@ -56,7 +56,7 @@ staggered_pic_selection. The following video demonstrates the animation performed by basic_staggered_animation: -{% ytEmbed '0fFvnZemmh8', 'Staggered animation example', true %} +{% ytEmbed '0fFvnZemmh8', 'Staggered animation example' %} In the video, you see the following animation of a single widget, which begins as a bordered blue square with slightly rounded corners. diff --git a/src/content/ui/layout/index.md b/src/content/ui/layout/index.md index 4184007c31..15177bd987 100644 --- a/src/content/ui/layout/index.md +++ b/src/content/ui/layout/index.md @@ -1298,9 +1298,9 @@ The following videos, part of the [Flutter in Focus][] series, explain `Stateless` and `Stateful` widgets. -{% ytEmbed 'wE7khGHVkYY', 'How to create stateless widgets', true %} +{% ytEmbed 'wE7khGHVkYY', 'How to create stateless widgets' %} -{% ytEmbed 'AqCMFXEmf3w', 'How and when stateful widgets are best used', true %} +{% ytEmbed 'AqCMFXEmf3w', 'How and when stateful widgets are best used' %} [Flutter in Focus playlist]({{site.yt.playlist}}PLjxrf2q8roU2HdJQDjJzOeO6J3FoFLWr2) @@ -1310,7 +1310,7 @@ Each episode of the [Widget of the Week series]({{site.yt.playlist}}PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG) focuses on a widget. Several of them includes layout widgets. -{% ytEmbed 'b_sQ9bMltGU', 'Introducing widget of the week', true %} +{% ytEmbed 'b_sQ9bMltGU', 'Introducing widget of the week' %} [Flutter Widget of the Week playlist]({{site.yt.playlist}}PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG) diff --git a/src/content/ui/layout/scrolling/slivers.md b/src/content/ui/layout/scrolling/slivers.md index 866843f423..5414805d63 100644 --- a/src/content/ui/layout/scrolling/slivers.md +++ b/src/content/ui/layout/scrolling/slivers.md @@ -29,21 +29,21 @@ in Flutter, see the following resources: video that gives an overview of the `SliverAppBar` widget. - {% ytEmbed 'R9C5KMJKluE', 'SliverAppBar | Flutter widget of the week', true %} + {% ytEmbed 'R9C5KMJKluE', 'SliverAppBar | Flutter widget of the week' %} **[SliverList and SliverGrid][]** : A one-minute Widget-of-the-week video that gives an overview of the `SliverList` and `SliverGrid` widgets. - {% ytEmbed 'ORiTTaVY6mM', 'SliverList & SliverGrid | Flutter widget of the week', true %} + {% ytEmbed 'ORiTTaVY6mM', 'SliverList & SliverGrid | Flutter widget of the week' %} **[Slivers explained - Making dynamic layouts][]** : A 50-minute episode of [The Boring Show][] where Ian Hickson, Flutter's Tech Lead, and Filip Hracek discuss the power of slivers. - {% ytEmbed 'Mz3kHQxBjGg', 'Slivers explained - Making dynamic layouts', true %} + {% ytEmbed 'Mz3kHQxBjGg', 'Slivers explained - Making dynamic layouts' %} ## API docs diff --git a/src/content/ui/widgets/index.md b/src/content/ui/widgets/index.md index b9429f9def..6ef6bab712 100644 --- a/src/content/ui/widgets/index.md +++ b/src/content/ui/widgets/index.md @@ -62,34 +62,34 @@ like input, layout, and text. help you quickly get started with Flutter widgets.
-
+
- {% ytEmbed '1z6YP7YmvwA', 'TextStyle - Flutter widget of the week', true, true %} + {% ytEmbed '1z6YP7YmvwA', 'TextStyle - Flutter widget of the week', true %}
-
+
- {% ytEmbed 'VdkRy3yZiPo', 'flutter_rating_bar - Flutter package of the week', true, true %} + {% ytEmbed 'VdkRy3yZiPo', 'flutter_rating_bar - Flutter package of the week', true %}
-
+
- {% ytEmbed 'gYNTcgZVcWw', 'LinearGradient - Flutter widget of the week', true, true %} + {% ytEmbed 'gYNTcgZVcWw', 'LinearGradient - Flutter widget of the week', true %}
-
+
- {% ytEmbed '-Nny8kzW380', 'AutoComplete - Flutter widget of the week', true, true %} + {% ytEmbed '-Nny8kzW380', 'AutoComplete - Flutter widget of the week', true %}
-
+
- {% ytEmbed 'y9xchtVTtqQ', 'NavigationRail - Flutter widget of the week', true, true %} + {% ytEmbed 'y9xchtVTtqQ', 'NavigationRail - Flutter widget of the week', true %}
-
+
- {% ytEmbed 'qjA0JFiPMnQ', 'mason - Flutter package of the week', true, true %} + {% ytEmbed 'qjA0JFiPMnQ', 'mason - Flutter package of the week', true %}