Initial single-page docs

Using mkdocs-print-site-plugin:

 * add a single-page version of the docs under lottie-spec/print_page/
 * hide live examples from the consolidated page

docs/specs/helpers.md

@@ -11,8 +11,10 @@ To make the anchor point properly line up with the center of location, `p` and `
 
 
 This example allows you to tweak transform attributes and see how the shape changes.
+{: .print-site-plugin-ignore }
 
 The anchor point is highlighted with an orange dot.
+{: .print-site-plugin-ignore }
 
 <lottie-playground example="transform.json">
     <form>

docs/specs/layers.md

@@ -28,6 +28,7 @@ appropriate [value](constants.md#matte-mode).
 The layer being masked is indicated by the `tp` attribute, which has the index (`ind`) of the layer that is being masked.
 
 In this example there's a layer with a rectangle and a star being masked by an ellipse:
+{: .print-site-plugin-ignore }
 
 
 <lottie-playground example="matte.json">

docs/specs/properties.md

@@ -73,8 +73,9 @@ For easing in and out, you move the `x` towards the center, this makes the anima
 }
 ```
 
-<h4>Easing example</h4>
+<h4 class="print-site-plugin-ignore">Easing example</h4>
 In the following example, the ball moves left and right, on the background you can see and edit a representation of its easing function.
+{: .print-site-plugin-ignore }
 
 {editor_example:easing}
 

docs/specs/values.md

@@ -90,7 +90,7 @@ It's the same array as the case without transparency but with the following valu
 | `1`       | Offset of the 3rd color (`1` means at the end) |
 | `1`       | Alpha component for the 3rd color |
 
-<h3>Gradient Example</h3>
+<h3 class="print-site-plugin-ignore">Gradient Example</h3>
 
 {editor_example:gradient}
 

mkdocs.yml

@@ -11,13 +11,12 @@ edit_uri: https://github.com/lottie/lottie-spec/edit/main/docs
 use_directory_urls: true
 site_url: https://lottie.github.io/lottie-spec/
 markdown_extensions:
+    - attr_list
     - lottie_markdown
     - latex_markdown
 extra_css:
     # - /lottie-spec/style/style.css
     # - /lottie-spec/style/lottie-theme.css
-plugins:
-    - search
 nav:
     - "Home" : index.md
     - "Format":
@@ -42,3 +41,10 @@ nav:
             - governance/CONTRIBUTING.md
             - editing/schema.md
             - editing/extensions.md
+plugins:
+    - search
+    - print-site:
+        add_print_site_banner: true
+        enumerate_headings_depth: 3
+        exclude:
+          - governance/Notices.md

tools/lottie_markdown.py

@@ -722,7 +722,7 @@ def __init__(self, parent, schema_data: type_info.TypeSystem, width, height, but
         self.schema_data = schema_data
 
         self.element = etree.SubElement(parent, "div")
-        self.element.attrib["class"] = "playground"
+        self.element.attrib["class"] = "playground print-site-plugin-ignore"
 
         self.renderer = LottieRenderer(
             parent=self.element, width=width, height=height,
@@ -855,6 +855,7 @@ def run(self, parent, blocks):
         md_title = md_element.find("./title")
         if md_title is not None:
             md_title.tag = "p"
+            md_title.attrib["class"] = "print-site-plugin-ignore"
             parent.append(md_title)
 
         width = md_element.attrib.pop("width", None)
@@ -1031,7 +1032,7 @@ def run(self, parent, blocks):
         if extra:
             extra = "{" + extra + "}"
 
-        element = etree.SubElement(parent, "div", {"class": "playground playground-columns"})
+        element = etree.SubElement(parent, "div", {"class": "playground playground-columns print-site-plugin-ignore"})
 
         etree.SubElement(element, "div", {"id": "editor_" + id_base})
 

tools/requirements.txt

@@ -1,5 +1,6 @@
 mkdocs==1.5.3
 mkdocs-cinder==1.2.0
+mkdocs-print-site-plugin==2.5.0
 graphviz==0.20.1
 latex2mathml==3.77.0
 # Used for link validations