Set aspect-ratio on YouTube/Wistia, responsiveness fixes (#36)

* Set aspect-ratio for YouTube/Wistia to allow max-width enforcement

* Update tests for new aspect-ratio on YouTube/Wistia

* Set bullets to be inside on mobile

* Fix dev overflow on mobile

* Add padding to details to avoid text overlapping caret

* Add to changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ Each list item should be prefixed with `(patch)` or `(minor)` or `(major)`.
 See `PUBLISH.md` for instructions on how to publish a new version.
 -->
 
+- (patch) Set aspect-ratio on YouTube/Wistia, responsiveness fixes
 - (patch) Remove minified versions of patched Prism files
 
 

README.md

@@ -620,7 +620,7 @@ The default value for height is 270, and for width is 480.
 
 **Example HTML output:**
 
-    <iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="270" width="480" frameborder="0" allowfullscreen>
+    <iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="270" width="480" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
         <a href="https://www.youtube.com/watch?v=iom_nhYQIYk" target="_blank">View YouTube video</a>
     </iframe>
 
@@ -647,7 +647,7 @@ The default value for height is 270, and for width is 480.
 
 **Example HTML output:**
 
-    <iframe src="http://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="270" width="480" frameborder="0" allowfullscreen>
+    <iframe src="http://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="270" width="480" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
         <a href="http://fast.wistia.net/embed/iframe/7ld71zbvi6" target="_blank">View Wistia video</a>
     </iframe>
 

dev/client.scss

@@ -29,7 +29,7 @@ body {
 #app {
     background: #ffffff;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 384px), 1fr));
 }
 
 #textbox,

fixtures/full-output.html

@@ -235,12 +235,12 @@ <h2 id="step-4-layout">Step 4 — Layout</h2>
 <h2 id="step-5-embeds">Step 5 — Embeds</h2>
 <h3 id="youtube">YouTube</h3>
 <p>Embedding a YouTube video (id, height, width):</p>
-<iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="225" width="400" frameborder="0" allowfullscreen>
+<iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="225" width="400" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
     <a href="https://www.youtube.com/watch?v=iom_nhYQIYk" target="_blank">View YouTube video</a>
 </iframe>
 <h3 id="wistia">Wistia</h3>
 <p>Embedding a Wistia video (id, height, width):</p>
-<iframe src="https://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="225" width="400" frameborder="0" allowfullscreen>
+<iframe src="https://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="225" width="400" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
     <a href="https://fast.wistia.net/embed/iframe/7ld71zbvi6" target="_blank">View Wistia video</a>
 </iframe>
 <h3 id="dns">DNS</h3>

rules/embeds/wistia.js

@@ -20,6 +20,8 @@ limitations under the License.
  * @module rules/embeds/wistia
  */
 
+const reduceFraction = require('../../util/reduce_fraction');
+
 /**
  * Add support for [Wistia](https://fast.wistia.net) embeds in Markdown, as block syntax.
  *
@@ -30,7 +32,7 @@ limitations under the License.
  * @example
  * [wistia 7ld71zbvi6]
  *
- * <iframe src="https://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="270" width="480" frameborder="0" allowfullscreen>
+ * <iframe src="https://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="270" width="480" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
  *     <a href="https://fast.wistia.net/embed/iframe/7ld71zbvi6" target="_blank">View Wistia video</a>
  * </iframe>
  *
@@ -95,8 +97,11 @@ module.exports = md => {
     md.renderer.rules.wistia = (tokens, index) => {
         const token = tokens[index];
 
+        // Determine the aspect ratio
+        const aspectRatio = reduceFraction(token.wistia.width, token.wistia.height).join('/');
+
         // Return the HTML
-        return `<iframe src="https://fast.wistia.net/embed/iframe/${encodeURIComponent(token.wistia.id)}" class="wistia" height="${token.wistia.height}" width="${token.wistia.width}" frameborder="0" allowfullscreen>
+        return `<iframe src="https://fast.wistia.net/embed/iframe/${encodeURIComponent(token.wistia.id)}" class="wistia" height="${token.wistia.height}" width="${token.wistia.width}" style="aspect-ratio: ${aspectRatio}" frameborder="0" allowfullscreen>
     <a href="https://fast.wistia.net/embed/iframe/${encodeURIComponent(token.wistia.id)}" target="_blank">View Wistia video</a>
 </iframe>\n`;
     };

rules/embeds/wistia.test.js

@@ -19,7 +19,7 @@ limitations under the License.
 const md = require('markdown-it')().use(require('./wistia'));
 
 it('handles wistia embeds (not inline)', () => {
-    expect(md.render('[wistia 7ld71zbvi6 380 560]')).toBe(`<iframe src="https://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="380" width="560" frameborder="0" allowfullscreen>
+    expect(md.render('[wistia 7ld71zbvi6 280 560]')).toBe(`<iframe src="https://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="280" width="560" style="aspect-ratio: 2/1" frameborder="0" allowfullscreen>
     <a href="https://fast.wistia.net/embed/iframe/7ld71zbvi6" target="_blank">View Wistia video</a>
 </iframe>
 `);
@@ -36,28 +36,28 @@ it('handles wistia embeds that are unclosed (no embed)', () => {
 });
 
 it('handles wistia embeds without width', () => {
-    expect(md.render('[wistia 7ld71zbvi6 380]')).toBe(`<iframe src="https://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="380" width="480" frameborder="0" allowfullscreen>
+    expect(md.render('[wistia 7ld71zbvi6 240]')).toBe(`<iframe src="https://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="240" width="480" style="aspect-ratio: 2/1" frameborder="0" allowfullscreen>
     <a href="https://fast.wistia.net/embed/iframe/7ld71zbvi6" target="_blank">View Wistia video</a>
 </iframe>
 `);
 });
 
 it('handles wistia embeds without width or height', () => {
-    expect(md.render('[wistia 7ld71zbvi6]')).toBe(`<iframe src="https://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="270" width="480" frameborder="0" allowfullscreen>
+    expect(md.render('[wistia 7ld71zbvi6]')).toBe(`<iframe src="https://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="270" width="480" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
     <a href="https://fast.wistia.net/embed/iframe/7ld71zbvi6" target="_blank">View Wistia video</a>
 </iframe>
 `);
 });
 
 it('handles wistia embeds attempting html injection', () => {
-    expect(md.render('[wistia <script>alert();</script> 380 560]')).toBe(`<iframe src="https://fast.wistia.net/embed/iframe/%3Cscript%3Ealert()%3B%3C%2Fscript%3E" class="wistia" height="380" width="560" frameborder="0" allowfullscreen>
+    expect(md.render('[wistia <script>alert();</script> 280 560]')).toBe(`<iframe src="https://fast.wistia.net/embed/iframe/%3Cscript%3Ealert()%3B%3C%2Fscript%3E" class="wistia" height="280" width="560" style="aspect-ratio: 2/1" frameborder="0" allowfullscreen>
     <a href="https://fast.wistia.net/embed/iframe/%3Cscript%3Ealert()%3B%3C%2Fscript%3E" target="_blank">View Wistia video</a>
 </iframe>
 `);
 });
 
 it('handles wistia embeds attempting url manipulation', () => {
-    expect(md.render('[wistia a/../../b 380 560]')).toBe(`<iframe src="https://fast.wistia.net/embed/iframe/a%2F..%2F..%2Fb" class="wistia" height="380" width="560" frameborder="0" allowfullscreen>
+    expect(md.render('[wistia a/../../b 280 560]')).toBe(`<iframe src="https://fast.wistia.net/embed/iframe/a%2F..%2F..%2Fb" class="wistia" height="280" width="560" style="aspect-ratio: 2/1" frameborder="0" allowfullscreen>
     <a href="https://fast.wistia.net/embed/iframe/a%2F..%2F..%2Fb" target="_blank">View Wistia video</a>
 </iframe>
 `);

rules/embeds/youtube.js

@@ -20,6 +20,8 @@ limitations under the License.
  * @module rules/embeds/youtube
  */
 
+const reduceFraction = require('../../util/reduce_fraction');
+
 /**
  * Add support for [YouTube](http://youtube.com/) embeds in Markdown, as block syntax.
  *
@@ -30,7 +32,7 @@ limitations under the License.
  * @example
  * [youtube iom_nhYQIYk]
  *
- * <iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="270" width="480" frameborder="0" allowfullscreen>
+ * <iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="270" width="480" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
  *     <a href="https://www.youtube.com/watch?v=iom_nhYQIYk" target="_blank">View YouTube video</a>
  * </iframe>
  *
@@ -95,8 +97,11 @@ module.exports = md => {
     md.renderer.rules.youtube = (tokens, index) => {
         const token = tokens[index];
 
+        // Determine the aspect ratio
+        const aspectRatio = reduceFraction(token.youtube.width, token.youtube.height).join('/');
+
         // Return the HTML
-        return `<iframe src="https://www.youtube.com/embed/${encodeURIComponent(token.youtube.id)}" class="youtube" height="${token.youtube.height}" width="${token.youtube.width}" frameborder="0" allowfullscreen>
+        return `<iframe src="https://www.youtube.com/embed/${encodeURIComponent(token.youtube.id)}" class="youtube" height="${token.youtube.height}" width="${token.youtube.width}" style="aspect-ratio: ${aspectRatio}" frameborder="0" allowfullscreen>
     <a href="https://www.youtube.com/watch?v=${encodeURIComponent(token.youtube.id)}" target="_blank">View YouTube video</a>
 </iframe>\n`;
     };

rules/embeds/youtube.test.js

@@ -19,7 +19,7 @@ limitations under the License.
 const md = require('markdown-it')().use(require('./youtube'));
 
 it('handles youtube embeds (not inline)', () => {
-    expect(md.render('[youtube iom_nhYQIYk 380 560]')).toBe(`<iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="380" width="560" frameborder="0" allowfullscreen>
+    expect(md.render('[youtube iom_nhYQIYk 280 560]')).toBe(`<iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="280" width="560" style="aspect-ratio: 2/1" frameborder="0" allowfullscreen>
     <a href="https://www.youtube.com/watch?v=iom_nhYQIYk" target="_blank">View YouTube video</a>
 </iframe>
 `);
@@ -36,28 +36,28 @@ it('handles youtube embeds that are unclosed (no embed)', () => {
 });
 
 it('handles youtube embeds without width', () => {
-    expect(md.render('[youtube iom_nhYQIYk 380]')).toBe(`<iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="380" width="480" frameborder="0" allowfullscreen>
+    expect(md.render('[youtube iom_nhYQIYk 240]')).toBe(`<iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="240" width="480" style="aspect-ratio: 2/1" frameborder="0" allowfullscreen>
     <a href="https://www.youtube.com/watch?v=iom_nhYQIYk" target="_blank">View YouTube video</a>
 </iframe>
 `);
 });
 
 it('handles youtube embeds without width or height', () => {
-    expect(md.render('[youtube iom_nhYQIYk]')).toBe(`<iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="270" width="480" frameborder="0" allowfullscreen>
+    expect(md.render('[youtube iom_nhYQIYk]')).toBe(`<iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="270" width="480" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
     <a href="https://www.youtube.com/watch?v=iom_nhYQIYk" target="_blank">View YouTube video</a>
 </iframe>
 `);
 });
 
 it('handles youtube embeds attempting html injection', () => {
-    expect(md.render('[youtube <script>alert();</script> 380 560]')).toBe(`<iframe src="https://www.youtube.com/embed/%3Cscript%3Ealert()%3B%3C%2Fscript%3E" class="youtube" height="380" width="560" frameborder="0" allowfullscreen>
+    expect(md.render('[youtube <script>alert();</script> 280 560]')).toBe(`<iframe src="https://www.youtube.com/embed/%3Cscript%3Ealert()%3B%3C%2Fscript%3E" class="youtube" height="280" width="560" style="aspect-ratio: 2/1" frameborder="0" allowfullscreen>
     <a href="https://www.youtube.com/watch?v=%3Cscript%3Ealert()%3B%3C%2Fscript%3E" target="_blank">View YouTube video</a>
 </iframe>
 `);
 });
 
 it('handles youtube embeds attempting url manipulation', () => {
-    expect(md.render('[youtube a/../../b 380 560]')).toBe(`<iframe src="https://www.youtube.com/embed/a%2F..%2F..%2Fb" class="youtube" height="380" width="560" frameborder="0" allowfullscreen>
+    expect(md.render('[youtube a/../../b 280 560]')).toBe(`<iframe src="https://www.youtube.com/embed/a%2F..%2F..%2Fb" class="youtube" height="280" width="560" style="aspect-ratio: 2/1" frameborder="0" allowfullscreen>
     <a href="https://www.youtube.com/watch?v=a%2F..%2F..%2Fb" target="_blank">View YouTube video</a>
 </iframe>
 `);

styles/_details.scss

@@ -30,7 +30,7 @@ details {
     &[open] {
         summary {
             border-bottom: 1px solid $gray8;
-            padding: 0 0 1em;
+            padding: 0 1em 1em 0;
             margin: 0 0 1em;
 
             &::after {
@@ -43,6 +43,7 @@ details {
     summary {
         cursor: pointer;
         list-style: none;
+        padding: 0 1em 0 0;
         position: relative;
 
         &::-webkit-details-marker,

styles/_typography.scss

@@ -60,17 +60,18 @@ p {
 // Lists
 ol,
 ul {
-    list-style: disc;
+    list-style-type: disc;
     margin-bottom: 1.7em;
     padding-left: 2.5em;
 
     @include mq($tablet) {
+        list-style-position: inside;
         padding-left: 0;
     }
 }
 
 ol {
-    list-style: decimal;
+    list-style-type: decimal;
 }
 
 // Links

styles/_wistia.scss

@@ -17,5 +17,7 @@ limitations under the License.
 // Wistia embeds
 .wistia {
     display: block;
+    height: auto;
     margin: 1em auto;
+    max-width: 100%;
 }

styles/_youtube.scss

@@ -17,5 +17,7 @@ limitations under the License.
 // YouTube embeds
 .youtube {
     display: block;
+    height: auto;
     margin: 1em auto;
+    max-width: 100%;
 }

util/reduce_fraction.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2022 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+/**
+ * Reduce a fraction to its lowest terms.
+ *
+ * @param {number} numerator Numerator of the fraction.
+ * @param {number} denominator Denominator of the fraction.
+ * @returns {number[]}
+ */
+module.exports = (numerator, denominator) => {
+    let a = numerator;
+    let b = denominator;
+    let temp;
+
+    while (b) {
+        temp = a % b;
+        a = b;
+        b = temp;
+    }
+
+    return [ numerator / a, denominator / a ];
+};