diff --git a/content/_includes/embed.macros.njk b/content/_includes/embed.macros.njk index 6784d4d7c..164cb6584 100644 --- a/content/_includes/embed.macros.njk +++ b/content/_includes/embed.macros.njk @@ -132,27 +132,66 @@ note: | params: src: type: url - height: + width: type: number default: none - width: + height: type: number default: none #} {% macro _video( src, - height=none, - width=none + width=none, + height=none ) %} - {%- set src = '/assets/media/' + src -%} - {%- set style = { - 'height': height, - 'width': width - } -%} - + {%- set src = '/assets/media/' + src -%} + {%- set style = { + 'height': height, + 'width': width + } -%} + {% endmacro %} +{# @docs +label: _youtube +category: Embed +note: Embed a video from Youtube +params: + id: + type: string + width: + type: number + default: none + height: + type: number + default: none + span: + type: number | 'full' + default: none + note: Span multiple columns of a gallery +#} +{% macro _youtube( + id, + width=none, + height=none, + span=none +) -%} + {%- set width = width or 560 -%} + {%- set height = height or 315 -%} + {%- set style = { + '--ratio': (width / height), + '--width': '100%', + '--span': span + } -%} + + + +{%- endmacro %} + + {# Private macro used to generate figure content from data #} {% macro _fig_content( data @@ -173,13 +212,13 @@ params: {%- elif item.svg -%} {{- svg(item.svg, item.alt) | safe -}} {%- elif item.iframe -%} - {{- iframe(item.iframe, item.width, item.height, item.span) -}} + {{- _iframe(item.iframe, item.width, item.height, item.span) -}} {%- elif item.audio -%} {{- audio(item.audio, item.span) -}} {%- elif item.youtube -%} {{- _youtube(item.youtube, item.width, item.height, item.span) -}} {%- elif item.video -%} - {{- _video(item.video, item.height, item.width) -}} + {{- _video(item.video, item.width, item.height) -}} {%- endif -%} {%- endfor -%} {%- endmacro %} @@ -399,7 +438,7 @@ params: {# @docs -label: iframe +label: _iframe category: Embed note: | Embed an iframe (most often used for videos). @@ -419,7 +458,7 @@ params: default: none note: Span multiple columns of a gallery #} -{% macro iframe( +{% macro _iframe( src, width=none, height=none, @@ -465,36 +504,6 @@ params: {%- endmacro %} -{# @docs -label: _youtube -category: Embed -note: Embed a video from Youtube -params: - id: - type: string -#} -{% macro _youtube( - id, - width, - height, - span=none -) -%} - {%- set width = width or 560 -%} - {%- set height = height or 315 -%} - {% set has_ratio = width | typeCheck('number') and height | typeCheck('number') %} - {%- set style = { - '--ratio': (width / height) if has_ratio else null, - '--width': '100%', - '--span': span - } -%} - - - -{%- endmacro %} - - {# @docs label: ratio category: Layout diff --git a/content/blog/2017/css-day.md b/content/blog/2017/css-day.md index 9b82c2504..fb3f8c5a4 100644 --- a/content/blog/2017/css-day.md +++ b/content/blog/2017/css-day.md @@ -39,7 +39,7 @@ leading to her recent [SVG Animations] book from O'Reilly. ## Color Theory for people who code SVG and CSS by [Natalya Shelburne] -{{ embed.figure(data=[{youtube:'aq3u001QMcM'}]) }} +{{ embed.figure(data=[{ youtube: 'aq3u001QMcM' }]) }} - [Slides](https://docs.google.com/presentation/d/1ytSMRNpNrD9CWms351X4xelQuJT24tIqKnIzSbe2OQ0/edit?usp=sharing) @@ -47,7 +47,7 @@ leading to her recent [SVG Animations] book from O'Reilly. ## Applying the principles of functional programming to CSS by [Ben Adam] -{{ embed.figure(data=[{youtube:'7g0BHu0kWXo'}]) }} +{{ embed.figure(data=[{ youtube: '7g0BHu0kWXo' }]) }} - [Slides](https://css-day.surge.sh/) @@ -55,13 +55,13 @@ leading to her recent [SVG Animations] book from O'Reilly. ## Code Patterns for Pattern Making by [Miriam Suzanne] -{{ embed.figure(data=[{youtube:'lK_akjzOUY0'}]) }} +{{ embed.figure(data=[{ youtube: 'lK_akjzOUY0' }]) }} [Miriam Suzanne]: https://twitter.com/TerribleMia/ ## The In-Betweeners of Responsive Web Design by [Pralie Dutzel] -{{ embed.figure(data=[{youtube:'WLAVc18Ugoc'}]) }} +{{ embed.figure(data=[{ youtube: 'WLAVc18Ugoc' }]) }} - [Slides](http://praliedutzel.com/talks/betweeners-responsive-web-design/) @@ -69,13 +69,13 @@ leading to her recent [SVG Animations] book from O'Reilly. ## Style Guide-Driven Development: Documentation that Does Work by [Jan Jorgensen] -{{ embed.figure(data=[{youtube:'9Fknadsepd4'}]) }} +{{ embed.figure(data=[{ youtube: '9Fknadsepd4' }]) }} [Jan Jorgensen]: https://twitter.com/ramblinjan ## The Great State of Design by [Stacy Kvernmo] -{{ embed.figure(data=[{youtube:'pnbT4HdcSwM'}]) }} +{{ embed.figure(data=[{ youtube: 'pnbT4HdcSwM' }]) }} - [Slides](https://www.slideshare.net/Funstacy/the-great-state-of-design-with-css-grid-layout-and-friends) @@ -94,7 +94,7 @@ jQuery to CSS for web and mobile applications. ## Solving CSS at scale with your own UI framework by [CJ Cenizal] -{{ embed.figure(data=[{youtube:'CbPYf9FslXw'}]) }} +{{ embed.figure(data=[{ youtube: 'CbPYf9FslXw' }]) }} [CJ Cenizal]: https://twitter.com/TheCJCenizal diff --git a/content/blog/2022/shared-elements.md b/content/blog/2022/shared-elements.md index 36732306f..8819b4794 100644 --- a/content/blog/2022/shared-elements.md +++ b/content/blog/2022/shared-elements.md @@ -148,7 +148,7 @@ And earlier this year, presented a new proposal & prototype, which makes that possible! -{{ embed.figure(data=[{youtube:'JCJUPJ_zDQ4'}]) }} +{{ embed.figure(data=[{ youtube: 'JCJUPJ_zDQ4' }]) }} 1. We can use the `page-transition-tag` property in CSS to give each element a name. @@ -219,7 +219,7 @@ If you haven't encountered FLIP before, [Cassie Evans](https://www.cassie.codes/) is a great resource on the topic: -{{ embed.figure(data=[{youtube: 'kUDMwy2OaK4'}]) }} +{{ embed.figure(data=[{ youtube: 'kUDMwy2OaK4' }]) }} Cassie also gave a brilliant talk at SmashingConf about FLIP animations in responsive design. diff --git a/content/blog/2023/components.md b/content/blog/2023/components.md index 6f88fa599..97e15630b 100644 --- a/content/blog/2023/components.md +++ b/content/blog/2023/components.md @@ -639,7 +639,6 @@ walking us through the steps: {{ embed.figure( data=[{ youtube: 'R4Ri4ft7bXY', - title: 'The Good, The Bad, and The Web Components', span: 'full' }], caption='Hmmm, yeah. He already said it. I bet others have to. Why did I write this?' diff --git a/content/talks/css-is-rad.md b/content/talks/css-is-rad.md index 0a01a13ec..a6887f935 100644 --- a/content/talks/css-is-rad.md +++ b/content/talks/css-is-rad.md @@ -41,8 +41,6 @@ events: slides: https://slides.oddbird.net/css-is-rad/ media: &frfe youtube: bSITeqDKkb8 - width: 560 - height: 315 - venue: Smashing Conf NY url: https://smashingconf.com/ny-2019/ date: 2019-10-15