Add an inline processor to show a static preview of gradient values

docs/editing/extensions.md

@@ -242,3 +242,65 @@ Output:
 Normal text with inline $\LaTeX$: $\frac{1}{x}$.
 
 $$\sum\limits_{i=1}^n{n\choose i}t^i(1-t)^{n-1}P_i$$
+
+
+### `lottie_color`
+
+Shows an inline preview of a lottie color array.
+
+Example:
+
+```
+{lottie_color:1, 0.5, 0}
+```
+
+Output:
+
+{lottie_color:1, 0.5, 0}
+
+
+### `lottie_hexcolor`
+
+Shows an inline preview of a color from hex code.
+
+Example:
+
+```
+{lottie_hexcolor:#FF8000}
+```
+
+Output:
+
+{lottie_hexcolor:#FF8000}
+
+
+### `lottie_gradient`
+
+Shows an inline preview of a lottie gradient (without alpha).
+
+Example:
+
+```
+{lottie_gradient:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96}
+```
+
+Output:
+
+{lottie_gradient:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96}
+
+
+### `lottie_gradient_alpha`
+
+Shows an inline preview of a lottie gradient (with alpha).
+
+Alpha stop offsets need to match the color stop offsets.
+
+Example:
+
+```
+{lottie_gradient_alpha:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1}
+```
+
+Output:
+
+{lottie_gradient_alpha:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1}

docs/specs/values.md

@@ -50,22 +50,22 @@ So let's say you want these colors:
 
 the array will look like the following:
 
-`[0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96]`
+{lottie_gradient:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96}
 
 | Value     | Description |
 |-----------|---|
 | `0`       | Offset of the 1st color (`0` means at the start) |
-| `0.16`   | Red component for the 1st color |
-| `0.18`   | Green component for the 1st color |
-| `0.46`   | Blue component for the 1st color |
+| `0.16`    | Red component for the 1st color |
+| `0.18`    | Green component for the 1st color |
+| `0.46`    | Blue component for the 1st color |
 | `0.5`     | Offset of the 2nd color (`0.5` means half way) |
-| `0.2`   | Red component for the 2nd color |
-| `0.31`   | Green component for the 2nd color |
+| `0.2`     | Red component for the 2nd color |
+| `0.31`    | Green component for the 2nd color |
 | `0.69`    | Blue component for the 2nd color |
 | `1`       | Offset of the 3rd color (`1` means at the end) |
-| `0.77`   | Red component for the 3rd color |
-| `0.85`   | Green component for the 3rd color |
-| `0.96`   | Blue component for the 3rd color |
+| `0.77`    | Red component for the 3rd color |
+| `0.85`    | Green component for the 3rd color |
+| `0.96`    | Blue component for the 3rd color |
 
 <h3>Gradient with transparency</h3>
 
@@ -76,7 +76,7 @@ So assume the same colors as before, but opacity of 80% for the first color and
 
 The array will look like this:
 
-`[0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 1, 1, 1]`
+{lottie_gradient_alpha:0, 0.16, 0.18, 0.46, 0.5, 0.2, 0.31, 0.69, 1, 0.77, 0.85, 0.96, 0, 0.8, 0.5, 0.2, 1, 1}
 
 It's the same array as the case without transparency but with the following values added at the end:
 
@@ -86,7 +86,7 @@ It's the same array as the case without transparency but with the following valu
 | `0`       | Offset of the 1st color (`0` means at the start) |
 | `0.8`     | Alpha component for the 1st color |
 | `0.5`     | Offset of the 2nd color (`0.5` means half way) |
-| `1`       | Alpha component for the 2nd color |
+| `0.2`     | Alpha component for the 2nd color |
 | `1`       | Offset of the 3rd color (`1` means at the end) |
 | `1`       | Alpha component for the 3rd color |
 

docs/static/css/lottie-theme.css

@@ -111,3 +111,7 @@ a:hover {
   text-decoration: none;
   background-color: #006a5f;
 }
+
+.container {
+  width: fit-content;
+}

tools/lottie_markdown.py

@@ -980,7 +980,6 @@ def __init__(self, pattern, md, mult):
 
     def handleMatch(self, match, data):
         span = etree.Element("span")
-        span.attrib["style"] = "font-family: right"
 
         if self.mult == -1:
             hex = match.group(1)
@@ -1001,6 +1000,62 @@ def handleMatch(self, match, data):
         return span, match.start(0), match.end(0)
 
 
+class LottieGradient(InlineProcessor):
+    def __init__(self, pattern, md, alpha):
+        super().__init__(pattern, md)
+        self.alpha = alpha
+
+    def handleMatch(self, match, data):
+        span = etree.Element("span")
+
+        values = list(map(float, match.group(1).split(",")))
+
+        stops = []
+
+        if self.alpha:
+            n_colors = len(values) // 6
+            split = n_colors * 4
+            for i in range(n_colors):
+                color_i = i * 4
+                alpha_i = split + i * 2
+                stops.append([
+                    values[color_i],
+                    values[color_i + 1], values[color_i + 2], values[color_i + 3],
+                    values[alpha_i + 1]
+                ])
+        else:
+            n_colors = len(values) // 4
+            for i in range(n_colors):
+                color_i = i * 4
+                stops.append([
+                    values[color_i],
+                    values[color_i + 1], values[color_i + 2], values[color_i + 3],
+                    1
+                ])
+
+        css_grad = ",".join(
+            "rgba(%s, %s, %s, %s) %s%%" % (
+                v[1] * 255,
+                v[2] * 255,
+                v[3] * 255,
+                v[4],
+                v[0] * 100,
+            )
+            for v in stops
+        )
+
+        etree.SubElement(span, "code").text = "[%s]" % match.group(1)
+
+        alpha_bg = etree.SubElement(span, "div")
+        alpha_bg.attrib["class"] = "alpha-checkered"
+
+        color = etree.SubElement(alpha_bg, "div")
+        color.attrib["style"] = css_style(background="linear-gradient(90deg, %s)" % css_grad)
+        color.attrib["class"] = "gradient-preview"
+
+        return span, match.start(0), match.end(0)
+
+
 def block_to_html(block_processor, block):
     match = HTML_PLACEHOLDER_RE.match(block)
     if match:
@@ -1146,6 +1201,8 @@ def extendMarkdown(self, md):
         md.inlinePatterns.register(SchemaInheritance(md, ts), "schema_inheritance", 175)
         md.inlinePatterns.register(BCP14(md), "bcp14", 175)
         md.inlinePatterns.register(RfcLink(md), "rfc", 175)
+        md.inlinePatterns.register(LottieGradient(r'{lottie_gradient:((?:[^,]+\s*,?\s*)+)}', md, False), 'lottie_gradient', 175)
+        md.inlinePatterns.register(LottieGradient(r'{lottie_gradient_alpha:((?:[^,]+\s*,?\s*)+)}', md, True), 'lottie_gradient_alpha', 175)
 
         md.parser.blockprocessors.register(
             RawHTML(