From 21ac6cab68c3f47244f4f5bcf440d6db0644a383 Mon Sep 17 00:00:00 2001 From: Matt Cowley Date: Tue, 15 Nov 2022 22:08:43 +0000 Subject: [PATCH] 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 | 1 + README.md | 4 ++-- dev/client.scss | 2 +- fixtures/full-output.html | 4 ++-- rules/embeds/wistia.js | 9 +++++++-- rules/embeds/wistia.test.js | 10 +++++----- rules/embeds/youtube.js | 9 +++++++-- rules/embeds/youtube.test.js | 10 +++++----- styles/_details.scss | 3 ++- styles/_typography.scss | 5 +++-- styles/_wistia.scss | 2 ++ styles/_youtube.scss | 2 ++ util/reduce_fraction.js | 38 ++++++++++++++++++++++++++++++++++++ 13 files changed, 77 insertions(+), 22 deletions(-) create mode 100644 util/reduce_fraction.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 296f931..437117c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index 7eeb024..335348e 100644 --- a/README.md +++ b/README.md @@ -620,7 +620,7 @@ The default value for height is 270, and for width is 480. **Example HTML output:** - @@ -647,7 +647,7 @@ The default value for height is 270, and for width is 480. **Example HTML output:** - diff --git a/dev/client.scss b/dev/client.scss index 81cb53a..625138f 100644 --- a/dev/client.scss +++ b/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, diff --git a/fixtures/full-output.html b/fixtures/full-output.html index 5f66dc7..58cd44c 100644 --- a/fixtures/full-output.html +++ b/fixtures/full-output.html @@ -235,12 +235,12 @@

Step 4 — Layout

Step 5 — Embeds

YouTube

Embedding a YouTube video (id, height, width):

-

Wistia

Embedding a Wistia video (id, height, width):

-

DNS

diff --git a/rules/embeds/wistia.js b/rules/embeds/wistia.js index 6080e90..0625359 100644 --- a/rules/embeds/wistia.js +++ b/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] * - * * @@ -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 `\n`; }; diff --git a/rules/embeds/wistia.test.js b/rules/embeds/wistia.test.js index 99c24f9..7937835 100644 --- a/rules/embeds/wistia.test.js +++ b/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(` `); @@ -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(` `); }); it('handles wistia embeds without width or height', () => { - expect(md.render('[wistia 7ld71zbvi6]')).toBe(` `); }); it('handles wistia embeds attempting html injection', () => { - expect(md.render('[wistia 380 560]')).toBe(` `); }); it('handles wistia embeds attempting url manipulation', () => { - expect(md.render('[wistia a/../../b 380 560]')).toBe(` `); diff --git a/rules/embeds/youtube.js b/rules/embeds/youtube.js index 5276366..84c4146 100644 --- a/rules/embeds/youtube.js +++ b/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] * - * * @@ -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 `\n`; }; diff --git a/rules/embeds/youtube.test.js b/rules/embeds/youtube.test.js index 4111845..f98f452 100644 --- a/rules/embeds/youtube.test.js +++ b/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(` `); @@ -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(` `); }); it('handles youtube embeds without width or height', () => { - expect(md.render('[youtube iom_nhYQIYk]')).toBe(` `); }); it('handles youtube embeds attempting html injection', () => { - expect(md.render('[youtube 380 560]')).toBe(` `); }); it('handles youtube embeds attempting url manipulation', () => { - expect(md.render('[youtube a/../../b 380 560]')).toBe(` `); diff --git a/styles/_details.scss b/styles/_details.scss index 4bf9d61..ce4f48a 100644 --- a/styles/_details.scss +++ b/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, diff --git a/styles/_typography.scss b/styles/_typography.scss index fccea29..54c464c 100644 --- a/styles/_typography.scss +++ b/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 diff --git a/styles/_wistia.scss b/styles/_wistia.scss index 6b07977..7fb7bfd 100644 --- a/styles/_wistia.scss +++ b/styles/_wistia.scss @@ -17,5 +17,7 @@ limitations under the License. // Wistia embeds .wistia { display: block; + height: auto; margin: 1em auto; + max-width: 100%; } diff --git a/styles/_youtube.scss b/styles/_youtube.scss index 9f26036..615ba78 100644 --- a/styles/_youtube.scss +++ b/styles/_youtube.scss @@ -17,5 +17,7 @@ limitations under the License. // YouTube embeds .youtube { display: block; + height: auto; margin: 1em auto; + max-width: 100%; } diff --git a/util/reduce_fraction.js b/util/reduce_fraction.js new file mode 100644 index 0000000..33bb6b0 --- /dev/null +++ b/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 ]; +};