From fb1dc0f83491e529c7ead580961b74ba8cde8976 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Thu, 22 Jun 2023 11:48:19 -0400
Subject: [PATCH] Strip indentation for nested blocks

---
 source/documentation/modules/color.md         | 102 ++++++++-------
 .../modules/{index.liquid => index.md}        | 118 ++++++++----------
 source/helpers/components/index.ts            |   4 +-
 3 files changed, 114 insertions(+), 110 deletions(-)
 rename source/documentation/modules/{index.liquid => index.md} (71%)

diff --git a/source/documentation/modules/color.md b/source/documentation/modules/color.md
index 60548cc..2873027 100644
--- a/source/documentation/modules/color.md
+++ b/source/documentation/modules/color.md
@@ -254,14 +254,16 @@ title: sass:color
   the HSL lightness of `$color` by that amount.
 
   {% headsUp %}
-    The `darken()` function decreases lightness by a fixed amount, which is
-    often not the desired effect. To make a color a certain percentage darker
-    than it was before, use [`color.scale()`](#scale) instead.
+    {% stripIndent %}
+      The `darken()` function decreases lightness by a fixed amount, which is
+      often not the desired effect. To make a color a certain percentage darker
+      than it was before, use [`color.scale()`](#scale) instead.
 
-    Because `darken()` is usually not the best way to make a color darker, it's
-    not included directly in the new module system. However, if you have to
-    preserve the existing behavior, `darken($color, $amount)` can be written
-    [`color.adjust($color, $lightness: -$amount)`](#adjust).
+      Because `darken()` is usually not the best way to make a color darker,
+      it's not included directly in the new module system. However, if you have
+      to preserve the existing behavior, `darken($color, $amount)` can be
+      written [`color.adjust($color, $lightness: -$amount)`](#adjust).
+    {% endstripIndent %}
 
     {% codeExample 'color-darken', false %}
       // #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@@ -306,14 +308,17 @@ title: sass:color
   the HSL saturation of `$color` by that amount.
 
   {% headsUp %}
-    The `desaturate()` function decreases saturation by a fixed amount, which is
-    often not the desired effect. To make a color a certain percentage less
-    saturated than it was before, use [`color.scale()`](#scale) instead.
+    {% stripIndent %}
+      The `desaturate()` function decreases saturation by a fixed amount, which
+      is often not the desired effect. To make a color a certain percentage less
+      saturated than it was before, use [`color.scale()`](#scale) instead.
 
-    Because `desaturate()` is usually not the best way to make a color less
-    saturated, it's not included directly in the new module system. However, if
-    you have to preserve the existing behavior, `desaturate($color, $amount)`
-    can be written [`color.adjust($color, $saturation: -$amount)`](#adjust).
+      Because `desaturate()` is usually not the best way to make a color less
+      saturated, it's not included directly in the new module system. However,
+      if you have to preserve the existing behavior, `desaturate($color,
+      $amount)` can be written [`color.adjust($color, $saturation:
+      -$amount)`](#adjust).
+    {% endstripIndent %}
 
     {% codeExample 'color-desaturate', false %}
       // #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just
@@ -500,14 +505,16 @@ title: sass:color
   the HSL lightness of `$color` by that amount.
 
   {% headsUp %}
-    The `lighten()` function increases lightness by a fixed amount, which is
-    often not the desired effect. To make a color a certain percentage lighter
-    than it was before, use [`scale()`](#scale) instead.
+    {% stripIndent %}
+      The `lighten()` function increases lightness by a fixed amount, which is
+      often not the desired effect. To make a color a certain percentage lighter
+      than it was before, use [`scale()`](#scale) instead.
 
-    Because `lighten()` is usually not the best way to make a color lighter,
-    it's not included directly in the new module system. However, if you have to
-    preserve the existing behavior, `lighten($color, $amount)` can be written
-    [`adjust($color, $lightness: $amount)`](#adjust).
+      Because `lighten()` is usually not the best way to make a color lighter,
+      it's not included directly in the new module system. However, if you have
+      to preserve the existing behavior, `lighten($color, $amount)` can be
+      written [`adjust($color, $lightness: $amount)`](#adjust).
+    {% endstripIndent %}
 
     {% codeExample 'color-lighten', false %}
       // #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@@ -599,14 +606,17 @@ title: sass:color
   alpha channel of `$color` by that amount.
 
   {% headsUp %}
-    The `opacify()` function increases the alpha channel by a fixed amount,
-    which is often not the desired effect. To make a color a certain percentage
-    more opaque than it was before, use [`scale()`](#scale) instead.
+    {% stripIndent %}
+      The `opacify()` function increases the alpha channel by a fixed amount,
+      which is often not the desired effect. To make a color a certain
+      percentage more opaque than it was before, use [`scale()`](#scale)
+      instead.
 
-    Because `opacify()` is usually not the best way to make a color more opaque,
-    it's not included directly in the new module system. However, if you have to
-    preserve the existing behavior, `opacify($color, $amount)` can be written
-    [`adjust($color, $alpha: -$amount)`](#adjust).
+      Because `opacify()` is usually not the best way to make a color more
+      opaque, it's not included directly in the new module system. However, if
+      you have to preserve the existing behavior, `opacify($color, $amount)` can
+      be written [`adjust($color, $alpha: -$amount)`](#adjust).
+    {% endstripIndent %}
 
     {% codeExample 'color-opacify', false %}
       // rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully
@@ -668,14 +678,16 @@ title: sass:color
   the HSL saturation of `$color` by that amount.
 
   {% headsUp %}
-    The `saturate()` function increases saturation by a fixed amount, which is
-    often not the desired effect. To make a color a certain percentage more
-    saturated than it was before, use [`scale()`](#scale) instead.
+    {% stripIndent %}
+      The `saturate()` function increases saturation by a fixed amount, which is
+      often not the desired effect. To make a color a certain percentage more
+      saturated than it was before, use [`scale()`](#scale) instead.
 
-    Because `saturate()` is usually not the best way to make a color more
-    saturated, it's not included directly in the new module system. However, if
-    you have to preserve the existing behavior, `saturate($color, $amount)` can
-    be written [`adjust($color, $saturation: $amount)`](#adjust).
+      Because `saturate()` is usually not the best way to make a color more
+      saturated, it's not included directly in the new module system. However,
+      if you have to preserve the existing behavior, `saturate($color, $amount)`
+      can be written [`adjust($color, $saturation: $amount)`](#adjust).
+    {% endstripIndent %}
 
     {% codeExample 'color-saturate', false %}
       // #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes
@@ -791,16 +803,18 @@ title: sass:color
   alpha channel of `$color` by that amount.
 
   {% headsUp %}
-    The `transparentize()` function decreases the alpha channel by a fixed
-    amount, which is often not the desired effect. To make a color a certain
-    percentage more transparent than it was before, use
-    [`color.scale()`](#scale) instead.
+    {% stripIndent %}
+      The `transparentize()` function decreases the alpha channel by a fixed
+      amount, which is often not the desired effect. To make a color a certain
+      percentage more transparent than it was before, use
+      [`color.scale()`](#scale) instead.
 
-    Because `transparentize()` is usually not the best way to make a color more
-    transparent, it's not included directly in the new module system. However,
-    if you have to preserve the existing behavior, `transparentize($color,
-    $amount)` can be written [`color.adjust($color, $alpha:
-    -$amount)`](#adjust).
+      Because `transparentize()` is usually not the best way to make a color
+      more transparent, it's not included directly in the new module system.
+      However, if you have to preserve the existing behavior,
+      `transparentize($color, $amount)` can be written [`color.adjust($color,
+      $alpha: -$amount)`](#adjust).
+    {% endstripIndent %}
 
     {% codeExample 'transparentize', false %}
       // rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it
diff --git a/source/documentation/modules/index.liquid b/source/documentation/modules/index.md
similarity index 71%
rename from source/documentation/modules/index.liquid
rename to source/documentation/modules/index.md
index e650bb4..1dc7685 100644
--- a/source/documentation/modules/index.liquid
+++ b/source/documentation/modules/index.md
@@ -48,42 +48,40 @@ introduction: >
     border: 1px solid color.scale($primary-color, $lightness: 20%)
 {% endcodeExample %}
 
-{% markdown %}
-  Sass provides the following built-in modules:
+Sass provides the following built-in modules:
 
-  * The [`sass:math` module][] provides functions that operate on [numbers][].
+* The [`sass:math` module][] provides functions that operate on [numbers][].
 
-  * The [`sass:string` module][] makes it easy to combine, search, or split
-    apart [strings][].
+* The [`sass:string` module][] makes it easy to combine, search, or split apart
+  [strings][].
 
-  * The [`sass:color` module][] generates new [colors][] based on existing ones,
-    making it easy to build color themes.
+* The [`sass:color` module][] generates new [colors][] based on existing ones,
+  making it easy to build color themes.
 
-  * The [`sass:list` module][] lets you access and modify values in [lists][].
+* The [`sass:list` module][] lets you access and modify values in [lists][].
 
-  * The [`sass:map` module][] makes it possible to look up the value associated
-    with a key in a [map][], and much more.
+* The [`sass:map` module][] makes it possible to look up the value associated
+  with a key in a [map][], and much more.
 
-  * The [`sass:selector` module][] provides access to Sass's powerful selector
-    engine.
+* The [`sass:selector` module][] provides access to Sass's powerful selector
+  engine.
 
-  * The [`sass:meta` module][] exposes the details of Sass's inner workings.
+* The [`sass:meta` module][] exposes the details of Sass's inner workings.
 
-  [`sass:math` module]: /documentation/modules/math
-  [numbers]: /documentation/values/numbers
-  [`sass:string` module]: /documentation/modules/string
-  [strings]: /documentation/values/strings
-  [`sass:color` module]: /documentation/modules/color
-  [colors]: /documentation/values/colors
-  [`sass:list` module]: /documentation/modules/list
-  [lists]: /documentation/values/lists
-  [`sass:map` module]: /documentation/modules/map
-  [map]: /documentation/values/maps
-  [`sass:selector` module]: /documentation/modules/selector
-  [`sass:meta` module]: /documentation/modules/meta
+[`sass:math` module]: /documentation/modules/math
+[numbers]: /documentation/values/numbers
+[`sass:string` module]: /documentation/modules/string
+[strings]: /documentation/values/strings
+[`sass:color` module]: /documentation/modules/color
+[colors]: /documentation/values/colors
+[`sass:list` module]: /documentation/modules/list
+[lists]: /documentation/values/lists
+[`sass:map` module]: /documentation/modules/map
+[map]: /documentation/values/maps
+[`sass:selector` module]: /documentation/modules/selector
+[`sass:meta` module]: /documentation/modules/meta
 
-  ## Global Functions
-{% endmarkdown %}
+## Global Functions
 
 {% function 'hsl($hue $saturation $lightness)', 'hsl($hue $saturation $lightness / $alpha)', 'hsl($hue, $saturation, $lightness, $alpha: 1)', 'hsla($hue $saturation $lightness)', 'hsla($hue $saturation $lightness / $alpha)', 'hsla($hue, $saturation, $lightness, $alpha: 1)', 'returns:color' %}
   {% compatibility 'dart: "1.15.0"', 'libsass: false', 'ruby: false', 'feature: "Level 4 Syntax"' %}
@@ -102,21 +100,19 @@ introduction: >
     as percentages.
   {% endcompatibility %}
 
-  {% markdown %}
-    Returns a color with the given [hue, saturation, and lightness][] and the
-    given alpha channel.
+  Returns a color with the given [hue, saturation, and lightness][] and the
+  given alpha channel.
 
-    [hue, saturation, and lightness]: https://en.wikipedia.org/wiki/HSL_and_HSV
+  [hue, saturation, and lightness]: https://en.wikipedia.org/wiki/HSL_and_HSV
 
-    The hue is a number between `0deg` and `360deg` (inclusive) and may be
-    unitless. The saturation and lightness are numbers between `0%` and `100%`
-    (inclusive) and may *not* be unitless. The alpha channel can be specified as
-    either a unitless number between 0 and 1 (inclusive), or a percentage
-    between `0%` and `100%` (inclusive).
-  {% endmarkdown %}
+  The hue is a number between `0deg` and `360deg` (inclusive) and may be
+  unitless. The saturation and lightness are numbers between `0%` and `100%`
+  (inclusive) and may *not* be unitless. The alpha channel can be specified as
+  either a unitless number between 0 and 1 (inclusive), or a percentage between
+  `0%` and `100%` (inclusive).
 
-  {% funFact false %}
-    {% markdown %}
+  {% funFact %}
+    {% stripIndent %}
       You can pass [special functions][] like `calc()` or `var()` in place of
       any argument to `hsl()`. You can even use `var()` in place of multiple
       arguments, since it might be replaced by multiple values! When a color
@@ -124,7 +120,7 @@ introduction: >
       signature it was called with.
 
       [special functions]: /documentation/syntax/special-functions
-    {% endmarkdown %}
+    {% endstripIndent %}
 
     {% codeExample 'hsl-special', false %}
       @debug hsl(210deg 100% 20% / var(--opacity)); // hsl(210deg 100% 20% / var(--opacity))
@@ -158,15 +154,13 @@ introduction: >
 {% endfunction %}
 
 {% function 'if($condition, $if-true, $if-false)' %}
-  {% markdown %}
-    Returns `$if-true` if `$condition` is [truthy][], and `$if-false` otherwise.
+  Returns `$if-true` if `$condition` is [truthy][], and `$if-false` otherwise.
 
-    This function is special in that it doesn't even evaluate the argument that
-    isn't returned, so it's safe to call even if the unused argument would throw
-    an error.
+  This function is special in that it doesn't even evaluate the argument that
+  isn't returned, so it's safe to call even if the unused argument would throw
+  an error.
 
-    [truthy]: /documentation/at-rules/control/if#truthiness-and-falsiness
-  {% endmarkdown %}
+  [truthy]: /documentation/at-rules/control/if#truthiness-and-falsiness
 
   {% codeExample 'debug', false %}
     @debug if(true, 10px, 15px); // 10px
@@ -197,20 +191,18 @@ introduction: >
     as percentages.
   {% endcompatibility %}
 
-  {% markdown %}
-    If `$red`, `$green`, `$blue`, and optionally `$alpha` are passed, returns a
-    color with the given red, green, blue, and alpha channels.
+  If `$red`, `$green`, `$blue`, and optionally `$alpha` are passed, returns a
+  color with the given red, green, blue, and alpha channels.
 
-    Each channel can be specified as either a [unitless][] number between 0 and
-    255 (inclusive), or a percentage between `0%` and `100%` (inclusive). The
-    alpha channel can be specified as either a unitless number between 0 and 1
-    (inclusive), or a percentage between `0%` and `100%` (inclusive).
+  Each channel can be specified as either a [unitless][] number between 0 and
+  255 (inclusive), or a percentage between `0%` and `100%` (inclusive). The
+  alpha channel can be specified as either a unitless number between 0 and 1
+  (inclusive), or a percentage between `0%` and `100%` (inclusive).
 
-    [unitless]: /documentation/values/numbers#units
-  {% endmarkdown %}
+  [unitless]: /documentation/values/numbers#units
 
-  {% funFact false %}
-    {% markdown %}
+  {% funFact %}
+    {% stripIndent %}
       You can pass [special functions][] like `calc()` or `var()` in place of
       any argument to `rgb()`. You can even use `var()` in place of multiple
       arguments, since it might be replaced by multiple values! When a color
@@ -218,7 +210,7 @@ introduction: >
       signature it was called with.
 
       [special functions]: /documentation/syntax/special-functions
-    {% endmarkdown %}
+    {% endstripIndent %}
 
     {% codeExample 'rgb-special', false %}
       @debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@@ -250,12 +242,10 @@ introduction: >
     @debug rgba(95%, 92.5%, 89.5%, 0.2)  // rgba(242, 236, 228, 0.2)
   {% endcodeExample %}
 
-  {{ '---' | markdown }}
+  ---
 
-  {% markdown %}
-    If `$color` and `$alpha` are passed, this returns `$color` with the given
-    `$alpha` channel instead of its original alpha channel.
-  {% endmarkdown %}
+  If `$color` and `$alpha` are passed, this returns `$color` with the given
+  `$alpha` channel instead of its original alpha channel.
 
   {% codeExample 'color-and-alpha', false %}
     @debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
diff --git a/source/helpers/components/index.ts b/source/helpers/components/index.ts
index f5a1643..0802f15 100644
--- a/source/helpers/components/index.ts
+++ b/source/helpers/components/index.ts
@@ -18,7 +18,7 @@ export {getDocTocData, getToc};
 export const funFact = async (contents: string, useMarkdown = true) => {
   const html = await liquidEngine.renderFile('fun_fact', {
     // Un-indent nested markup to prevent unwanted `<p>` tags.
-    contents: stripIndent(contents).replaceAll(/\n +</g, '\n<'),
+    contents: stripIndent(contents).replaceAll(/^ +</gm, '<'),
     useMarkdown,
   });
   return html.trim();
@@ -31,7 +31,7 @@ export const funFact = async (contents: string, useMarkdown = true) => {
 export const headsUp = async (contents: string, useMarkdown = true) => {
   const html = await liquidEngine.renderFile('heads_up', {
     // Un-indent nested markup to prevent unwanted `<p>` tags.
-    contents: stripIndent(contents).replaceAll(/\n +</g, '\n<'),
+    contents: stripIndent(contents).replaceAll(/^ +</gm, '<'),
     useMarkdown,
   });
   return html.trim();