review

oddbird · Jan 11, 2024 · 6ae9d6e · 6ae9d6e
1 parent af13a55
commit 6ae9d6e
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 56 deletions.
diff --git 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
-    } -%}
-    <video src="{{ src }}" {{ utility.style_if(style) }} controls="controls">{{ src | mdInline }}</video>
+  {%- set src = '/assets/media/' + src -%}
+  {%- set style = {
+    'height': height,
+    'width': width
+  } -%}
+  <video src="{{ src }}" {{ utility.style_if(style) }} controls="controls">{{ src | mdInline }}</video>
 {% 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
+  } -%}
+  <is-land on:visible class="ratio" {{ utility.style_if(style) }} >
+    <lite-youtube videoid="{{ id }}" style="
+      background-image: url('https://v1.opengraph.11ty.dev/https%3A%2F%2Fyoutube.com%2Fwatch%3Fv%3D{{ id }}/auto/jpeg/');
+    "/>
+  </is-land>
+{%- 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
-  } -%}
-  <is-land on:visible {% if has_ratio %}class="ratio"{% endif %} {{ utility.style_if(style) }} >
-    <lite-youtube videoid="{{ id }}" style="
-      background-image: url('https://v1.opengraph.11ty.dev/https%3A%2F%2Fyoutube.com%2Fwatch%3Fv%3D{{ id }}/auto/jpeg/');
-    "/>
-  </is-land>
-{%- endmacro %}
-
-
 {# @docs
 label: ratio
 category: Layout

diff --git a/content/blog/2017/css-day.md b/content/blog/2017/css-day.md
@@ -39,43 +39,43 @@ 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)
 
 [Natalya Shelburne]: https://twitter.com/natalyathree
 
 ## 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/)
 
 [Ben Adam]: https://twitter.com/benadam11
 
 ## 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/)
 
 [Pralie Dutzel]: https://twitter.com/praliedutzel
 
 ## 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
@@ -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
@@ -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
@@ -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